你不知道的＜link＞

原创

liuhao951866 2022-02-25 09:57:13 博主文章分类：知识加深 ©著作权

文章标签 javascript ico 样式表 css 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者liuhao951866的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

要链接一个外部的样式表，你需要像这样在你的<head>中包含一个<link>元素：

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

在这个简单的例子中，使用了 href 属性设置外部资源的路径，并设置 rel 属性的值为“stylesheet”(样式表)。rel 表示“关系 (relationship) ”，它可能是<link>元素其中一个关键的特性——属性值表示<link>项的链接方式与包含它的文档之间的关系。你将在我们的链接类型中看到很多不同类型的关系。

这里有一些你经常遇到的其它类型。例如，这里是一个网站图标的链接：

<link rel="icon" href="favicon.ico">

还有一些其它的与图标相关的rel值，主要用于表示不同移动平台上特殊的图标类型，例如：

<link rel="apple-touch-icon-precomposed" 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属性表示该资源是否应该使用一个CORS请求来获取。

其它用法的注解：

<link>元素可以出现在<head>元素或者<body>元素中，具体取决于它是否有一个body-ok的链接类型。例如，stylesheet链接类型是body-ok的，因此<link rel="stylesheet">允许出现在body中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的<link>元素从你的body内容中分离出来，将其放在<head>中。
当使用<link>为网站创建一个favicon时，你的网站使用内容安全策略 (Content Security Policy，CSP) 来增强它的安全性，这种策略适用于favicon。如果你遇到favicon未加载的问题，验证Content-Security-Policy头的img-src directive没有在阻止对它的访问。
HTML和XHTML规范为<link>元素定义了一些事件处理器 (event handler) ，但是对于它们的使用方法不明确。
在XHTML 1.0下，例如<link>的空元素需要一个尾斜杠：<link />。
WebTV支持rel使用next值，用于在一个document series中预加载下一页。

属性

这个元素可以使用全局属性.

as

该属性仅在<link>元素设置了 rel="preload" 时才能使用。它规定了<link>元素加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept请求头的设置，这个属性是必需的。

值	应用于
audio	`<audio>` 元素
document	`<iframe>` 和 `<frame>` 元素
embed	`<embed>` 元素
fetch	fetch, XHR This value also requires `<link>` to contain the crossorigin attribute.
font	CSS @font-face
image	`<img>` and `<picture>` elements with srcset or imageset attributes, SVG `<image>` elements, CSS `*-image` rules
object	`<object>` elements
script	`<script>` elements, Worker `importScripts`
style	`<link rel=stylesheet>` elements, CSS `@import`
track	`<track>` elements
video	`<video>` elements
worker	Worker, SharedWorker

crossorigin

此枚举属性指定在加载相关资源时是否必须使用 CORS. 启用 CORS 的图片可以在 <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 头), 资源就会被污染并限制使用.

当不设置此属性时, 资源将会不使用 CORS 加载 (即不发送 Origin: HTTP 头), 这将阻止其在 <canvas> 元素中进行使用. 若设置了非法的值, 则视为使用 anonymous. 前往 CORS settings attributes 获取更多信息.

disabled

仅对于rel="stylesheet" ，disabled 的Boolean属性指示是否应加载所描述的样式表并将其应用于文档。如果在加载HTML时在HTML中指定了Disabled，则在页面加载期间不会加载样式表。相反，如果禁用属性更改为false或删除时，样式表将按需加载。

但是，一旦加载样式表，对Disabled属性的值所做的更改将不再与StyleSheet.disabled 属性的值有任何关系。相反，更改此属性的值只是启用和禁用应用于文档的样式表表单。

这与StyleSheet的disable属性不同；将其更改为true会将样式表从文档的document.styleSheets 列表中删除，并且在切换回false时不会自动重新加载样式表。

href

此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。

hreflang

此属性指明了被链接资源的语言. 其意义仅供参考。可取的值参见 BCP47。仅当设置了 href 属性时才应设置该属性。

importance

指示资源的相对重要性。优先级提示使用以下值委托：

auto: 表示没有偏好。浏览器可以使用其自己的启发式方法来确定资源的优先级。

high: 向浏览器指示资源具有高优先级。

low: 向浏览器指示资源的优先级较低。

Note: 只有存在rel=“preload”或rel=“prefetch”时，importance属性才能用于<link>元素。

integrity

包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以base64编码的方式加的密，这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改，详情查看Subresource Integrity。

media

这个属性规定了外部资源适用的媒体类型。它的值必须是"媒体查询"。这个属性使得用户代理能选择最适合设备运行的媒体类型。使用注意：

在HTML 4中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如"媒体类型"规定了该元素可取的属性，如print、screen、aural、braille。HTML5将该属性值扩展为任意类型的"媒体查询"，"媒体查询"将HTML4的属性值都包括在内。
不支持"CSS3 媒体查询"的浏览器并不会强行识别这些链接，因此别忘了设置备用link，即那些可用于HTML4的link。

referrerpolicy

一个字符串，指示在获取资源时使用哪个引荐来源网址:

