建立超連結

超連結非常重要——它們使 Web 成為一個網路。本文展示了建立連結所需的語法，並討論了連結最佳實踐。

先決條件	熟悉 HTML 基礎知識，如HTML 入門中所述。熟悉 HTML 文字格式化，如HTML 文字基礎中所述。
目標	學習如何有效地實現超連結，並將多個檔案連結在一起。

什麼是超連結？

超連結是 Web 提供的最激動人心的創新之一。它們自 Web 誕生之初就一直是 Web 的一項功能，也是使 Web 成為一個網路的原因。超連結允許我們將文件連結到其他文件或資源，連結到文件的特定部分，或在 Web 地址上提供應用程式。幾乎任何 Web 內容都可以轉換為連結，以便在點選或以其他方式啟用時，Web 瀏覽器會轉到另一個 Web 地址（URL）。

注意：URL 可以指向 HTML 檔案、文字檔案、影像、文字文件、影片和音訊檔案，或 Web 上的任何其他內容。如果 Web 瀏覽器不知道如何顯示或處理該檔案，它會詢問您是否要開啟該檔案（在這種情況下，開啟或處理檔案的職責將傳遞給裝置上的適當本機應用程式）或下載該檔案（在這種情況下，您可以稍後嘗試處理它）。

例如，BBC 首頁包含許多連結，這些連結不僅指向多個新聞報道，還指向站點的不同區域（導航功能）、登入/註冊頁面（使用者工具）等等。

front page of bbc.co.uk, showing many news items, and navigation menu functionality

連結的結構

基本連結是透過將文字或其他內容包裝在 <a> 元素中並使用 href 屬性（也稱為超文字引用或目標）來建立的，該屬性包含 Web 地址。

html

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

這將得到以下結果
我正在建立一個指向Mozilla 首頁的連結。

影像連結

如果你有一個想要製成連結的影像，請使用 <a> 元素來包裝使用 <img> 元素引用的影像檔案。下面的示例使用相對路徑來引用本地儲存的 SVG 影像檔案。

img {
  height: 100px;
  width: 150px;
  border: 1px solid gray;
}

html

<a href="https://mdn.club.tw/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>

這使得 MDN 徽標成為一個連結

注意：你將在以後的文章中瞭解有關在 Web 上使用影像的更多資訊。

使用 title 屬性新增輔助資訊

你可能想要新增到連結中的另一個屬性是 title。title 包含有關連結的其他資訊，例如頁面包含哪種資訊，或網站上需要注意的事項。

html

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">
    the Mozilla homepage</a>.
</p>

這將得到以下結果，並將滑鼠懸停在連結上會顯示 title 作為工具提示

注意：連結 title 僅在滑鼠懸停時顯示，這意味著依賴鍵盤控制元件或觸控式螢幕瀏覽網頁的使用者難以訪問 title 資訊。如果 title 的資訊對頁面的可用性確實很重要，則應以所有使用者都能訪問的方式呈現它，例如將其放在普通文字中。

主動學習：建立你自己的示例連結

使用原生代碼編輯器和我們的入門模板建立 HTML 文件。

在 HTML body 內，新增一個或多個段落或你已經瞭解的其他型別的內容。
將某些內容更改為連結。
包含 title 屬性。

URL 和路徑簡介

要完全理解連結目標，你需要了解 URL 和檔案路徑。本節提供實現此目標所需的資訊。

URL，或統一資源定位符，是一串文字字串，用於定義某個資源在網路上的位置。例如，Mozilla 的英文主頁位於 https://www.mozilla.org/en-US/。

URL 使用路徑來查詢檔案。路徑指定您感興趣的檔案在檔案系統中的位置。讓我們來看一個目錄結構的示例，請檢視 creating-hyperlinks 目錄。

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

此目錄結構的 根目錄 稱為 creating-hyperlinks。在本地處理網站時，您將擁有一個包含整個網站的目錄。在 根目錄 內，我們有一個 index.html 檔案和一個 contacts.html 檔案。在一個真實的網站中，index.html 將是我們的主頁或登陸頁面（充當網站或網站特定部分入口點的網頁）。

我們的根目錄中還有兩個子目錄——pdfs 和 projects。它們分別包含一個檔案——一個 PDF（project-brief.pdf）和一個 index.html 檔案。請注意，在一個專案中可以有兩個 index.html 檔案，只要它們位於不同的檔案系統位置即可。第二個 index.html 可能就是專案相關資訊的著陸頁。

