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

浏览器支持

示例

引入一个css文件

属性

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

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

• Value	Applies To
  audio	elements
  document	and elements
  embed	elements
  fetch	fetch, XHR This value also requires to contain the crossorigin attribute.
  font	CSS @font-face
  image	and elements with srcset or imageset attributes, SVG elements, CSS *-image rules
  object	elements
  script	elements, Worker importScripts
  style	elements, CSS @import
  track	elements
  video	elements
  worker	Worker, SharedWorker

• crossorigin此枚举属性指定在加载相关图片时是否必须使用 CORS.启用 CORS 的图片可以在元素中使用，并避免其被污染.可取的值如下:
  • "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 头),这将阻止其在元素中进行使用。若设置了非法的值，则视为使用anonymous.前往 CORS settings attributes获取更多信息.
• disabled

  仅对于，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:向浏览器指示资源的优先级较低。

  该特性是非标准的，请尽量不要在生产环境中使用它！
• title属性在元素上有特殊的语义。当用于时，它定义了一个首选样式表或备用样式表。不正确地使用它可能会导致样式表被忽略。
• type这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。

• 非标准属性

• methods尚未标准化
• 此属性的值提供有关可能在对象上执行的功能的信息。这些值通常在使用时由HTTP协议给出，但是（出于与“title”属性类似的原因）将其预先包含在链接中可能是有用的。例如，浏览器可能根据指定的方法选择不同的链接呈现方式。可搜索的内容可能会得到其他图标，或者外部链接可能会显示离开当前站点的指示。即使定义的浏览器Internet Explorer 4也无法很好地理解或支持此属性。
• prefetch尚未标准化Secure context
• 此属性标识下一个导航可能需要的资源，用户代理应检索该资源。这允许用户代理在将来请求资源时更快地做出响应。
• target尚未标准化
• 定义具有已定义链接关系或将显示任何链接资源的呈现的框架或窗口名称。

• 已淘汰的属性

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

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

• revTHML5中废弃
  此属性的值显示了href属性所定义的当前文档与链接文档的关系。因此，该属性定义了与rel属性的值相比的反向关系。该属性的Link type value类似于rel的可能值。
• Note: WHATWG HTML生活标准（MDN将其视为规范的规范）认为该属性已过时。但是，值得注意的是，rev在W3C规范中并未过时。就是说，鉴于不确定性，依靠rev是不明智的。

  
  

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

link用法示例

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

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

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

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

sizes属性表示图标大小，type属性包含了链接资源的MIME类型。这些属性为浏览器选择最合适的图标提供了有用的提示。

你也可以提供一个媒体类型，或者在media属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来。例如：

也加入了一些新的有意思的性能和安全特性。举例如下：将rel设定为preload，表示浏览器应该预加载该资源(更多细节见使用预加载内容)。as属性表示获取特定的内容类。crossorigin属性表示该资源是否应该使用一个CORS请求来获取。

其它用法的注解：

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

Styling with CSS

元素在Web文档上不会渲染出来，因此无需担心样式方面的问题。

例子

提供可替换的样式表

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

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

提供用于不同用法上下文的图标

您可以在同一页面上包含指向多个不同图标的链接，浏览器将使用rel和sizes值作为提示来选择最适合其特定上下文的图标。

通过媒体查询有条件地加载资源

您可以在media属性中提供媒体类型或查询；然后，只有在媒体条件为true时，才会加载此资源。例如：

样式表加载事件

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

function sheetloaded() {
  // do something interesting; the sheet has been loaded
}

function sheeterror() {
  alert("an error occurred loading the stylesheet!");
} 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com