'no-referrer' 表示Referer 标头将不会发送。
'no-referrer-when-downgrade' 的原始位置时不会发送任何Referer标头。如果未指定其他政策，这是用户代理的默认行为。
'origin' 意味着引荐来源网址将是页面的来源，大致是方案，主机和端口。
'origin-when-cross-origin' 这意味着导航到其他来源将仅限于方案，主机和端口，而在同一来源上导航将包括引荐来源网址的路径。
'unsafe-url' 意味着引荐来源网址将包含来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可能会将来源和路径从受TLS保护的资源泄漏到不安全的来源。

rel

此属性命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。

sizes

这个属性定义了包含相应资源的可视化媒体中的icons的大小。它只有在rel包含icon的link类型值。它可能有如下的规则。

any 表示图标可以按矢量格式缩放到任意大小，例如image/svg+xml。
一个由空白符分隔的尺寸列表。每一个都以<width in pixels>x<height in pixels> 或 <width in pixels>X<height in pixels>给出。尺寸列表中的每一个尺寸都必须包含在资源里。

用法注意：

大多数的icon格式只能存储一个icon。因此绝大多数使用 sizes时只包含一个值。微软的ICO格式和苹果的ICNS格式都是这样，ICO使用得更加广泛，推荐你使用它。
苹果的IOS系统并不支持这个属性，于是苹果的IPhone以及IPad使用特殊的、非标准的 link类型值去定义作为Web Clip或开始占位符：apple-touch-icon 和 apple-touch-startup-icon。

title

属性在<link>元素上有特殊的语义。当用于<link rel="stylesheet">时，它定义了一个首选样式表或备用样式表。不正确地使用它可能会导致样式表被忽略。

type

这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。

非标准属性

methods

此属性的值提供有关可能在对象上执行的功能的信息。这些值通常在使用时由HTTP协议给出，但是（出于与“title”属性类似的原因）将其预先包含在链接中可能是有用的。例如，浏览器可能根据指定的方法选择不同的链接呈现方式。可搜索的内容可能会得到其他图标，或者外部链接可能会显示离开当前站点的指示。即使定义的浏览器Internet Explorer 4也无法很好地理解或支持此属性。

prefetch Secure context

此属性标识下一个导航可能需要的资源，用户代理应检索该资源。这允许用户代理在将来请求资源时更快地做出响应。

target

定义具有已定义链接关系或将显示任何链接资源的呈现的框架或窗口名称。

已淘汰的属性

charset

此属性定义链接资源的字符编码。该值为RFC 2045中定义的字符集的空格和/或逗号分隔列表。缺省值为iso-8859-1。

使用说明：该属性已淘汰且禁止使用。要实现相同效果，可在外链资源中使用Content-Type HTTP header。

rev

此属性的值显示了 href 属性所定义的当前文档与链接文档的关系。因此，该属性定义了与rel属性的值相比的反向关系。该属性的Link type value类似于rel的可能值。

Note: WHATWG HTML生活标准（MDN将其视为规范的规范）认为该属性已过时。但是，值得注意的是，rev在W3C规范中并未过时。就是说，鉴于不确定性，依靠rev是不明智的。

相反，您应该使用具有相反链接类型值的rel属性。例如，要建立反向链接，请指定作者。而且，即使许多站点都以这种方式滥用此属性，该属性也不代表“修订”，并且不得与版本号一起使用。

示例

引入一个css文件

用下面的语法来引入一个css文件：

<link href="style.css" rel="stylesheet">

提供可替换的样式表

你也可以指定"可替换的外部样式表"。

用户可以在浏览器菜单 "查看>页面样式" 来选择网页的样式。通过这一办法，可以用多种样式浏览网页。

<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 值作为提示来选择最适合其特定上下文的图标。

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- basic 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)">

样式表加载事件

你能够通过监听发生在样式表上的事件知道什么时候样式表加载完毕。同样的，你能够通过监听error事件检测到是否在加载样式表的过程中出现错误。

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">

注意： 当样式表以及它引用的部分全部加载完毕，load事件就会在样式表应用到内容之前立即触发。

预加载例子

你可以在Preloading content with rel="preload"找到<link rel="preload">的详细例子。

概要

内容类型	元数据。如果使用了 itemprop 属性, 则为 flow content 和 phrasing content.
允许的元素内容	无，这是一个空元素。
标签省略	鉴于这是一个空元素，开始标签必须存在，结束标签必须不存在。
允许的父元素	任何可以接受元数据的元素.。如果使用了 itemprop属性,，则其父元素可以是任何可接受 phrasing content 的元素。
允许的 ARIA roles	无
DOM接口	`HTMLLinkElement`

注意

<link> 标签只能出现在head元素中，然而可以出现多个<link>标签。
HTML 3.2只为link元素定义了href, methods, rel，rev，title，和urn属性。
HTML 2为link标签定义了 href, methods，rel，rev，title，和 urn 属性，methods 和 urn随后从规范中移除。
HTML和XHTML规范为link定义了事件处理，但是并不清楚它们将会怎样被使用。
在XHTML 1.0中，空元素link要求有尾随斜线，像这样<link />。