Html中link标签有什么作用？html中link标签如何使用？

html中link标签有什么作用？html中link标签如何使用？在html代码中link标签是一个很重要的标签，在互联网上几乎每个网页、网站都会使用到link标签，那么html代码中link标签有什么作用？

html中link标签又如何使用呢？学会如何使用html代码中的link标签对于我们前端制作是一件很重要的工作，那么下面来看看浩沐资源网记载的有关html的link标签的相关内容。

html中link标签有什么作用？

链接Css层叠样式表文件

链接Css层叠样式表是link标签在html中最常用，也是最主要的作用。

在html中link标签起到链接或者说是引入Css层叠样式表的作用，正如文章开头所说，link标签对于我们前端页面是一个很重要的标签，如果错误的使用link标签，那么我们将无法正确的加载我们的Css样式层叠表，这样我们的前端页面看上去就特别难看丑陋。在我们引入Css样式表的时候，我们需要在link的url属性中，正确填写Css的链接路径，否则html页面就会出现错位。

定义文档与外部资源的关系

link标签出了我们可以连接Css的层叠样式表之外，我们可以规定文档与外部资源的关系，比如当我们设置link的rel属性值为icon的时候，就是告诉浏览器或者是搜索引擎，我们这是一个icon图标；当rel的属性值为nofollow的时候，就是告诉搜索引擎，后面的url是不传递权重的链接；当rel属性值为author的时候，就是告诉搜索引擎，我们这个链接是作者链接，更多关于link标签的属性见下方link标签属性表格具体内容。

link标签有哪些属性？

通常我们在html中常见的link如下代码所示：

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

当然还有一些写的比较简单，直接将rel和href属性填写完整就可以引入Css文件了，那么link标签有哪些属性呢？

见下方表格所示：

属性	值	描述
charset	char_encoding	HTML5 不支持该属性。 定义被链接文档的字符编码方式。
href	URL	定义被链接文档的位置。
hreflang	language_code	定义被链接文档中文本的语言。
media	media_query	规定被链接文档将显示在什么设备上。
rel	alternate archives author bookmark external first help icon last license next nofollow noreferrer pingback prefetch prev search sidebar stylesheet tag up	必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写。
rev	reversed relationship	HTML5 不支持该属性。 定义被链接文档与当前文档之间的关系。
sizes	Heightx Width any	HTML5新属性，定义了链接属性大小，只对属性 rel="icon" 起作用。
target	_blank _self _top _parent frame_name	HTML5 不支持该属性。 定义在何处加载被链接文档。
type	MIME_type	规定被链接文档的 MIME 类型。

html中link标签如何使用

关于html中使用link标签，其实还是很简单的，现在很多编程编辑器，直接都支持生成现成的html结构代码，我们只需要在head标签中输入link就会直接将link标签内的代码直接生成出来，最主要的是我们将link中的rel和href属性值设置好就OK了，以下是关于link标签使用时因注意的问题。

link标签必须在html代码的head标签内使用，可以不限制次数使用。

当引入多个Css时，后面的Css文件与前面的Css文件中如果有相同的选择器名，后面的Css将覆盖前面Css中的选择器设置。比如在link标签中引入了两个不同的Css文件，两个文件中都有.container选择器，且设置有不同的宽度值，那么后面一个Css中的.container选择器中的宽度将替代前面一个Css里的宽度。

link标签没有结束标签

link标签是一个自闭合标签，所以link标签不用闭合。

以上就是浩沐资源网关于html中的link标签的总结，希望本文记载的关于html中link标签的相关内容能够帮助到您。