歡迎！您似乎正在使用廣告攔截器。請考慮通過禁用您的廣告攔截器來支持我。

J.J.'s Blogs

Like Share Discussion Bookmark Smile

J.J. Huang   2019-05-14   Web   瀏覽次數：次   DMCA.com Protection Status {{moment(1557800160000).fromNow()}}

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 docs 的 Creating hyperlinks 文章。

本文由J.J. Huang 創作，採用CC BY 3.0 TW協議 進行許可。可自由轉載、引用，但需署名作者且註明文章出處。