<link>: 外部資源連結元素

基線廣泛可用

此功能已久經考驗，可在許多裝置和瀏覽器版本上執行。它從 2015 年 7 月.

**<link>** HTML 元素指定當前文件與外部資源之間的關係。此元素最常用於連結到樣式表，但也用於建立網站圖示（包括“favicon”樣式圖示和移動裝置上的主螢幕和應用程式圖示）等。

試試看

要連結外部樣式表，您需要在 <head> 中包含一個 <link> 元素，如下所示：

html

<link href="main.css" rel="stylesheet" />

這個簡單的示例在 href 屬性中提供了樣式表的路徑，並在 rel 屬性中使用 stylesheet 作為值。rel 代表“關係”，是 <link> 元素的關鍵特性之一——該值表示所連結的專案與包含文件之間的關係。

還有許多其他常見的型別，例如，指向網站 favicon 的連結：

html

<link rel="icon" href="favicon.ico" />

還有許多其他圖示 rel 值，主要用於指示用於各種移動平臺的特殊圖示型別，例如：

html

<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

sizes 屬性表示圖示大小，而 type 屬性包含所連結資源的 MIME 型別。這些提供了有用的提示，讓瀏覽器可以選擇最合適的可用圖示。

您也可以在 media 屬性中提供媒體型別或查詢；只有在媒體條件為真的情況下才會載入此資源。例如：

html

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

<link> 元素中也添加了一些有趣的新效能和安全特性。以這個示例為例：

html

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

rel 值為 preload 表示瀏覽器應該預載入此資源（有關更多詳細資訊，請參閱 rel="preload"），as 屬性表示正在獲取的特定內容類別。crossorigin 屬性表示是否應該使用 CORS 請求獲取此資源。

其他使用說明

<link> 元素可以出現在 <head> 或 <body> 元素中，這取決於它是否具有連結型別為 body-ok。例如，stylesheet 連結型別為 body-ok，因此 <link rel="stylesheet"> 允許出現在 body 中。然而，這不是一個好的實踐；將 <link> 元素與主體內容分離，並將它們放在 <head> 中更有意義。
當使用 <link> 為網站建立 favicon 且您的網站使用內容安全策略 (CSP) 來增強其安全性時，該策略將應用於 favicon。如果遇到 favicon 無法載入的問題，請驗證 Content-Security-Policy 標頭的 img-src 指令是否阻止對其進行訪問。
HTML 和 XHTML 規範定義了 <link> 元素的事件處理程式，但它們的使用方式尚不清楚。
在 XHTML 1.0 中，<link> 等空元素需要字尾斜槓：<link />。
WebTV 支援使用 next 作為 rel 的值來預載入文件系列中的下一頁。

屬性

此元素包含全域性屬性。

as

當在 <link> 元素上設定 rel="preload" 時，此屬性是必需的；當設定 rel="modulepreload" 時，它是可選的；在其他情況下不應使用它。它指定了 <link> 載入的內容型別，這對於請求匹配、應用正確的內容安全策略以及設定正確的 Accept 請求頭是必需的。

此外，rel="preload" 使用它作為請求優先順序訊號。下表列出了此屬性的有效值及其適用的元素或資源。

值	適用範圍
audio	`<audio>` 元素
document	`<iframe>` 和 `<frame>` 元素
embed	`<embed>` 元素
fetch	fetch，XHR 注意：此值還要求 `<link>` 包含 crossorigin 屬性，請參閱 CORS 啟用的獲取。
font	CSS @font-face 注意：此值還要求 `<link>` 包含 crossorigin 屬性，請參閱 CORS 啟用的獲取。
image	帶有 srcset 或 imageset 屬性的 `<img>` 和 `<picture>` 元素，SVG `<image>` 元素，CSS `*-image` 規則
object	`<object>` 元素
script	`<script>` 元素，Worker `importScripts`
style	`<link rel=stylesheet>` 元素，CSS `@import`
track	`<track>` 元素
video	`<video>` 元素
worker	Worker，SharedWorker

blocking 實驗性

此屬性明確指示某些操作應在獲取外部資源時被阻塞。它只能在 rel 屬性包含 expect 或 stylesheet 關鍵字時使用。要阻塞的操作必須是下面列出的阻塞令牌的空格分隔列表。

render：螢幕上的內容渲染被阻塞。

crossorigin

此列舉屬性指示在獲取資源時是否必須使用 CORS。CORS 啟用的影像可以重新使用在 <canvas> 元素中，而不會被汙染。允許的值為

