Like Share Discussion Bookmark Smile

J.J. Huang   2019-05-14   Web   瀏覽次數:

Web - 第五章 | HTML 建立超連結

在很多文章中會看到某些字體為藍色且可以點擊,點擊後會跳轉或是開啟另一個網頁或執行下載動作,這個就是超連結的。
至於超連結是什麼要怎麼使用,這邊下面將會特別說明。

超連結?

超連結是互聯網提供的最令人興奮的創新之一,它們從一開始就一直是互聯網的一個功能,使互聯網成為互聯的網路。超連結使我們能夠將我們的文件連結到任何其他文件(或其他資源),也可以連結到文件的指定部分,我們可以在一個簡單的網址上提供應用程序(與必須先安裝的本地應用程序或其他東西相比)。幾乎任何網路內容都可以轉換為連結,點擊(或激活)超連結將使網路瀏覽器轉到另一個網址(URL)。

注意:URL可以指向HTML文件、文本文件、圖像、文本文件、視頻和音頻文件以及可以在網路上保存的任何其他內容。如果瀏覽器不知道如何顯示或處理文件,它會詢問你是否要打開文件(需要選擇合適的本地應用來打開或處理文件)或下載文件(以後處理它)。

例如,BBC 主頁包含大量的連結,有些連結指向多個新聞故事,有些連結指向網站的不同區域(導航功能),還有些連結指向登錄/註冊頁面(用戶工具)等等。


連結的解析

通過將文本或其他內容轉換為<a>元素內的連結來建立基本連結, 給它一個href屬性(也稱為目標),它將包含你希望連結指向的網址。

1
2
3
<p>建立一個超連結
<a href="https://morosedog.gitlab.io/">J.J.'s Blogs</a>.
</p>

使用title屬性添加支持訊息

你可能要添加到你的連結的另一個屬性是標題;這旨在包含關於連結的補充有用訊息,例如頁麵包含什麼樣的訊息或需要注意的事情。

1
2
3
4
<p>建立一個超連結
<a href="https://morosedog.gitlab.io/"
title="J.J.'s Blogs, 程式技術筆記分享'">J.J.'s Blogs</a>.
</p>

注意:連結的標題僅當鼠標懸停在其上時才會顯示,這意味著使用鍵盤來導航網頁的人很難獲取到標題訊息。如果標題訊息對於頁面非常重要,你應該使用所有用戶能都方便獲取的方式來呈現,例如放在常規文本中。

塊級連結

你可以將一些內容轉換為連結,甚至是塊級元素。例如你想要將一個圖像轉換為連結,你只需把圖像元素放到<a></a>標籤中間。

1
2
3
<a href="https://morosedog.gitlab.io/">
<img src="/images/other/J.J.Huang.png">
</a>

點擊圖片將會跳轉頁面到連結網址。


關於URL和路徑的快速入門

要全面地了解連結目標,你需要了解統一資源定位符和文件路徑。本小節將介紹相關的訊息。

統一資源定位符(英文:Uniform Resource Locator,簡寫:URL)是一個定義了在網路上的位置的一個文本字符串。例如Mozilla的英文主頁定位在https://www.mozilla.org/en-US/.

URL使用路徑查找文件。路徑指定文件系統中你感興趣的文件所在的位置。

此目錄結構的根目錄稱為example。當在網站上工作時, 你會有一個包含整個網站的目錄。在根目錄,我們有一個index.html和一個test.html文件。在真實的網站上,index.html 將會成為我們的主頁或登錄頁面。

我們的根目錄還有兩個目錄—— images 和 projects,它們分別包含一個 PNG圖檔 (01.png) 和一個 index.html 文件。請注意你可以有兩個index.html文件,前提是他們在不同的目錄下,許多網站就是如此。第二個index.html或許是項目相關訊息的主登錄界面。

  • 指向當前目錄:如果index.html(目錄頂層的index.html)想要包含一個超連結指向test.html,你只需要指定想要連結的文件名,因為它與當前文件是在同一個目錄的.所以你應該使用的URL是test.html

    1
    <p>請點選此連結<a href="test.html">測試</a>進入到測試頁面</p>
  • 指向子目錄:如果index.html (目錄頂層index.html)想要包含一個超連結指向 projects/index.html,你需要先進入projects/項目目錄,然後指明要連結到的文件index.html。通過指定目錄的名稱,然後是正斜杠,然後是文件的名稱。因此你要使用的URL是projects/index.html

    1
    <p>進入<a href="projects/index.html">專案清單</a>.</p>
  • 指向上級目錄: 如果你想在projects/index.html中包含一個指向images/01.png超連結,你必須先返回上級目錄,然後再回到images目錄。 “返回上一個目錄級”使用兩個英文點號表示 — .. — 所以你應該使用的URL是 ../images/01.png

    1
    <p>圖片連結<a href="../images/01.png">project brief</a></p>

注意:如果需要的話,你可以將這些功能的多個例子和復雜的url結合起來。例如:../../../complex/path/to/my/file.html

文件片段

超連結除了可以連結到文件外,也可以連結到HTML文件的特定部分(被稱為文件片段)。要做到這一點,你必須首先給要連結到的元素分配一個id屬性。例如,如果你想連結到一個特定的標題。

1
<h2 id="second_Title">第二個標題</h2>

