html link标签 rel_html常用标签

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说html link标签 rel_html常用标签,希望您对编程的造诣更进一步.

概述

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

link

其中link中包括如下属性。

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

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：指向一个文档，此文档提供此网页的上下文关系

应用

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 = 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: red;
}

对于具有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">

author

表明文档作者的链接。

<link rel="author" href="http://www.xxx.com">

bookmark

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

<link rel="bookmark" href="fav.ico">

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">

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">

external

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

<link rel="external" href="">

first

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

<link rel="first" href="">

help

链接帮助信息。

<link rel="help" href="">

icon

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

<link rel="icon" href="favicon.ico">

license

<link rel="license" href="">

last

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

<link rel="last" href="">

nofollow

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

<link rel="nofollow" href="">

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

<a href="http://www.baidu.com" rel="nofollow"></a>

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

<link rel="start" href="http://www.xxx.com">

noreferrer

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

<link rel="noreferrer" href="">

preload

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

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

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

<!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>
</body>

</html>

pingback

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

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

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

<link rel="pingback" href="http://www.xxx.com">

prefetch

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

<link rel="prefetch" href="">

preconnect

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

<link rel="preconnect" href="">

用于记录文档的上一页。

<link rel="prev" href="">

search

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

<link rel="search" href="">

stylesheet

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

<link rel="stylesheet" href="style.css">

sidebar

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

<link rel="sidebar" href="">

tag

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

<link rel="tag" href="">

up

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

<link rel="up" href="">

🎉 写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！

手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

GitHub / Gitee、GitHub Pages、掘金、CSDN 同步更新，欢迎关注😉~

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13579.html