<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 头