連結

我們在「屬性」章節簡介中示範如何將屬性新增至開頭標記。 這個範例使用了 <a> 標記，但討論的元素和該範例導入的特定屬性都沒有討論：

開頭標記、屬性和結尾標記 (會標示在 HTML 元素上)。

<a> 錨定標記和 href 屬性都可建立超連結。連結是網際網路的基礎。第一頁包含 25 個連結，請參閱「所有線上有關 W3 的資訊，都會直接或間接連結至這份文件」。無論如何，網路上所有關於 W3 的內容也都與本文件直接或間接的連結！

自 1991 年 8 月，Tim Berners-Lee 自 1991 年發布了第一段說明以來，網路的強大威力和 <a> 標記也蓬勃發展。連結代表兩項資源之間的連線，其中一個資源為目前文件。<a>、<area>、<form> 和 <link> 皆可建立連結。您已瞭解 <link>，並會在獨立區段中找到表單。我們也提供整個表單學習部分。在這個工作階段中，您將瞭解單一字母而非單一字母的 <a> 標記。

href 屬性

雖然這不是必要項目，但幾乎所有 <a> 標記都能找到 href 屬性。提供超連結的地址會將 <a> 轉換為連結。href 屬性可用來建立指向目前網頁、網站內其他頁面或其他網站的超連結。您也可以透過編碼來下載檔案，或傳送電子郵件至特定地址，包括主旨和建議的電子郵件內文內容。

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

