1. Web
  2. HTML
  3. 參考
  4. 屬性
  5. rel

HTML 屬性：rel

rel 屬性定義了連結資源與當前文件之間的關係。它在 <link>、<a>、<area> 和 <form> 元素上有效，支援的值取決於該屬性所在的元素。

關係的型別由 rel 屬性的值給出，如果存在，該值必須是一個無序的、由空格分隔的唯一關鍵詞集合。與不表達語義的 class 名稱不同，rel 屬性必須表達對機器和人類都具有語義有效性的標記。當前 rel 屬性可能值的註冊中心有 IANA 連結關係登錄檔、HTML Living Standard，以及 microformats wiki 中可自由編輯的 existing-rel-values 頁面，如 Living Standard 所建議。如果使用了上述三個來源中未出現的 rel 屬性，一些 HTML 驗證器（例如 W3C 標記驗證服務）將生成警告。

下表列出了一些最重要的現有關鍵詞。空格分隔值中的每個關鍵詞在該值內應是唯一的。

rel 值 描述 <link> <a> 和 <area> <form>
交替 當前文件的替代表示。 Link Link 不允許
author 當前文件或文章的作者。 Link Link 不允許
bookmark 最近祖先章節的永久連結。 不允許 Link 不允許
canonical 當前文件的首選 URL。 Link 不允許 不允許
compression-dictionary 連結到一個壓縮字典，該字典可用於壓縮此網站上資源的未來下載。 Link 不允許 不允許
dns-prefetch 告訴瀏覽器預先對目標資源的來源執行 DNS 解析。 外部資源 不允許 不允許
external 被引用文件不屬於當前文件所在的同一站點。 不允許 註釋 註釋
expect 與 blocking="render" 一起使用時，允許頁面渲染阻塞，直到文件的基本部分被解析，以便一致地渲染。 Link 不允許 不允許
help 連結到上下文相關的幫助。 Link Link Link
icon 表示當前文件的圖示。 外部資源 不允許 不允許
license 表示當前文件的主要內容受被引用文件描述的版權許可約束。 Link Link Link
manifest Web 應用清單。 Link 不允許 不允許
me 表示當前文件代表擁有連結內容的人。 Link Link 不允許
modulepreload 告訴瀏覽器預先獲取指令碼並將其儲存在文件的模組對映中以供後續評估。可選地，模組的依賴項也可以被獲取。 外部資源 不允許 不允許
next 表示當前文件是一個系列的一部分，系列中的下一個文件是被引用文件。 Link Link Link
nofollow 表示當前文件的原始作者或釋出者不認可被引用文件。 不允許 註釋 註釋
noopener 如果超連結最初會建立頂級瀏覽上下文或輔助瀏覽上下文（即具有適當的 target 屬性值），則建立一個非輔助瀏覽上下文的頂級瀏覽上下文。 不允許 註釋 註釋
noreferrer 不會包含 Referer 頭部。此外，具有與 noopener 相同的效果。 不允許 註釋 註釋
opener 如果超連結原本會建立非輔助瀏覽上下文的頂級瀏覽上下文（即 target 屬性值為 "_blank"），則建立一個輔助瀏覽上下文。 不允許 註釋 註釋
pingback 給出處理當前文件的 pingback 伺服器地址。 外部資源 不允許 不允許
preconnect 指定使用者代理應預先連線到目標資源的來源。 外部資源 不允許 不允許
prefetch 指定使用者代理應預先獲取並快取目標資源，因為它很可能在後續導航中需要。 外部資源 不允許 不允許
preload 指定使用者代理必須根據 as 屬性給出的潛在目的地（以及與相應目的地相關的優先順序）預先獲取並快取當前導航的目標資源。 外部資源 不允許 不允許
prerender 指定使用者代理應預先獲取目標資源並以有助於未來更快響應的方式進行處理。此功能已被 Speculation Rules API 取代。 外部資源 不允許 不允許
prev 表示當前文件是一個系列的一部分，系列中的上一個文件是被引用文件。 Link Link Link
privacy-policy 提供一個連結，指向有關適用於當前文件的資料收集和使用實踐的資訊。 Link Link 不允許
search 提供一個連結，指向可用於搜尋當前文件及其相關頁面的資源。 Link Link Link
stylesheet（樣式表） 匯入樣式表。 外部資源 不允許 不允許
tag 提供一個適用於當前文件的標籤（由給定地址標識）。 不允許 Link 不允許
terms-of-service 連結到文件提供者與希望使用該文件的使用者之間的協議或服務條款。 Link Link 不允許

