link元素用于链接外部css样式表等其他相关外部资源。

1 link

其中link中包括如下属性。

href：指明外部资源文件的路径，即告诉浏览器外部资源的位置
hreflang：说明外部资源使用的语言
media：说明外部资源用于哪种设备
rel：必填，表明当前文档和外部资源的关系
sizes：指定图标的大小，只对属性rel="icon"生效
type：说明外部资源的MIME类型，如text/css、image/x-icon

2 rel

rel核心属性的参数值如下，也可参考 MDN。

alternate：链接到文档的替代版本
archives：链接到文档集或历史数据
author：提供指向文档作者的链接
bookmark：定义文档在收藏夹中显示的书签图标
canonical：指明网站的规范版本
dns-prefetch：指定浏览器预先执行目标资源的DNS解析
external：链接到外部，即告知搜索引擎，此链接不是本站链接
first：链接到集合中的首个文档
help：链接帮助信息
icon：定义网站或网页在浏览器标题栏中的图标
license：链接到文档的版权信息
last：链接到集合中的末个文档
nofollow：指定文档不被搜索引擎跟踪，即某些页面不被爬虫抓取
next：记录文档的下一页（浏览器可以提前加载此页）
noreferrer：可以阻止浏览器发送访问来源信息
preload：对资源进行预加载
pingback：提供处理当前文档的pingback服务器地址
prefetch：对资源进行预加载并缓存，通常preload用于加载当前页面的资源，而prefetch用于加载将来页面可能需要的资源
preconnect：预先连接到目标资源的地址
prev：记录文档的下一页
search：链接到文档的搜索工具
stylesheet：指定作为样式表的外部资源
sidebar：指定浏览器边栏中显示的文档
tag：指定当前文档使用的标签、关键词
up：指向一个文档，此文档提供此网页的上下文关系

3 rel 应用

3.1 alternate

alternate可用于主题样式切换，将css作为预备样式，通过对link使用disabled进行切换。

其优点是由于浏览器提前把css文件预加载好了，网站主题或样式切换时几乎是瞬间的，用户无感知，缺点是只能局限在当前页的css切换，很难做到多页的css切换。

如下根目录中包括index.html、foo.css、bar.css。

注意title属性会控制css样式文件的加载方式。

无title属性：ref=stylesheet时css样式始终都会加载并渲染
有title属性：ref=stylesheet时css样式会作为默认样式加载并渲染
有title属性：ref=alternate stylesheet时css样式会作为预备样式渲染，默认不加载

// index.html
<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://juejin.cn/post/foo.css" title="foo">
    <link rel="alternate stylesheet" type="text/css" href="https://juejin.cn/post/bar.css" title="bar">
</head>

<body>
    <p>hello world</p>
    <button class="foo">foo</button>
    <button class="bar">bar</button>

    <script>
        var foo = document.querySelector('.foo')
        var bar = document.querySelector('.bar')

        foo.addEventListener("click", toggleTheme);
        bar.addEventListener("click", toggleTheme);

        function toggleTheme() {
            var btnClass = this.getAttribute('class')
            var links = document.querySelectorAll('link');

            links.forEach(link => {
                var linkTitle = link.getAttribute('title')

                link.disabled = true;

                if (linkTitle === btnClass) {
                    link.disabled = false;
                }
            })
        }
    </script>
</body>

</html>

// foo.css
p { color: red; }

// bar.css
p { color: blue; }
复制代码

对于具有pc端和移动端的网页，alternate也有利于搜索引擎对于不同设备的用户提供不同类型的页面。

pc版head添加如下，其中href为移动端页面地址。

<link rel="alternate" media="only screen and (max-width:640px)" href="http://m.xxx.com">
复制代码

移动端head添加如下，href为pc端页面地址。

<link rel="canonical" href="http://xxx.com">
复制代码

3.2 archives

链接到一个描述历史记录、文档或其他具有历史意义的材料等的集合文档。

<link rel="archives" href="https://www.xxx.com">
复制代码

3.3 author

表明文档作者的链接。

<link rel="author" href="http://www.xxx.com">
复制代码

3.4 bookmark

页面在收藏夹中显示的图标。

<link rel="bookmark" href="fav.ico">
复制代码

3.5 canonical

一个网站很可能有多个不同的网址指向同一个网页，或者在不同网址上有重复网页或非常类似的网页，比较常见的就是为了支持多种设备类型，同一个网页会包含多个用户端。

http://www.xxx.com
http://m.www.xxx.com
复制代码

在搜索引擎同时收录如下三个网站时，由于三个网址的页面内容是相同的，搜索引擎会根据算法自动推荐一个版本的URL展示在搜索结果中，而此URL很可能不是最希望展现的版本。

http://www.xxx.com/index
http://www.xxx.com/index.html
http://www.xxx.com/index.html?id=xxx
复制代码

按照如下方式指定网页的规范版本，搜索引擎则会把权重集中到规范版本页面，由此提升网页的权重，排名更加靠前。

