HTML链接：除了a标签，还有哪些标签叫链接？
下载APP
关闭
渠道合作
推荐作者
HTML链接：除了a标签，还有哪些标签叫链接？
2019-03-12 winter 来自北京
《重学前端》
课程介绍
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1142" height="640"><rect fill-opacity="0"/></svg>)
讲述：winter
时长22:36大小20.64M
你好，我是 winter。
在前面的课程中，我讲到了 HTML 的语义和元信息标签，今天这一课，我们来讲另一类 HTML 元素：链接。
链接这种元素可以说是占据了整个互联网。也正是因为无处不在的超链接，才让我们的万维网如此繁荣。没有了超链接的 HTML，最多可以称为富文本，没法称作超文本（hyper text）。
我想，作为互联网从业者，我们一定对链接都非常熟悉了。链接能够帮助我们从一个网页跳转到另一个网页。
不过，除了肉眼可见的这些链接，其实 HTML 里面还规定了一些不可见链接的类型，这节课，我就来给你介绍链接家族的全员，让你对它们有一个完整的认识。
链接是 HTML 中的一种机制，它是 HTML 文档和其它文档或者资源的连接关系，在 HTML 中，链接有两种类型。一种是超链接型标签，一种是外部资源链接。
链接的家族中有 a 标签、area 标签和 link 标签。今天，我会逐一对它们进行介绍。
link 标签
提到链接，我们都知道 a 标签可以成为超链接，但是我们今天的内容，要从一个大家不太熟悉的标签开始，也就是 link 标签。
我们已经介绍过元信息类标签。实际上，我们并没有介绍完全，有些 link 标签也是元信息类标签的一种。
我们已经讲过，HTML 标准并没有规定浏览器如何使用元信息，我们还讲到了元信息中有不少是被设计成“无需被浏览器识别，而是专门用于搜索引擎看的”。
link 标签也是元信息的一种，在很多时候，它也是不会对浏览器产生任何效果的，这也是很多人会忽略 link 标签学习的原因。
link 标签会生成一个链接，它可能生成超链接，也可能生成外部资源链接。
一些 link 标签会生成超链接，这些超链接又不会像 a 标签那样显示在网页中。这就是超链接型的 link 标签。
这意味着多数浏览器中，这些 link 标签不产生任何作用。但是，这些 link 标签能够被搜索引擎和一些浏览器插件识别，从而产生关键性作用。
比如，到页面 RSS 的 link 标签，能够被浏览器的 RSS 订阅插件识别，提示用户当前页面是可以 RSS 订阅的。
另外一些 link 标签则会把外部的资源链接到文档中，也就是说，会实际下载这些资源，并且做出一些处理，比如我们常见的用 link 标签引入样式表。
除了元信息的用法之外，多数外部资源型的 link 标签还能够被放在 body 中使用，从而起到把外部资源链接进文档的作用。
link 标签的链接类型主要通过 rel 属性来区分，在本篇文章中，我们提到 xx 型 link 即表示属性 rel 为 xx 的 link，其代码类似下面：
下面我们先来看看超链接型 link 标签。
超链接类 link 标签
超链接型 link 标签是一种被动型链接，在用户不操作的情况下，它们不会被主动下载。
link 标签具有特定的 rel 属性，会成为特定类型的 link 标签。产生超链接的 link 标签包括：具有 rel=“canonical” 的 link、具有 rel="alternate"的 link、具有 rel=“prev” rel="next"的 link 等等。
canonical 型 link
这种 link 的代码写法是这样：
这个标签提示页面它的主 URL，在网站中常常有多个 URL 指向同一页面的情况，搜索引擎访问这类页面时会去掉重复的页面，这个 link 会提示搜索引擎保留哪一个 URL。
alternate 型 link
这种 link 的代码写法是这样：
这个标签提示页面它的变形形式，这个所谓的变形可能是当前页面内容的不同格式、不同语言或者为不同的设备设计的版本，这种 link 通常也是提供给搜索引擎来使用的。
alternate 型的 link 的一个典型应用场景是，页面提供 rss 订阅时，可以用这样的 link 来引入：
除了搜索引擎外，很多浏览器插件都能识别这样的 link。
prev 型 link 和 next 型 link
在互联网应用中，很多网页都属于一个序列，比如分页浏览的场景，或者图片展示的场景，每个网页是序列中的一个项。
这种时候，就适合使用 prev 和 next 型的 link 标签，来告诉搜索引擎或者浏览器它的前一项和后一项，这有助于页面的批量展示。
因为 next 型 link 告诉浏览器“这是很可能访问的下一个页面”，HTML 标准还建议对 next 型 link 做预处理，在本课后面的内容，我们会讲到预处理类的 link。
其它超链接类的 link
其它超链接类 link 标签都表示一个跟当前文档相关联的信息，可以把这样的 link 标签视为一种带链接功能的 meta 标签。
rel=“author” 链接到本页面的作者，一般是 mailto: 协议
rel=“help” 链接到本页面的帮助页
rel=“license” 链接到本页面的版权信息页
rel=“search” 链接到本页面的搜索页面（一般是站内提供搜索时使用）
到这里，我们已经讲完了所有的超链接类的 link 标签用法了。接下来我们讲讲外部资源类 link 标签。
外部资源类 link 标签
外部资源型 link 标签会被主动下载，并且根据 rel 类型做不同的处理。外部资源型的标签包括：具有 icon 型的 link、预处理类 link、modulepreload 型的 link、stylesheet、pingback。下面我们来一一介绍它们。
icon 型 link
这类链接表示页面的 icon。多数浏览器会读取 icon 型 link，并且把页面的 icon 展示出来。
icon 型 link 是唯一一个外部资源类的元信息 link，其它元信息类 link 都是超链接，这意味着，icon 型 link 中的图标地址默认会被浏览器下载和使用。
如果没有指定这样的 link，多数浏览器会使用域名根目录下的 favicon.ico，即使它并不存在，所以从性能的角度考虑，建议一定要保证页面中有 icon 型的 link。
只有 icon 型 link 有有效的 sizes 属性，HTML 标准允许一个页面出现多个 icon 型 link，并且用 sizes 指定它适合的 icon 尺寸。
预处理类 link
我们都知道，导航到一个网站需要经过 dns 查询域名、建立连接、传输数据、加载进内存和渲染等一系列的步骤。
预处理类 link 标签就是允许我们控制浏览器，提前针对一些资源去做这些操作，以提高性能（当然如果你乱用的话，性能反而更差）。
下面我来列一下这些 link 类型：
dns-prefetch 型 link 提前对一个域名做 dns 查询，这样的 link 里面的 href 实际上只有域名有意义。
preconnect 型 link 提前对一个服务器建立 tcp 连接。
prefetch 型 link 提前取 href 指定的 url 的内容。
preload 型 link 提前加载 href 指定的 url。
prerender 型 link 提前渲染 href 指定的 url。
modulepreload 型的 link
modulepreload 型 link 的作用是预先加载一个 JavaScript 的模块。这可以保证 JS 模块不必等到执行时才加载。
这里的所谓加载，是指完成下载并放入内存，并不会执行对应的 JavaScript。
这个例子来自 HTML 标准，我们假设 app.js 中有 import “irc” 和 import “fog-machine”, 而 irc.js 中有 import “helpers”。这段代码使用 moduleload 型 link 来预加载了四个 js 模块。
尽管，单独使用 script 标签引用 app.js 也可以正常工作，但是我们通过加入对四个 JS 文件的 link 标签，使得四个 JS 文件有机会被并行地下载，这样提高了性能。
stylesheet 型 link
样式表大概是所有人最熟悉的 link 标签用法了。它的样子是下面这样的。
基本用法是从一个 CSS 文件创建一个样式表。这里 type 属性可以没有，如果有，必须是"text/css"才会生效。
rel 前可以加上 alternate，成为 rel=“alternate stylesheet”，此时必须再指定 title 属性。
这样可以为页面创建一份变体样式，一些浏览器，如 Firefox 3.0，支持从浏览器菜单中切换这些样式，当然了，大部分浏览器不支持这个功能，所以仅仅从语义的角度了解一下这种用法即可。
pingback 型 link
这样的 link 表示本网页被引用时，应该使用的 pingback 地址，这个机制是一份独立的标准，遵守 pingback 协议的网站在引用本页面时，会向这个 pingback url 发送一个消息。
以上就是 link 标签的所有用法了。接下来我们来介绍一下最熟悉的 a 标签，当然了，也可能你学过了本节课以后，觉得自己其实也没那么熟悉。
a 标签
a 标签是“anchor”的缩写，它是锚点的意思，所谓锚点，实际上也是一种比喻的用法，古代船舶用锚来固定自己的位置，避免停泊时被海浪冲走，所以 anchor 标签的意思也是标识文档中的特定位置。
a 标签其实同时充当了链接和目标点的角色，当 a 标签有 href 属性时，它是链接，当它有 name 时，它是链接的目标。
具有 href 的 a 标签跟一些 link 一样，会产生超链接，也就是在用户不操作的情况下，它们不会被主动下载的被动型链接。
重点的内容是，a 标签也可以有 rel 属性，我们来简单了解一下，首先是跟 link 相同的一些 rel，包括下面的几种。
alternate
author
help
license
next
prev
search
这些跟 link 语义完全一致，不同的是，a 标签产生的链接是会实际显示在网页中的，而 link 标签仅仅是元信息。
除了这些之外，a 标签独有的 rel 类型：
tag 表示本网页所属的标签；
bookmark 到上级章节的链接。
a 标签还有一些辅助的 rel 类型，用于提示浏览器或者搜索引擎做一些处理：
nofollow 此链接不会被搜索引擎索引；
noopener 此链接打开的网页无法使用 opener 来获得当前页面的窗口；
noreferrer 此链接打开的网页无法使用 referrer 来获得当前页面的 url；
opener 打开的网页可以使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为。
a 标签基本解决了在页面中插入文字型和整张图片超链接的需要，但是如果我们想要在图片的某个区域产生超链接，那么就要用到另一种标签了——area 标签。
area 标签
area 标签与 a 标签非常相似，不同的是，它不是文本型的链接，而是区域型的链接。
area 标签支持的 rel 与 a 完全一样，这里就不多说了。
area 是整个 html 规则中唯一支持非矩形热区的标签，它的 shape 属性支持三种类型。
圆形：circle 或者 circ，coords 支持三个值，分别表示中心点的 x,y 坐标和圆形半径 r。
矩形：rect 或者 rectangle，coords 支持两个值，分别表示两个对角顶点 x1，y1 和 x2，y2。
多边形：poly 或者 polygon，coords 至少包括 6 个值，表示多边形的各个顶点。
因为 area 设计的时间较早，所以不支持含有各种曲线的路径，但是它也是唯一一个支持了非矩形触发区域的元素，所以，对于一些效果而言，area 是必不可少的。
area 必须跟 img 和 map 标签配合使用。使用示例如下（例子来自 html 标准）。
这个例子展示了在一张图片上画热区并且产生链接，分别使用了矩形、圆形和多边形三种 area。
结语
本节课我们介绍了几种链接类型。在 HTML 中，链接有两种类型。一种是超链接型标签，一种是外部资源链接。
我们逐次讲到了 link 标签、a 标签和 area 标签，link 标签一般用于看不见的链接，它可能产生超链接或者外部资源链接，a 和 area 一般用于页面上显示的链接，它们只能产生超链接。
最后，留给你一个思考问题，你的工作中，是使用过哪些类型的 link 标签的呢？
猜你喜欢
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享赞 9
提建议
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
CSS选择器：伪元素是怎么回事儿？
下一篇
CSS排版：从毕升开始，我们就开始用正常流了
精选留言(22)
心雨2019-03-15有很多链接类型都没有用过,老师就这样点到为止我们也不知道能用来干什么,如果您能举例说平时哪些场景用哪些标签更好,这样就不会过目就忘,也容易理解记忆,在工作中也能有很大帮助,这样也能帮助我们买了课程的这些小伙伴省很多时间.共 1 条评论85
cmyh2019-03-12老师您好，我有几点困惑，望您能指点迷津 1.基本数据类型存放于栈空间中，对象存放于堆空间中，堆空间在内存里的存放是以链表的形式吗，物理地址不连续，但是逻辑地址是连续的？ 2.声明一个基本数据类型，存放于栈空间，但是使用的时候，又把它进行一次对象的转化，例如：var a="1"，实际操作的时候它又创建了一个String对象，那么这个基本数据类型a字符串_去哪了，它就没有用了吗？ 3.JavaScript中的null，是一个值还是一个地址，如果是值的话，那null是否有很多个，是地址的话，那说明null是指向一个唯一的一个地方？ 4.原型链中的prototype和__proto__，它们是指针吗，我认为它是指针，但是有前端小伙伴说它是一块连续的空间，每次声明一个变量都从object开始开辟一整套的空间，也就是说堆空间中可能会有很多的object 5.最后一个问题是js垃圾回收机制标记清除算法中，它说从根节点出发进行可达节点遍历标记，那么这个根节点是从什么地方开始呢？是从全局的window或者global出发吗？如果null是一个唯一的空间，那么清除一个对象其实是把对象的值指向这块空间吗？展开25
以勒2019-03-12link主要用来引入外部静态资源 和 记录标记页面的元信息帮助浏览器优化 a 主要用在 页面内可见的 超链接 area + map 用在 一张图片中部分区域需要做跳转时的情况。14
阿成2019-03-12服了！ 我能说我之前听都没听说过area和map标签吗... 真没想到小小链接竟然有这么多学问... 且不说用不用得到，对整个知识体系有了一定的认识和了解。 winter老师的课从来都是点到为止，而不是把所有东西都告诉我们。我们有了方向，就不怕迷路，自然胸有成竹。展开共 4 条评论13
Semantha2019-03-14自从用了vue，项目中貌似没用过链接标签共 1 条评论8
王大可2019-03-12记得早年都是使用dreamweaver生成area和map代码，然后用在淘宝店铺上6
子非鱼2019-04-30项目中使用了modulepreload，效果还是挺明显的3
Scorpio2019-03-12我好像只用过引入css标签，，。感觉自己菜到抠脚3
王文银2019-03-12作为一个菜鸟，平时只用到了link 链接样式和a标签跳转😂 😂 😂4
jacklovepdf2019-05-20把链接分为超链接类和外部资源类是作者自己的理解么，还是官方有这种分类呀，我没找到。2
乃乎2019-03-14加一个 manifest 吧2
海的对岸2020-09-14以前玩dw的时候，有个工具，就是在图片上画圆，然后给这个圆设置属性，现在想来，应该就是area标签了。然后真的从事前端行业，基本开发都是vscode，从来都不用dw
青鸟2020-05-28HTML的链接，要么就是常用的要么就是索性不用，那么对于不用的只是暂时的，例如map和area配合，不是特定情况是不需要考虑的。 area标签和a标签中的coords属性语义是一样的吗？ 为什么HTML5不支持a标签中的coords属性呢？
渴望做梦2019-07-17"opener 打开的网页可以使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为。" 老师，这句话没看明白， opener 是需要和 window.open 方法配合使用的，这个和 a 标签有什么关系呢？作者回复: 和a标签也能配合的
共 2 条评论- Geek_0bb5372019-04-19link预加载是开启单独一个线程加载的还是跟其它普通link一起排队一个一个加载共 1 条评论
Mr.杨2019-04-11area可以在项目太紧的情况下用，不过不推荐用
ezra.xu2019-03-21请问老师，页面资源的预加载是不是可以用link标签实现，还有其他的方式吗？
田野的嘴好冰2019-03-19area没听说过，link方便搜索之类的也是第一次听说，还有a标签的rel 属性也是第一次看全
继业(Adrian)2019-03-19感谢作者。提神醒脑
F.2019-03-15老师， script 标签算不算半个链接标签呢