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

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(12)连线(Link)
本文介绍了Twaver HTML5中的连线(Link)元素,包括设置起始和结束节点的方法,以及如何管理和操作多个连线。通过示例代码展示了如何在React组件中创建和管理Link,包括设置连线颜色和标签偏移量。
83 2
Twaver-HTML5基础学习(12)连线(Link)
|
29天前
|
移动开发 前端开发 JavaScript
除了 `<Link>` 标签和 `<a>` 标签,还有哪些标签可以用于实现链接?
除了 `&lt;Link&gt;` 和 `&lt;a&gt;` 标签,还可以使用 `&lt;area&gt;`(图像映射中的链接)、`&lt;button&gt;`(按钮点击跳转)和 `&lt;form&gt;`(表单提交跳转)等标签实现链接功能。
|
29天前
|
数据采集 搜索推荐 前端开发
`<Link>`标签和`<a>`标签在 SEO 方面有什么不同?
`&lt;Link&gt;`标签和`&lt;a&gt;`标签在SEO方面的主要区别在于用途和搜索引擎的处理方式。`&lt;a&gt;`标签用于创建可点击的超链接,对用户和搜索引擎都可见;而`&lt;Link&gt;`标签常用于预加载资源或定义文档关系,对搜索引擎的影响较小。
|
29天前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于:`Link` 是专门为 React 应用设计的,用于实现客户端路由导航,不会触发页面的重新加载,而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
|
2月前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
37 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
254 1
|
2月前
|
前端开发
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?
|
6月前
|
缓存 前端开发 JavaScript
CSS 的 link 标签放在 head 标签之间的作用
CSS 的 link 标签放在 head 标签之间的作用
85 1
|
前端开发
link标签的好处
link标签的好处