rel 屬性與 <link>、<a>、<area> 和 <form> 元素相關，但某些值僅與這些元素的一個子集相關。與所有 HTML 關鍵詞屬性值一樣，這些值不區分大小寫。

rel 屬性沒有預設值。如果省略該屬性或屬性中的值都不受支援，則文件與目標資源之間除了超連結之外沒有特殊關係。在這種情況下，在 <link> 和 <form> 上，如果 rel 屬性不存在、沒有關鍵詞，或者沒有一個或多個上述空格分隔的關鍵詞，則該元素不會建立任何連結。<a> 和 <area> 仍將建立連結，但沒有定義的關係。

值

交替

表示當前文件的替代表示。對於 <link>、<a> 和 <area> 有效，其含義取決於其他屬性的值。

  • 在 <link> 上使用 stylesheet 關鍵詞時，它會建立一個替代樣式表。

    html
    <!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css" />
<!-- alternate style sheets -->
<link
  rel="alternate stylesheet"
  href="highcontrast.css"
  title="High contrast" />

  • 如果 hreflang 屬性與文件語言不同，則表示翻譯。

  • 如果 type 屬性值為 "application/rss+xml" 或 "application/atom+xml"，則會建立引用聯合訂閱源的超連結。

    html
    <link
  rel="alternate"
  type="application/atom+xml"
  href="posts.xml"
  title="Blog" />

  • 否則，它會建立一個超連結，引用當前文件的替代表示，其性質由 hreflang 和 type 屬性給出。

    • 如果 hreflang 與 alternate 一起給出，並且 hreflang 的值與當前文件的語言不同，則表示被引用文件是翻譯。
    • 如果 type 與 alternate 一起給出，則表示被引用文件是另一種格式（例如 PDF）。
    • hreflang 和 type 屬性可以同時與 alternate 一起給出。
    html
    <link
  rel="alternate"
  href="/en-US/html/print"
  hreflang="fr"
  type="text/html"
  media="print"
  title="French HTML (for printing)" />
<link
  rel="alternate"
  href="/en-US/pdf"
  hreflang="fr"
  type="application/pdf"
  title="French PDF" />
author

表示被引用文件提供了有關當前文件或文章作者的更多資訊。與 <link>、<a> 和 <area> 元素相關。

對於 <a> 和 <area>，它表示連結文件（或 mailto:）提供了有關最近的 <article> 祖先（如果存在）的作者資訊，否則是整個文件。

對於 <link>，它表示整個文件的作者。

注意：出於歷史原因，已廢棄的屬性值 rev="made" 被視為 rel="author"。

bookmark

作為 <a> 和 <area> 元素的 rel 屬性值相關。如果存在最近的祖先 <article> 元素，則提供其永久連結。如果沒有祖先 <article> 元素，則提供連結元素最密切相關的章節的永久連結。

canonical

對於 <link> 有效，它定義了當前文件的首選 URL，有助於搜尋引擎減少重複內容。

compression-dictionary

對於 <link> 有效，它定義了一個壓縮字典，可用於壓縮此網站上資源的未來下載，從而使這些資源的下載大小小於標準壓縮。

dns-prefetch

