link（外部资源关系）

• 规定了外部资源与当前文档的关系

  • 常于链接样式表<link href="/media/examples/link-element-example.css" rel="stylesheet">
  • 用来创建站点图标
    • 桌面标签页图标<link rel="icon" href="favicon.ico">或<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    • 移动主屏图标

• 如果使用了 itemprop 属性, 则为 flow content 和 phrasing content。

  • itemprop 属性：微数据标记，采用键值对，用来让机器识别某个数据的语义。例如我的名字是<span itemprop="name">王富强</span>产生键值对name = '王富强'让机器识别‘王富强’为姓名
  • flow content：流式元素，例如div等
  • phrasing content：短语元素，流式元素中的一种，例如span

• 这个元素可用来为导航定义一个关系框架

属性

• 可以使用 全局属性.

rel

• 此属性指明被链接文档对于当前文档的关系。
• 这个属性一定得是一个由空格分开的链接类型值的列表。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
• 这个属性最通常的用法是指向一个连接到外部样式表的链接：将rel的值设置为stylesheet，href属性设置为外部样式表的URL来构造网页。
• 网络电视还支持使用下一个rel的值在一系列页面中预加载下一个页面。

icon

• 苹果的IOS系统并不支持这个属性，于是苹果的IPhone以及IPad使用非标准的类型值去定义：apple-touch-icon、apple-touch-startup-icon、apple-touch-startup-image

media

• 这个属性规定了外部资源适用的媒体类型。（css媒体查询）
• 它的值必须是"媒体查询"。https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
• 可以和 type and sizes 属性配合，允许浏览器选择其上下文中最合适的图标.如果多种资源符合条件，浏览器会选择最后一个。

type

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

sizes

• 这个属性定义了包含相应资源的可视化媒体中的icons的大小。
• 只有在rel包含 icon 时使用，有如下的规则
  • any，意味着这个icon能够被缩放到任意尺寸当它是矢量形式，比如image/svg+xml。
  • 一个由空白符分隔的尺寸列表。每一个都以 width x height （以像素为单位）给出。（尺寸列表中的每一个尺寸都必须包含在资源里？）
    • 大多数的icon格式只能存储一个icon。因此绝大多数使用 sizes时只包含一个值。
• 苹果iOS不支持 sizes 属性

as

• 该属性仅在<link>元素设置了 rel="preload" （预加载）时才能使用，规定了<link>元素加载的
  • 内容的类型
  • 内容的优先级
  • 请求匹配？
  • 正确的内容安全策略？
  • 正确的 Accept请求头的设置（Accept请求头：用来告知服务器能够接收的内容类型）

crossorigin

• 此枚举属性指定在加载相关图片时是否必须使用 CORS.
• 启用 CORS 的图片 可以在 <canvas> 元素中使用, 并避免其被污染。（不通过 CORS 就可以在画布中使用图片，但会导致画布被污染 toBlob(), toDataURL() 或 getImageData() 方法禁止调用）
• 可取的值如下:
  • 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.

href

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

hreflang

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

示例

提供可替换的样式表

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

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

样式表加载事件

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

高分辨率图标

• 这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到iPad的主屏幕时使用。？

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">