我們在「屬性」章節簡介中示範如何將屬性新增至開頭標記。
這個範例使用了 <a>
標記,但討論的元素和該範例導入的特定屬性都沒有討論:
<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」屬性的連結。
連結和 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
在這個部分中,您已瞭解連結的所有概念。下一節將說明清單,我們需要學習這些清單,才能將這些清單分組以建立連結清單 (也稱為導覽)。
隨堂測驗
測驗您對連結的相關知識。
nofollow 連結有何作用?
哪些連結會將你導向頁面頂端?
#start
#
#top