在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. Linux防火墙相关命令

    查看以开放端口 firewall-cmd --list-ports 开启端口如6379 firewall-cmd --zone=public --add-port=6379/tcp --permane ...

  2. SpringSecurity登录验证，多个用户表

    在开始之前我想感叹一句,技术久了不回头看看真的会忘记的,这次公司让我重新开发一个程序,项目架构为单体多模块开发,其中有个需求就是需要不同用户表进行登录,且不同表的用户名.手机号都可以重复. 这样的需求 ...

  3. CH573 CH582 CH579蓝牙从机(peripheral)例程讲解三(蓝牙服务修改)

    修改服务需要对蓝牙比较熟悉的工程师去完成,否则在例程功能满足自己需求时,不建议修改,很容易改错,下面就简单介绍下如何在别的char添加一个nofify属性. step1: 给Simple Profil ...

  4. 使用ASP.NET Core开发信息采集系统将用户数据添加至企业微信

    一.启动Visual Studio 2019,创建ASP.NET Core Web应用程序 二.在Models文件夹添加新项 Person.cs using System.ComponentModel ...

  5. WordPress标题分隔符”-“被转义为“&#8211”怎么办？

    按照百度搜索资源平台<百度搜索网页标题规范:让标题回归标题本身>百度官方文档参考,如果WordPress标题里出现不规范"– 2.停止wptexturize转义任何字符 add_ ...

  6. 手写 Java HashMap 核心源码

    手写 Java HashMap 核心源码 手写 Java HashMap 核心源码 上一章手写 LinkedList 核心源码,本章我们来手写 Java HashMap 的核心源码. 我们来先了解一下 ...

  7. Serverless 架构演进与实践

    Serverless 架构演进与实践 1. 介绍 Serverless 并不仅仅是一个概念,很多地方都已经有了它的影子和思想,本文将给大家介绍最近比较火的 Serverless. 首先放出官方对 Se ...

  8. LaTeX in 24 Hours - 2. Fonts Selection

    文章目录 本章内容:字体 2.1 Text-Mode Fonts 2.2 Math-Mode Fonts 2.3 Emphasized Fonts 2.4 Colored Fonts 其他章节目录: ...

  9. UI资源，可在几分钟内创建精美的设计

    UI资源,可在几分钟内创建精美的设计 组件:https://headlessui.com 图标:https://icons8.com 插画:https://undraw.co/illustration ...

  10. final修饰的作用

    在Java中,final关键字可以用来修饰类.方法和变量(包括成员变量和局部变量) 1.final修饰类 当用final修饰一个类时,表明这个类不能被继承. final类中的成员变量可以根据需要设为f ...