link 标签|学习笔记

简介: 快速学习 link 标签

开发者学堂课程【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>

随便写入点内容之后保存,在网页审查元素中会发现已经引入了文件:

image.png

但是当前没有产生任何作用。因为这是随便从网上找的某一个网站上的样式文件,引入了对这个页面没有任何意义。

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那么随便何种文件格式都可以。

相关文章
|
17小时前
|
移动开发 小程序 JavaScript
uView Link 超链接
uView Link 超链接
21 0
|
17小时前
|
前端开发
CSS -- a:link 失效问题 及 属性选择器
CSS -- a:link 失效问题 及 属性选择器
13 0
|
17小时前
|
缓存 前端开发 JavaScript
CSS 的 link 标签放在 head 标签之间的作用
CSS 的 link 标签放在 head 标签之间的作用
33 1
|
10月前
|
前端开发
link标签的好处
link标签的好处
|
Web App开发 JSON JavaScript
|
Web App开发 前端开发 JavaScript
|
分布式计算 图计算 Spark
打标签_完成| 学习笔记
快速学习打标签_完成
156 0
打标签_完成| 学习笔记
|
图计算 开发者
打标签_生成标签| 学习笔记
快速学习打标签_生成标签
74 0
打标签_生成标签| 学习笔记
|
JavaScript 前端开发 Go
script 标签|学习笔记
快速学习 script 标签
73 0
|
开发者
title 标签|学习笔记
快速学习 title 标签
75 0