《HTML标准》解读：详解链接元素

本文为HTML标准解读系列文章，其他文章详见这里。

我曾在《HTML发展史》一文中讲过，HTML之所以能在众多标记语言中脱颖而出，是因为其连接其他资源的能力。因此，「链接」是HTML的一个重要概念，它代表了当前页面与目标资源之间的连接。

在HTML中，有两种类型的链接：

• 外部资源型：按照一定的规则导入外部资源到页面中。
• 超链接型：导航到外部资源的入口，比如访问其他页面或者下载其他资源。

有4种HTML元素可以创建链接，分别是a、area、form、link元素。并且，这些元素都是通过rel属性声明链接的类型（rel是relationship的缩写），如：

<!-- 外部资源型链接：提前获取image.png,未来页面中很可能用到这个图片 -->
<link rel="prefetch" href="https://example.com/image.png">

<!-- 超链接：目标资源是帮助页面 -->
<a rel="help" href="help.html">帮助</a>

所有的rel属性的关键词可以用下面一张表进行总结（不要被这一大串的关键词吓到，本文剩余的部分会有逻辑地将这些关键词串联起来）：

从这张表我们至少可以得出以下信息：

1. 只有link元素可以创建外部资源型链接（如表格的第一部分所示）。
2. a元素与area元素在创建链接的层面上表现是完全一致的。
3. 有一部分关键词仅仅用于给超链接提供注释，而不直接创建超链接（如表格的第三部分所示）。

外部资源型

预处理资源的链接

在外部资源型链接中，很大一部分是为页面中未来可能用到的资源做一些预处理的。

我们知道，获取外部资源一般要经历如下步骤：

1. 对资源URL进行DNS解析；
2. 建立TCP链接 ；
3. 发起请求获取资源；
4. 根据资源的类型，对资源进行进一步的处理（如解析图片，或者创建样式表）；

不同的rel关键词，允许你对资源的预处理精细化到上面的每一步，每一步对应的rel值分别是：

1. dns-prefetch
2. preconnect
3. prefetch
4. preload

举个例子，以下link标签会令浏览器提前获取image.png，并放在缓存中。当未来页面中使用这张图片的时候，可以直接在缓存中获取，从而减少了加载图片所花费的时间：