title | slug | l10n | ||
---|---|---|---|---|
<link>:外部资源链接元素 |
Web/HTML/Element/link |
|
{{HTMLSidebar}}
HTML <link>
元素规定了当前文档与某个外部资源的关系。该元素最常用于链接{{Glossary("CSS", "样式表")}},此外也可以被用来创建站点图标(比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
{{EmbedInteractiveExample("pages/tabbed/link.html", "tabbed-shorter")}}
要链接一个外部的样式表,你需要像这样在你的 {{HTMLElement("head")}} 中包含一个 <link>
元素:
<link href="main.css" rel="stylesheet" />
在这个简单的示例中,使用了 href
属性设置外部资源的路径,并设置 rel
属性的值为 stylesheet
。rel
表示“关系”,它可能是 <link>
元素其中一个关键的特性——属性值表示 <link>
项的链接方式与包含它的文档之间的关系。
这里有一些你经常遇到的其他类型。例如,这里是一个网站图标的链接:
<link rel="icon" href="favicon.ico" />
还有一些其他的与图标相关的 rel
值,主要用于表示不同移动平台上特殊的图标类型,例如:
<link
rel="apple-touch-icon"
sizes="114x114"
href="apple-icon-114.png"
type="image/png" />
sizes
属性表示图标大小,type
属性包含了链接资源的 MIME 类型。这些属性为浏览器选择最合适的图标提供了有用的提示。
你也可以在 media
属性中提供媒体类型或查询;这种资源将只在满足媒体条件的情况下才会加载。例如:
<link href="print.css" rel="stylesheet" media="print" />
<link
href="mobile.css"
rel="stylesheet"
media="screen and (max-width: 600px)" />
<link>
也加入了一些新的有意思的性能和安全特性。举例如下:
<link
rel="preload"
href="myFont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous" />
将 rel
设定为 preload
,表示浏览器应该预加载该资源(參见 rel="preload"
以获得详细信息)。as
属性表示获取特定的内容类。crossorigin
属性表示该资源是否应该使用一个 {{Glossary("CORS")}} 请求来获取。
其他使用说明:
<link>
元素可以出现在 {{HTMLElement("head")}} 元素或 {{HTMLElement("body")}} 元素中,具体取决于它是否有一个 body-ok 的链接类型。例如,stylesheet
链接类型是 body-ok 的,因此<link rel="stylesheet">
允许出现在 body 中。然而,这不是一种好的可遵循的实践方式;更合理的方式是,将你的<link>
元素从你的 body 内容中分离出来,将其放在<head>
中。- 当使用
<link>
为网站创建一个 favicon 时,你的网站使用内容安全策略(CSP)来增强它的安全性,这种策略适用于 favicon。如果你遇到 favicon 未加载的问题,验证 {{HTTPHeader("Content-Security-Policy")}} 标头的img-src
指令没有在阻止对它的访问。 - HTML 和 XHTML 规范为
<link>
元素定义了一些事件处理器,但是对于它们的使用方法不明确。 - 在 XHTML 1.0 下,像
<link>
这样的{{glossary("void element", "空元素")}}需要一个尾斜杠:<link />
。 - WebTV 支持
rel
使用next
值,用于在一个文档系列中预加载下一页。
这个元素包含使用全局属性。
-
as
-
: 当在
<link>
元素上设置了rel="preload"
时,该属性为必填属性;当设置了rel="modulepreload"
时,该属性为可选属性,否则不应使用。它指定了<link>
正在加载的内容类型,这对于匹配请求、应用正确的内容安全策略和设置正确的 {{HTTPHeader("Accept")}} 请求标头都是必要的。此外,rel="preload"
将其用作请求优先级的信号。下表列出了该属性的有效值及其适用的元素或资源。值 可应用于 audio <audio>
元素document <iframe>
和<frame>
元素embed <embed>
元素fetch fetch、XHR
备注: 此值需要
<link>
包含跨源属性,参见启用 CORS 的获取请求。font CSS @font-face
备注: 此值需要
<link>
包含跨源属性,参见启用 CORS 的获取请求。image 含有 srcset 或 imageset 属性的 <img>
和<picture>
元素、SVG<image>
元素、CSS*-image
规则object <object>
元素script <script>
元素、WorkerimportScripts
style <link rel=stylesheet>
元素、CSS@import
track <track>
元素video <video>
元素worker Worker、SharedWorker
-
-
blocking
{{Experimental_Inline}}- : 该属性明确表示在获取外部资源时应阻止某些操作。要阻止的操作必须是下面列出的以空格分隔的阻止属性列表。
render
:屏幕上的内容渲染被阻止。
- : 该属性明确表示在获取外部资源时应阻止某些操作。要阻止的操作必须是下面列出的以空格分隔的阻止属性列表。
-
crossorigin
-
: 该枚举属性表示在获取资源时是否必须使用 {{Glossary("CORS")}}。启用 CORS 的图像可以在 {{HTMLElement("canvas")}} 元素中重复使用,而不会受到污染。允许的值如下:
anonymous
- : 会发起一个跨源请求(即包含
Origin
HTTP 标头),但不会发送任何认证信息(即不发送 cookie、X.509 证书和 HTTP 基本认证信息)。如果服务器没有给出源站凭证(不设置Access-Control-Allow-Origin
HTTP 标头),资源就会被污染并限制使用。
- : 会发起一个跨源请求(即包含
use-credentials
- : 会发起一个带有认证信息(进行 cookie、X.509 证书和/或 HTTP 基本认证)的跨域请求(即包含
Origin
HTTP 标头)。如果服务器没有给出源站凭证(不设置Access-Control-Allow-Origin
HTTP 标头),资源就会被污染并限制使用。 当不设置此属性时,资源将会不使用 {{Glossary("CORS")}} 加载(即不发送Origin
HTTP 标头),从而无法使用该资源。若设置了非法的值,则视为使用 anonymous。前往 CORS 设置属性获取更多信息。
- : 会发起一个带有认证信息(进行 cookie、X.509 证书和/或 HTTP 基本认证)的跨域请求(即包含
-
-
disabled
{{Non-standard_Inline}}-
: 仅对于
rel="stylesheet"
而言,disabled
布尔属性表示是否应加载所述样式表并将其应用于文档。如果在加载 HTML 时指定了disabled
,则在页面加载过程中不会加载样式表。相反,如果将disabled
属性更改为false
或删除该属性,将按需加载样式表。在 DOM 中设置
disabled
属性会导致样式表从文档的 {{domxref("Document.styleSheets")}} 列表中删除。
-
-
fetchpriority
-
: 为获取预加载资源时使用的相对优先级提供提示。允许的值:
high
- : 表示相对于其他同类型资源,以高优先级获取。
low
- : 表示相对于其他同类型资源,以低优先级获取。
auto
- : 默认值:表示自动确定相对于其他同类型资源的取值优先级。
-
-
href
- : 此属性指定被链接资源的 {{glossary("URL")}}。URL 可以是绝对的,也可以是相对的。
-
hreflang
- : 此属性指明了被链接资源的语言。其意义仅供参考。可取的值参见 {{RFC(5646, "语言识别标签(又称 BCP 47)")}}。仅当设置了
href
属性时才应设置该属性。
- : 此属性指明了被链接资源的语言。其意义仅供参考。可取的值参见 {{RFC(5646, "语言识别标签(又称 BCP 47)")}}。仅当设置了
-
imagesizes
- : 仅适用于
rel="preload"
和as="image"
,imagesizes
属性是一种 sizes 属性,表示要预载img
元素使用的适当资源,其srcset
和sizes
属性具有相应的值。
- : 仅适用于
-
imagesrcset
- : 仅适用于
rel="preload"
和as="image"
,imagesrcset
属性是一种 sourceset 属性,表示要预载img
元素使用的适当资源,其srcset
和sizes
属性具有相应的值。
- : 仅适用于
-
integrity
{{experimental_inline}}- : 包含行内元数据,它是用于浏览器获取的资源文件的哈希值,以 base64 编码的方式加密。浏览器可利用这一点来验证所获取的资源是否受到意外修改。参见子资源完整性。
-
media
- : 该属性指定链接资源适用的媒体。其值必须是媒体类型或媒体查询。该属性主要用于链接外部样式表——它允许用户代理选择最适合其运行设备的样式表。
-
referrerpolicy
-
: 一个字符串,表示在获取资源时使用哪个 referrer:
no-referrer
表示将不会发送 {{HTTPHeader("Referer")}} 标头。no-referrer-when-downgrade
表示在不使用 TLS(HTTPS)的情况下导航到源时,不会发送 {{HTTPHeader("Referer")}} 标头信息。如果未指定其他策略,这是用户代理的默认行为。origin
意味着 referrer 网址将是页面的源,大致是协议、主机和端口。origin-when-cross-origin
这意味着导航到其他来源将仅限于协议、主机和端口,而在同一源上导航将包括 referrer 的路径。unsafe-url
意味着 referrer 网址将包含源和路径(但不包括片段、密码或用户名)。这种情况是不安全的,因为它可能会将源和路径从受 TLS 保护的资源泄漏到不安全的源。
-
-
rel
- : 此属性命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。
-
sizes
-
: 这个属性定义了包含相应资源的可视化媒体中的图标的大小。只有在
rel
包含icon
或诸如 Apple 的apple-touch-icon
等非标准类型的值时,它才可以存在。它可能具有如下值:any
表示图标可以按矢量格式缩放到任意大小,例如image/svg+xml
。- 一个由空白符分隔的尺寸列表。每一个都以
<像素宽度>x<像素高度>
或<像素宽度>X<像素高度>
给出。尺寸列表中的每一个尺寸都必须包含在资源里。
[!NOTE] 大多数的图标格式只能存储一个图标。因此绝大多数使用
sizes
时只包含一个值。微软的 ICO 格式和苹果的 ICNS 格式都是这样。ICO 更为普及,因此如果需要跨浏览器支持(尤其是旧版本的 IE),应使用这种格式。
-
-
title
- : 属性在
<link>
元素上有特殊的语义。当用于<link rel="stylesheet">
时,它定义了一个默认样式表或备用样式表。
- : 属性在
-
type
- : 这个属性被用于定义链接的内容的类型。这个属性的值应该是类似于 text/html、text/css 这样的 MIME 类型。该属性的通常用法是定义被引用的样式表类型(如 text/css),但由于 CSS 是网络上使用的唯一样式表语言,因此不仅可以省略
type
属性,而且现在已成为推荐做法。它还用于rel="preload"
链接类型,以确保浏览器只下载其支持的文件类型。
- : 这个属性被用于定义链接的内容的类型。这个属性的值应该是类似于 text/html、text/css 这样的 MIME 类型。该属性的通常用法是定义被引用的样式表类型(如 text/css),但由于 CSS 是网络上使用的唯一样式表语言,因此不仅可以省略
methods
{{Non-standard_Inline}} {{Deprecated_Inline}}- : 此属性的值提供有关可能在对象上执行的功能的信息。这些值通常在使用时由 HTTP 协议给出,但是(出于与 title 属性类似的原因)将其预先包含在链接中可能是有用的。例如,浏览器可能根据指定的方法选择不同的链接呈现方式。可搜索的内容可能会得到其他图标,或者外部链接可能会显示离开当前站点的指示。即使是定义该属性的浏览器 Internet Explorer 4 也无法很好地理解或支持此属性。
target
{{Deprecated_Inline}}- : 定义具有已定义链接关系或将显示任何链接资源渲染的框架或窗口名称。
-
charset
{{Deprecated_Inline}}-
: 该属性定义链接资源的字符编码。其值是以空格和/或逗号分隔的字符集列表,如 {{rfc(2045)}} 所定义。默认值为
iso-8859-1
。[!NOTE] 要产生与该废弃属性相同的效果,请在链接资源上使用 {{HTTPHeader("Content-Type")}} HTTP 标头。
-
-
rev
{{Deprecated_Inline}}
要在页面中包含样式表,请使用以下语法:
<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="基本样式" />
你可以在同一页面上包含指向多个不同图标的链接,浏览器将使用 rel
和 sizes
值作为提示来选择最适合其特定上下文的图标。
<!-- 配备高分辨率 Retina 显示屏的第三代 iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="favicon144.png" />
<!-- 配备高分辨率 Retina 显示屏的 iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="favicon114.png" />
<!-- 第一代和第二代 iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="favicon72.png" />
<!-- 非 Retina iPhone、iPod Touch 和 Android 2.1+ 设备 -->
<link rel="apple-touch-icon" href="favicon57.png" />
<!-- 基本的 favicon -->
<link rel="icon" href="favicon32.png" />
你可以在media
属性中提供媒体类型或查询; 然后,只有在媒体条件为 true 时,才会加载此资源。例如:
<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)" />
可以在 media
属性中提供媒体类型或查询;只有满足媒体查询条件时,才会加载该资源。例如:
<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
事件检测到是否在加载样式表的过程中出现错误。
<script>
const stylesheet = document.querySelector("#my-stylesheet");
stylesheet.onload = () => {
// 做点有意思的事情,样式表已经加载了
};
stylesheet.onerror = () => {
console.log("加载样式表时发生错误!");
};
</script>
<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
Note
一旦加载并解析了样式表及其所有导入内容,并在开始将样式应用到内容之前,load
事件就会触发。
你可以在使用 rel="preload"
预加载内容找到很多 <link rel="preload">
的详细示例。
可以在 blocking
属性中包含 render
标记;页面的渲染将被阻止,直到资源被获取。例如:
<link
blocking="render"
rel="preload"
href="critical-font.woff2"
as="font"
crossorigin />
内容类型 | 元数据内容。如果使用了 itemprop 属性,则为流式内容和短语内容。 |
---|---|
允许的内容 | 无;这是一个{{Glossary("void element", "空元素")}}。 |
标签省略 | 鉴于这是一个空元素,开始标签必须存在,结束标签不可以存在。 |
允许的父元素 | 任何可以接受元数据的元素。如果使用了 itemprop属性,则其父元素可以是任何可接受短语内容的元素。 |
隐式 ARIA 角色 | 具有 href 属性的 link
|
允许的 ARIA 角色 | 没有允许的 role |
DOM 接口 | {{DOMxRef("HTMLLinkElement")}} |
{{Specifications}}
{{Compat}}
- {{HTTPHeader("Link")}} HTTP 标头
integrity
属性,载于 150daysofhtml.com(2021)