link标签的主要用法
link的rel属性有很多的值，不同的值代表了外部资源与本html文档的关系。
rel属性的值可以是：
- alternate
- author
- canonical
- dns-prefetch
- external
- help
- icon
- licence
- manifest
- modulepreload
- next
- pingback
- prefetch
- preload
- prev
- search
- shortlink
- sidebar
- stylesheet
- tag
1、连接外部的样式表，这个是最常用的
指被link链接的css文档是本文档的样式描述文件。
2、链接一个外部的icon用于浏览器的栏目图标和收藏夹图标,地址栏最前面的小图标和收藏夹图标
如图中的图标，
关于rel="icon"属性，主要用途就是如上所示。但是对于IOS的图标，icon属性无效，需使用 apple-touch-icon and apple-touch-startup-image 。
另外rel="icon" 同时可以附加sizes="32x32"等属性，确保浏览器只会把目标图片解析成32x32的大小。当然，我们可以提供多种大小的图片，浏览器会自行选择最合适的图片。
例如：
关于href指向的资源，图标必须是ico图片，ico图片的制作过程如下：
首先准备一张png图片，再利用在线的转换工具即可转换称为ico图片。
3、rel="alternate"可以定义另外一个版本的文档，可以是Pdf，另外一种语言，另外一种css样式，如下所示
，方便了浏览器插件（例如翻译插件，下载插件）和搜索引擎的搜索。
4、rel="author license",规定一些作者和版权相关的信息。例如，
,url所指向的就是这些信息所在的文档。
5、rel="canonical"，用来定义一个权威的版本，保证内容的正确性。
,url所指向的html文档，即使权威版本，内容更加正确，方便搜索引擎的分析。
6、rel="preconnect"或者rel="prefetch"或者rel="preload"等都是用于加快网页的一个加载速度的类型，只有部分浏览器实现了。
preconnect是告知浏览器提前连接指定的url，以便在后面需要使用该连接的时候，连接已经形成，节省了时间。
prefetch是告知浏览器立刻取来url所指向的资源，这个适用于该资源立刻需要被用户使用。
preload是告知浏览器预加载一些url指定的资源，这些资源可能立刻会被使用。
通过预加载，将一些后续需要使用的资源提前下载下来，虽然会导致一开始网页加载的时候，空白一段时间，但是却可以换来后续用户使用体验的增加，使用户在操作网页的时候，不会中途因为等待资源下载而等待。
在上面三种类型之中，preload更加适用于预加载资源。
下面将是一些preload的常用的预加载资源的方式：
preload可以预先加载如下这些资源， 并通过as属性指定如下这些资源类型，并通过type类型指定这些资源中的子资源，例如as="vedio" type="vedio/mp4"
audio: Audio file.document: An HTML document intended to be embedded inside aor