與 <body> 和 <head> 中的 <link> 元素都相關，它告訴瀏覽器預先對目標資源的來源執行 DNS 解析。對於使用者可能需要的資源很有用，它有助於減少延遲，從而在使用者訪問資源時提高效能，因為瀏覽器會預先對指定資源的來源執行 DNS 解析。參見 資源提示中描述的 dns-prefetch。

external

與 <form>、<a> 和 <area> 相關，它表示被引用文件不屬於當前站點。這可以與屬性選擇器一起使用，以樣式化外部連結，從而向用戶表明他們將離開當前站點。

expect

允許頁面渲染阻塞，直到文件的基本部分被解析，以便一致地渲染。請注意，渲染阻塞僅在補充了 blocking="render" 屬性時才會發生。

注意：有關其用法的更多資訊，請參見 穩定頁面狀態以使跨文件轉換一致。

help

與 <form>、<link>、<a> 和 <area> 相關，help 關鍵詞表示連結內容提供了上下文相關幫助，為定義超連結的元素的父元素及其子元素提供資訊。在 <link> 中使用時，幫助適用於整個文件。在 <a> 和 <area> 中包含並受支援時，預設的 cursor 將是 help 而不是 pointer。

icon

對於 <link> 有效，連結資源表示當前文件的圖示，即用於在使用者介面中表示頁面的資源。

icon 值最常見的用途是 favicon。

html
<link rel="icon" href="favicon.ico" />

如果有多個 <link rel="icon">，瀏覽器會根據它們的 media、type 和 sizes 屬性選擇最合適的圖示。如果幾個圖示同樣合適，則使用最後一個。如果後來發現最合適的圖示不合適，例如因為它使用了不支援的格式，瀏覽器會繼續選擇下一個最合適的圖示，依此類推。

注意：基於 Chromium 的瀏覽器不支援 rel="icon" 的 crossorigin 屬性。參見開放的 Chromium 問題。

注意：蘋果的 iOS 不使用此連結型別，也不使用 sizes 屬性（不像其他移動瀏覽器那樣），來為 Web Clip 或啟動佔位符選擇網頁圖示。相反，它分別使用非標準的 apple-touch-icon 和 apple-touch-startup-image。

注意：shortcut 連結型別通常出現在 icon 之前，但此連結型別不符合規範，會被忽略，並且網頁作者不應再使用它。

license

在 <a>、<area>、<form>、<link> 元素上有效，license 值表示超連結指向描述許可資訊的文件；即當前文件的主要內容受被引用文件描述的版權許可約束。如果不在 <head> 元素內，標準不區分超連結是適用於文件的特定部分還是整個文件。只有頁面上的資料可以指示這一點。

html
<link rel="license" href="#license" />

注意：儘管被識別，但同義詞 copyright 是不正確的，必須避免使用。

manifest

Web 應用清單。需要使用 CORS 協議進行跨域獲取。

modulepreload

對於提高效能很有用，並且與文件中任意位置的 <link> 相關，設定 rel="modulepreload" 告訴瀏覽器預先獲取指令碼（及其依賴項）並將其儲存在文件的模組對映中以供後續評估。modulepreload 連結可以確保在模組被實際需要之前，網路獲取已完成，並且模組已在模組對映中準備就緒（但尚未評估）。另請參見 modulepreload。

next

與 <form>、<link>、<a> 和 <area> 相關，next 值表示當前文件是一個系列的一部分，系列中的下一個文件是被引用文件。當包含在 <link> 中時，瀏覽器可能會假定該文件將是下一個要獲取的，並將其視為資源提示。

nofollow

與 <form>、<a> 和 <area> 相關，nofollow 關鍵詞告訴搜尋引擎蜘蛛忽略連結關係。nofollow 關係可能表示當前文件的所有者不認可被引用文件。它通常由搜尋引擎最佳化者（假裝他們的連結農場不是垃圾頁面）包含。

noopener

