meta标签 [HTML][web前端]

meta标签

meta标签是一个自闭和标签(也称为: 自结束标签)

mata标签是head标签的子标签

meta主要用于设置网页中的一些元数据,元数据不是给用户看的

meta标签的作用:

1. 可以指定网页的字符集
2. 设置网页的关键字
3. 设置网页中的描述信息
4. 可以对网页进行重定向

指定网页的字符集:

meta标签中的charset属性可以指定浏览器解析网页时的字符集

在讲meta标签的第二个作用之前我们先来了解一下meta标签中的两个属性:

1. name属性 :
   • 指定的数据的名称 —> 我们要修饰哪个数据就将name属性的值指定为什么就可以了
2. content属性:
   • 指定的数据的内容

设置网页的关键字:

meta标签中的name属性可以指定属性值为"keywords",当指定了name属性的值为keywords之后,我们就可以在meta标签中再加一个属性content,content属性就是用来指定关键字的内容的

• content属性的值由我们自定义,content属性中可以指定多个关键字,多个关键字之间使用,(逗号)隔开

eg:

<meta name="keywords" content="网上购物,买东西,笔记本电脑"/>

那么我们指定了关键之后有什么作用?

我们在搜索引擎中搜索的内容其实就是用户希望搜索到的关键字,而我们的搜索引擎中的爬虫程序会根据用户搜索的关键字去找有指定关键字的网页,然后将这些网页的超链接显示在搜索引擎的搜索结果中

指定网站的描述:

meta标签中如果name属性的值指定为"description"那么就表示我们要修改网页的描述,然后我们就可以将网页的描述内容写到content属性之中

• 注意: 网页中的描述会显示在搜索引擎的搜索结果中,就是显示在搜索引擎搜索的结果中的网页的超链接之下一行小字,用于简单的介绍网页

eg:

<meta name="description" content="这是一个非常棒的网站!"/>

将页面重定向到另一个网站网站:

meta标签中的http-equiv属性值设置为"refresh"的时候就是表示要修饰重定向,这个时候我们就可以在content属性中指定重定向的倒计时和重定向的位置(url), 重定向的时间和重定向的url之间使用,(逗号)隔开

• 重定向的倒计时就是就是指定多少秒之后跳转
  • 如果url是一个外部网页,加上如果这个时候如果没有网络,就会报一个404

eg:

<meta http-equiv="refresh" content="3,http://baidu.com"/>

补充:

title标签中的内容不仅作为网页的标题会显示在网页的标题栏中,title标签中的内容还会作为搜索的结果超链接上的文本显示

meta标签还可以设置移动端的视口大小(这个我们会在后面讲)