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/