建立連結

連結（也稱為超連結）非常重要——它們是使 Web 成為一個“網”的關鍵。本文將展示建立連結所需的語法，並討論連結的最佳實踐。

預備知識具備基本 HTML 語法中涵蓋的基本 HTML 知識。文字級語義，例如標題和段落以及列表。

學習成果

預備知識	具備基本 HTML 語法中涵蓋的基本 HTML 知識。文字級語義，例如標題和段落以及列表。
學習成果	瞭解為什麼連結是 Web 的基本特性。沒有連結就沒有 Web。 `href` 屬性。絕對路徑和相對路徑，以及何時使用它們。詳細的路徑語法——斜槓、單點和雙點。連結狀態及其重要性——`:hover`、`:focus`、`:visited` 和 `:active`。內聯和塊級連結。瞭解編寫良好連結文字的好處，例如提高螢幕閱讀器使用者的可訪問性，以及潛在的積極 SEO 效果。

瞭解為什麼連結是 Web 的基本特性。沒有連結就沒有 Web。
href 屬性。
絕對路徑和相對路徑，以及何時使用它們。
詳細的路徑語法——斜槓、單點和雙點。
連結狀態及其重要性——:hover、:focus、:visited 和 :active。
內聯和塊級連結。
瞭解編寫良好連結文字的好處，例如提高螢幕閱讀器使用者的可訪問性，以及潛在的積極 SEO 效果。

什麼是超連結？

超連結是 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> 元素內，並使用包含 Web 地址的 href 屬性（也稱為超文字引用或目標）來建立的。

html

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

這給了我們以下結果：

我正在建立指向Mozilla 主頁的連結。

注意： Scrimba 的錨點標籤 ^{MDN 學習合作伙伴} scrim 提供了一個關於如何使用 HTML 建立連結的互動式演示，以及一個挑戰，讓您建立自己的連結。

影像連結

要將影像轉換為連結，請將 <img> 元素用 <a> 元素包裝起來。下面的示例使用相對路徑引用本地儲存的 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>

這會給我們帶來以下結果，將滑鼠懸停在連結上會以工具提示的形式顯示標題

注意：連結標題僅在滑鼠懸停時顯示，這意味著依賴鍵盤控制元件或觸控式螢幕導航網頁的人將難以訪問標題資訊。如果標題的資訊對頁面的可用性確實很重要，那麼您應該以所有使用者都可以訪問的方式呈現它，例如將其放在常規文字中。

建立您自己的示例連結

好的，現在輪到你了！

點選下面的程式碼塊中的“播放”，在 MDN Playground 中編輯示例，或者複製我們的入門模板並將以下程式碼複製到其中。
將“紅松鼠”和“東部灰松鼠”文字連結到描述相關物種的維基百科頁面。給每個連結一個等於該物種學名的 title 屬性。
將“維基百科松鼠頁面”文字連結到維基百科上關於松鼠的主頁面。

如果您犯了錯誤，可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了，可以在程式碼塊下方檢視解決方案。

html

<h1>Squirrels</h1>

<p>
  Squirrels are commonly thought of as tree-dwelling mammals, but the squirrel
  family extends far beyond that to include ground-dwelling rodents such as
  chipmunks and prairie dogs, and flying squirrels.
</p>

<p>Two of the most common and best-known squirrel species are the:</p>

<ul>
  <li>Red squirrel</li>
  <li>Eastern gray squirrel</li>
</ul>

<p>
  For a good starting point on squirrel information, see the Wikipedia Squirrel
  page.
</p>

點選此處顯示解決方案

您完成的 HTML 應該看起來像這樣

html

<h1>Squirrels</h1>

<p>
  Squirrels are commonly thought of as tree-dwelling mammals, but the squirrel
  family extends far beyond that to include ground-dwelling rodents such as
  chipmunks and prairie dogs, and flying squirrels.
</p>

<p>Two of the most common and best-known squirrel species are the:</p>

<ul>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Red_squirrel"
      title="Sciurus vulgaris">
      Red squirrel
    </a>
  </li>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Eastern_gray_squirrel"
      title="Sciurus carolinensis">
      Eastern gray squirrel
    </a>
  </li>
</ul>

<p>
  For a good starting point on squirrel information, see the
  <a href="https://en.wikipedia.org/wiki/Squirrel">Wikipedia Squirrel page</a>.
</p>

URL 和路徑速覽

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

URL，或統一資源定位符，是一串文字，用於定義 Web 上的某個事物的位置。例如，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

您將在 Web 上遇到的兩個術語是絕對 URL 和相對 URL：

絕對 URL：指向由其在 Web 上的絕對位置定義的某個位置，包括協議和域名。例如，如果一個 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.firefox.com/en-US/">Download Firefox</a></p>

差的連結文字：點選此處下載 Firefox

html

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

其他提示

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

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

當連結到不會在當前頁面中以“正常導航”方式開啟的資源時，您應該在連結文字中新增清晰的措辭，說明將要發生什麼。例如，如果您正在下載或流式傳輸資源，或者連結將開啟一個彈出視窗或執行一些其他可能意想不到的效果，則應在文字中說明。這對於低頻寬連線的使用者很重要，他們可能希望避免下載多個兆位元組的資產。它還有助於為螢幕閱讀器使用者設定期望，他們可能不知道否則會發生什麼。

讓我們看一些示例，看看這裡可以使用什麼樣的文字

html

<p>
  <a href="/large-report.pdf" download>
    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 屬性提供預設的儲存檔名。這是一個指向最新 Windows 版 Firefox 下載連結的示例

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>

何時在新選項卡中開啟連結

連結預設在它們所在的頁面的同一選項卡中開啟，這允許使用者使用瀏覽器的返回按鈕導航回上一頁。然而，許多網站（包括 MDN）選擇在新選項卡中開啟某些連結，尤其是外部連結。這是透過將 target 屬性設定為 "_blank" 來完成的。

html

Firefox is developed by the
<a href="https://www.mozilla.org/en-US/" target="_blank">Mozilla Foundation</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 中。其中最常用的是“subject”、“cc”和“body”（這不是一個真正的頭欄位，但允許您為新電子郵件指定一個簡短的內容訊息）。每個欄位及其值都指定為查詢項。

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

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

總結

暫時就這些連結內容了！在本課程後續部分您開始學習樣式時，會再次回到連結。接下來，我們將為您提供一些測試，您可以使用它們來檢查您對我們提供的連結資訊的理解和記憶程度。

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 2025 年 8 月 25 日由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題