link元素

本文介绍HTML link元素，根据的w3c规范：
HTML Standard

对于link元素的基本信息，从官文中翻译：

种类：

元数据内容；

如果该元素 存在于body中： 流内容；

如果该元素 存在于body中： 短语内容。

元素用法上下文:

需要 元数据内容的地方；

在一个作为 head元素的 noscript子元素中；

如果 存在于body中: 需要 短语元素的地方。

内容模式：

没有内容。

在HTML文档中省略标签：

没有 结尾标签。

包含属性：

全局属性

href —— 超链接的地址

crossorigin —— 元素如何处理跨域请求

rel —— 文档包含的 超链接 和目的源的关系

media —— 可用的媒体类型

integrity —— 子资源完整性 检查中使用的完整性元数据 [SRI]

hreflang —— 链接资源的语言

type —— 暗示所指资源的种类

referrerpolicy — 引用器策略 for fetches initiated by the element

sizes —— 图标的大小（当 rel=" icon"）

imagesrcset在不同情况下使用的图片，如高分辨显示器、小型显示器等（当 rel=" preload"）

imagesizes —— 不同页面布局的图片大小（当 rel=" preload"）

as —— 预加载请求的 潜在目的地（当 rel=" preload" 且 rel=" modulepreload"）

blocking —— 该元素是否 render-blocking

color —— 自定义网站图标时使用的颜色（当 rel=" mask-icon"）

disabled —— 该链接是否不可用

同时， title 属性在该元素上 有特殊语义；

DOM 接口:

[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
  [HTMLConstructor] constructor();

罗列link元素的基本用法

1. 1. 使用规则
   2. href属性它所链接的外部资源，内容为有效的URL
   3. href属性和imagesrcset属性至少要使用一个
   4. 如果href属性和imagesrcset属性同时缺失，则该元素不能定义一个链接
   5. rel属性和itemprop属性中有且必须有一个
2. 1. 使用方式
   2. 创建指向外部资源的链接
   3. 创建指向内部资源的超链接
3. 1. 注意事项
   2. 创建的链接个数由rel属性中的关键字个数决定
   3. href可以有多个由空格隔开的值

属性讲解

• crossorigin

  此属性描述在加载外部资源的时候时候使用CORS（跨域资源共享）

  • 允许的值
  • anonymous

    执行跨源请求(即带有Origin HTTP报头)，但不发送凭证(即不发送cookie、X.509证书或HTTP基本认证)。 如果服务器不向源站点提供凭据(通过不设置Access-Control-Allow-Origin HTTP头)，资源将被污染，其使用将受到限制。

  • use-credentials

    一个跨源请求(即带有一个Origin HTTP头)与一个证书一起执行(即执行一个cookie、证书和/或HTTP基本身份验证)。 如果服务器不向源站点提供凭据(通过Access-Control-Allow-Credentials HTTP头)，资源将被污染，其使用将受到限制

• media

  此属性描述资源应用的媒体

  允许的值为一个有效的媒体查询列表
• integrity

  表示该元素负责的请求的完整性元数据

  只能在rel属性值为stylesheet、preloat或modulepreload关键字时使用

  允许的值为一个文本
• hreflang

  暗示所链接资源使用的自然语言

• type

  给出链接资源的MIME类型。对于外部资源链接，它可以作为一个建议使操作系统避免载入自己不支持的类型。

  • 允许的值为一个有效的MIME类型字符串
  • text/css
  • text/plain
  • text/html
  • text/xml
• referrerpolicy

  一个引用器策略属性。 它与外部资源链接一起使用，帮助在获取和处理链接资源时设置使用的引用器策略。

  • 允许的值
  • no-referrer
  • no-referrer-when-downgrade
  • same-origin
  • origin
  • strict-origin
  • origin-when-cross-origin
  • strict-origin-when-cross-origin
  • unsafe-url
• title

  这是一个全局属性

  1. 不同之处
  2. 如果没有设置title属性，则它不能继承父元素的title属性，仅仅是没有title属性
  3. 若链接指向文档树中的一个css样式表（如style元素），title定义该css样式表），则该属性纯粹只是一个建议。
• imagesrcset

  它是一个 srcset attribute，它是一个很新的属性，目前还在实验中。

  • 用法
  • imagesrcset和href属性(如果没有使用宽度描述符)共同为source set提供图像源。
  • 如果imagesrcset的待选图片字符串有宽度描述符，则imagesizes属性也要出现，为大小属性。
  • 在imgsrcset属性和imagesizes同时出现的link元素中，其rel属性必须为preload，且as属性的值须为image。
  • • 例如：

<link rel="preload" as="image" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

• sizes

  是一个给出icon大小建议的属性，可以为关键字"any"，或者两个没有前导0的非负整数（中间以小写或大写x字母分隔）

  该属性仅当rel属性值为"icon"或"apple-touch-icon"（已废弃）时才可用。

• as

  as属性指定由href属性给出的资源预加载请求的潜在目的地。 它是一个枚举属性。 每个潜在目的地都是此属性的关键字，映射到同名的状态。 必须在具有包含preload关键字的rel属性的链接元素上指定该属性。 它可以在具有rel属性且包含modulepreload关键字的链接元素上指定; 在这种情况下，它必须有一个类似脚本的目的地值。 对于其他链接元素，不能指定它。

  • 允许的值
  • audio
  • audioworklet
  • document
  • embed
  • fetch
  • font
  • image
  • manifest
  • object
  • paintworklet
  • report
  • script
  • serviceworker
  • sharedworker
  • style
  • track
  • video
  • worker
  • xslt
• blocking

  blocking属性显式地指示应该在获取外部资源时阻塞某些操作。 可以被阻止的操作由可能的阻止令牌表示

  • 允许的值
  • render
• color

  color属性与mask-icon链接类型一起使用。 该属性只能在具有包含mask-icon关键字的rel属性的链接元素上指定。 该值必须是一个与CSS颜色字符串，定义了一个建议的颜色，用户代理可以使用该颜色来定制用户在固定站点时看到的图标的显示。

• disabled

  一个布尔属性代表是否启用该元素

• media

  如果链接是超链接，那么media属性纯粹是建议属性，描述文档是为哪种媒体设计的。

  然而，如果链接是外部资源链接，则media属性是规定的。 当media属性的值与环境匹配且应用其他相关条件时，用户代理必须应用外部资源，否则不能应用。默认值为all

  • 允许的值
  • all
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • speech
  • tty
  • tv
• rel

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

  • 允许的值
  • stylesheet
  • script
  • start
  • section
  • search
  • search
  • alternate
  • appendix
  • apple-touch-icon
  • apple-touch-icon-precomposed
  • apple-touch-startup-image
  • author
  • bookmark
  • chapter
  • contents
  • copyright
  • glossary
  • help
  • icon
  • import
  • index
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • prefetch
  • prev
  • subsection
  • tag

• link元素常见用法

  链接到一个CSS样式表：

  <link href="style.css" type="text/css" rel="stylesheet">
  

  为网页链接一个图标

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