link标签

link 标签会生成一个链接,它可能生成超链接,也可能生成外部资源链接。

超链接型link标签

生成超链接,但是又不会像 a 标签那样显示在网页中。

canonical 型 link

  1. <link rel="canonical" href="...">

提示页面它的主URL,在网站中常常有多个 URL 指向同一个页面的情况,搜索引擎访问这类页面时会去掉重复的页面,这个 link 会提示搜索引擎保留哪一个 URL 。

alternate 型 link

  1. <link rel="alternate" href="...">

这个标签提示页面它的变形形式,这个所谓的变形可能是当前页面内容的不同格式、不同语言或者为不同设备设计的版本,这种 link 通常也是提供给搜索引擎来使用的。

页面提供 rss 订阅时,可以用这样的 link 来引入:

  1. <link rel="alternate" type="application/rss+xml" title="RSS" href="...">

prev 型 link 和 next 型 link
告诉搜索引擎或者浏览器它的前一项和后一项,有助于页面的批量展示。

其它超链接的 link:

  • rel=”author” :链接到本页面的作者,一般是 mailto: 协议
  • rel=”help” :链接到本页面的帮助页
  • rel=”license” :链接到本页面的版权信息页
  • rel=”search” : 链接到本页面的搜索页面(一般是站内提供搜索时使用)

外部资源类 link 标签

icon 型 link
表示页面的 icon。多数浏览器会读取 icon 型 link ,并且把页面的 icon 展示出来。

预处理类 link

  • dns-prefetch 型 link 提前对一个域名做 dns 查询,这样的 link 里面的 href 实际上只有域名有意义。
  • preconnect 型 link 提前对一个服务器建立 tcp 连接。
  • prefetch 型 link 提前取 href 指定的 url 的内容。
  • preload 型 link 提前加载 href 指定的 url。
  • perrender 型 link 提前渲染 href 指定的 url。

modulepreload 型的 link
modulepreload 型 link 的作用是预先加载一个 JavaScript 的模块。这可以保证 JS 模块不必 等到执行时才加载。

stylesheet 型 link

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

pingback 型 link
这样的 link 表示本网页被引用时,应该使用的 pingback 地址,这个机制是一份独立的标准,遵守 pingback 协议的网站在引用本页面时,会向这个 pingback url 发送一个消息。

a标签

当 a 标签有 href 属性时,它是链接,当它有 name 时,它是链接的目标。

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 标签的默认行为

    area标签

    a 标签基本解决了在页面中插入文字型和整张图片超链接的需要,但是如果我们想要在图片的某个区域产生超链接,那么就要用到 area 标签了。

area 是这个 html 规则中唯一支持非矩形热区的标签,它的 shape 属性支持三种类型。

  • 圆形:circle 或者 circ,coords支持三个值,分别表示中心点的x,y坐标和圆形半径r。
  • 矩形:rect 或者 rectangle,coords支持两个值,分别表示两个对角顶点x1,y1 和 x2, y2。
  • 多边形:poly 或者 polygon,coords 至少包括 6 个值,表示多边形的各个顶点。