然後連結到那個特定的id,你可以在URL的結尾使用一個哈希符號(#)指向它。

1
<p>跳轉到到test頁面的第二個標題位置<a href="test.html#second_Title">連結</a></p>

你可以在同一份文件下,通過連結文件片段,來連結到同一份文件的另一部分

1
<p>這個 <a href="#second_Title">連結</a> 可以跳到第二個標題位置 </p>

這邊提供一個跳轉到此文章的 關於URL和路徑的快速入門 的連結示範。

絕對路徑和相對路徑

網路上遇到兩個術語,絕對URL和相對URL(或者稱為,絕對連結和相對連結):

不管絕對URL在哪裡使用,它總是指向確定的相同位置。

相對位置的使用,必須確認當前的位置來做相對位置的撰寫。

連結最佳做法

清晰的連結措辭

把連結放在你的頁面上很容易。這還不夠。我們需要讓所有的讀者都可以使用連結,不管他們當前的環境和哪些工具。

例如:

  • 使用屏幕閱讀器的用戶喜歡從頁面上的一個連結跳到另一個連結,並且脫離上下文來閱讀連結。
  • 搜索引擎使用連結文本為索引目標文件所以,在連結文本中包含關鍵詞是一個很好的主意,以有效地描述與之相關的訊息。
  • 讀者往往會瀏覽頁面而不是閱讀每一個字,他們的眼睛會被頁面的特徵所吸引,比如鍊接。他們會找到描述性的連結。

Good link

1
2
3
<p><a href="https://firefox.com/">
Download Firefox
</a></p>

Bad link

1
2
3
4
<p><a href="https://firefox.com/">
Click here
</a>
to download Firefox</p>

不要重複URL作為連結文本的一部分 — URL看起來很醜,當屏幕朗讀器一個字母一個字母的讀出來的時候聽起來就更醜了。
不要在連結文本中說“link”或“links to”——它只是噪音。屏幕閱讀器告訴人們有一個連結。可視化用戶也會知道有一個連結,因為連結通常是用不同的顏色設計的,並且存在下劃線(這個慣例一般不應該被打破,因為用戶習慣了它。)
保持你的連結標籤盡可能短-長連結尤其惹惱屏幕閱讀器用戶,他們必須聽到整件事讀出來。

盡可能使用相對連結

從上面的描述中,你可能認為始終使用絕對連結是一個好主意;畢竟,當頁面像相對連結那樣移動時,它們不會中斷。但是,當連結到同一網站的其他位置時,你應該使用相對連結(當連結到另一個網站時,你需要使用絕對連結):

  • 首先,檢查代碼要容易得多——相對URL通常比絕對URL短得多,這使得閱讀代碼更容易。
  • 其次,在可能的情況下使用相對URL更有效。當使用絕對URL時,瀏覽器首先通過DNS(見萬維網是如何工作的)查找伺服器的真實位置,然後再轉到該伺服器並查找所請求的文件。另一方面,相對URL,瀏覽器只在同一伺服器上查找被請求的文件。因此,如果你使用絕對URL而不是相對URL,你就會不斷地讓你的瀏覽器做額外的工作,這意味著它的效率會降低。

連結到非html資源 ——留下清晰的指示

當連結到一個需要下載的資源(如PDF或Word文件)或流媒體(如視頻或音頻)或有另一個潛在的意想不到的效果(打開一個彈出窗口,或加載Flash電影),你應該添加明確的措辭,以減少任何混亂。如下的例子會讓人反感:

  • 如果你是在低帶寬連接,點擊一個連結,然後就開始下載大文件。
  • 如果你沒有安裝Flash播放器,點擊一個連結,然後突然被帶到一個需要Flash的頁面。

Examples

1
2
3
4
5
6
7
8
9
10
11
<p><a href="http://www.example.com/large-report.pdf">
Download the sales report (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
Watch the video (stream opens in separate tab, HD quality)
</a></p>

<p><a href="http://www.example.com/car-game">
Play the car game (requires Flash)
</a></p>

在下載連結時使用下載屬性

當你連結到要下載的資源而不是在瀏覽器中打開時,你可以使用下載屬性來提供一個默認的保存文件名。

1
2
3
4
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>

電子郵件連結

當點擊一個連結或按鈕時,打開一個新的電子郵件發送訊息而不是連接到一個資源或頁面,這種情況是可能做到的。這樣做是使用<a>元素和mailto:URL的方案。
其最基本和最常用的使用形式為一個mailto:link (連結),連結簡單說明收件人的電子郵件地址

1
<a href="mailto:test@hotmail.com">Send email to test</a>

實際上,郵件地址甚至是可選的。如果你忘記了(也就是說,你的href僅僅只是簡單的”mailto:”),一個新的發送電子郵件的窗口也會被用戶的郵件客戶端打開,只是沒有收件人的地址訊息,這通常在“分享”連結是很有用的,用戶可以發送給他們選擇的地址郵件

細節

除了電子郵件地址,你還可以提供其他訊息。事實上,任何標準的郵件頭字段可以被添加到你提供的郵件URL。其中最常用的是主題(subject)、抄送(cc)和主體(body) (這不是一個真正的頭字段,但允許你為新郵件指定一個短內容消息)。每個字段及其值被指定為查詢項。

包含cc、bcc、主題和主體的範例

1
2
3
<a href="mailto:test@hotmail.com?cc=name@hotmail.com&bcc=name2@hotmail.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>

注意: 每個字段的值必須是URL編碼的。也就是說,不能有非打印字符(不可見字符比如製表符、換行符、分頁符)和空格percent-escaped. 同時注意使用問號(?)來分隔主URL與參數值,以及使用&符來分隔mailto:中的各個參數。這是標準的URL查詢標記方法。閱讀 The GET method 以了解哪種URL查詢標記方法是更常用的。

註:以上參考了
MDN web docsCreating hyperlinks 文章。