在HTML中， link 标签是一个自闭合元素，通常位于文档的 head 部分。它用于建立与外部资源的关联，如样式表、图标等。 link 标签具有多个属性，其中 rel 和 href 是最常用的。

rel 属性定义了当前文档与链接资源之间的关系。常见的 rel 属性值有：

- stylesheet ：表示链接到一个外部CSS样式表。
- icon ：表示链接到网站的图标，如favicon。

href 属性用于指定链接资源的URL。

一个典型的 link 标签示例是：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>My Website</title>

  <!-- 链接到外部CSS样式表 -->

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

  <!-- 链接到网站图标 -->

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

</head>

<body>

  <h1>Link!</h1>

  <p>这是一段link的介绍。</p>

</body>

</html>

在这个示例中，我们使用了两个 link 标签。第一个 link 标签将HTML文档与外部的CSS样式表 styles.css 关联起来，用于定义页面的样式。第二个 link 标签将HTML文档与网站图标 favicon.ico 关联起来，当用户在浏览器中打开这个网站时，会显示这个图标。

当然， link 标签还有其他属性和用途，下面列举了一些常见的属性和用例：

1. type ：该属性用于指定链接资源的MIME类型。例如，当链接到一个CSS样式表时，可以指定其类型为 text/css 。大多数情况下，浏览器可以自动识别资源类型，所以 type 属性不是必需的。示例：

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

2. media ：该属性允许您指定样式表适用于哪些媒体类型。例如，您可以创建专门针对打印的样式表，当用户打印页面时使用。示例：

<link rel="stylesheet" href="print.css" media="print">

3. sizes ：当使用 link 标签链接到多个尺寸的图标时，可以使用 sizes 属性指定图标的大小。这对于根据设备显示不同大小图标的情况很有用。示例：

<link rel="icon" href="icon-48x48.png" sizes="48x48">

<link rel="icon" href="icon-96x96.png" sizes="96x96">

4. crossorigin ：当链接到跨域资源时，可以使用 crossorigin 属性指定资源的CORS（跨源资源共享）设置。示例：

<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">

5. integrity ：该属性用于确保外部资源的完整性，可以与 crossorigin 属性一起使用。通过为资源提供一个基于内容的哈希值（如SHA-256），您可以确保资源未被篡改。示例：

<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integrity="sha256-base64-encoded-hash">

6. preload ： rel="preload" 可以用于提前加载重要的资源，例如字体、图片或脚本。这可以优化页面加载性能。示例：

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

这些是 link 标签的一些常见属性和用途。

除了前面提到的， rel 还有更多的属性值：

1. alternate ：使用 rel="alternate" 可以为文档提供替代版本，例如不同语言的页面或适用于不同设备的页面。示例：

<link rel="alternate" hreflang="es" href="https://link.com/es/a">

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://link.com/mobile/a">

2. dns-prefetch ：通过 rel="dns-prefetch" 可以预先解析域名，以减少DNS查找时间并加快资源加载速度。示例：

<link rel="dns-prefetch" href="//link.com">

3. preconnect ：与 dns-prefetch 类似， rel="preconnect" 可以预先建立连接到第三方资源的TCP连接，减少建立连接所需的时间。示例：

<link rel="preconnect" href="https://link.com">

4. prefetch ：使用 rel="prefetch" 可以预先获取并缓存资源，以便在后续页面中使用。这对于预加载页面中可能用到的资源很有用。示例：

<link rel="prefetch" href="pre-page.html">

5. canonical ：使用 rel="canonical" 可以为搜索引擎提供一个页面的规范URL，有助于避免重复内容问题。示例：

<link rel="canonical" href="https://link.com/a/post">

6. license ：使用 rel="license" 可以指定文档的许可证URL。示例：

<link rel="license" href="https://link.org/licenses/by/4.0/">

7. manifest ：使用 rel="manifest" 可以将Web应用的清单文件（通常是JSON格式）链接到HTML文档。清单文件包含了Web应用的元数据，如名称、描述、图标等。示例：

<link rel="manifest" href="manifest.json">

请注意，不同的浏览器对于这些属性和功能的支持程度可能会有所不同。建议在使用新功能时查阅相关文档，以确保兼容性和功能性。

