首页 » 编程语言 » 正文

html元素<link>标签的用法

html元素中的<link>标签必须放在头部head标签内,主要用于引用连接外部CSS样式表文件、连接网站favicon.ico图标、收藏夹图标以及其他相关外部资源,常用属性有rel、herf、type等!

<link>标签定义

link标签用于当前网页文档和外部资源之间建立引用连接关系的;

link标签只能使用在头部head标签里面,可以多次出现;

link标签是单标签,也叫空标签,只有开始标签,没有结束标签;

<link>标签常用属性

link标签的所有属性都包含在开始标签内。

link标签常用属性有3个:分别是rel、href,type;

href属性的用是用来指明外部资源文件的相对路径或绝对路径,也就是用来告诉浏览器外部资源的位置;

rel属性是必须的,属于核心属性,它的作用是用来表明当前文档和外部资源的关系;

type属性代表的是被链接的外部资源的 MIME 类型;

所有主流浏览器都支持link标签的rel、href,type三种属性。

<link>标签可选属性

link标签除了rel、href、type三个常用属性外,还包括charset, , hreflang, media, rev, target, title和type等属性。这些属性中:target属性不被html5支持,只允许在Transitional和Frameset两种DTD中使用,其它都可在Strict, Transitional和Frameset三种DTD中使用。

本文末尾附有link标签所有属性列表.

<link>标签的用法

link标签的用法其实很简单,下面就以引用外部css样式表、fovicon.ico图标及添加收藏夹书签图标为例。

1、调用外部CSS样式表文件

<link href="https://www.liudaima.com/style.css" rel="stylesheet" type="text/css"/>

<link>标签内的属性 rel="stylesheet",说明了此<link>标签内链接外部资源文档是属于当前文档的外部CSS样式表;而href属性值指明了外部CSS样式表的位置https://www.liudaima.com/style.css;type规定被链接文档的MIME类型为text/css;

2、设置网站favicon.ico小图标

先要把favicon.ico图标放在网站根目录里,再在网页head头部标签中加入如下代码。

<link rel="icon"  href="favicon.ico"  type="image/x-icon" />

href属性值为外部资源地址这里是收藏夹图标地址,rel 定义当前文档与被链接文档之间的关系,这里是外部icon图标属性,type 规定被链接文档的 MIME 类,这里是image/x-icon。

3、设置在收藏夹或书签中显示的小图标

同样的,把favicon.ico图标放在网站根目录里,然后在网页中加入如下代码

 <link rel="bookmark" href="favicon.ico" >

当你的网页被添加到收藏夹中,就会在收藏夹中显示自定义的ico图标。

<link>标签属性列表 

属性名属性值说明
charset
char_encoding

HTML5不支持该属性

指定被链接文档的字符编码方式。

href
URL
指定被链接文档的位置
hreflanglanguage_code指定被链接文档中文本的语言
type
MIME_type指定被链接文档的 MIME 类型
sizesHeightxWidth
any

HTML5新增属性

定义了链接属性大小,只对属性 rel="icon" 起作用。

mediamedia_query规定被链接文档将显示在什么设备上。
revreversed relationship

HTML5 不支持该属性。 

定义被链接文档与当前文档之间的关系。

rel

(必需)

stylesheet
导入样式表
bookmark定义文档在收藏夹中书签图标
icon定义网站或网页在浏览器标题栏中的图标
alternate链接到该文档的替代版本(比如打印页、翻译或镜像)
canonical 指明网址的规范版本
nofollow

指定该链接不被搜索引擎跟踪,意思是某些垃圾页面不想被蜘蛛抓取收录。

例如将该属性用在a标签中,则告诉搜索引擎不要抓取这条链接

preload

指定浏览器代理必须根据“as”属性(以及与该目标关联的优先级)

给出的目标,抢先获取并缓存当前导航的目标资源。

dns-prefetch指定浏览器应抢先执行目标资源源的DNS解析
license链接到该文档的版权信息。
last链接到集合中最后的文档。
archives历史文档信息。
author提供指向文档作者的链接
external链接到外部文档,即告诉了搜索引擎,该链接不是本站链接。
first底部友情链接。
help链接帮助信息
next 记录文档的下一页.(浏览器可以提前加载此页) 
noreferrer

该属性可以阻止浏览器发送访问来源信息,

即表示让浏览器不发送referrer。

pingback提供处理当前文档的pingback的pingback服务器的地址
prefetch指定浏览器应抢先获取并缓存目标资源,因为后续导航可能需要它
preconnect指定浏览器应抢先连接到目标资源的源。
prev记录文档的上一页(定义浏览器的后退键)
search提供指向可用于搜索当前文档及其相关页面的资源的链接。
tag当前文档使用的标签,关键词标记。
sidebar链接到应该在浏览器边栏中显示的文档
up提供指向一个文档的链接,该文档提供当前文档的上下文关系。
target_blank
_self
_top
_parent
frame_name

HTML5 不支持该属性。定义在何处加载被链接文档。




欢迎您发表评论或留言