link

<link>

HTML中<link>元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。属性允许的值可在链接类型找到。

属性

这个元素包含全局属性。

as

使用注意: 该属性已废弃并不能再被使用. 要达到同样的效果, 在被链接资源的 HTTP 头中设置相应的 Content-Type.

crossorigin该枚举属性指定在加载相关图片时是否必须使用 CORS.启用 CORS 的图片 可以在<canvas>元素中使用, 并避免其被污染. 可取的值如下:

使用注意:虽然在 HTML 标准中没有disabled属性, 但在HTMLLinkElementDOM 对象中确实存在 disabled 属性.

使用 disabled 作为 HTML 属性是非标准的, 并且只有部分浏览器使用 (W3 #27677).

• 如果 disabled 属性已经直接加入到页面元素中, 可以改为不引入这个 <link> 元素;

• 通过脚本为该样式表 DOM 对象设置 disabled 属性.

href该属性指定被链接资源的URL. URL 可以是绝对的或相对的.

使用注意：

• 在HTML 4中，它只能是一些由空白符分开的媒体描述文字, i.e., 媒体类型，定义以及允许这些值作为它的属性，例如print， screen， aural， braille。HTML5扩展了它的属性值，使其有任何类型的媒体查询, HTML5扩展了它在HTML4中允许的属性值。

• 浏览器不支持 CSS3 媒体查询的话将不会很影响它识别（使用link的媒体查询的）合适的连接，不要忘了设置回退link属性（原文是fallback links），即那些定义在HTML4中的媒体查询中的有限的属性。

methods此属性的值提供了有关可能在对象上执行的功能的信息。这些值通常由HTTP协议在使用时给出，但它可能（出于类似于title属性的原因）在链接中预先包含有用的咨询信息。例如，浏览器可以根据指定的方法选择不同的链接呈现方式; 可搜索的东西可能会得到不同的图标，或者外部链接可能会呈现离开当前网站的指示。即使通过定义的浏览器Internet Explorer 4，也不能很好地理解和支持此属性。请参阅方法属性（MSDN）。

• 'no-referrer'这意味着Referer头部不会被发送。

• 'no-referrer-when-downgrade'意味着在没有TLS (HTTPS)的情况下导航到一个源时不会发送任何引用头。如果没有指定任何策略，这是用户代理的默认行为。

• 'origin' 这意味着引用者将成为页面的来源，即大致的 scheme，主机和端口。

• 'origin-when-cross-origin' 这意味着导航到的其他来源将被限制在协议，主机和端口，而同一来源的导航将包括引用路径。

• 'unsafe-url'这意味着引用者将包括来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可以将来自TLS保护的资源的起点和路径泄漏到不安全的起点。

rel

用法说明：该属性在HTML5中已过时。不要使用它。要达到它的效果，请使用rel具有相反链接类型值的属性，例如made应该被替换为author。此外，这个属性并不意味着修订版本，也不能与版本号一起使用，（不幸的是很多网页都是这么做的）

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

• any，意味着这个icon能够被缩放到任意尺寸当它是矢量形式，比如image/svg+xml。

• 一个由空白符分隔的尺寸列表。

使用说明：

• 大多数图标格式只能存储一个图标; 因此大部分时间sizes只包含一个条目。MS的ICO格式，以及苹果的ICNS。ICO更无处不在，你应该使用它。

• 苹果的iOS不支持此属性，因此苹果的iPhone和iPad上使用特殊的，非标准的链接类型值来定义图标将被用作网络剪辑或启动占位符：apple-touch-icon和apple-touch-startup-icon。

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

例子

包括一个样式表

要在页面中包含样式表，请使用以下语法：

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

样式表加载事件

你可以通过观察一个load事件来确定样式表何时被加载; 同样，您可以通过观察error事件来处理样式表时检测是否发生错误：

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

function sheetError() {
  console.log("An error occurred loading the stylesheet!"
}
</script>

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

注：该load事件触发一次样式表和它的所有导入的内容已经被加载和分析，并立即开始被应用到内容的样式之前。

预加载示例

您可以在rel =“preload”中预加载内容中找到一些<link rel =“preload”>示例。

注意

• <link>标签可以出现无论是在头部元件或所述主体元件（或两者），这取决于它是否有是body-ok的链路类型。例如，stylesheet链接类型是正文，因此<link rel="stylesheet">在主体中被允许。

• HTML 3.2仅为链接元素定义了href，rel，rev和title属性。

• HTML 2 为元素定义了href，methods，rel，rev，title和urn属性<link>。该方法和瓮属性后来从规范中删除。

• HTML和XHTML规范定义了<link>元素的事件处理程序，但不清楚如何使用它们。

• 在XHTML 1.0下，空的元素，例如<link>需要一个斜线：<link />。

规范

浏览器兼容性