HTML中link标签的那些属性的更多相关文章

  1. <link>标签的rel属性全解析

      <link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...

  2. .NET获取Html字符串中指定标签的指定属性的值

    using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...

  3. 转.HTML中img标签的src属性绝对路径问题解决办法，完全解决！

    HTML中img标签的src属性绝对路径问题解决办法,完全解决   需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,to ...

  4. 利用link标签的disabed属性大面积的对其他标签元素的CSS样式进行替换操作

    由于平时对元素样式的控制基本上只是3,4个,所以一般用Jquery的时候直接使用$(element).css();这个方法,或者使用$(element).addClass()方法完成样式操作.对于小范 ...

  5. link标签的rel属性

    <link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,< ...

  6. HTML中meta标签作用及属性总结

    在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...

  7. html中script标签使用async属性和defer属性的区别

    相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...

  8. HTML中input标签的alt属性和title属性的比较

    经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...

  9. javascript中a标签把href属性设置为“javascript:void(0)”还是会打开空白页面的问题

    在项目中有个位置的点击a标签这里要加一个权限判断,但是之前使用的是js动态添加a标签,href的属性值是一个url,但是我要做权限判断之后,我的url就不能设置在href属性中了,这样的话我可以在a标 ...

  10. java-去除html中的标签或者元素属性（正则表达式/jsoup）

    业务场景: 如一篇使用富文本编辑器编辑的新闻稿,需要在列表页面截取前200字作为摘要,此时需要去除html标签,截取真正的文本部分. /** * 删除Html标签 */public static St ...

随机推荐

  1. SSH、SFTP、FTP、Telnet、SCP、TFTP协议的原理

    一.SSH协议1.什么是SSH?SSH全称 安全外壳协议(Secure Shell),,是一种加密的网络传输协议,可在不安全的网络中为网络服务提供安全的传输环境. 如果一个用户从本地计算机,使用SSH ...

  2. class1,2,3,4,5,6，7

    //测试你是哪一类学者 #include<stdio.h> int main() { int ans; char words[5000]; printf("网课学习让一些人喜一些 ...

  3. 手写 ArrayList 核心源码

    手写 ArrayList 核心源码 手写 ArrayList 核心源码 ArrayList 是 Java 中常用的数据结构,不光有 ArrayList,还有 LinkedList,HashMap,Li ...

  4. Konga-Kong网关的权限控制指定消费者

    刚开始陷入了误区了,网上很多参考例子都是如何实现身份证验证,而且看到konga上面配置身份插件的地方基本都有consumer一个配置项,一直纠结在这个如何通过key-auth实现指定的route或者s ...

  5. ubuntu14.04 cm12.0 genymotion

    前几天在ubuntu14.04编译过android5.0.1源码,但是呢?不知怎么运行不起来,后来又试了试把img文件在win平台运行虚拟机不知怎么还是不行,再后来想通过刷机运行学习framework ...

  6. docker学习3

    docker的启动流程 docker run -t -i <name:tag> /bin/bash -t 把1个伪终端绑定到容器的标准输入 -i 保持容器的标准输入始终打开不关闭 启动流程 ...

  7. ESP32开发环境搭建 IDF3.3.5+VScode

    1.  软件准备: ① ESP-IDF:包含ESP32 API和用于操作工具链的脚本. ②工具链msys32:用于编译ESP32应用程序. ③编辑工具Visual Studio Code 注意:工具链 ...

  8. MS12-020 拒绝服务 蓝屏攻击

    漏洞概要 MS12-020是一个3389远程桌面rdp协议的一个漏洞 攻击者通过特意构造的rdp数据包发送给靶机3389端口,造成系统崩溃,蓝屏重启 影响范围:windows xp .2003.200 ...

  9. 前端性能精进之浏览器（五）——JavaScript

    JavaScript 是一种通过解释执行的高级编程语言,同时也是一门动态.弱类型的直译脚本语言,适合面向对象(基于原型)和函数式的编程风格. 直译语言可以直接在解释器中运行,而与直译语言相对应的编译语 ...

  10. Android LineChart 折线图Demo

    1 首先在 build.gradle 里导入包 implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' 2.新建 启动Activity Li ...