同一目錄：如果您想在 index.html（頂級 index.html）中包含一個指向 contacts.html 的超連結，您只需指定要連結到的檔名，因為它與當前檔案位於同一目錄下。您將使用的 URL 是 contacts.html
html
```

 Want to contact a specific staff member? Find details on our
 <a href="contacts.html">contacts page</a>.

```
向下進入子目錄：如果您想在 index.html（頂級 index.html）中包含一個指向 projects/index.html 的超連結，您需要先進入 projects 目錄，然後再指定要連結到的檔案。這可以透過指定目錄名稱，然後是一個正斜槓，再然後是檔名來完成。您將使用的 URL 是 projects/index.html
html
```
Visit my <a href="projects/index.html">project homepage</a>.
```
向上返回到父目錄：如果您想在 projects/index.html 中包含一個指向 pdfs/project-brief.pdf 的超連結，您需要向上返回一級目錄，然後再次進入 pdfs 目錄。要向上返回一級目錄，請使用兩個點——..——因此您將使用的 URL 是 ../pdfs/project-brief.pdf
html
```
A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.
```

注意：如果需要，您可以將這些功能的多個例項組合成複雜的 URL，例如：../../../complex/path/to/my/file.html。

文件片段

可以連結到 HTML 文件的特定部分，稱為 文件片段，而不僅僅是連結到文件頂部。要做到這一點，您首先必須將 id 屬性分配給您要連結到的元素。通常將連結到特定的標題更有意義，因此它看起來類似於以下內容

html

<h2 id="Mailing_address">Mailing address</h2>

