HTML外部資源鏈接元素()規定了當前文檔與外部資源的關系。該元素最常用于鏈接樣式表，此外也可以被用來創建站點圖標(比如PC端的“favicon”圖標和移動設備上用以顯示在主屏幕的圖標)。
瀏覽器支持
示例
引入一個css文件
屬性
這個元素可以使用全局屬性.
- as該屬性僅在元素設置了時才能使用。它規定了元素加載的內容的類型，對于內容的優先級、請求匹配、正確的內容安全策略的選擇以及正確的Accept請求頭的設置，這個屬性是必需的。
ValueApplies To
| audio | elements |
| document | and elements |
| embed | elements |
| fetch | fetch, XHR This value also requires to contain the crossorigin attribute. |
| font | CSS @font-face |
| image | and elements with srcset or imageset attributes, SVG elements, CSS *-image rules |
| object | elements |
| script | elements, Worker importScripts |
| style | elements, CSS @import |
| track | elements |
| video | elements |
| worker | Worker, SharedWorker |
- crossorigin此枚舉屬性指定在加載相關圖片時是否必須使用 CORS.啟用 CORS 的圖片可以在元素中使用，并避免其被污染.可取的值如下:
- "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 頭),這將阻止其在元素中進行使用。若設置了非法的值，則視為使用anonymous.前往 CORS settings attributes獲取更多信息. - disabled
僅對于，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:向瀏覽器指示資源的優先級較低。
該特性是非標準的，請盡量不要在生產環境中使用它！ - title屬性在元素上有特殊的語義。當用于時，它定義了一個首選樣式表或備用樣式表。不正確地使用它可能會導致樣式表被忽略。
- type這個屬性被用于定義鏈接的內容的類型。這個屬性的值應該是像text/html，text/css等MIME類型。這個屬性常用的用法是定義鏈接的樣式表，最常用的值是表明了CSS的text/css。
非標準屬性
- methods尚未標準化
- 此屬性的值提供有關可能在對象上執行的功能的信息。這些值通常在使用時由HTTP協議給出，但是（出于與“title”屬性類似的原因）將其預先包含在鏈接中可能是有用的。例如，瀏覽器可能根據指定的方法選擇不同的鏈接呈現方式。可搜索的內容可能會得到其他圖標，或者外部鏈接可能會顯示離開當前站點的指示。即使定義的瀏覽器Internet Explorer 4也無法很好地理解或支持此屬性。
- prefetch尚未標準化Secure context
- 此屬性標識下一個導航可能需要的資源，用戶代理應檢索該資源。這允許用戶代理在將來請求資源時更快地做出響應。
- target尚未標準化
- 定義具有已定義鏈接關系或將顯示任何鏈接資源的呈現的框架或窗口名稱。
已淘汰的屬性
- charsetTHML5中廢棄此屬性定義鏈接資源的字符編碼。該值為RFC 2045中定義的字符集的空格和/或逗號分隔列表。缺省值為iso-8859-1。
使用說明：該屬性已淘汰且禁止使用。要實現相同效果，可在外鏈資源中使用Content-Type HTTP header。
- revTHML5中廢棄此屬性的值顯示了href屬性所定義的當前文檔與鏈接文檔的關系。因此，該屬性定義了與rel屬性的值相比的反向關系。該屬性的Link type value類似于rel的可能值。
- Note: WHATWG HTML生活標準（MDN將其視為規范的規范）認為該屬性已過時。但是，值得注意的是，rev在W3C規范中并未過時。就是說，鑒于不確定性，依靠rev是不明智的。
相反，您應該使用具有相反鏈接類型值的rel屬性。例如，要建立反向鏈接，請指定作者。而且，即使許多站點都以這種方式濫用此屬性，該屬性也不代表“修訂”，并且不得與版本號一起使用。
link用法示例
要鏈接一個外部的樣式表，你需要像這樣在你的中包含一個元素：
在這個簡單的例子中，使用了href屬性設置外部資源的路徑，并設置rel屬性的值為“stylesheet”(樣式表)。rel表示“關系(relationship)”，它可能是元素其中一個關鍵的特性——屬性值表示項的鏈接方式與包含它的文檔之間的關系。你將在我們的鏈接類型中看到很多不同類型的關系。
這里有一些你經常遇到的其它類型。例如，這里是一個網站圖標的鏈接：
還有一些其它的與圖標相關的rel值，主要用于表示不同移動平臺上特殊的圖標類型，例如：
sizes屬性表示圖標大小，type屬性包含了鏈接資源的MIME類型。這些屬性為瀏覽器選擇最合適的圖標提供了有用的提示。
你也可以提供一個媒體類型，或者在media屬性內部進行查詢；這種資源將只在滿足媒體條件的情況下才被加載進來。例如：
也加入了一些新的有意思的性能和安全特性。舉例如下：將rel設定為preload，表示瀏覽器應該預加載該資源(更多細節見使用預加載內容)。as屬性表示獲取特定的內容類。crossorigin屬性表示該資源是否應該使用一個CORS請求來獲取。
其它用法的注解：
- 元素可以出現在元素或者元素中，具體取決于它是否有一個body-ok的鏈接類型。例如，stylesheet鏈接類型是body-ok的，因此允許出現在body中。然而，這不是一種好的可遵循的實踐方式；更合理的方式是，將你的元素從你的body內容中分離出來，將其放在中。
- 當使用為網站創建一個favicon時，你的網站使用內容安全策略(Content Security Policy，CSP)來增強它的安全性，這種策略適用于favicon。如果你遇到favicon未加載的問題，驗證Content-Security-Policy頭的img-src directive沒有在阻止對它的訪問。
- HTML和XHTML規范為元素定義了一些事件處理器(event handler)，但是對于它們的使用方法不明確。
- 在XHTML 1.0下，例如的空元素需要一個尾斜杠：。
- WebTV支持rel使用next值，用于在一個document series中預加載下一頁。
Styling with CSS
元素在Web文檔上不會渲染出來，因此無需擔心樣式方面的問題。
例子
提供可替換的樣式表
你也可以指定"可替換的外部樣式表"。
用戶可以在瀏覽器菜單"查看>頁面樣式"來選擇網頁的樣式。通過這一辦法，可以用多種樣式瀏覽網頁。
提供用于不同用法上下文的圖標
您可以在同一頁面上包含指向多個不同圖標的鏈接，瀏覽器將使用rel和sizes值作為提示來選擇最適合其特定上下文的圖標。
通過媒體查詢有條件地加載資源
您可以在media屬性中提供媒體類型或查詢；然后，只有在媒體條件為true時，才會加載此資源。例如：
樣式表加載事件
你能夠通過監聽發生在樣式表上的事件知道什么時候樣式表加載完畢。同樣的，你能夠通過監聽error事件檢測到是否在加載樣式表的過程中出現錯誤。
function sheetloaded() {// do something interesting; the sheet has been loaded}function sheeterror() {alert("an error occurred loading the stylesheet!");} 注意：當樣式表以及它引用的部分全部加載完畢，load事件就會在樣式表應用到內容之前立即觸發。
