前言
<link>标签是HTML中的一个元素，用于建立文档与外部资源之间的关系。这些资源可以是样式表，网站图标，字体文件，或者其他网页所需的资源等等。
使用实例
引入样式表
<link rel="stylesheet" href="styles.css" type="text/css" />
设定网站图标
<link rel="icon" href="favicon.ico" type="image/x-icon" />
引入字体文件
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
Link中的属性有哪些
<link>标签通常包括如下属性。
-
href：指明外部资源文件的路径，即告诉浏览器外部资源的位置 -
hreflang：说明外部资源使用的语言 -
media：说明外部资源用于哪种设备 -
rel：必填，表明当前文档和外部资源的关系 -
sizes：指定图标的大小，只对属性rel="icon"生效 -
type：说明外部资源的MIME类型，如text/css、image/x-icon
rel 属性详解
注：本文只对rel中一些常用的属性进行解析，具体可参照MDN文档。
alternate
alternate是HTML <link> 元素的一个属性，用于指定当前文档的替代版本。通常用于指定当前页面的另一个版本，如不同语言或格式的版本。
例如，如果一个网站提供了多种语言版本的页面，可以使用alternate属性指定其他语言版本的链接，以便用户可以根据自己的偏好选择不同的语言版本。
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page.html" />
在这个例子中，hreflang指定了链接的语言，href指定了该语言版本的链接地址。
canonical
canonical属性用于指定网站的规范版本。它告诉搜索引擎这个页面的规范地址，避免搜索引擎将多个地址视为相同内容的重复。通常用于解决重复内容的问题。
<link rel="canonical" href="https://example.com/canonical-page.html" />
DNS Prefetch
dns-prefetch属性用于指定浏览器预先执行目标资源的DNS解析，以减少加载资源时的延迟。
<link rel="dns-prefetch" href="//example.com">
Icon
icon属性用于定义网站或网页在浏览器标题栏中的图标。
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Next
next属性记录文档的下一页，浏览器可以提前加载此页。
<link rel="next" href="https://example.com/page2.html" />
Nofollow
nofollow属性指定文档不被搜索引擎跟踪，即某些页面不被爬虫抓取。
<a href="https://example.com/page.html" rel="nofollow">Link</a>
Noreferrer
noreferrer属性可以阻止浏览器发送访问来源信息。
<a href="https://example.com/page.html" rel="noreferrer">Link</a>
Preload
preload属性用于在页面渲染之前对资源进行预加载，且不易阻塞页面的初步渲染。 其中href和as属性用于指定被加载资源的路径和类型，as指定资源的类型后，浏览器可以更加精确地优化资源加载优先级。
如下预加载了css和js文件，而在页面的渲染时，一旦需要此资源，则可以立即使用，
<link rel="preload" href="https://example.com/font.woff2" as="font" crossorigin="anonymous">
Prefetch
prefetch属性用于对资源进行预加载并缓存，通常用于加载将来页面可能需要的资源。
<link rel="prefetch" href="https://example.com/large-image.jpg">
Preconnect
preconnect属性用于预先连接到目标资源的地址。
<link rel="preconnect" href="https://example.com">
Stylesheet
stylesheet属性指定作为样式表的外部资源。
<link rel="stylesheet" href="styles.css">
Tag
tag属性指定当前文档使用的标签、关键词。以下是一个示例：
<link rel="tag" href="">
