Link标签属性含义及其⽤法合集
link元素⽤于链接外部css样式表等其他相关外部资源。
1 link
其中link中包括如下属性。
href：指明外部资源⽂件的路径，即告诉浏览器外部资源的位置
hreflang：说明外部资源使⽤的语⾔
media：说明外部资源⽤于哪种设备
rel：必填，表明当前⽂档和外部资源的关系
sizes：指定图标的⼤⼩，只对属性rel="icon"⽣效
type：说明外部资源的MIME类型，如text/css、image/x-icon
2 rel
rel核⼼属性的参数值如下，也可参考 。
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="foo.css" title="foo">
<link rel="alternate stylesheet" type="text/css" href="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 = Attribute('class')
var links = document.querySelectorAll('link');
links.forEach(link => {
var linkTitle = Attribute('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="m.xxx">
移动端head添加如下，href为pc端页⾯地址。
<link rel="canonical" href="xxx">
3.2 archives
链接到⼀个描述历史记录、⽂档或其他具有历史意义的材料等的集合⽂档。
<link rel="archives" href="">
3.3 author
表明⽂档作者的链接。
<link rel="author" href="">
3.4 bookmark
页⾯在收藏夹中显⽰的图标。
<link rel="bookmark" href="fav.ico">
3.5 canonical
⼀个⽹站很可能有多个不同的⽹址指向同⼀个⽹页，或者在不同⽹址上有重复⽹页或⾮常类似的⽹页，⽐较常见的就是为了⽀持多种设备类型，同⼀个⽹页会包含多个⽤户端。
在搜索引擎同时收录如下三个⽹站时，由于三个⽹址的页⾯内容是相同的，搜索引擎会根据算法⾃动推荐⼀个版本的URL展⽰在搜索结果中，⽽此URL很可能不是最希望展现的版本。
/index
/index.html
/index.html?id=xxx
按照如下⽅式指定⽹页的规范版本，搜索引擎则会把权重集中到规范版本页⾯，由此提升⽹页的权重，排名更加靠前。
<link rel="canonical" href="/index">
3.6 dns-prefetch
DNS Prefetch是⼀种DNS预解析技术，⽤户在浏览⽹页时，浏览器会对⽹页中的域名进⾏解析缓存，⽽在⽤户单击页⾯的链接时，就不再进⾏DNS的解析，以此减少⽤户等待时间，提升⽤户体验。
默认情况下浏览器会对页⾯中和当前⽹页不在同⼀个域下的域名进⾏预解析，并缓存结果，即隐式的DNS解析，⽽对于页⾯中未出现的域进⾏预解析，则可通过link标签。
link⽅式的DNS的预解析与页⾯的加载是并⾏处理的，不会影响到页⾯的加载性能。
<link rel="dns-prefetch" href="">
注意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="www.baidu" rel="nofollow"></a>
3.14 next
⽤于记录⽂档的下⼀页，可提⽰浏览器⽂章的开始URL，且浏览器可提前加载此页。
<link rel="start" href="">
3.15 noreferrer
阻⽌浏览器发送访问来源信息。
<link rel="noreferrer" href="">
3.16 preload
在页⾯渲染之前对资源进⾏预加载，且不易阻塞页⾯的初步渲染。
其中href和as属性⽤于指定被加载资源的路径和类型，as指定资源的类型后，浏览器可以更加精确地优化资源加载优先级。
如下预加载了css和js⽂件，⽽在页⾯的渲染时，⼀旦需要此资源，则可以⽴即使⽤，详细参考 。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello world</p>
<script src="main.js"></script>
href标签怎么用</body>
</html>
3.17 pingback
pingback是博客中⽤来通知其他⽂章被引⽤的⼀种⽅式。
例如⽤户A发布了⼀篇⽂章C，然后⽤户B书写了⼀⽚⽂章D，其中⽂章D中引⽤了⽂章C的链接，当在⽤户B在发表⽂章D的时
候，WordPress博客系统就会⾃动从⽂章D中拣出⽂章C的链接，并且尝试向⽂章C的pingback地址发送消息。
如下声明了⽹页的pingback地址。
<link rel="pingback" href="">
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
链接到⽂档的搜索⼯具，详细参考 。
<link rel="search" href="">
3.22 stylesheet
指定作为样式表的外部资源，若未设置type，浏览器默认为text/css。
<link rel="stylesheet" href="style.css">
3.23 sidebar

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。