HTML中link标签属性的用法介绍

最新推荐文章于 2024-06-09 15:40:16 发布
最新推荐文章于 2024-06-09 15:40:16 发布
阅读量2.9k 收藏 32
点赞数 6
分类专栏： HTML 前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45707610/article/details/130953068
版权
HTML 同时被 2 个专栏收录
263 篇文章 3 订阅
订阅专栏
前端
89 篇文章 0 订阅
订阅专栏

link标签是用于样式表、图标与外部资源的关联，有很多属性，本文微点阅读小编就详细的介绍 一下HTML中link标签属性的具体用法，感兴趣的可以了解一下

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

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!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标签还有其他属性和用途，下面列举了一些常见的属性和用例：

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

    1

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

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

    1

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

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

    1

    2

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

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

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

    1

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

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

    1

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

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

    1

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

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

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

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

    1

    2

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

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

    1

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

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

    1

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

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

    1

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

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

    1

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

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

    1

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

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

    1

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

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

到此这篇关于HTML中link标签属性的具体用法的文章就介绍到这了,

转载自：微点阅读   https://www.weidianyuedu.com

xiaoweids
关注
  • 6
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML ＜link＞ 标签
玄链教育
07-07 1638
link> 标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。
（简单有案例）前端实现主题切换、动态换肤的两种简单方式
大雾起了清晨
02-08 1240
属性名必须使用 --开头在:root中定义（root后面的参数用来区分是哪个主题样式:root[theme='主题名称']可以是数字、字母、下划线、中划线css普通属性可以用的，比如：数字、文本、带单位的长度、角度等等都可以作为属性值注意点大小写敏感：大写 和 小写 不同 的2个属性名，将会是2个属性计算时有效性：自定义属性值可以是任何内容，甚至可能不是css的有效数值，但这并不影响定义，只要保证在使用css自定义属性的地方，最终的计算结果是有效的就可以了。案例/* 默认主题 */
什么是link标签?
最新发布
z16638522031的博客
06-09 114
注意link标签因为不像<head></head>、<html></html>type 规定被链接文档的 MIME 类,这里是值为text/css。链接外部css样式时候link标签的内容结构解释——css引用。<link> 标签最常见的用途是链接外部样式表，外部资源。什么是link标签?
网页代码中link标签的用法
lyghost的专栏
12-24 7250
link标签是我们在html中的一个基础标签，多用来在网页中引入外部的css文件，在这里我们一起来看一下这个标签在我们写代码是用到的写法。 1、引入外部css文件 <link href="http://www.youtuomuye.cn/templets/youtuo/youtuo.css" type="text/css" rel="stylesheet" /> 这是引入css文...
link标签的主要用法
lengye7的博客
02-07 2万+
link的rel属性有很多的值，不同的值代表了外部资源与本html文档的关系。 rel属性的值可以是： alternate author canonical dns-prefetch external help icon licence manifest modulepreload next pingback prefetch preload prev searc...
link标签的用法及link属性大全
杨春建的博客
09-20 1万+
原文地址：http://blog.sina.com.cn/s/blog_161005e400102w5aj.html   link标签是网页头部head中的元素，在html语言中，link标签是单独出现的，并且可以被多次使用，该元素的用途是与外部文件建立链接，例如我们打开“搜狐门户网”的首页查看源代码：  在一个html文件中，link标签还包含许多其它属性，其中最常见的是使用link
<link>标签的几个用法，帮助提高页面性能
weixin_33910137的博客
06-03 744
写在前面 本文首发于公众号：符合预期的CoyPan HTML 中****元素规定了外部资源与当前文档的关系。最常见的用法，是用来链接一个外部的样式表，比如： <link href="main.css" rel="stylesheet"> 复制代码link标签还能做一些其他的事情，来帮助我们提高页面性能。 link标签的使用 来看一下link标签除了链接外部样式表之外的一些使用场景。...
htmllink标签的使用
06-11
这里的`<html:rewrite>`标签虽然不生成HTML `<a>` 元素，但可以用于在URI中添加请求参数，它与`<html:link>`一起使用，可以帮助构建动态链接。 总的来说，`<html:link>`标签是Struts框架中处理链接的利器，它通过...
HTML5中在title标题标签里设置小图标的方法
11-20
在HTML5中，为网页添加小图标是一种常见的增强用户体验的方式，可以使页面看起来更加专业和个性化。...通过正确地使用`<link>`标签，我们可以轻松地将自定义图标与页面标题关联起来，使网页在众多浏览环境中脱颖而出。
HTML5中的强制下载属性download使用实例解析
09-28
`download`属性的工作原理是在`<a>`标签中添加`download`属性，并为该属性设置一个值，这个值就是用户下载文件时显示的文件名。例如： ```html 点击直接下载并保存成 download.pdf 文件 ``` 在上述代码中，当用户...
在HTML中引入CSS的3种方式使用介绍
09-28
导入式CSS是通过在HTML文档的`<style>`标签中使用`@import`规则引入外部CSS文件，如： ```html @import "mystyle.css"; ``` 导入式的一个特点是，它是在整个页面加载完成后才加载CSS，可能导致页面在加载过程中...
html base标签 target=_parent使用介绍
09-28
HTML中的`<base>`标签是一个非常实用但不常被广泛了解的元素，它主要用于设置页面中所有链接的默认基础URL和目标窗口。了解并正确使用`<base>`标签可以帮助优化网页的导航行为，提高用户体验。 首先，我们来看`...
HTML5 之 Link 标签
无
06-16 1万+
概述   link 元素用于链接外部css样式表等其他相关外部资源。 link   其中link中包括如下属性。 href：指明外部资源文件的路径，即告诉浏览器外部资源的位置 hreflang：说明外部资源使用的语言 media：说明外部资源用于哪种设备 rel：必填，表明当前文档和外部资源的关系 sizes：指定图标的大小，只对属性rel="icon"生效 type：说明外部资源的 MIME 类型，如text/css、image/x-icon rel   rel核心属性的参数值如下，也可参考 MDN.
有关Html中<a>、<link>和<script>标签中相对路径与绝对路径的问题总结
热门推荐
横练技术
09-23 2万+
一、HTML 相对路径和绝对路径区别分析 HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片。 如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。  为了避免这些错误，正确地
js html 新增link,JavaScript动态创建link标签到head里的方法
weixin_29155599的博客
06-03 1410
本文实例讲述了JavaScript动态创建link标签到head里的方法。分享给大家供大家参考。具体分析如下：相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器中动态创建link标签。使用 jQuery 创建 link 标签如果你开发中喜欢用jQuery，那么用jQuery在创建link标签应该是这样的：var cssURL ...
【HTML学习笔记】link标签中的href路径
凯文斯坦森的博客
03-01 1万+
在index.html中引用外部css样式，需要索引css文件路径，但是css文件可能在不同目录下，需要根据具体情况写路径。 【情况1】css文件在同一个目录下，直接写文件名即可 <link rel="stylesheet" type="text/css" href="style.css" /> 或者这样写，文件名前缀 ./ 代表当前目录下 <link rel="stylesh...
html链接css代码link,link标签链接css放在哪？
weixin_30653101的博客
06-17 2362
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。在HTML页面中可以使用link标签链接外部样式表。在HTML中使用link标签链接css时放在HTML的标签中。 标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。1. link 的作用(1)定义文档与外部资源的关系；(2)是链接样式表link中的几个属性：1、r...
HTML页面之间传递JSON两种方式
蔡定努
04-29 1万+
a.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8...
前端中link和@import的区别
imagine_tion的博客
09-27 603
标题前端中link和@import的区别 1.link属于XHTML标签，而@import是CSS提供的。 2.⻚⾯被加载时，link会同时被加载，而@import引⽤的CSS会等到⻚⾯被加载完再加载。 3.@import只在IE 5以上才能识别，⽽link是XHTML标签，⽆兼容问题。 4.link ⽅式的样式权重⾼于@import的权重。 5. 使⽤dom控制样式时的差别。当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是 dom可以控制的。 ...
selenium爬虫获取html中ul标签下所有a标签的href属性
06-12
要获取HTML中`ul`标签下所有`a`标签的`href`属性，可以使用Selenium的`find_elements_by_xpath()`方法和`get_attribute()`方法。以下是一个例子： ```python from selenium import webdriver driver = webdriver.Chrome() driver.get("http://example.com") # 找到ul标签 ul = driver.find_element_by_xpath("//ul") # 找到所有a标签 links = ul.find_elements_by_xpath(".//a") # 循环遍历所有a标签，获取href属性 for link in links: href = link.get_attribute("href") print(href) # 关闭浏览器 driver.quit() ``` 在上面的代码中，我们首先使用`find_element_by_xpath()`方法找到`ul`标签，然后使用`.//a`语法查找所有子孙节点中的`a`标签。接着，使用`find_elements_by_xpath()`方法获取所有`a`标签，然后循环遍历每个标签，使用`get_attribute()`方法获取`href`属性的值，并打印输出。最后使用`quit()`方法关闭浏览器。 需要注意的是，如果要查找的`ul`标签和`a`标签具有特定的类名或ID，可以在XPath表达式中添加`@class`或`@id`属性，以缩小查找范围。例如，`//ul[@class='menu']//a`表示查找`class`属性为`menu`的`ul`标签下的所有`a`标签。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值