連結

在屬性簡介中，我們分享了如何將屬性新增至開始標記的範例。這個範例使用了 <a> 標記，但未討論元素或該範例中導入的特定屬性。

HTML 元素上的開頭標記、屬性和結尾標記。

<a> 錨點標記和 href 屬性會建立超連結。連結是網際網路的骨幹。第一個網頁包含 25 個連結，內容為「與 W3 相關的所有線上資訊，都直接或間接連結至這份文件」。很有可能，這份文件也會直接或間接連結至網路上所有與 W3 相關的內容。

自 Tim Berners-Lee 於 1991 年 8 月發布這份初步說明以來，網路和 <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>

第一個連結包含絕對 URL，全球任何網站都能使用這個 URL 導向 MLW 首頁。絕對網址包含通訊協定 (本例為 https://) 和網域名稱。如果通訊協定寫成 //，表示這是隱含通訊協定，意指「使用目前正在使用的通訊協定」。

相對網址不包含通訊協定或網域名稱。這些路徑「相對於」目前檔案。MLW 是單頁網站，但這個 HTML 系列有多個部分。如要從這個網頁連結至屬性課程，請使用相對網址 <a href="../attributes/">Attributes</a>。

第二個連結只是連結片段 ID，如果目前頁面上有 id="teachers", 元素，就會連結至該元素。瀏覽器也支援兩個「網頁頂端」連結：點選 <a href="#top">Top</a> (不區分大小寫) 或甚至只是 <a href="#">Top</a>，都會將使用者帶回網頁頂端，除非有 ID 為 top 的元素設定了相同字母大小寫。

MLW 是一份相當長的文件。如要避免捲動，可以從 #teachers 區段底部新增返回頂端的連結：

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

第三個連結會合併這兩個值：包含絕對網址，後面接著連結片段。這樣就能直接連結至所定義網址中的某個區段， 在本例中，即 MLW 首頁的「#teachers」區段。MLW 網頁會載入，瀏覽器也會捲動至老師部分，但不會在 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 值未加上引號，或值包含引號，就絕對需要這麼做。

使用者點選、輕觸或按下 Enter 鍵時，系統會開啟哪個應用程式，取決於作業系統、已安裝的應用程式，以及裝置上的設定。teliPhone 可能會開啟 FaceTime、電話應用程式或聯絡人。 如果已安裝 Skype，系統可能會開啟 Windows 桌面版 Skype。

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

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

可下載的資源

如果 href 指向可下載的資源，就應加入 download 屬性。下載屬性的值是建議的檔案名稱，使用者可將資源儲存到本機檔案系統。SVGOMG (SVG 最佳化工具) 會使用 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"，瀏覽器會在新分頁中開啟連結，且分頁名稱為空值。每次點選連結時，瀏覽器都會開啟新的無名分頁。這可能會建立許多新分頁。 分頁數量過多。舉例來說，如果使用者點按 15 次，註冊表單就會在 15 個不同的分頁中開啟。<a href="registration.html" target="_blank">Register Now</a>如要修正這個問題，請提供分頁內容名稱。加入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 和 area 元素的 HTMLCollection，這些元素具有 href 屬性。

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
答對了！