<link rel="canonical" href="http://www.xxx.com/index">
复制代码

3.6 dns-prefetch

DNS Prefetch是一种DNS预解析技术，用户在浏览网页时，浏览器会对网页中的域名进行解析缓存，而在用户单击页面的链接时，就不再进行DNS的解析，以此减少用户等待时间，提升用户体验。

默认情况下浏览器会对页面中和当前网页不在同一个域下的域名进行预解析，并缓存结果，即隐式的DNS解析，而对于页面中未出现的域进行预解析，则可通过link标签。

link方式的DNS的预解析与页面的加载是并行处理的，不会影响到页面的加载性能。

<link rel="dns-prefetch" href="http://www.xxx.com">
复制代码

注意dns-prefetch不能滥用，多页面重复DNS预解析会增加重复的DNS查询次数。

如下可禁用隐式的DNS预解析。

<meta http-equiv="x-dns-prefetch-control" content="off">
复制代码

3.7 external

链接到外部，告知浏览器，此链接非本站链接。

<link rel="external" href="">
复制代码

3.8 first

链接到集合中的首个文档。

<link rel="first" href="">
复制代码

3.9 help

链接帮助信息。

<link rel="help" href="">
复制代码

3.10 icon

定义网站或网页在浏览器标题栏中的图标。

<link rel="icon" href="favicon.ico">
复制代码

3.11 license

<link rel="license" href="">
复制代码

3.12 last

链接到集合中的末个文档。

<link rel="last" href="">
复制代码

3.13 nofollow

指定页面不被搜索引擎跟踪，或者此页面不被搜索引擎爬取。

<link rel="nofollow" href="">
复制代码

若链接使用该属性，即告知搜索引擎不抓取此链接。

<a href="http://www.baidu.com" rel="nofollow"></a>
复制代码

3.14 next

用于记录文档的下一页，可提示浏览器文章的开始URL，且浏览器可提前加载此页。

<link rel="start" href="http://www.xxx.com">
复制代码

3.15 noreferrer

阻止浏览器发送访问来源信息。

<link rel="noreferrer" href="">
复制代码

3.16 preload

在页面渲染之前对资源进行预加载，且不易阻塞页面的初步渲染。

其中href和as属性用于指定被加载资源的路径和类型，as指定资源的类型后，浏览器可以更加精确地优化资源加载优先级。

如下预加载了css和js文件，而在页面的渲染时，一旦需要此资源，则可以立即使用，详细参考 preload。

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <link rel="preload" href="https://juejin.cn/post/style.css" as="style">
    <link rel="preload" href="https://juejin.cn/post/main.js" as="script">

    <link rel="stylesheet" href="https://juejin.cn/post/style.css">
</head>

<body>
    <p>hello world</p>

    <script src="https://juejin.cn/post/main.js"></script>
</body>

</html>
复制代码

3.17 pingback

pingback是博客中用来通知其他文章被引用的一种方式。

例如用户A发布了一篇文章C，然后用户B书写了一片文章D，其中文章D中引用了文章C的链接，当在用户B在发表文章D的时候，WordPress博客系统就会自动从文章D中拣出文章C的链接，并且尝试向文章C的pingback地址发送消息。

如下声明了网页的pingback地址。

<link rel="pingback" href="http://www.xxx.com">
复制代码

3.18 prefetch

对资源进行预加载，一般用于加载非本页的其他页面所需要的资源，以便加快后续页面的首屏渲染速度。资源加载完成后，可以被缓存。

<link rel="prefetch" href=""> 
复制代码

3.19 preconnect

告知浏览器提前打开与链接网站的连接，其中包括DNS预解析、TLS协商、TCP握手，消除了往返延迟并为用户节省了时间，以便后续可以更快地获取链接内容。

<link rel="preconnect" href=""> 
复制代码

3.20 prev

用于记录文档的上一页。

<link rel="prev" href=""> 
复制代码

3.21 search

链接到文档的搜索工具，详细参考 search。

<link rel="search" href="">
复制代码

3.22 stylesheet

指定作为样式表的外部资源，若未设置type，浏览器默认为text/css。

<link rel="stylesheet" href="style.css">
复制代码

3.23 sidebar

指定浏览器边栏中显示的文档，HTML规范中已删除，仅由Firefox63之前的版本实现。

<link rel="sidebar" href="">
复制代码

3.24 tag

指定当前文档使用的标签、关键词。

<link rel="tag" href="">
复制代码

3.25 up

指向一个文档，此文档提供此网页的上下文关系。

<link rel="up" href="">
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

5 分钟理解数据库死锁

KeychainAccess 源码阅读

Apache Mod_Access访问控制规则绕过漏洞

Runtime总结(一)

安卓超强护眼神器-熬夜必备

DbbS 2.0-alpha topics.php SQL注入漏洞

Link 标签属性含义及其用法