?
This document uses PHP Chinese website manual Release
HTML中<link>元素指定了外部資源與當(dāng)前文檔的關(guān)系. 這個元素的使用方法包括為導(dǎo)航定義關(guān)系框架.這個元素經(jīng)常用來鏈接css文件。屬性允許的值可在鏈接類型找到。
內(nèi)容類別 | Metadata content。如果使用了 |
|---|---|
允許的內(nèi)容 | 沒有，這是一個空的元素。 |
標(biāo)記省略 | 由于它是空白元素，所以開始標(biāo)記必須存在，并且結(jié)束標(biāo)記不能出現(xiàn) |
允許父級 | 任何接受元數(shù)據(jù)元素的元素。如果存在itemprop，則是任何接受phrasing content的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLLinkElement |
屬性
這個元素包含全局屬性。
as
這個屬性僅在<link>元素設(shè)置了 rel="preload" 時才能使用。它指定了由<link>加載的內(nèi)容的類型，這對于內(nèi)容優(yōu)先化，請求匹配，應(yīng)用正確的內(nèi)容安全策略以及設(shè)置正確的{{ httpheader（“Accept”） }}請求頭是必需的。
charset
該屬性定義了被鏈接資源的字符編碼. 其取值參見RFC 2045, 并以空格和/或逗號分隔.。默認(rèn)值為iso-8859-1。
使用注意: 該屬性已廢棄并不能再被使用. 要達到同樣的效果, 在被鏈接資源的 HTTP 頭中設(shè)置相應(yīng)的 Content-Type.
crossorigin該枚舉屬性指定在加載相關(guān)圖片時是否必須使用 CORS.啟用 CORS 的圖片 可以在<canvas>元素中使用, 并避免其被污染. 可取的值如下:
"anonymous"會發(fā)起一個跨域請求(即包含Origin:HTTP 頭). 但不會發(fā)送任何認(rèn)證信息 (即不發(fā)送 cookie, X.509 證書和 HTTP 基本認(rèn)證信息). 如果服務(wù)器沒有給出源站憑證 (不設(shè)置 Access-Control-Allow-Origin:HTTP 頭), 這張圖片就會被污染并限制使用.
"use-credentials"會發(fā)起一個帶有認(rèn)證信息 (發(fā)送 cookie, X.509 證書和 HTTP 基本認(rèn)證信息) 的跨域請求 (即包含Origin:HTTP 頭). 如果服務(wù)器沒有給出源站憑證 (不設(shè)置 Access-Control-Allow-Origin: HTTP 頭), 這張圖片就會被污染并限制使用.
當(dāng)不設(shè)置該屬性時, 資源將會不使用 CORS 加載 (即不發(fā)送Origin:HTTP 頭), 這將阻止其在<canvas>元素中進行使用. 若設(shè)置了非法的值, 則視為使用anonymous. 前往 CORS settings attributes獲取更多信息.
disabled該屬性被用于禁用鏈接關(guān)系. 配合腳本使用, 該屬性可以用來啟用或禁用多個樣式表鏈接.
使用注意:雖然在 HTML 標(biāo)準(zhǔn)中沒有disabled屬性, 但在HTMLLinkElementDOM 對象中確實存在 disabled 屬性.
使用 disabled 作為 HTML 屬性是非標(biāo)準(zhǔn)的, 并且只有部分瀏覽器使用 (W3 #27677).
不要使用它. 要達到類似的效果, 可以選用以下方法:
如果
disabled屬性已經(jīng)直接加入到頁面元素中, 可以改為不引入這個<link>元素;
通過腳本為該
樣式表DOM 對象設(shè)置disabled屬性.
href該屬性指定被鏈接資源的URL. URL 可以是絕對的或相對的.
hreflang該屬性指明了被鏈接資源的語言. 其意義僅供參考. 可取的值參見 BCP47. 僅當(dāng)設(shè)置了href屬性時才應(yīng)設(shè)置該屬性.
integrity包含行內(nèi)元數(shù)據(jù), 它是一個你用瀏覽器獲取的資源文件的哈希值,以base64編碼的方式加的密,這樣用戶能用它來驗證一個獲取到的資源,在傳送時未被非法篡改, 詳情查看Subresource Integrity
media這個屬性指定了連接資源提供的媒體類型。它的值一定得是一個媒體查詢。這個屬性在允許瀏覽器為設(shè)備選擇最合適的連接樣式表時比較有作用。
使用注意：
在HTML 4中，它只能是一些由空白符分開的媒體描述文字, i.e., 媒體類型，定義以及允許這些值作為它的屬性，例如print， screen， aural， braille。HTML5擴展了它的屬性值，使其有任何類型的媒體查詢, HTML5擴展了它在HTML4中允許的屬性值。
瀏覽器不支持 CSS3 媒體查詢的話將不會很影響它識別（使用link的媒體查詢的）合適的連接，不要忘了設(shè)置回退link屬性（原文是fallback links），即那些定義在HTML4中的媒體查詢中的有限的屬性。
methods此屬性的值提供了有關(guān)可能在對象上執(zhí)行的功能的信息。這些值通常由HTTP協(xié)議在使用時給出，但它可能（出于類似于title屬性的原因）在鏈接中預(yù)先包含有用的咨詢信息。例如，瀏覽器可以根據(jù)指定的方法選擇不同的鏈接呈現(xiàn)方式; 可搜索的東西可能會得到不同的圖標(biāo)，或者外部鏈接可能會呈現(xiàn)離開當(dāng)前網(wǎng)站的指示。即使通過定義的瀏覽器Internet Explorer 4，也不能很好地理解和支持此屬性。
prefetch此屬性標(biāo)識下一個導(dǎo)航可能需要的資源，并且用戶代理應(yīng)檢索該資源。這使得用戶代理將來在請求資源時可以更快地響應(yīng)。
referrerpolicy一個字符串，指示在獲取資源時使用哪個引用者：
'no-referrer'這意味著Referer頭部不會被發(fā)送。
'no-referrer-when-downgrade'意味著在沒有TLS (HTTPS)的情況下導(dǎo)航到一個源時不會發(fā)送任何引用頭。如果沒有指定任何策略，這是用戶代理的默認(rèn)行為。
'origin'這意味著引用者將成為頁面的來源，即大致的 scheme，主機和端口。
'origin-when-cross-origin'這意味著導(dǎo)航到的其他來源將被限制在協(xié)議，主機和端口，而同一來源的導(dǎo)航將包括引用路徑。
'unsafe-url'這意味著引用者將包括來源和路徑（但不包括片段，密碼或用戶名）。這種情況是不安全的，因為它可以將來自TLS保護的資源的起點和路徑泄漏到不安全的起點。
rel
該屬性命名鏈接文檔與當(dāng)前文檔的關(guān)系。該屬性必須是空格分隔的鏈接類型值列表。此屬性最常用的用途是指定一個指向外部樣式表的鏈接：將rel屬性設(shè)置為stylesheet，并將href屬性設(shè)置為外部樣式表的URL來格式化頁面。
網(wǎng)絡(luò)電視還支持使用rel的值next預(yù)加載下一個頁面的文件系列。rev此屬性的值顯示當(dāng)前文檔與鏈接文檔的關(guān)系，如href屬性所定義。
因此，這個屬性因此定義了相比于rel屬性相反的關(guān)系。 鏈接類型的值 與rel有相似的一些值。
用法說明：該屬性在HTML5中已過時。不要使用它。要達到它的效果，請使用rel具有相反鏈接類型值的屬性，例如made應(yīng)該被替換為author。此外，這個屬性并不意味著修訂版本，也不能與版本號一起使用，（不幸的是很多網(wǎng)頁都是這么做的）
sizes這個屬性定義了包含相應(yīng)資源的可視化媒體中的icons的大小。它只有在rel包含icon的link類型值。它可能有如下的規(guī)則。
any，意味著這個icon能夠被縮放到任意尺寸當(dāng)它是矢量形式，比如image/svg+xml。
一個由空白符分隔的尺寸列表。
每一個都以
<width in pixels>x<height in pixels>或<width in pixels>X<height in pixels>給出。尺寸列表中的每一個尺寸都必須包含在資源里。
使用說明：
大多數(shù)圖標(biāo)格式只能存儲一個圖標(biāo); 因此大部分時間
sizes只包含一個條目。MS的ICO格式，以及蘋果的ICNS。ICO更無處不在，你應(yīng)該使用它。
蘋果的iOS不支持此屬性，因此蘋果的iPhone和iPad上使用特殊的，非標(biāo)準(zhǔn)的鏈接類型值來定義圖標(biāo)將被用作網(wǎng)絡(luò)剪輯或啟動占位符：
apple-touch-icon和apple-touch-startup-icon。
target定義具有已定義鏈接關(guān)系的框架或窗口名稱，或?qū)@示任何鏈接資源的呈現(xiàn)。
title
該title屬性在<link>元素上有特殊的語義。當(dāng)用于<link rel="stylesheet">它時，它定義了一個首選或另一個樣式表。錯誤地使用它可能會導(dǎo)致樣式表被忽略。
type該屬性用于定義鏈接到的內(nèi)容的類型。該屬性的值應(yīng)該是MIME類型，如text / html，text / css等等。此屬性的常用用法是定義鏈接的樣式表的類型，最常見的當(dāng)前值是text / css，它表示層疊樣式表格式。它也用于rel="preload"鏈接類型，以確保瀏覽器只下載它支持的文件類型。
例子
包括一個樣式表
要在頁面中包含樣式表，請使用以下語法：
<link href="style.css" rel="stylesheet">
提供替代樣式表
您也可以指定其他樣式表。
用戶可以從“視圖”>“頁面樣式”菜單中選擇要使用的樣式表。這為用戶提供了查看頁面的多個版本的方法。
<link href="default.css" rel="stylesheet" title="Default Style"><link href="fancy.css" rel="alternate stylesheet" title="Fancy"><link href="basic.css" rel="alternate stylesheet" title="Basic">
樣式表加載事件
你可以通過觀察一個load事件來確定樣式表何時被加載; 同樣，您可以通過觀察error事件來處理樣式表時檢測是否發(fā)生錯誤：
<script>function sheetLoaded() { // Do something interesting; the sheet has been loaded}function sheetError() {
console.log("An error occurred loading the stylesheet!");}</script><link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()"
onerror="sheetError()">注：該load事件觸發(fā)一次樣式表和它的所有導(dǎo)入的內(nèi)容已經(jīng)被加載和分析，并立即開始被應(yīng)用到內(nèi)容的樣式之前。
預(yù)加載示例
您可以在rel =“preload”中預(yù)加載內(nèi)容中找到一些<link rel =“preload”>示例。
注意
<link>標(biāo)簽可以出現(xiàn)無論是在頭部元件或所述主體元件（或兩者），這取決于它是否有是body-ok的鏈路類型。例如，stylesheet鏈接類型是正文，因此<link rel="stylesheet">在主體中被允許。
HTML 3.2僅為鏈接元素定義了href，rel，rev和title屬性。
HTML 2 為元素定義了href，methods，rel，rev，title和urn屬性
<link>。該方法和甕屬性后來從規(guī)范中刪除。
HTML和XHTML規(guī)范定義了
<link>元素的事件處理程序，但不清楚如何使用它們。
在XHTML 1.0下，空的元素，例如
<link>需要一個斜線：<link />。
規(guī)范
Specification | Status | Comment |
|---|---|---|
Preload | Working Draft | Defines <link rel="preload">, and the as attribute. |
Subresource IntegrityThe definition of '<script>' in that specification. | Recommendation | Added the integrity attribute. |
HTML Living StandardThe definition of '<link>' in that specification. | Living Standard | No changes from latest snapshot |
HTML5The definition of '<link>' in that specification. | Recommendation | Added crossorigin and sizes attributes; extended values of media to any media queries; added numerous new values for rel. |
HTML 4.01 SpecificationThe definition of '<link>' in that specification. | Recommendation | |
Resource HintsThe definition of 'prefetch' in that specification. | Working Draft | Added dns-prefetch, preconnect, prefetch, and prerender. |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
charset | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
crossorigin | 25.0 | No | 18.0 | No | 15.0 | ? |
disabled | No | (Yes) | No | (Yes) | No | No |
href | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
hreflang | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
integrity | 45.0 | No | ? | No | ? | No |
media | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
methods | No | ? | No | 4.0 | No | No |
prefetch | 56.0 | ? | ? | No | 43.0 | ? |
referrerpolicy | 58.0 | No | 50.0 | ? | ? | ? |
rel | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
rev | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
sizes | No | No | No1 | No | No | No |
target | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
title | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
type | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
charset | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
crossorigin | ? | (Yes) | No | 18.0 | No | ? | ? |
disabled | No | No | (Yes) | No | ? | No | No |
href | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
hreflang | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
integrity | 45.0 | 45.0 | No | ? | No | ? | No |
media | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
methods | No | No | ? | No | 4.0 | No | No |
prefetch | 56.0 | 56.0 | ? | ? | No | 43.0 | ? |
referrerpolicy | 58.0 | 58.0 | No | 50.0 | ? | ? | ? |
rel | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
rev | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
sizes | No | No | No | No1 | No | No | No |
target | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
title | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
type | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |