链接标签 - 《HTML查漏补缺》

（1）href
（2）hreflang
（3）title
target">（4）target
（5）rel
（6）referrerpolicy
（7）ping
（8）type
（9）download
<link>

<a href="https://wikipedia.org/">维基百科</a>

用户点击后，浏览器跳转到href属性指定的网址。

<a href="https://www.example.com/">
  <img src="https://www.example.com/foo.jpg">
</a>

用户点击图像，就会跳转到指定网址。

（1）href

href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

上文已经给出了完整 URL 的例子，下面是锚点的例子。

<a href="#demo">示例</a>

上面代码中，href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面demo锚点所在的位置。

（2）hreflang

（3）title

<a
  href="https://www.example.com/"
  title="hello"
>示例</a>。

上面代码中，用户鼠标停留在链接上面，会出现文字提示hello。

（4）target

target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

<p><a href="http://foo.com" target="test">foo</a></p>
<p><a href="http://bar.com" target="test">bar</a></p>

上面代码中，两个链接都在名叫test的窗口打开。首先点击链接foo，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test，在该窗口打开foo.com。然后，用户又点击链接bar，由于已经存在test窗口，浏览器就在该窗口打开bar.com，取代里面已经打开的foo.com。

target属性的值也可以是以下四个关键字之一。

_self：当前窗口打开，这是默认值。
_blank：新窗口打开。
_parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。
_top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。

<a
  href="https://www.example.com"
  target="_blank"
>示例链接</a>

上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。

注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。

（5）rel

rel属性说明链接与当前页面的关系。

<a href="help.html" rel="help">帮助</a>

上面代码的rel属性，说明链接是当前页面的帮助文档。

下面是一些常见的rel属性的值。

alternate：当前文档的另一种形式，比如翻译。
author：作者链接。
bookmark：用作书签的永久地址。
external：当前文档的外部参考文档。
help：帮助链接。
license：许可证链接。
next：系列文档的下一篇。
nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。
noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。
noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。
prev：系列文档的上一篇。
search：文档的搜索链接。
tag：文档的标签链接。

（6）referrerpolicy

referrerpolicy属性用于精确设定点击链接时，浏览器发送 HTTP 头信息的Referer字段的行为。

该属性可以取下面八个值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。

其中，no-referrer表示不发送Referer字段，same-origin表示同源时才发送Referer字段，origin表示只发送源信息（协议+域名+端口）。其他几项的解释，请查阅 HTTP 文档。

（7）ping

（8）type

（9）download

`<link>`

https://wangdoc.com/html/link.html#link

<link>标签主要用于将当前网页与相关的外部资源联系起来，通常放在<head>元素里面。最常见的用途就是加载 CSS 样式表。

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

加载网站的 favicon 图标文件。

<link rel="icon" href="/favicon.ico" type="image/x-icon">

手机访问时，网站通常需要提供不同分辨率的图标文件,指定 iPhone 设备需要的114像素和72像素的图标。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png

1.rel 属性

rel属性表示外部资源与当前文档之间的关系，是<link>标签的必需属性。它可以但不限于取以下值。

alternate：文档的另一种表现形式的链接，比如打印版。
author：文档作者的链接。
dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。
help：帮助文档的链接。
icon：加载文档的图标文件。
license：许可证链接。
next：系列文档下一篇的链接。
pingback：接收当前文档 pingback 请求的网址。
preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。
prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。
preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。
prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。
prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。
search：提供当前网页的搜索链接。
stylesheet：加载一张样式表。

下面是一些示例。

<!-- 作者信息 -->
<link rel="author" href="humans.txt">
<!-- 版权信息 -->
<link rel="license" href="copyright.html">
<!-- 另一个语言的版本 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- 联系方式 -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 历史资料 -->
<link rel="archives" href="http://example.com/archives/">
<!-- 目录 -->
<link rel="index" href="http://example.com/article/">
<!-- 导航 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

2.资源的预加载

预加载主要有下面五种类型。

（1）<link rel="preload">

<link rel="preload">告诉浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。当加载页面几秒钟后需要该资源时，它会很有用。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。

<link rel="preload" href="image.png" as="image">

rel="preload"除了优先级较高，还有两个优点：一是允许指定预加载资源的类型，二是允许onload事件的回调函数。下面是rel="preload"配合as属性，告诉浏览器预处理资源的类型，以便正确处理。

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

上面代码要求浏览器提前下载并缓存style.css和main.js。

as属性指定加载资源的类型，它的值一般有下面几种。

“script”
“style”
“image”
“media”
“document”

如果不指定as属性，或者它的值是浏览器不认识的，那么浏览器会以较低的优先级下载这个资源。

有时还需要type属性，进一步明确 MIME 类型。

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

上面代码要求浏览器提前下载视频文件，并且说明这是 MP4 编码。

下面是预下载字体文件的例子。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

注意，所有预下载的资源，只是下载到浏览器的缓存，并没有执行。如果希望资源预下载后立刻执行，可以参考下面的写法。

<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">

上面代码中，onload指定的回调函数会在脚本下载完成后执行，立即插入页面。

（2）<link rel="prefetch">

<link rel="prefetch">的使用场合是，如果后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低，浏览器不一定会执行。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。

<link rel="prefetch" href="https://www.example.com/">

（3）<link rel="preconnect">

<link rel="preconnect">要求浏览器提前与某个域名建立 TCP 连接。当你知道，很快就会请求该域名时，这会很有帮助。

<link rel="preconnect" href="https://www.example.com/">

（4）<link rel="dns-prefetch">

<link rel="dns-prefetch">要求浏览器提前执行某个域名的 DNS 解析。

<link rel="dns-prefetch" href="//example.com/">

（5）<link rel="prerender">

<link rel="prerender">要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。

<link rel="prerender" href="http://example.com/">

3.media属性

4.其他属性

<link>标签的其他属性如下。

crossorigin：加载外部资源的跨域设置。
href：外部资源的网址。
referrerpolicy：加载时Referer头信息字段的处理方法。
as：rel="preload"或rel="prefetch"时，设置外部资源的类型。
type：外部资源的 MIME 类型，目前仅用于rel="preload"或rel="prefetch"的情况。
title：加载样式表时，用来标识样式表的名称。
sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。

补充

link和@import对比