然後要連結到該特定的 id，您需要在 URL 的末尾包含它，並在其前面加上一個井號/磅號 (#)，例如

html

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing address</a>.
</p>

您甚至可以單獨使用文件片段引用來連結到 當前文件的另一部分

html

<p>
  The <a href="#Mailing_address">company mailing address</a> can be found at the
  bottom of this page.
</p>

絕對 URL 與相對 URL

您在網路上會遇到兩個術語，即 絕對 URL 和 相對 URL：

絕對 URL：指向由其在網路上的絕對位置定義的位置，包括協議和域名。例如，如果一個 index.html 頁面上傳到一個名為 projects 的目錄中，該目錄位於 Web 伺服器的 根目錄 內，並且網站域名是 https://www.example.com，則該頁面可以在 https://www.example.com/projects/index.html 訪問（甚至可以是 https://www.example.com/projects/，因為大多數 Web 伺服器在 URL 中未指定時，只會查詢要載入的 index.html 等著陸頁）。

無論絕對 URL 在哪裡使用，它都將始終指向相同的位置。

相對 URL：指向相對於您連結到的檔案的位置，更像是我們在上一節中看到的。例如，如果我們想從我們位於 https://www.example.com/projects/index.html 的示例檔案連結到同一目錄中的 PDF 檔案，則 URL 僅為檔名——project-brief.pdf——無需其他資訊。如果 PDF 檔案位於 projects 內名為 pdfs 的子目錄中，則相對連結將為 pdfs/project-brief.pdf（等效的絕對 URL 將為 https://www.example.com/projects/pdfs/project-brief.pdf）。

相對 URL 將指向不同的位置，具體取決於您引用的檔案的實際位置——例如，如果我們將 index.html 檔案從 projects 目錄移到網站的 根目錄（頂級，不在任何目錄中），則其中 pdfs/project-brief.pdf 相對 URL 連結現在將指向位於 https://www.example.com/pdfs/project-brief.pdf 的檔案，而不是位於 https://www.example.com/projects/pdfs/project-brief.pdf 的檔案。

當然，project-brief.pdf 檔案和 pdfs 資料夾的位置不會因為您移動了 index.html 檔案而突然發生變化——這將導致您的連結指向錯誤的位置，因此如果單擊它將無法工作。您需要注意！

連結最佳實踐

在編寫連結時，有一些最佳實踐需要遵循。現在讓我們來看一下這些實踐。

使用清晰的連結文字

在頁面上新增連結很容易。但這還不夠。我們需要使我們的連結對所有讀者都 可訪問，無論他們當前的上下文是什麼以及他們喜歡使用哪些工具。例如

螢幕閱讀器使用者喜歡在頁面上從一個連結跳轉到另一個連結，並在脫離上下文的條件下讀取連結。
搜尋引擎使用連結文字對目標檔案進行索引，因此在連結文字中包含關鍵詞來有效描述連結目標是一個好主意。
視覺讀者瀏覽頁面而不是閱讀每個單詞，他們的眼睛會被頁面上突出的功能吸引，比如連結。他們會發現描述性的連結文字很有用。

讓我們來看一個具體的例子

好的連結文字：下載 Firefox

html

<p><a href="https://www.mozilla.org/en-US/firefox/">Download Firefox</a></p>

不好的連結文字：點選這裡下載 Firefox

html

<p>
  <a href="https://www.mozilla.org/en-US/firefox/">Click here</a> to download
  Firefox
</p>

其他提示

不要將 URL 重複為連結文字的一部分——URL 看起來很醜，當螢幕閱讀器逐字逐句地讀取它們時，聽起來更難聽。
不要在連結文字中說“連結”或“連結到”——這只是噪音。螢幕閱讀器會告訴人們有一個連結。視覺使用者也會知道有一個連結，因為連結通常以不同的顏色和下劃線樣式顯示（此約定通常不應該被破壞，因為使用者習慣了它）。
使連結文字儘可能簡短——這很有幫助，因為螢幕閱讀器需要解釋整個連結文字。
儘量減少同一文字連結到不同位置的多個副本的情況。如果有一系列脫節的連結都標記為“點選這裡”、“點選這裡”、“點選這裡”，這可能會導致螢幕閱讀器使用者出現問題。

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

當連結到將要下載（如 PDF 或 Word 文件）、流式傳輸（如影片或音訊）或具有其他可能意外效果（開啟彈出視窗）的資源時，您應該新增清晰的措辭以減少任何混淆。

例如

如果您使用的是低頻寬連線，點選一個連結，然後意外地開始下載多個兆位元組的檔案。

讓我們來看一些示例，看看這裡可以使用哪種型別的文字

html

<p>
  <a href="https://www.example.com/large-report.pdf">
    Download the sales report (PDF, 10MB)
  </a>
</p>

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

連結到下載時使用 download 屬性

當您連結到要下載而不是在瀏覽器中開啟的資源時，可以使用 download 屬性提供預設的儲存檔名。以下是一個指向 Firefox 最新 Windows 版本的下載連結的示例

html

<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>

主動學習：建立導航選單

對於此練習，我們希望您使用導航選單將一些頁面連結在一起以建立一個多頁網站。這是建立網站的一種常見方法——每個頁面都使用相同的頁面結構，包括相同的導航選單，因此當點選連結時，會給人一種您停留在同一位置，並且正在調取不同內容的感覺。

您需要在同一目錄中建立以下四個頁面的本地副本。有關完整的檔案列表，請參閱 navigation-menu-start 目錄

您應該

在一個頁面上指定的位置新增一個無序列表，其中包含要連結到的頁面的名稱。導航選單通常只是一個連結列表，因此在語義上這是可以的。
將每個頁面名稱更改為指向該頁面的連結。
將導航選單複製到每個頁面。
在每個頁面上，僅刪除指向同一頁面的連結——對於一個頁面包含指向其自身的連結來說，這會令人困惑且沒有必要。而且，缺少連結可以作為很好的視覺提示，提醒您當前位於哪個頁面。

完成的示例應類似於以下頁面

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

注意：如果您遇到困難，或者不確定自己是否做對了，您可以檢視 navigation-menu-marked-up 目錄以檢視正確答案。

電子郵件連結

可以建立連結或按鈕，當點選時，開啟新的傳出電子郵件訊息，而不是連結到資源或頁面。這可以透過使用 <a> 元素和 mailto: URL 方案來完成。

在最基本且最常用的形式中，mailto: 連結指示預期收件人的電子郵件地址。例如

html

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

這將生成一個如下所示的連結：傳送電子郵件給 nowhere。

實際上，電子郵件地址是可選的。如果您省略它，並且您的 href 為“mailto:”，則使用者郵件客戶端將開啟一個新的傳出郵件視窗，但沒有目標地址。這通常用作“分享”連結，使用者可以點選這些連結將電子郵件傳送到他們選擇的地址。

指定詳細資訊

除了電子郵件地址之外，您還可以提供其他資訊。實際上，任何標準郵件標頭欄位都可以新增到您提供的 mailto URL 中。最常用的欄位是“主題”、“抄送”和“正文”（這不是真正的標頭欄位，但允許您為新電子郵件指定簡短的內容訊息）。每個欄位及其值都指定為查詢項。

以下是一個包含抄送、密送、主題和正文的示例

html

<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

注意：每個欄位的值必須使用非列印字元（不可見的字元，如製表符、回車符和換行符）和空格進行 URL 編碼百分比轉義。此外，請注意使用問號 (?) 將主 URL 與欄位值分隔開，並使用和號 (&) 在 mailto: URL 中分隔每個欄位。這是標準的 URL 查詢表示法。閱讀 GET 方法以瞭解 URL 查詢表示法更常用於什麼。

以下是一些其他 mailto URL 示例

測試你的技能！

您已閱讀完本文，但您能記住最重要的資訊嗎？在繼續學習之前，您可以進行一些進一步的測試以驗證您是否保留了這些資訊——請參閱測試您的技能：連結。

總結

目前關於連結的內容就到這裡了！在課程的後面，當您開始學習連結樣式時，您將再次接觸到連結。接下來，我們將回到 HTML 的文字語義，並探討一些您會發現有用的更高階/不尋常的功能——高階文字格式化是您的下一站。