HTML标签，除了a标签还有哪些标签叫链接

发表于 | 阅读次数: |

链接这种元素可以在整个互联网上无处不在，咩有了超链接的 HTML 文档最多可以称得上是富文本，没法叫超文本了。
不过，除了这些肉眼可以看见的跳转超链接之外，在 HTML 里面还规定了一些不可见链接的类型，这里对链接家族进行一个学习，在 HTML 中，链接有两种类型：一种是超链接型标签；另一种是外部资源链接。其中包括 a 标签、area 标签、link 标签，基本结构如下如(来自winter老师的图)：

  • 超链接 link 标签
    • canonical 型 link (如 <link rel="canonical" href="...">，在网站上常常有多个 url 指向同一个页面的情况，搜索引擎这类页面时会去掉重复的，而这个链接就可以提示搜索引擎保留哪一个)
    • alternate 型 link (如 <link rel="alternate" href="...">，这个标签提示页面的变形形式，这个所谓的变形可能是当前页面内容的不同格式、不同语言或者不同的设备设计的版本，它通常也是提供给搜索引擎来使用；alternate 型 link 也可以在页面提供 RSS 订阅时使用 <link rel="alternate" type="application/rss+xml" title="RSS" href="...">出搜索引擎外，很多插件也能识别)
    • prev 型 link 和 next 型 link (互联网中，很多网页属于一个序列，如很分页浏览的场景或者图片展示的场景，每个网页是序列中的一个，这种时候，就是和用 prev 和 next 型的 link 标签，它可以告诉搜索引擎或者浏览器它的前一项和后一项，这有助于页面的批量展示)
    • 其它超链接类的 link
      • rel=”author” 链接到本页面的作者，一般是 mailto: 协议
      • rel=”help” 链接到本页面的帮助页
      • rel=”licence” 链接到本页面的版权信息页
      • rel=”search” 链接到本页面的搜索页面

外部资源型 link 标签会被主动下载，并且根据 rel 类型做不同的处理，其包括：

  • icon 型 link (表示页面 icon，并且会把页面的 icon 展示出来，只有 icon 型 link 有有效的 size 属性，HTML 标准允许一个页面出现多个 icon 型 link，并且用 sizes 指定它适合的 icon 尺寸)
  • 预处理类 link (预处理类 link 标签允许我们控制浏览器，提前针对一些资源去做操作以提高性能，如dns查询域名、建立连接、传输数据、加载进内存渲染)，其有一下类型：
    • dns-prefetch 型 link，提前对一个域名做 dns 查询，这样的 link 里面的 href 实际上只有域名有意义
    • preconnect 型 link，提前对一个服务器建立 tcp 连接
    • prefetch 型 link，提前取 href 指定的 url 内容
    • preload 型 link，提前加载 href 指定的 url
    • prerender 型 link，提前渲染 href 指定的 url
  • modulepreload 型 link (它的作用是预先加载一个 JavaScript 的模块，保证 js 模块不必等到执行时才加载<link rel="modulepreload" href="app.js">)
  • stylesheet 型 link (引入css样式<link rel="stylesheet" type="text/css" href="sss.css">)
  • pingback 型 link (这样的 link 表示本网页被引用时，应该使用的 pingback 地址，这个机制是一份独立的标准，遵守 pingback 协议的网站在引用本页面时，会像这个 pingback url 发送一个消息)

a 标签

a 标签时 “anchor” 的缩写，即锚点。具有 href 的 a 标签跟一些 link 一样，会产生超链接，在用户不操作的情况下，它们不会被主动下载的被动型链接。
重点的内容是，a 标签也可以有 rel 属性，首先是跟 link 相同的一些 rel，包括如下几种：

  • alternate
  • author
  • help
  • licence
  • next
  • prev
  • search

这些跟 link 语义完全一样，不同的是，a 标签产生的链接是会实际显示在网页中的，而 link 标签仅仅是元信息。
除此之外，a 标签还有一些独有的 rel 类型，如下：

  • tag 表示本网页所属的标签
  • bookmark 表示到上级章节的链接

a 标签还有一些辅助的 rel 类型，用于提示浏览器或者搜索引擎做的一些处理：

  • nofollow 表示此链接不会被搜索引擎索引
  • noopener 表示此链接打开的网页无法使用 opener 来获得当前页面的窗口
  • noreferrer 表示此链接打开的网页无法使用 referrer 来获得当前页面的 url
  • opener 表示打开的网页可以使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为

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 标签必须跟 img 和 map 标签配合使用，如下：

1
2
3
4
5
6
7
8
9
10
11
12
<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star.">
 </map>
</p>

总结

这里对 HTML 的链接类型标签：超链接和外部资源链接标签进行了学习，通过对 link 标签、a 标签、area 标签的理解，加深了链接型标签的更深层理解。