與 <form>、<a> 和 <area> 相關，如果超連結最初會建立頂級瀏覽上下文或輔助瀏覽上下文（即具有適當的 target 屬性值），則建立一個非輔助瀏覽上下文的頂級瀏覽上下文。換句話說，它使連結的行為就像 window.opener 為 null 且設定了 target="_parent" 一樣。

這與 opener 相反。

noreferrer

與 <form>、<a> 和 <area> 相關，包含此值會使引用者未知（不會包含 Referer 頭部），並建立一個頂級瀏覽上下文，如同也設定了 noopener 一樣。

opener

如果超連結原本會建立非輔助瀏覽上下文的頂級瀏覽上下文（即 target 屬性值為 "_blank"），則建立一個輔助瀏覽上下文。實際上，與 noopener 相反。

pingback

給出處理當前文件的 pingback 伺服器地址。參見 Pingback 規範。

preconnect

向瀏覽器提供提示，建議其預先開啟與連結網站的連線，而不披露任何私人資訊或下載任何內容，以便在跟蹤連結時更快地獲取連結內容。

prefetch

指定使用者代理應預先獲取並快取目標資源，因為它很可能在後續導航中需要。有關更多資訊，請參見 prefetch。

preload

指定使用者代理必須根據 as 屬性給出的潛在目的地（以及與相應目的地相關的優先順序）預先獲取並快取當前導航的目標資源。參見 preload 值頁面。

prerender

指定使用者代理應預先獲取目標資源並以有助於未來更快響應的方式進行處理，例如透過獲取其子資源或執行一些渲染。此功能已被 Speculation Rules API 取代。

prev

類似於 next 關鍵詞，與 <form>、<link>、<a> 和 <area> 相關，prev 值表示當前文件是一個系列的一部分，並且該連結引用的是系列中的上一個文件。

注意：同義詞 previous 是不正確的，不應使用。

privacy-policy

對於 <a>、<area> 和 <link> 元素有效，privacy-policy 值表示被引用文件是隱私政策，描述了當前文件的資料收集和使用實踐。

與 <form>、<link>、<a> 和 <area> 元素相關，search 關鍵詞表示超連結引用了一個介面專門用於搜尋當前文件、站點和相關資源的文件，提供了可用於搜尋的資源的連結。

如果 type 屬性設定為 application/opensearchdescription+xml，則該資源是可輕鬆新增到 Firefox 介面中的 OpenSearch 外掛。

stylesheet（樣式表）

對於 <link> 元素有效，它匯入一個外部資源作為樣式表使用。type 屬性對於 text/css 樣式表來說不是必需的，因為這是預設值。如果它不是 text/css 型別的樣式表，最好宣告其型別。

雖然此屬性將連結定義為樣式表，但它與其他屬性以及 rel 值中的其他關鍵詞的互動會影響樣式表是否被下載和/或使用。

與 alternate 關鍵詞一起使用時，它定義了一個替代樣式表。在這種情況下，請包含非空的 title。

如果媒體不匹配 media 屬性的值，外部樣式表將不會被使用甚至不會被下載。

需要使用 CORS 協議進行跨域獲取。

tag

對於 <a> 和 <area> 元素有效，它提供一個適用於當前文件的標籤（由給定地址標識）。標籤值表示該連結引用了一個描述應用於其所在文件的標籤的文件。此連結型別不適用於標籤雲中的標籤，因為這些標籤適用於一組頁面，而 rel 屬性的 tag 值適用於單個文件。

terms-of-service

對於 <a>、<area> 和 <link> 元素有效，terms-of-service 值表示被引用文件是服務條款，描述了當前文件提供者與希望使用所提供文件的使用者之間的協議。

非標準值

apple-touch-icon

指定 iOS 裝置上 Web 應用程式的圖示。

規範

規範
HTML
# linkTypes
HTML
# attr-hyperlink-rel
HTML
# attr-form-rel

瀏覽器相容性

html.elements.link.rel

html.elements.a.rel

html.elements.area.rel

html.elements.form.rel

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.