anonymous: 執行跨域請求（即帶有 Origin HTTP 頭），但不傳送任何憑據（即沒有 cookie、X.509 證書或 HTTP 基本身份驗證）。如果伺服器沒有向源站點提供憑據（透過不設定 Access-Control-Allow-Origin HTTP 頭），則資源將被汙染，其使用將受到限制。
use-credentials: 執行跨域請求（即帶有 Origin HTTP 頭），併發送憑據（即執行 cookie、證書和/或 HTTP 基本身份驗證）。如果伺服器沒有透過 Access-Control-Allow-Credentials HTTP 頭向源站點提供憑據，則資源將被汙染，其使用將受到限制。

如果屬性不存在，則在沒有 CORS 請求的情況下獲取資源（即不傳送 Origin HTTP 頭），從而阻止其非汙染使用。如果無效，則將其視為使用列舉關鍵字 anonymous。有關更多資訊，請參閱 CORS 設定屬性。

disabled

僅對於 rel="stylesheet"，disabled 布林屬性指示是否應該載入並應用所描述的樣式表到文件。如果在 HTML 載入時指定了 disabled，則在頁面載入期間不會載入樣式表。相反，樣式表將在需要時按需載入，即在 disabled 屬性更改為 false 或刪除時。

在 DOM 中設定 disabled 屬性會導致樣式表從文件的 Document.styleSheets 列表中刪除。

fetchpriority

提供獲取預載入資源時使用的相對優先順序的提示。允許的值

high: 與其他相同型別資源相比，它表示高優先順序獲取。
low: 與其他相同型別資源相比，它表示低優先順序獲取。
auto: 預設值：表示相對於其他相同型別資源的自動確定獲取優先順序。

href

此屬性指定連結資源的 URL。URL 可以是絕對的或相對的。

hreflang

此屬性指示連結資源的語言。它純粹是建議性的。允許的值由 RFC 5646：識別語言的標籤（也稱為 BCP 47）指定。只有當 href 屬性存在時才使用此屬性。

imagesizes

僅對於 rel="preload" 和 as="image"，imagesizes 屬性是一個尺寸屬性，它指示預載入由 img 元素使用的適當資源，其 srcset 和 sizes 屬性具有相應的值。

imagesrcset

僅對於 rel="preload" 和 as="image"，imagesrcset 屬性是一個 sourceset 屬性，它指示預載入由 img 元素使用的適當資源，其 srcset 和 sizes 屬性具有相應的值。

integrity

包含內聯元資料 - 資源（檔案）的 base64 編碼的加密雜湊，您告訴瀏覽器獲取它。瀏覽器可以使用它來驗證獲取的資源是否已在沒有意外操作的情況下傳遞。只有在 rel 屬性被指定為 stylesheet、preload 或 modulepreload 時，才必須指定該屬性。請參閱子資源完整性。

media

此屬性指定連結資源適用的媒體。它的值必須是媒體型別 / 媒體查詢。此屬性在連結到外部樣式表時特別有用 - 它允許使用者代理為其執行的裝置選擇最適合的樣式表。

referrerpolicy

一個字串，指示在獲取資源時使用哪個引用者。

no-referrer 表示不會發送 Referer 頭。
no-referrer-when-downgrade 表示在導航到沒有 TLS（HTTPS）的源時，不會發送任何 Referer 頭。這是使用者代理的預設行為，如果未指定其他策略。
origin 表示引用者將是頁面的源，它大致是方案、主機和埠。
origin-when-cross-origin 表示導航到其他源將被限制為方案、主機和埠，而導航到同一源將包含引用者的路徑。
unsafe-url 表示引用者將包含源和路徑（但不包含片段、密碼或使用者名稱）。這種情況不安全，因為它可能會將源和路徑從 TLS 保護的資源洩漏到不安全的源。

rel

此屬性命名連結文件與當前文件之間的關係。該屬性必須是連結型別值的空格分隔列表。

sizes

此屬性定義了資源中包含的視覺媒體的圖示的大小。只有在 rel 包含 icon 值或非標準型別（如 Apple 的 apple-touch-icon）時，才必須存在它。它可能具有以下值

any，表示圖示可以按任何大小進行縮放，因為它採用向量格式，例如 image/svg+xml。
一個空格分隔的尺寸列表，每個尺寸的格式為 <寬度（畫素）>x<高度（畫素）> 或 <寬度（畫素）>X<高度（畫素）>。這些尺寸中的每一個都必須包含在資源中。

注意： 大多數圖示格式只能儲存一個單個圖示；因此，大多數情況下，sizes 屬性只包含一個條目。Microsoft 的 ICO 格式和 Apple 的 ICNS 格式可以在單個檔案中儲存多個圖示大小。ICO 具有更好的瀏覽器支援，因此如果您關心跨瀏覽器支援，則應該使用此格式。

