HTML外部資源連結元素 (<link>) 規定了目前文檔與外部資源的關系。該元素最常用于連結樣式表，此外也可以被用來建立站點圖示(比如PC端的“favicon”圖示和移動裝置上用以顯示在主螢幕的圖示) 。
要連結一個外部的樣式表，你需要像這樣在你的<head>中包含一個<link>元素：
在這個簡單的例子中，使用了 href 屬性設定外部資源的路徑，并設定 rel 屬性的值為“stylesheet”(樣式表)。rel 表示“關系 (relationship) ”，它可能是<link>元素其中一個關鍵的特性——屬性值表示<link>項的連結方式與包含它的文檔之間的關系。你将在我們的連結類型中看到很多不同類型的關系。
這裡有一些你經常遇到的其它類型。例如，這裡是一個網站圖示的連結：
還有一些其它的與圖示相關的rel值，主要用于表示不同移動平台上特殊的圖示類型，例如：
sizes屬性表示圖示大小，type屬性包含了連結資源的MIME類型。這些屬性為浏覽器選擇最合适的圖示提供了有用的提示。
你也可以提供一個媒體類型，或者在media屬性内部進行查詢；這種資源将隻在滿足媒體條件的情況下才被加載進來。例如：
<link>也加入了一些新的有意思的性能和安全特性。舉例如下：
将rel設定為preload，表示浏覽器應該預加載該資源 (更多細節見使用rel="preload"預加載内容) 。as屬性表示擷取特定的内容類。crossorigin屬性表示該資源是否應該使用一個CORS請求來擷取。
其它用法的注解：
<link>元素可以出現在<head>元素或者<body>元素中，具體取決于它是否有一個body-ok的連結類型。例如，stylesheet連結類型是body-ok的，是以<link rel="stylesheet">允許出現在body中。然而，這不是一種好的可遵循的實踐方式；更合理的方式是，将你的<link>元素從你的body内容中分離出來，将其放在<head>中。
當使用<link>為網站建立一個favicon時，你的網站使用内容安全政策 (Content Security Policy，CSP) 來增強它的安全性，這種政策适用于favicon。如果你遇到favicon未加載的問題，驗證Content-Security-Policy頭的img-src directive沒有在阻止對它的通路。
HTML和XHTML規範為<link>元素定義了一些事件處理器 (event handler) ，但是對于它們的使用方法不明确。
在XHTML 1.0下，例如<link>的空元素需要一個尾斜杠：<link />。
WebTV支援rel使用next值，用于在一個document series中預加載下一頁。
這個元素可以使用 全局屬性.
as
該屬性僅在<link>元素設定了 rel="preload" 時才能使用。它規定了<link>元素加載的内容的類型，對于内容的優先級、請求比對、正确的内容安全政策的選擇以及正确的 Accept請求頭的設定，這個屬性是必需的。
值
應用于
audio
<audio> 元素
document
<iframe> 和 <frame> 元素
embed
<embed> 元素
fetch
fetch, XHR
This value also requires <link> to contain the crossorigin attribute.
font
CSS @font-face
image
<img> and <picture> elements with srcset or imageset attributes, SVG <image> elements, CSS *-image rules
object
<object> elements
script
<script> elements, Worker importScripts
style
<link rel=stylesheet> elements, CSS @import
track
<track> elements
video
<video> elements
worker
Worker, SharedWorker
crossorigin
此枚舉屬性指定在加載相關資源時是否必須使用 CORS. 啟用 CORS 的圖檔 可以在 <canvas> 元素中重複使用, 并避免其被污染. 可取的值如下:
"anonymous"
會發起一個跨域請求(即包含 Origin: HTTP 頭). 但不會發送任何認證資訊 (即不發送 cookie, X.509 證書和 HTTP 基本認證資訊). 如果伺服器沒有給出源站憑證 (不設定 Access-Control-Allow-Origin: HTTP 頭), 資源就會被污染并限制使用.
"use-credentials"
會發起一個帶有認證資訊 (發送 cookie, X.509 證書和 HTTP 基本認證資訊) 的跨域請求 (即包含 Origin: HTTP 頭). 如果伺服器沒有給出源站憑證 (不設定 Access-Control-Allow-Origin: HTTP 頭), 資源就會被污染并限制使用.
當不設定此屬性時, 資源将會不使用 CORS 加載 (即不發送 Origin: HTTP 頭), 這将阻止其在 <canvas> 元素中進行使用. 若設定了非法的值, 則視為使用 anonymous. 前往 CORS settings attributes 擷取更多資訊.
disabled
僅對于rel="stylesheet" ，disabled 的Boolean屬性訓示是否應加載所描述的樣式表并将其應用于文檔。 如果在加載HTML時在HTML中指定了Disabled，則在頁面加載期間不會加載樣式表。 相反，如果禁用屬性更改為false或删除時，樣式表将按需加載。
但是，一旦加載樣式表，對Disabled屬性的值所做的更改将不再與StyleSheet.disabled 屬性的值有任何關系。 相反，更改此屬性的值隻是啟用和禁用應用于文檔的樣式表表單。
這與StyleSheet的disable屬性不同； 将其更改為true會将樣式表從文檔的document.styleSheets 清單中删除，并且在切換回false時不會自動重新加載樣式表。
href
此屬性指定被連結資源的URL。 URL 可以是絕對的，也可以是相對的。
hreflang
此屬性指明了被連結資源的語言. 其意義僅供參考。可取的值參見 BCP47。僅當設定了 href 屬性時才應設定該屬性。
importance
訓示資源的相對重要性。 優先級提示使用以下值委托：
auto: 表示沒有偏好。 浏覽器可以使用其自己的啟發式方法來确定資源的優先級。
high: 向浏覽器訓示資源具有高優先級。
low: 向浏覽器訓示資源的優先級較低。
Note: 隻有存在rel=“preload”或rel=“prefetch”時，importance屬性才能用于<link>元素。
integrity
包含行内中繼資料，它是一個你用浏覽器擷取的資源檔案的哈希值，以base64編碼的方式加的密，這樣使用者能用它來驗證一個擷取到的資源,在傳送時未被非法篡改，詳情檢視Subresource Integrity。
media
這個屬性規定了外部資源适用的媒體類型。它的值必須是"媒體查詢"。這個屬性使得使用者代理能選擇最适合裝置運作的媒體類型。使用注意：
在HTML 4中，該屬性隻能是一組以空白符作為分隔的媒體描述文字，比如"媒體類型"規定了該元素可取的屬性，如print、screen、aural、braille。HTML5将該屬性值擴充為任意類型的"媒體查詢"，"媒體查詢"将HTML4的屬性值都包括在内。
不支援"CSS3 媒體查詢"的浏覽器并不會強行識别這些連結，是以别忘了設定備用link，即那些可用于HTML4的link。
referrerpolicy
一個字元串，訓示在擷取資源時使用哪個引薦來源網址:
'no-referrer' 表示Referer 标頭将不會發送。
'no-referrer-when-downgrade' 的原始位置時不會發送任何Referer标頭。 如果未指定其他政策，這是使用者代理的預設行為。
'origin' 意味着引薦來源網址将是頁面的來源，大緻是方案，主機和端口。
'origin-when-cross-origin' 這意味着導航到其他來源将僅限于方案，主機和端口，而在同一來源上導航将包括引薦來源網址的路徑。
'unsafe-url' 意味着引薦來源網址将包含來源和路徑（但不包括片段，密碼或使用者名）。 這種情況是不安全的，因為它可能會将來源和路徑從受TLS保護的資源洩漏到不安全的來源。
rel
此屬性命名連結文檔與目前文檔的關系。 該屬性必須是連結類型值的用空格分隔的清單。
sizes
這個屬性定義了包含相應資源的可視化媒體中的icons的大小。它隻有在rel包含icon的link類型值。它可能有如下的規則。
any 表示圖示可以按矢量格式縮放到任意大小，例如image/svg+xml。
一個由空白符分隔的尺寸清單。每一個都以<width in pixels>x<height in pixels> 或 <width in pixels>X<height in pixels>給出。尺寸清單中的每一個尺寸都必須包含在資源裡。
用法注意：
大多數的icon格式隻能存儲一個icon。是以絕大多數使用 sizes時隻包含一個值。微軟的ICO格式和蘋果的ICNS格式都是這樣，ICO使用得更加廣泛，推薦你使用它。
蘋果的IOS系統并不支援這個屬性，于是蘋果的IPhone以及IPad使用特殊的、非标準的 link類型值去定義作為Web Clip或開始占位符：apple-touch-icon 和 apple-touch-startup-icon。
title
屬性在<link>元素上有特殊的語義。當用于<link rel="stylesheet">時，它定義了一個首選樣式表或備用樣式表。不正确地使用它可能會導緻樣式表被忽略。
type
這個屬性被用于定義連結的内容的類型。這個屬性的值應該是像text/html，text/css等MIME類型。這個屬性常用的用法是定義連結的樣式表，最常用的值是表明了CSS的text/css。
methods
此屬性的值提供有關可能在對象上執行的功能的資訊。 這些值通常在使用時由HTTP協定給出，但是（出于與“title”屬性類似的原因）将其預先包含在連結中可能是有用的。 例如，浏覽器可能根據指定的方法選擇不同的連結呈現方式。 可搜尋的内容可能會得到其他圖示，或者外部連結可能會顯示離開目前站點的訓示。 即使定義的浏覽器Internet Explorer 4也無法很好地了解或支援此屬性。
prefetch Secure context
此屬性辨別下一個導航可能需要的資源，使用者代理應檢索該資源。 這允許使用者代理在将來請求資源時更快地做出響應。
target
定義具有已定義連結關系或将顯示任何連結資源的呈現的架構或視窗名稱。
charset
此屬性定義連結資源的字元編碼。 該值為RFC 2045中定義的字元集的空格和/或逗号分隔清單。 預設值為iso-8859-1。
使用說明：該屬性已淘汰且禁止使用。要實作相同效果，可在外鍊資源中使用Content-Type HTTP header。
rev
此屬性的值顯示了 href 屬性所定義的目前文檔與連結文檔的關系。 是以，該屬性定義了與rel屬性的值相比的反向關系。 該屬性的Link type value類似于rel的可能值。
Note: WHATWG HTML生活标準（MDN将其視為規範的規範）認為該屬性已過時。 但是，值得注意的是，rev在W3C規範中并未過時。 就是說，鑒于不确定性，依靠rev是不明智的。
相反，您應該使用具有相反連結類型值的rel屬性。 例如，要建立反向連結，請指定作者。 而且，即使許多站點都以這種方式濫用此屬性，該屬性也不代表“修訂”，并且不得與版本号一起使用。
用下面的文法來引入一個css檔案：
你也可以指定"可替換的外部樣式表"。
使用者可以在浏覽器菜單 "檢視>頁面樣式" 來選擇網頁的樣式。通過這一辦法，可以用多種樣式浏覽網頁。
您可以在同一頁面上包含指向多個不同圖示的連結，浏覽器将使用rel和sizes 值作為提示來選擇最适合其特定上下文的圖示。
您可以在media屬性中提供媒體類型或查詢; 然後，隻有在媒體條件為true時，才會加載此資源。 例如：
你能夠通過監聽發生在樣式表上的事件知道什麼時候樣式表加載完畢。同樣的，你能夠通過監聽error事件檢測到是否在加載樣式表的過程中出現錯誤。
注意： 當樣式表以及它引用的部分全部加載完畢，load事件就會在樣式表應用到内容之前立即觸發。
你可以在Preloading content with rel="preload"找到<link rel="preload">的詳細例子。
内容類型
中繼資料。如果使用了 itemprop 屬性, 則為 flow content 和 phrasing content.
允許的元素内容
無，這是一個空元素。
标簽省略
鑒于這是一個空元素，開始标簽必須存在，結束标簽必須不存在。
允許的父元素
任何可以接受中繼資料的元素.。如果使用了 itemprop屬性,，則其父元素可以是任何可接受 phrasing content 的元素。
允許的 ARIA roles
無
DOM接口
HTMLLinkElement
<link> 标簽隻能出現在head元素中，然而可以出現多個<link>标簽。
HTML 3.2隻為link元素定義了href, methods, rel，rev，title，和urn屬性。
HTML 2為link标簽定義了 href, methods，rel，rev，title，和 urn 屬性，methods 和 urn随後從規範中移除。
HTML和XHTML規範為link定義了事件處理，但是并不清楚它們将會怎樣被使用。
在XHTML 1.0中，空元素link要求有尾随斜線，像這樣<link />。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)