第一個連結包含絕對網址，可用於世界各地的任何網站，以便前往 MLW 首頁。絕對網址包含通訊協定 (在本範例中為 https://) 和網域名稱。當通訊協定直接寫成 // 時，為隱含通訊協定，也就是「使用與目前所用的相同通訊協定」。

相對網址不含通訊協定或網域名稱。這些是與目前檔案的「相對」值。MLW 是單頁網站 但這個 HTML 系列含有多個部分為了從這個頁面連結到屬性課程，系統會使用相對網址 <a href="../attributes/">Attributes</a>。

第二個連結只是連結片段 ID，會在目前頁面上連結至含有 id="teachers", 的元素 (如有)。此外，瀏覽器也支援兩個「網頁頂端」連結：按一下 <a href="#top">Top</a> (不區分大小寫)，或直接點選 <a href="#">Top</a> 即可將使用者捲動至頁面頂端，除非有 ID 為 top 的大寫設定。

MLW 是相當長的文件。如要儲存捲動內容，您可以在「#老師」專區底部新增連結，方便日後瀏覽：

<a href="#top">Go to top.</a>

第三個連結結合了兩個值：包含絕對網址，後面接著連結片段。如此一來，就能直接連結到已定義網址的特定區段 (在本例中為 MLW 首頁的 #teachers 區段)。系統將載入 MLW 頁面；然後瀏覽器會捲動至「Teachers」(教師) 部分，而不會在 HTTP 要求中傳送片段。

href 屬性可以在開頭使用 mailto: 或 tel: 傳送電子郵件或撥打電話，並根據裝置、作業系統和已安裝的應用程式處理連結。

mailto 連結不必包含電子郵件地址，但可以搭配 cc、bcc、subject 和 body 文字來預先填入電子郵件。根據預設，系統會開啟電子郵件用戶端。您可以預先填入電子郵件的主旨和內文，但不要包含電子郵件地址，讓網站訪客邀請自己的好友。在文件的連結頁尾加入註冊網址：

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

問號 (?) 可將 mailto: 和電子郵件地址 (如有) 與查詢字詞分開。在查詢中，& 符號 (&) 會將欄位分隔，而等號 (=) 則可讓每個欄位名稱與其值相等。整個字串採用百分比編碼，如果 href 值沒有引號，或值包含引號，則絕對必要。

當使用者透過 tel 連結點選、輕觸或按下 Enter 鍵時，系統會開啟哪個應用程式，具體取決於使用者裝置上的作業系統、已安裝的應用程式和設定。iPhone 可能會開啟 FaceTime、手機應用程式或聯絡人。 Windows 桌面可能會開啟 Skype (如果已安裝)。

還有幾種其他類型的網址，例如 blob 和資料網址 (請參閱 download 屬性討論中的範例)。如果是安全網站 (透過 https 提供的網站)，您可以使用 registerProtocolHandler() 建立及執行應用程式專屬通訊協定。

如果要加入可能開啟其他已安裝應用程式的連結，建議您告知使用者。確認開頭和結尾標記之間的文字，可以告知使用者即將啟用的連結類型。CSS 屬性選取器 (例如 [href^="mailto:"]、[href^="tel:"] 和 [href$=".pdf"]) 可用來依應用程式類型指定樣式。

可下載的資源

當 href 指向可下載的資源時，請加入 download 屬性。下載屬性值是建議儲存在使用者本機檔案系統中的建議檔案名稱。SVG 最佳化器 SVGOMG 使用 download 屬性，針對最佳化器建立的可下載 blob 提供檔案名稱。對 hal.svg 進行最佳化後，SVGOMG 的下載連結開啟標記看起來會像這樣：

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

此外，您可以參考 <canvas> 示範，瞭解如何建立可下載的 PNG 資料網址。

如要連結至可下載資源，請將資產網址做為 href 屬性的值，加入可在使用者的檔案系統中使用的建議檔案名稱做為 download 屬性的值。

瀏覽情境

target 屬性可讓您定義連結導覽的瀏覽情境，以及提交表單。與 <base> 元素討論的四組未區分大小寫、以底線標示的關鍵字。其中包括預設的 _self，也就是目前的視窗 _blank，這會在新分頁中開啟連結；_parent；如果目前連結是在物件或 iframe 中嵌入，則此為父項，_top 是最頂層的祖系，在目前連結已深度建立深層連結時特別實用。如果連結並非巢狀結構，_top 和 _parent 就會與 _self 相同。target 屬性並非受限於這四個重要字詞：可以使用任何字詞。

每個瀏覽環境 (基本上就是每個瀏覽器分頁) 都有瀏覽情境名稱，連結可在目前的分頁、新的未命名分頁或新的/已命名分頁中開啟。根據預設，名稱是空字串。如要在新分頁中開啟連結，使用者可以按一下滑鼠右鍵，然後選取「在新分頁中開啟」。開發人員可加入 target="_blank"，強制執行這項操作。

系統會在新分頁中開啟名稱為 target="_blank" 的連結，該連結會以空值的名稱開啟，每次按下連結就會開啟新的未命名分頁。這可能會建立許多新分頁。分頁數量過多，舉例來說，如果使用者點選 <a href="registration.html" target="_blank">Register Now</a> 15 次，註冊表單會在 15 個不同分頁中開啟。只要提供分頁內容名稱，即可解決這個問題。加入具區分大小寫值的 target 屬性 (例如 <a href="registration.html" target="reg">Register Now</a>)，則按一下這個連結時，系統會在新的 reg 分頁中開啟註冊表單。如果再按 15 次，就能重新載入 reg 瀏覽結構定義中的註冊資料，不必開啟其他分頁。

rel 屬性可控制連結所建立的連結類型，定義目前文件與超連結中連結資源之間的關係。屬性值必須是以空格分隔的清單，且位於 <a> 標記支援的一或多個 rel 屬性值分數中。

如果您不想讓自動尋檢程式追蹤連結，則可以加入 nofollow 關鍵字。您可以新增 external 值，表示連結會導向外部網址，而不是目前網域中的網頁。help 關鍵字表示超連結將提供上下文含意的相關說明。將滑鼠遊標懸停在有這個 rel 值的連結上，則會顯示說明遊標，而非一般指標遊標。請不要只使用這個值來取得說明遊標，請改用 CSS cursor 屬性。prev 和 next 值可用於指向系列中上一和下一份文件的連結。

與 <link rel="alternative"> 類似，<a rel="alternative"> 的意義取決於其他屬性。RSS 動態消息的替代格式也將包含 type="application/rss+xml" 或 type="application/atom+xml，替代格式會包含 type 屬性，翻譯內容則包含 hreflang 屬性。如果開頭和結尾標記之間的內容使用主要文件語言以外的語言，請加入 lang 屬性。如果超連結文件使用其他語言，請加入 hreflang 屬性。

在這個範例中，我們加入翻譯網頁的網址做為 href 的值，rel="alternate" 表示這是網站的替代版本；而 hreflang 屬性可提供翻譯的語言：

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

如果法文翻譯為 PDF，你可以透過連結資源的 PDF MIME 類型提供類型屬性。雖然 MIME 類型純屬建議，但是告知使用者連結會開啟不同格式的文件是不錯的做法。

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

如要追蹤使用者互動，其中一種方法是在點選連結時對網址進行連線偵測 (ping)。ping 屬性 (如果有的話) 包含以空格分隔的安全網址清單 (開頭為 https)，清單應用於通知或連線偵測 (ping) 超連結 (如果使用者啟用超連結)。瀏覽器會將內文含有 PING 的 POST 要求傳送至列為 ping 屬性值的網址。

使用者體驗提示

  • 編寫 HTML 時，請務必考量使用者體驗。連結應提供充分的資訊，讓使用者瞭解他們點選的內容。
  • 在一個文字區塊中，請確保連結的外觀與周圍文字有明顯差異，方便使用者辨識其他內容的連結，確保光是顏色並不是唯一區分文字和周圍內容的唯一方法。
  • 一律包含焦點樣式；這樣一來，鍵盤導覽器就可以在透過 Tab 鍵瀏覽內容時掌握這些樣式的位置。
  • 開啟 <a> 和關閉 </a> 之間的內容是連結的預設可存取名稱，應告知使用者連結的到達網頁或用途。如果連結內容是圖片，alt 說明就是無障礙名稱。 可存取的名稱是來自 alt 屬性，還是文字區塊中的部分字詞，請確認其提供連結目的地的相關資訊。連結文字應比「按這裡」或「更多資訊」更淺顯易懂；這對螢幕閱讀器使用者和您的搜尋引擎結果來說十分重要！
  • 請勿在連結中加入互動式內容，例如 <button> 或 <input>。也請勿在 <button> 或 <label> 中建立巢狀連結。雖然 HTML 網頁仍會繼續顯示，但在互動元素中將焦點和可點擊的元素加入巢狀結構，就會產生不良的使用者體驗。
  • 如果有 href 屬性，只要聚焦於 <a> 元素，然後按下 Enter 鍵，即可啟用該屬性。
  • 連結不侷限於 HTML。a 元素也可以在 SVG 中使用，構成含有「href」或「xlink:href」屬性的連結。

links 屬性會傳回與 a 相符，以及包含 href 屬性的 area 元素相符的 HTMLCollection。

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

在這個部分中，您已瞭解連結的所有概念。下一節將說明清單，我們需要學習這些清單，才能將這些清單分組以建立連結清單 (也稱為導覽)。

隨堂測驗

測驗您對連結的相關知識。

nofollow 連結有何作用？

將連結設為不可點擊。
請再試一次。
要求自動尋檢程式不要追蹤連結。
答對了！
會使您造訪該網站以無法追蹤。
請再試一次。

哪些連結會將你導向頁面頂端？

#start
請再試一次。
#
答對了！
#top
答對了！