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 rel="stylesheet" type="text/css" href="*.css"/>指被link链接的css文档是本文档的样式描述文件。
2、链接一个外部的icon用于浏览器的栏目图标和收藏夹图标,地址栏最前面的小图标和收藏夹图标
如图中的图标，<link rel="icon" href="/favicon.ico" >
关于rel="icon"属性，主要用途就是如上所示。但是对于IOS的图标，icon属性无效，需使用 apple-touch-icon and apple-touch-startup-image 。
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">
另外rel="icon" 同时可以附加sizes="32x32"等属性，确保浏览器只会把目标图片解析成32x32的大小。当然，我们可以提供多种大小的图片，浏览器会自行选择最合适的图片。
例如：<link rel="icon" sizes="16x16" href="/favicon.ico" >
<link rel="icon" sizes="32x32" href="/favicon.ico" >
<link rel="icon" sizes="128x128" href="/favicon.ico" >
关于href指向的资源，图标必须是ico图片，ico图片的制作过程如下：
首先准备一张png图片，再利用在线的转换工具即可转换称为ico图片。
3、rel="alternate"可以定义另外一个版本的文档，可以是Pdf，另外一种语言，另外一种css样式，如下所示
<link rel="alternate" href="url"  >，方便了浏览器插件（例如翻译插件，下载插件）和搜索引擎的搜索。
4、rel="author license",规定一些作者和版权相关的信息。例如，
<link rel="author license" href="url"  >,url所指向的就是这些信息所在的文档。
5、rel="canonical"，用来定义一个权威的版本，保证内容的正确性。
<link rel="canonical" href="url"  >,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 a <frame> or <iframe>.
embed: A resource to be embedded inside an <embed> element.
fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
font: Font file.
image: Image file.
object: A resource to be embedded inside an <embed> element.
script: JavaScript file.
style: Stylesheet.
track: WebVTT file.
worker: A JavaScript web worker or shared worker.
video: Video file.
例1：提前下载好script，之后再执行，有可以下载css，font等等
<head> <meta charset="utf-8"> <title>JS and CSS preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js"></script> </body>
例2：提前下载视频资源如下，（当然，还可以提前下载好图片等等，只需要as="image" type="image/png"）
<head> <meta charset="utf-8"> <title>Video preload example</title> <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> </head> <body> <video controls> <source src="sintel-short.mp4" type="video/mp4"> <source src="sintel-short.webm" type="video/webm"> <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> </video> </body>
8、rel属性配合media属性可根据不同的设备来下载不同的资源
<head> <meta charset="utf-8"> <title>Responsive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>My site</h1> </header> <script> var mediaQueryList = window.matchMedia("(max-width: 600px)"); var header = document.querySelector('header'); if(mediaQueryList.matches) { header.style.backgroundImage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundImage = 'url(bg-image-wide.png)'; } </script> </body>
浏览器的支持
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Edge Mobile
Firefox for Android
Opera for Android
Safari on iOS
Samsung Internet
Basic support
Full support1
Full supportYes
Full support1
Full supportYes
Full supportYes
Full supportYes
Full supportYes
Full supportYes
Full supportYes
Full support4
Full supportYes
Full supportYes
Full supportYes
Alternative stylesheets.
?
?
Full support3
?
Full supportYes
?
?
?
?
Full support4
?
?
?
dns-prefetch
Experimental
Full support46
?
Full support3
?
?
?
Full support46
Full supportYes
?
Full support4
?
?
Full supportYes
manifest
ExperimentalNon-standard
No supportNo
?
?
?
?
?
Full support39
Full support39
?
?
?
?
Full support4.0
modulepreload
Experimental
Full support66
?
?
?
Full support53
?
Full support66
Full support66
?
?
Full support53
?
?
noopener
Non-standard
Full support49
No supportNo
Full support52
Notes
Open
No supportNo
Full support36
Full support10.1
Full support49
Full support49
No supportNo
Full support52
Notes
Open
Full support32
Full support10.3
Full support5.0
preconnect
Experimental
Full support46
No supportNo
Full support39
Notes
Open
No supportNo
?
No supportNo
Full support46
Full support42
No supportNo
Full support39
Notes
Open
?
No supportNo
Full support4.0
prefetch
Experimental
?
?
?
?
?
?
?
?
?
?
?
?
?
preload
Experimental
Full support50
?
No support56 — 57
Notes
Open
?
?
?
Full support50
Full support50
?
No support56 — 57
Notes
Open
?
?
Full support5.0
prerender
Experimental
?
?
?
?
?
?
?
?
?
?
?
?
?