title

title 屬性在 <link> 元素上具有特殊的語義。當在 <link rel="stylesheet"> 上使用時，它定義了預設或備用樣式表。

type

此屬性用於定義連結內容的型別。屬性的值應為 MIME 型別，例如 text/html、text/css 等。此屬性的常見用法是定義被引用的樣式表的型別（例如 text/css），但鑑於 CSS 是 web 上唯一使用的樣式表語言，因此不僅可以省略 type 屬性，而且現在實際上推薦這樣做。它也用於 rel="preload" 連結型別，以確保瀏覽器只下載它支援的檔案型別。

非標準屬性

target 已棄用: 定義具有已定義連結關係或將顯示任何連結資源的呈現結果的框架或視窗名稱。

已過時的屬性

charset 已棄用: 此屬性定義連結資源的字元編碼。該值是空格和/或逗號分隔的字元集列表，如 RFC 2045 中所定義。預設值為 iso-8859-1。

注意： 要產生與此已過時屬性相同的效果，請使用連結資源上的 Content-Type HTTP 頭。
rev 已棄用: 此屬性的值顯示當前文件與連結文件之間的關係，如 href 屬性所定義。因此，該屬性定義了與 rel 屬性的值相比的逆關係。該屬性的連結型別值與 rel 的可能值類似。

注意： 您應該使用帶有相反連結型別值的 rel 屬性，而不是 rev。例如，要建立 made 的反向連結，請指定 author。此外，此屬性不代表“修訂版”，並且不得與版本號一起使用，即使許多網站以這種方式錯誤使用它。

示例

包含樣式表

要將樣式表包含在頁面中，請使用以下語法

html

<link href="style.css" rel="stylesheet" />

提供備用樣式表

您還可以指定備用樣式表。

使用者可以透過從 檢視 > 頁面樣式 選單中選擇它來選擇使用哪個樣式表。這為使用者提供了一種檢視頁面多個版本的方法。

html

<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" />

為不同的使用環境提供圖示

您可以在同一頁面上包含指向多個圖示的連結，瀏覽器將使用 rel 和 sizes 值作為提示來選擇最適合其特定環境的圖示。

html

<!-- iPad Pro with high-resolution Retina display: -->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />

有關為 Apple 圖示選擇哪些 sizes 的資訊，請參閱 Apple 關於配置 Web 應用程式的文件以及引用的 Apple 人機介面指南。通常，提供一個大影像（例如 192x192）並讓瀏覽器根據需要將其縮小就足夠了，但您可能希望為不同的尺寸提供不同細節級別的影像，如 Apple 設計指南推薦的那樣。為較低解析度提供較小的圖示也有助於節省頻寬。

可能根本不需要提供 <link> 元素。例如，瀏覽器會自動從網站根目錄請求 /favicon.ico，Apple 也會自動請求 /apple-touch-icon-[size].png、/apple-touch-icon.png 等。但是，提供顯式連結可以保護您免受這些約定的更改。

使用媒體查詢有條件地載入資源

您可以在 media 屬性中提供媒體型別或查詢；只有當媒體條件為真時，才會載入此資源。例如

html

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
  href="desktop.css"
  rel="stylesheet"
  media="screen and (min-width: 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (min-resolution: 300dpi)" />

樣式表載入事件

您可以透過觀察 load 事件是否在其上觸發來確定何時載入了樣式表；類似地，您可以透過觀察 error 事件是否觸發來檢測在處理樣式表時是否發生了錯誤

html

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

<script>
  const stylesheet = document.getElementById("my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

注意： load 事件會在樣式表及其所有匯入內容載入並解析後立即觸發，並在樣式開始應用到內容之前立即觸發。

預載入示例

您可以在使用 rel="preload" 預載入內容中找到許多 <link rel="preload"> 示例。

阻塞渲染，直到資源被獲取

您可以在 blocking 屬性中包含 render 令牌；頁面的渲染將被阻塞，直到資源被獲取。例如

html

<link blocking="render" rel="stylesheet" href="example.css" crossorigin />

技術概述

內容類別	元資料內容。如果存在 `itemprop`：流動內容和短語內容。
允許的內容	無；它是一個空元素。
標籤省略	必須有起始標籤，並且不得有結束標籤。
允許的父元素	任何接受元資料元素的元素。如果存在 itemprop：任何接受短語內容的元素。
隱式 ARIA 角色	`link` 與 `href` 屬性
允許的 ARIA 角色	不允許任何 `role`
DOM 介面	`HTMLLinkElement`

規範

規範
HTML 標準 # the-link-element

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱

Link HTTP 頭