HTML中LINK标签的那些属性

更新日期: 2023-05-04阅读: 634标签: 属性

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://fly63.com/styles.css" crossorigin="anonymous">

 

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

<link rel="stylesheet" href="https://fly63.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://fly63.com/es/a">
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://fly63.com/mobile/a">

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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


链接: https://www.fly63.com/article/detial/12461

display: none;与visibility: hidden;的区别

display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见,display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;

属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;

readonly与disabled的区别

readonly 只对 <input> 和 <textarea> 标签有效;disabled 对所有表单元素都有效, 包括:<input>, <textarea>, <button>, <label>, <option>, <select>等

css的overflow属性

事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差别,今天测试了一下,总算是明白了。visible: 不剪切内容。hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。

Vue Prop属性功能与用法实例

这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值

深入剖析z-index属性

层叠顺序的大小比较;层叠顺序级别高的元素覆盖级别低的元素。首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

css属性分类介绍

CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性

css中word-wrap white-space word-break textoverflow的使用

word-wrap正常来说,在一行文本中,如果出现这一行已经放不下的单词,浏览器会自动将该文字转入下一行。white-space规定段落中的文本不进行换行。

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!