?
Ce document utilise Manuel du site Web PHP chinois Libérer
HTML中<link>元素指定了外部資源與當前文檔的關系. 這個元素的使用方法包括為導航定義關系框架.這個元素經(jīng)常用來鏈接css文件。屬性允許的值可在鏈接類型找到。
內容類別 | Metadata content。如果使用了 |
|---|---|
允許的內容 | 沒有，這是一個空的元素。 |
標記省略 | 由于它是空白元素，所以開始標記必須存在，并且結束標記不能出現(xiàn) |
允許父級 | 任何接受元數(shù)據(jù)元素的元素。如果存在itemprop，則是任何接受phrasing content的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLLinkElement |
屬性
這個元素包含全局屬性。
as
這個屬性僅在<link>元素設置了 rel="preload" 時才能使用。它指定了由<link>加載的內容的類型，這對于內容優(yōu)先化，請求匹配，應用正確的內容安全策略以及設置正確的{{ httpheader（“Accept”） }}請求頭是必需的。
charset
該屬性定義了被鏈接資源的字符編碼. 其取值參見RFC 2045, 并以空格和/或逗號分隔.。默認值為iso-8859-1。
使用注意: 該屬性已廢棄并不能再被使用. 要達到同樣的效果, 在被鏈接資源的 HTTP 頭中設置相應的 Content-Type.
crossorigin該枚舉屬性指定在加載相關圖片時是否必須使用 CORS.啟用 CORS 的圖片 可以在<canvas>元素中使用, 并避免其被污染. 可取的值如下:
"anonymous"會發(fā)起一個跨域請求(即包含Origin:HTTP 頭). 但不會發(fā)送任何認證信息 (即不發(fā)送 cookie, X.509 證書和 HTTP 基本認證信息). 如果服務器沒有給出源站憑證 (不設置 Access-Control-Allow-Origin:HTTP 頭), 這張圖片就會被污染并限制使用.
"use-credentials"會發(fā)起一個帶有認證信息 (發(fā)送 cookie, X.509 證書和 HTTP 基本認證信息) 的跨域請求 (即包含Origin:HTTP 頭). 如果服務器沒有給出源站憑證 (不設置 Access-Control-Allow-Origin: HTTP 頭), 這張圖片就會被污染并限制使用.
當不設置該屬性時, 資源將會不使用 CORS 加載 (即不發(fā)送Origin:HTTP 頭), 這將阻止其在<canvas>元素中進行使用. 若設置了非法的值, 則視為使用anonymous. 前往 CORS settings attributes獲取更多信息.
disabled該屬性被用于禁用鏈接關系. 配合腳本使用, 該屬性可以用來啟用或禁用多個樣式表鏈接.
使用注意:雖然在 HTML 標準中沒有disabled屬性, 但在HTMLLinkElementDOM 對象中確實存在 disabled 屬性.
使用 disabled 作為 HTML 屬性是非標準的, 并且只有部分瀏覽器使用 (W3 #27677).
不要使用它. 要達到類似的效果, 可以選用以下方法:
如果
disabled屬性已經(jīng)直接加入到頁面元素中, 可以改為不引入這個<link>元素;
通過腳本為該
樣式表DOM 對象設置disabled屬性.
href該屬性指定被鏈接資源的URL. URL 可以是絕對的或相對的.
hreflang該屬性指明了被鏈接資源的語言. 其意義僅供參考. 可取的值參見 BCP47. 僅當設置了href屬性時才應設置該屬性.
integrity包含行內元數(shù)據(jù), 它是一個你用瀏覽器獲取的資源文件的哈希值,以base64編碼的方式加的密,這樣用戶能用它來驗證一個獲取到的資源,在傳送時未被非法篡改, 詳情查看Subresource Integrity
media這個屬性指定了連接資源提供的媒體類型。它的值一定得是一個媒體查詢。這個屬性在允許瀏覽器為設備選擇最合適的連接樣式表時比較有作用。
使用注意：
在HTML 4中，它只能是一些由空白符分開的媒體描述文字, i.e., 媒體類型，定義以及允許這些值作為它的屬性，例如print， screen， aural， braille。HTML5擴展了它的屬性值，使其有任何類型的媒體查詢, HTML5擴展了它在HTML4中允許的屬性值。
瀏覽器不支持 CSS3 媒體查詢的話將不會很影響它識別（使用link的媒體查詢的）合適的連接，不要忘了設置回退link屬性（原文是fallback links），即那些定義在HTML4中的媒體查詢中的有限的屬性。
methods此屬性的值提供了有關可能在對象上執(zhí)行的功能的信息。這些值通常由HTTP協(xié)議在使用時給出，但它可能（出于類似于title屬性的原因）在鏈接中預先包含有用的咨詢信息。例如，瀏覽器可以根據(jù)指定的方法選擇不同的鏈接呈現(xiàn)方式; 可搜索的東西可能會得到不同的圖標，或者外部鏈接可能會呈現(xiàn)離開當前網(wǎng)站的指示。即使通過定義的瀏覽器Internet Explorer 4，也不能很好地理解和支持此屬性。
prefetch此屬性標識下一個導航可能需要的資源，并且用戶代理應檢索該資源。這使得用戶代理將來在請求資源時可以更快地響應。
referrerpolicy一個字符串，指示在獲取資源時使用哪個引用者：
'no-referrer'這意味著Referer頭部不會被發(fā)送。
'no-referrer-when-downgrade'意味著在沒有TLS (HTTPS)的情況下導航到一個源時不會發(fā)送任何引用頭。如果沒有指定任何策略，這是用戶代理的默認行為。
'origin'這意味著引用者將成為頁面的來源，即大致的 scheme，主機和端口。
'origin-when-cross-origin'這意味著導航到的其他來源將被限制在協(xié)議，主機和端口，而同一來源的導航將包括引用路徑。
'unsafe-url'這意味著引用者將包括來源和路徑（但不包括片段，密碼或用戶名）。這種情況是不安全的，因為它可以將來自TLS保護的資源的起點和路徑泄漏到不安全的起點。
rel
該屬性命名鏈接文檔與當前文檔的關系。該屬性必須是空格分隔的鏈接類型值列表。此屬性最常用的用途是指定一個指向外部樣式表的鏈接：將rel屬性設置為stylesheet，并將href屬性設置為外部樣式表的URL來格式化頁面。
網(wǎng)絡電視還支持使用rel的值next預加載下一個頁面的文件系列。rev此屬性的值顯示當前文檔與鏈接文檔的關系，如href屬性所定義。
因此，這個屬性因此定義了相比于rel屬性相反的關系。 鏈接類型的值 與rel有相似的一些值。
用法說明：該屬性在HTML5中已過時。不要使用它。要達到它的效果，請使用rel具有相反鏈接類型值的屬性，例如made應該被替換為author。此外，這個屬性并不意味著修訂版本，也不能與版本號一起使用，（不幸的是很多網(wǎng)頁都是這么做的）
sizes這個屬性定義了包含相應資源的可視化媒體中的icons的大小。它只有在rel包含icon的link類型值。它可能有如下的規(guī)則。
any，意味著這個icon能夠被縮放到任意尺寸當它是矢量形式，比如image/svg+xml。
一個由空白符分隔的尺寸列表。
每一個都以
<width in pixels>x<height in pixels>或<width in pixels>X<height in pixels>給出。尺寸列表中的每一個尺寸都必須包含在資源里。
使用說明：
大多數(shù)圖標格式只能存儲一個圖標; 因此大部分時間
sizes只包含一個條目。MS的ICO格式，以及蘋果的ICNS。ICO更無處不在，你應該使用它。
蘋果的iOS不支持此屬性，因此蘋果的iPhone和iPad上使用特殊的，非標準的鏈接類型值來定義圖標將被用作網(wǎng)絡剪輯或啟動占位符：
apple-touch-icon和apple-touch-startup-icon。
target定義具有已定義鏈接關系的框架或窗口名稱，或將顯示任何鏈接資源的呈現(xiàn)。
title
該title屬性在<link>元素上有特殊的語義。當用于<link rel="stylesheet">它時，它定義了一個首選或另一個樣式表。錯誤地使用它可能會導致樣式表被忽略。
type該屬性用于定義鏈接到的內容的類型。該屬性的值應該是MIME類型，如text / html，text / css等等。此屬性的常用用法是定義鏈接的樣式表的類型，最常見的當前值是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ā)一次樣式表和它的所有導入的內容已經(jīng)被加載和分析，并立即開始被應用到內容的樣式之前。
預加載示例
您可以在rel =“preload”中預加載內容中找到一些<link rel =“preload”>示例。
注意
<link>標簽可以出現(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) |