<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 上查看此页面 • 报告此内容问题