HTML链接

link标签

超链接类

1. canonical 

多个url指向同一个页面时，这个link可以告诉搜索引擎，href的值是这个页面的主url

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

2.alternate

表示页面的”变形“，最典型就是页面的rss(Really Simple Syndication)

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

3.prev、next

告诉浏览器前一个、后一个极有可能访问的页面，建议浏览器预加载

<link rel="prev" href="...">
<link rel="next" href="...">

4.author、help、license、search

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

<link rel="author" href="...">
<link rel="help" href="...">
<link rel="license" href="...">
<link rel="search" href="...">

外部资源类

1.icon

href中指定的图标地址默认会被浏览器下载和使用，如果不指定，浏览器会默认向域名根目录下找favicon.ico（如果不存在会报404）

<link rel="icon" href="...”> 

2. dns-prefetch、preconnect、prefetch、preload 、prerender

rel=“dns-prefetch“ 提前做 dns 查询（这样的 link 里面的 href 实际上只有域名有意义）
rel=“preconnect” 提前建立 tcp 连接
rel=“prefetch"  提前加载(优先级较低)
rel=“preload" 提前加载(优先级较高)
rel=“prerender" 提前渲染

<link rel="dns-prefetch" href="...">
<link rel="preconnect" href="...">
<link rel="prefetch" href="...">
<link rel="preload" href="..." as="...">
<link rel="prerender" href="...">

preload和prefetch的区别可以看：这里

3.modulepreload

使得ES6 module 可以在执行import前就加载（并且是并发），否则import(...)的es6 module文件会到执行时才加载

举个栗子：

html:

<link rel="modulepreload" href="./lib2.js">
<link rel="modulepreload" href="./lib.js">
<script>
    let now = new Date();
    while(new Date() - now < 2000){}
</script>
<script type="module">
    import { a, b } from './lib.js'
</script>

lib.js:

import {a as b} from './lib2.js'
const a = 123
export {
  a, b
}

如果不加modulepreload，lib.js和lib2.js会在2s以后才会加载

4.stylesheet

引入样式表

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

5.pingback

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

<link rel="pingback" href="https://www.zhangxinxu.com/wordpress/xmlrpc.php">

a标签

也有rel属性，也有几个和link共有的类型，和几个独有的属性
1. alternate、author、help、license、next、prev、search 

和link一样功效，不同的是这个是显示在页面的。

<a rel="alternate" href="http://www.qq.com">asdsad</a>
<a rel="author" href="http://www.qq.com">asdsad</a>
<a rel="help" href="http://www.qq.com">asdsad</a>
<a rel="license" href="http://www.qq.com">asdsad</a>
<a rel="next" href="http://www.qq.com">asdsad</a>
<a rel="prev" href="http://www.qq.com">asdsad</a>
<a rel="search" href="http://www.qq.com">asdsad</a>

2.tag、bookmark

a独有的rel类型，表示不同的语义：tag 表示本网页所属的标签，bookmark 到上级章节的链接。

<a rel="tag" href="http://www.qq.com">asdsad</a>
<a rel="bookmark" href="http://www.qq.com">asdsad</a>   

3. nofollow、noopener、noreferrer、opener

有实际功效的几个rel类型：

nofollow 此链接不会被搜索引擎索引；
noopener 此链接打开的网页无法使用 opener 来获得当前页面的窗口；
noreferrer 此链接打开的网页无法使用 referrer 来获得当前页面的 url；
opener 打开的网页可以使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为（实际测试并没有生效，window.opener都是null）

ps: window.opener只有是通过window.open打开的页面才有值

<a rel="nofollow" href="http://www.qq.com">asdsad</a>
<a rel="noopener" target="_self" href="http://www.qq.com">asdsad</a>
<a rel="noreferrer" target="_self" href="http://www.qq.com">asdsad</a>
<a rel="opener" target="_self" href="http://www.qq.com">asdsad</a>    

area标签

功效和a标签是一样的

不同的是area标签是是区域型的链接，a标签是文本型的链接

<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>

ps: 这里推荐我常用的一个网站，专门用来定位area的coords：http://imagemap-generator.dariodomi.de/