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

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

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

試一試

<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" />

<p>This text will be red as defined in the external stylesheet.</p>
<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

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

html

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

此示例透過 href 屬性提供樣式表的路徑，並透過 rel 屬性提供 stylesheet 值。rel 代表“relationship”（關係），它是 <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 (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> 元素與 body 內容分開，將它們放在 <head> 中更有意義。
當使用 <link> 為網站建立 favicon，並且您的網站使用內容安全策略（CSP）來增強其安全性時，該策略適用於 favicon。如果您遇到 favicon 未載入的問題，請驗證 Content-Security-Policy 頭的 img-src 指令沒有阻止對其的訪問。
HTML 和 XHTML 規範為 <link> 元素定義了事件處理程式，但它們如何使用尚不清楚。
在 XHTML 1.0 下，空元素，例如 <link>，需要一個尾部斜槓：<link />。
WebTV 支援對 rel 使用 next 值來預載入文件系列中的下一頁。

值	適用於
audio	`<audio>` 元素
document	`<iframe>` 和 `<frame>` 元素
嵌入	`<embed>` 元素
fetch	fetch，XHR 注意：此值還需要 `<link>` 包含 crossorigin 屬性，請參閱 CORS 啟用的 fetch。
font	CSS @font-face 注意：此值還需要 `<link>` 包含 crossorigin 屬性，請參閱 CORS 啟用的 fetch。
圖片	帶有 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

此屬性明確指示應在滿足特定條件之前阻止某些操作。它必須僅在 rel 屬性包含 expect 或 stylesheet 關鍵字時使用。對於 rel="expect"，它表示應在解析特定 DOM 節點之前阻止操作。對於 rel="stylesheet"，它表示應在外部樣式表及其關鍵子資源被獲取並應用於文件之前阻止操作。要被阻止的操作必須是下面列出的阻塞令牌的空格分隔列表。目前只有一個令牌：

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

注意：只有文件 <head> 中的 link 元素才可能阻止渲染。預設情況下，瀏覽器在解析時發現 <head> 中帶有 rel="stylesheet" 的 link 元素會阻止渲染。如果此類 link 元素是透過指令碼動態新增的，您還必須設定 blocking = "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: 不對獲取優先順序設定偏好。這是預設值。如果未設定值或設定了無效值，則使用此值。

有關更多資訊，請參閱 HTMLLinkElement.fetchPriority。

href

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

hreflang

此屬性指示連結資源的語言。它純粹是建議性的。值應為有效的 BCP 47 語言標籤。僅當存在 href 屬性時才使用此屬性。

imagesizes

僅適用於 rel="preload" 和 as="image"，imagesizes 屬性具有與 sizes 屬性類似的語法和語義，用於指示預載入具有相應 srcset 和 sizes 屬性值的 img 元素使用的適當資源。

imagesrcset

僅適用於 rel="preload" 和 as="image"，imagesrcset 屬性具有與 srcset 屬性類似的語法和語義，用於指示預載入具有相應 srcset 和 sizes 屬性值的 img 元素使用的適當資源。

integrity

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

媒體

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

referrerpolicy

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

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

rel

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

sizes

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

any，表示圖示可以縮放到任何大小，因為它採用向量格式，如 image/svg+xml。
空格分隔的大小列表，每個大小的格式為 <width in pixels>x<height in pixels> 或 <width in pixels>X<height in pixels>。這些大小中的每一個都必須包含在資源中。

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

title

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

type

此屬性用於定義連結內容的型別。屬性值應為 MIME 型別，例如 text/html、text/css 等。此屬性的常見用途是定義所引用樣式表的型別（例如 text/css），但鑑於 CSS 是網路上唯一使用的樣式表語言，不僅可以省略 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 (width >= 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (resolution >= 300dpi)" />

樣式表載入事件

您可以透過監聽 load 事件來確定樣式表何時載入；同樣，您可以透過監聽 error 事件來檢測處理樣式表時是否發生錯誤：

html

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

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!");
};

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

預載入示例

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

在獲取資源之前阻止渲染

您可以在 blocking 屬性中包含 render 令牌；頁面渲染將被阻止，直到資源及其關鍵子資源被獲取並應用於文件。例如：

html

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

技術摘要

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

規範

規範
HTML # the-link-element

瀏覽器相容性

另見

Link HTTP 頭

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 9 月 24 日修改。

在 GitHub 上檢視此頁面 • 報告此內容問題