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