HTML <link> 元素 - 外部资源链接元素
HTML <link> 元素指定当前文档和外部资源之间的关系。该元素的可能用途包括定义用于导航的关系框架。该元素最常用于链接到样式表。
链接到外部样式文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<link rel="stylesheet" type="text/css" href="/examples/styles.css">
</head>
<body>
<h1>我是通过样式文件 styles.css 渲染后显示的。</h1>
<p>我也是。</p>
</body>
</html>
截图
特性
| 内容类别 |
元数据内容。如果有 itemprop 属性：流式内容 和 短语内容
|
|---|---|
| 允许的内容 | 无，它是一个空元素。 |
| 标签省略 | 由于它是空元素，所以必须有开始标签，并且不能有结束标签。 |
| 允许的父元素 | 任何接受元数据元素的元素。如果有 itemprop 属性：任何接受的短语内容元素。 |
| 允许的 ARIA 角色 | 无 |
| DOM 接口 | HTMLLinkElement |
属性
该元素包含了全局属性。
as
该属性仅在 <link> 元素设置了 rel="preload" 才使用。它指定了由 <link> 加载的内容的类型，这对于内容优先化，请求匹配，应用正确的内容安全策略，设置正确 Accept 请求标头是是必需的。
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 头），从而防止其污染 <canvas> 元素的使用。如果属性的值是无效的，则当做 anonymous 来处理。更多信息，请查看 CORS 设置的属性 。
disabled
非标准
该属性用于禁用链接的效果。结合脚本，该属性可用于启用和禁用各种样式表效果。
注意： 虽然 HTML 标准中没有
disabled属性，但是HTMLLinkElementDOM 对象上有disabled属性。使用
disabled作为 HTML 属性是非标准的，并且只被某些浏览器使用（W3＃27677）。不要使用它。要实现类似的效果，请使用以下其中一项技术：
- 如果页面上该元素已经设置了
disable属性，则改为移除该元素。- 通过脚本设置
StyleSheetDOM 对象的disabled属性。
href
该属性指定链接资源的 URL。网址可能是绝对或相对路径的。
hreflang
该属性指示链接资源的语言。其意义仅供参考。允许的值由 BCP47 确定。仅当存在 href 属性时才可以使用该属性。
integrity
实验性
包含内嵌元数据，一个 base64 编码的加密哈希，它指向浏览器提取的资源（文件），用户代理可以使用它来验证提取的资源在传送时未被非法篡改。请参阅子资源完整性。
media
该属性指定链接资源适用的媒体。它的值必须是一个媒体查询。该属性允许用户代理为其所运行的设备选择最适合的外部样式表。
使用说明：
methods
非标准
该属性的值提供了有关可能在对象上执行的功能的信息。这些值通常由 HTTP 协议在使用时给出，但它可能（出于与 title 属性类似的原因）有助于事先在链接中包含咨询信息。例如，浏览器可能会根据指定的方法选择不同的链接呈现方式；可搜索的内容可能会显示不同的图标，或者外部链接可能会显示离开当前网站的提示。该属性不是很好理解也不受支持，即使是在定义它的 Internet Explorer 4 。请参阅方法属性（MSDN）。
prefetch
非标准
该属性标识下一个请求可能需要的资源，并且用户代理应该接收它。这允许用户代理在未来请求资源时能够更快地响应。
referrerpolicy
实验性
一个字符串，指示在访问 URL 时使用哪种 Referrer 头：
-
no-referrer:将不发送Referer头。 -
no-referrer-when-downgrade:如果图片的源站不是 TLS（HTTPS）时，不会发送Referer头。如果没有指定任何策略，则这是用户代理的默认行为。 -
origin:Referer头会包括页面的协议、主机和端口。 -
origin-when-cross-origin:导航到其他源时，将限制所包含数据只有协议，主机和端口，而导航到相同的源将包含来源者的完整路径。
同时从相同的起点导航将包括引荐来源的完整路径。 -
unsafe-url:Referer头将包含源站和路径，但不包括片段（fragment），密码或用户名。这种情况是不安全的，因为它可能会将受 TLS 保护的资源中的源和路径，泄露到不安全的源。
rel
该属性命名链接文档与当前文档的关系。该属性必须是链接类型值的空格分隔列表。该属性最常用的用途是指定一个指向外部样式表的链接：rel 属性设置为 stylesheet，href 属性设置为页面的外部样式表的 URL。 WebTV 还支持使用 rel 值来预加载文档系列中的下一页。
sizes
该属性定义资源中包含的可视媒体的图标大小。只有当 rel 包含 icon 链接类型值时，它必须存在。它可能有以下值：
-
any，这意味着图标可以缩放为任意大小，因为它是矢量格式，比如image/svg+xml。 - 以空格分隔的大小列表，每种格式的格式为：
<宽度的像素>x<高度的像素>或<宽度的像素>X<高度的像素>。每种尺寸都必须包含在资源中。
使用说明：
target
非标准
定义具有已定义链接关系或将显示任何链接资源的呈现的框架或窗口名称。
title
title 属性在 <link> 元素上有特殊的语义。在 <link rel="stylesheet"> 上使用时，它定义了首选样式表或替代样式表。错误地使用它可能导致样式表被忽略。
type
该属性用于定义链接到的内容的类型。该属性的值应该是一个 MIME 类型，如 text/html，text/css 等等。该属性的常用用法是定义链接的样式表的类型，最常用的当前值是 text/css，它表示级联样式表格式。它也用于 rel="preload" 链接类型，以确保浏览器只下载它支持的文件类型。
过时的属性
charset
已过时 HTML5
该属性定义链接资源的字符编码。该值是 RFC 2045 中定义的空格和/或逗号分隔的字符集列表。默认值是 iso-8859-1 。
使用说明： 该属性已过时，必须不能再被使用。要实现其效果，请在链接资源上使用
Content-Type”HTTP 头。
rev
已过时 HTML5
该属性的值显示当前文档与链接文档的关系，如 href 属性所定义。该属性因此定义与 rel 属性的值相比的反向关系。链接类型值 与 rel 有一些相同的值。
使用说明： 该属性在 HTML5 中已过时。不要使用它。要实现其效果，请使用具有相反链接类型值 的
rel属性。例如made应该由author取代。此外，该属性并不意味着_修订版本（revision）_，不得与版本号一起使用，不幸的是很多网页都是这么做的。
说明：目前 W3C HTML 5.2 规范指出
rev不再过时，而 WHATWG 现行标准仍然将其标记为过时。在解决这个差异之前，你应该仍然认为它已经过时了。
事件属性
<link> 元素支持所有 HTML 事件属性。
更多实例
使用样式表
要在页面中使用样式表，请使用以下语法：
<link href="style.css" rel="stylesheet">
提供备选样式表
您还可以指定备选样式表。用户可以从视图 > 页面样式菜单中选择要使用的样式表。这为用户提供了查看页面的多个版本的方法。
<link href="default.css" rel="stylesheet" title="默认样式">
<link href="fancy.css" rel="alternate stylesheet" title="奇特">
<link href="basic.css" rel="alternate stylesheet" title="基本">
样式表的加载事件
您可以通过监听 load 事件知道什么时候样式表加载完毕；同样，您可以通过监听 error 事件来检测加载样式表时是否发生了错误：
<script>
function sheetLoaded() {
// 该样式表已经加载完成了，可以做一些有趣的事情
}
function sheetError() {
console.log("加载样式表时发生错误！");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()"
onerror="sheetError()">
注意： 一旦样式表及其所有导入的内容已被加载和解析，并且在样式开始应用于内容之前，将触发
load事件。
注意
- 根据链接类型是否为 body-ok，
<link>标签可以出现在 head 元素或 body 元素（或两者）中。例如，stylesheet链接类型是 body-ok，因此<link rel="stylesheet">允许出现在 body 中。 - HTML 3.2 只为
<link>元素定义了 href，rel，rev 和 title 属性。 - HTML 2 为
<link>元素定义了 href，methods，rel，rev，title 和 urn 属性。method 和 urn 属性稍后从规范中删除。 - HTML 和 XHTML 规范为
<link>元素定义事件处理程序，但不清楚它们将如何使用。 - 在 XHTML 1.0 下，像
<link>这样的空元素需要有尾部的斜线：<link />。
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| Preload | 工作草案 | 定义了 <link rel="preload">，以及 as 属性。 |
Subresource Integrity<script> 的定义 |
推荐 | 增加了 integrity 属性。 |
HTML Living Standard<link> 的定义 |
现行的标准 | 自从最新的快照以来没有变化 |
HTML5<link> 的定义 |
推荐 | 增加了 crossorigin 和 sizes 属性；将 media 的值扩展到任何媒体查询；为 media 增加了许多新的值。 |
HTML 4.01 Specification<link> 的定义 |
推荐 | - |
| Resource Hints prefetch 的定义 |
工作草案 | 增加了 dns-prefetch，preconnect，prefetch 和 prerender。 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
charset |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
crossorigin |
25.0 | 不支持 | 18.0 | 不支持 | 15.0 | 未知 |
disabled |
不支持 | 支持 | 不支持 | 支持 | 不支持 | 不支持 |
href |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
hreflang |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
integrity |
45.0 | 不支持 | 未知 | 不支持 | 未知 | 不支持 |
media |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
methods |
不支持 | 未知 | 不支持 | 4.0 | 不支持 | 不支持 |
prefetch |
56.0 | 未知 | 未知 | 不支持 | 43.0 | 未知 |
referrerpolicy |
58.0 | 不支持 | 50.0 | 未知 | 未知 | 未知 |
rel |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
rel: 替代样式表。 |
未知 | 未知 | 3.0 | 未知 | 支持 | 未知 |
rel.prefetch |
未知 | 未知 | 未知 | 未知 | 未知 | 未知 |
rel.prerender |
未知 | 未知 | 未知 | 未知 | 未知 | 未知 |
rel.preconnect |
46.0 | 不支持 | 391 | 不支持 | 未知 | 不支持 |
rel.dns-prefetch |
46.0 | 未知 | 3.0 | 未知 | 未知 | 未知 |
rel.preload |
50.0 | 未知 | 未知 | 未知 | 未知 | 未知 |
rel.noopener |
49.0 | 未知 | 52.0 | 未知 | 36.0 | 未知 |
rel.manifest |
不支持 | 未知 | 未知 | 未知 | 未知 | 未知 |
rev |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
sizes |
不支持 | 不支持 | 不支持2 | 不支持 | 不支持 | 不支持 |
target |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
title |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
type |
1.0 | 支持 | 1.0 | 支持 | 支持 | 支持 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
charset |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
crossorigin |
未知 | 支持 | 不支持 | 18.0 | 不支持 | 未知 | 未知 |
disabled |
不支持 | 不支持 | 支持 | 不支持 | 未知 | 不支持 | 不支持 |
href |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
hreflang |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
integrity |
45.0 | 45.0 | 不支持 | 未知 | 不支持 | 未知 | 不支持 |
media |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
methods |
不支持 | 不支持 | 未知 | 不支持 | 4.0 | 不支持 | 不支持 |
prefetch |
56.0 | 56.0 | 未知 | 未知 | 不支持 | 43.0 | 未知 |
referrerpolicy |
58.0 | 58.0 | 不支持 | 50.0 | 未知 | 未知 | 未知 |
rel |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
rel: 替代样式表。 |
未知 | 未知 | 未知 | 4.0 | 未知 | 未知 | 未知 |
rel.prefetch |
未知 | 未知 | 未知 | 未知 | 未知 | 未知 | 未知 |
rel.prerender |
未知 | 未知 | 未知 | 未知 | 未知 | 未知 | 未知 |
rel.preconnect |
46.0 | 42.0 | 不支持 | 39.01 | 不支持 | 未知 | 不支持 |
rel.dns-prefetch |
46.0 | 支持 | 未知 | 1.0 | 未知 | 未知 | 未知 |
rel.preload |
50.0 | 50.0 | 未知 | 未知 | 未知 | 未知 | 未知 |
rel.noopener |
49.0 | 49.0 | 未知 | 52.0 | 未知 | 32.0 | 未知 |
rel.manifest |
39.0 | 39.09 | 未知 | 未知 | 未知 | 未知 | 未知 |
rev |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
sizes |
不支持 | 不支持 | 不支持 | 不支持2 | 不支持 | 不支持 | 不支持 |
target |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
title |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
type |
支持 | 支持 | 支持 | 1.0 | 支持 | 支持 | 支持 |
1. 在 Firefox 41 之前，它不遵守 crossorigin 属性。
2. 查看 bug 441770.
相关链接
- Ryan Grove 的
<script>和<link>节点事件兼容性图表 - HTML 教程：HTML 样式
- HTML DOM 参考手册：Link 对象