开发者学堂课程【HTML 基础入门学习:link 标签】学习笔记与课程紧密联系,让用户快速学习知识
课程地址:https://developer.aliyun.com/learning/course/465/detail/5715
link 标签
内容介绍
一、<link/>
二、设置地址栏图片
一、<link/>
1、位置
<link/>标签并不是成对出现的。
必须置于 head 里
2、作用
定义文档与外部资源的关系。
比如:链接样式表,引入样式文件。
3、解释
Link 顾名思义是一个链接,链接一些文件、一些外部资源,所以它不是在页面上显示的内容,所以必须要置于头部里面。
比如很多网站页面做的非常漂亮,都是需要去设定这个按钮长什么样、列表长什么样式,都需要自己去设定,设定的文件就在样式表里,需要用link从外部引入样式表,网页才能加载样式表。
4、常用属性
(1)href属性
被链接文档的地址
从外面引入这个文档,文档的地址需要说明。
(2)rel属性
当前文档与被链接文档的关系
(3)type属性
规定被链接文档的类型
(4)media属性
被链接的文档显示在什么设备上
最常用的是引入样式表,最主流的是引入外部样式表,引入样式表的时候可以写也可以不写,如果写media属性就要指定链接的样式显示在什么设备上。
比如想要这个样式比较炫酷,让它显示在移动设备上,不显示在pc上,或者显示在所有的屏幕上,就可以去设定。
5、举例
<html>
<head></head>
<body></body>
</html>
//引入代码:
<link rel="stylesheet"
type="text/css"href="https://ssO.bdstatic.com/
5aVl bjqh_Q23odCf/static/superplus/css/super_min_d3aa9cO7.css"/>
<html>
<head>
<title>link<title>
<link rel="stylesheet"
type="text/css"href="https://ssO.bdstatic.com/
5aVlbjqh_Q23odCf/static/superplus/css/super_min_d3aa9c07.css"/>
</head>
<body>
123123123</body>
</html>
随便写入点内容之后保存,在网页审查元素中会发现已经引入了文件:
但是当前没有产生任何作用。因为这是随便从网上找的某一个网站上的样式文件,引入了对这个页面没有任何意义。
Hre f表示文件地址,rel 表示了外部引入的这个文件是设定样式的,设定的 tape 是文本类型的。
二、设置地址栏图片
打开百度,可以看到在地址栏上方百度标签上有一个蓝色熊掌图案。
1、思路
当做一个比较大的网站时,一般会把 favicon.ico 放置在网站的根目录,显示网站的时候,页面如果根目录下有这个文件的时候就会自动显示出这个小图片,一般大型网站都会这么做。
2、方法
方法(1)favicon.ico 放置在网站的根目录
即最喜爱的 ico,每个网站都有自己最喜欢的图标,简称
favicon.ico,平常看的图片都是 pdj,就可以在 ps 里面转成 ioc 格式的文件。
方法(2)放在 head 内,使用 link 标签引入
比如将代码引入到上方基础上:
这个时候只有内容,没有图片。
实例
<html>
<head>
<title>link<title>
<link rel="stylesheet"
type="text/css"href="https://ssO.bdstatic.com/
5aVl bjqh_Q23odCf/static/superplus/css/super_min_d3aa9cO7.css"/>
<link rel="shortcut icon" href="xxxx" type="image/x-icon">
//外部引入的文件是网页的ico,就是地址栏上的小图标。
</head>
<body></body>
</html>
在百度上随便找一张图片,复制图片网址放在外部资源 href=
保存刷新页面在标题栏中就会出现刚才保存的图片,但是会被缩小,因为地址栏就那么大,会显示一个非常小的ico。
3.总结
做页面欲使其拥有和中的ico具有两种方式:一种是在服务器中设置,一种是用head 引入。
如果在服务器中放置命名一定要是 favicon.ico,如果使用link那么随便何种文件格式都可以。