总结link标签的rel 属性

关注

原创最新推荐文章于 2023-10-04 16:03:45 发布 6k 阅读 AI 写同款· GEO 优化 ›

使用js代码动态控制网页的link标签探索背景不知道你们有没有用到过类似加盟代理的分站啊,只能加入简单的js代码或者编辑友情链接,或者只能填个备案号的那种网站,你没有权限控制网站的主体源代码,但是你有想更改部分样式或者链接! 比如,你想给你的网站设置一个favicon.ico js实现动态修改favicon.ico <script type="text/javascript"> var link = document.createElement("link");//先获取link标签对象 link.rel = "shortcut 阅读详情

link标签的属性

我们知道标签就是定义文档与外部的关系，它最常见的的用途是链接样式表。通常写的时候它只存在head部分中，不过它可以出现任何次数。接下来我们具体的分析一下link标签中的属性：

href

规定被连接文档的位置

<link rel='stylesheet'  href='./ease.css' type='text/css'  />

hreflang

规定被链接文档中文本的语言
*几乎没有主流浏览器支持

media

规定被链接文档被显示在什么设备上

属性值

值	描述
screen	计算机屏幕（默认）。
tty	电传打字机以及类似的使用等宽字符网格的媒介。
tv	电视机类型设备（低分辨率、有限的滚屏能力）。
projection	放映机。
handheld	手持设备（小屏幕、有限带宽）。
print	打印预览模式/打印页面。
braille	盲人点字法反馈设备。
aural	语音合成器。
all	适用于所有设备。

*rel

规定当前文档与被链接文档之间的关系

1.pingback

pingback是网志中常用的用来通知网志系统文章被引用情况的一种手段，当其他人链接至Web作者的网页时，Web作者将获取通知。这个方法使得Web作者可以追踪什么人链接至他的文章。

<link rel="pingback" href="www.fujieace.com/xmlrpc.php" />

2.profile

<link rel="profile" href="http://gmpg.org/xfn/11">

我们经常在模板中经常会看到如下 link 标签，这个到底有什么用呢？
不同浏览器可以根据自己设定的默认样式来呈现网页，比如你把朋友定义成“friend”，而我要按照拼音来定义成“pengyou”，彼此之间无法统一，该功能就变得没有丝毫的意义。所以我们在HTML文档的标签中使用 profile 属性引入一个声明，声明在这个HTML文档中使用了 XML Friends Network (XFN) 微格式，然后按照这份XFN微格式中约定的方式来描述关系网络，于是即使是不同用户代理器访问这些数据只要其遵循XFN的约定即可正确的读取出其中的关系数据。

3.canonical

移动站rel="canonical"标签是为了解决网站由于网站url链接不一样但网页内容是一样而造成百度重复收录的问题，对于这样的情况，如果不采用百度rel="canonical"标签，后果将导致百度对两个相同的网页收录和排名的问题上不知情，久而久之，当网站存在大量这样的网页的时候，可能导致网站大量重复内容而被降权、不收录甚至被K。

使用rel="canonical"标签的基本样式：<link rel="canonical"
href="网页权威链接"/>

写好这段代码之后，将其放入非权威的网页的头部中即可。

4.dns-prefetch

浏览器主动去执行域名解析的功能,DNS预获取 dns-prefetch 提升页面载入速度
DNS Prefetch，即DNS预获取，是前端优化的一部分。一般来说，在前端优化中与 DNS 有关的有两点：一个是减少DNS的请求次数，另一个就是进行DNS预获取。

<link rel="dns-prefetch" href="//api.share.zhix.net">

5.preconnect

浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。

<link rel="preconnect" href="//example.com">

6.prefetch

能够让浏览器预加载一个资源（HTML，JS，CSS或者图片等），可以让用户跳转到其他页面时，响应速度更快。

<link rel="prefetch" href="/library.js" as="script">

7.prerender

prerender不仅会加载资源，还会解执行页面，进行预渲染，但是这都是根据浏览器自身进行判断。
浏览器可能会
1.分配少量资源对页面进行预渲染
2.挂起部分请求直至页面可见时
3.可能会放弃预渲染，如果消耗资源过多

<link rel="prerender" href="//example.com/next-page.html">

8.alternate

在PC站点当中,在前加入

<link rel="alternate" href="http://m.abc.com/">

在对应的移动站点中前加入

<link rel="canonical" href="http://www.abc.com/">

9.stylesheet

文档的外部样式表。

<link rel='stylesheet' href='style.min.css' type='text/css' media='all' />

10.icon

为网页标题添加自定义图标

<link rel="icon" href="https://vidmate.ltd/wp-content/uploads/2019/12/VidMate-fav.png" sizes="192x192" />

type 属性

type 属性规定被链接文档的 MIME 类型。

该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。

<link rel="stylesheet" type="text/css" href="theme.css" />

收录于

css

本内容遵循 CC 4.0 BY-SA 版权协议

腾讯滑块验证码collect参数逆向与JSVMP对抗实战本文深入解析腾讯滑块验证码collect参数的逆向过程与JSVMP虚拟机对抗技术。通过详细的环境搭建、抓包分析和JSVMP逆向技巧，揭示collect参数的生成逻辑与加密流程，并提供完整的模拟实现方案和常见问题排查方法，助力开发者突破腾讯天御验证码的防护机制。阅读详情