【从零开始学前端04】关于link元素的使用-CFANZ编程社区

前言：
承接上一期内容，我们在对网页进行美化的时候，小美化可以在html上直接写程序，但当内容一多，总不能全部堆在一起，这样代码不美观，后期维护也麻烦，就相当于我们人，不可能把一年四季的衣服都穿在身上吧，所以我们需要一个衣柜来装这些衣服，而这个衣柜就是外部css文件，链接人和衣服的桥梁就是link元素。

link

link 元素最常见的用途是链接样式表。

注意
link 元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。

属性

属性	值	描述
href	URL	指定被链接资源的 URL。
hreflang	language_code	指定被链接资源使用的语言。
sizes	HeightxWidth	指定图标的大小（比如 sizes=“16x16”）。
media	media_query	指定被链接的资源将被显示到什么设备上。
rel	alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag	指定当前文档与被链接资源之间的关系。
type	MIME_type	规定被链接文档的 MIME 类型。

实例：
首先创建一个css文件，将样式全部迁移至该文件中。
在这里插入图片描述
css文件的代码为：

h1{
    color: aquamarine;
}
p{color: rgb(9, 161, 17);}

html文件的代码为：

<!DOCTYPE html>
<html>
    <head>
        <title>第四个程序link的使用</title>
        <link rel="stylesheet" href="text04.css">
    </head>
    <body>
        <h1>通过外部链接修改样式</h1>
        <p>变色了变色了</p>
    </body>
</html>

最终效果：
在这里插入图片描述

link中的rel属性拓展

值	描述
alternate	链接到当前文档的替代版本（比如另一种语言的译本）。
author	链接到当前文档的作者。
help	链接到当前文档的帮助文档。
icon	当前文档的图标资源。
license	链接到当前文档的版权信息。
next	表示当前文档是集合中的一部分，且集合中的下一个文档是被链接的文档。
prefetch	预先获取的资源（先进性缓存）。
prev	表示当前文档是集合中的一部分，且集合中的上一个文档是被链接的文档。
search	针对当前文档的搜索工具。
stylesheet	载入外部链式表。

通过rel的icon值为页面添加图标

<!DOCTYPE html>
<html>
    <head>
        <title>第四个程序link的使用</title>
        <link rel="stylesheet" href="text04.css">
        <link rel="icon" href="../03/icon.ico">
        <!--添加浏览器的小图标-->
    </head>
    <body>
        <h1>通过外部链接修改样式</h1>
        <p>变色了变色了</p>
    </body>
</html>