連結

在「屬性」部分的簡介中，您會看到一個範例，示範瞭如何為開頭標記新增屬性。 這個範例使用 <a> 標記，但該範例中的元素和該範例導入的特定屬性並未提及：

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

第一個連結包含絕對網址，您可以 返回 MLW 首頁。絕對網址包含通訊協定 (在本例中為 https://)， 網域名稱。通訊協定以 // 的形式寫成時，就是隱含的通訊協定，指的是「使用與目前使用的相同的通訊協定」。

相對網址不包含通訊協定或網域名稱。它們是「相對」。MLW 是單頁網站 但這個 HTML 系列還分為幾個部分為了從這個網頁連結至屬性課程，系統會使用相對網址 <a href="../attributes/">Attributes</a>。

第二個連結只是連結片段 ID，將會連結至 元素和 id="teachers", (如果有的話)。瀏覽器也支援兩種「頁面頂端」link: 點選 在 <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 值未加上引號，或值包含引號，則一定要有此編碼。

使用者在 tel 連結上點按、輕觸或按下 Enter 鍵時，會開啟哪個應用程式，會因作業系統而異。 使用者在裝置上安裝的應用程式和設定。iPhone 可能會開啟 FaceTime、手機應用程式或聯絡人。 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，如果目前的連結為巢狀連結，則這會是父項 ，以及 _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 屬性可控制連結所建立的連結類型，定義目前文件與資源之間的關係 。屬性值必須是以空格分隔的清單，其在支援的一或多個 rel 屬性值分數中 後面加上 <a> 標記

如果您不希望自動尋檢程式追蹤這個連結，則可以加入 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 類型提供 type 屬性。雖然 MIME 類型純屬建議，建議您告知使用者連結隨即會開啟不同格式的文件。

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

追蹤連結點擊次數

追蹤使用者互動的方法之一是在按下連結時連線偵測網址。ping 屬性 (如果有的話) 會包含 如果使用者啟用https 超連結瀏覽器會將內文 PING 的 POST 要求傳送至列為 ping 屬性值的網址。

使用者體驗提示

• 編寫 HTML 時，務必考量使用者體驗。連結應提供足夠的有關已連結資源的資訊 讓使用者知道自己點選的內容
• 在文字區塊中，請確保連結的外觀與周圍文字有足夠差異，方便使用者 輕鬆辨識其餘內容的連結，確保只有色彩能區分兩者 文字與周圍內容
• 一律加入焦點樣式；如此一來，鍵盤導覽器就能知道分頁瀏覽內容時的所在位置。
• 開頭的 <a> 與結尾 </a> 之間的內容是連結的預設可存取名稱，應告知使用者 連結目的地或用途。如果連結內容是圖片，則 alt 說明就是無障礙名稱。 無論無障礙名稱來自 alt 屬性，還是文字區塊中的部分字詞，都必須提供該名稱 連結目的地的相關資訊。連結文字應比「按一下這裡」更一目瞭然或「詳細資訊」；這對螢幕閱讀器使用者和搜尋引擎結果來說都很重要！
• 請勿在連結中加入互動內容，例如 <button> 或 <input>。請勿在 <button> 內建立巢狀連結 或 <label>雖然 HTML 網頁仍會顯示，但若以巢狀結構將可聚焦和可點擊的元素嵌入互動式元素，就會帶來不良的使用者體驗。
• 如果有 href 屬性，請在聚焦 <a> 元素時按下 Enter 鍵，即可啟動該屬性。
• 連結範圍不限於 HTML。也可以在 SVG 中使用 a 元素，建立具有「href」的連結或「xlink:href」屬性。

連結和 JavaScript

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

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

隨堂測驗

測試您對連結的瞭解。