HTML中meta的基本知识

2022-05-06 15:13:57 浏览数 (1)

在写前端页面时,页面结构通常是由编辑器快速生成的,页面表头里有一个meta标签,这个标签有些什么作用呢?

在MDN中他是这样定义的:

meta是文档级元素,用来表示那些不能由其它 HTML 元相关元素(<base>、<link>、<script>、<style>或<little>)之一表示的任何元数据。

meta 元素定义的元数据的类型:

1. 设置了 itemprop 属性,meta 元素提供用户定义的元数据。

2. 设置了 charset属性,meta元素是一个字符集声明,告诉文档使用哪种字符编码。

3. 设置了 name属性,meta元素提供的是文档级别的元数据,应用于整个页面。

4. 如果设置了hettp-equiv属性,meta元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。

其中name属性与http-equiv属性的值变化比较多,下面着重对这两个进行介绍:

name属性

name 和content一起使用,前者表示要表示的元数据的名称,后者是元数据的值。

1. author

用来表示网页的作者的名字,例如某个组织或者机构。

2. description

是一段简短而精确的、对页面内容的描述。

3. keywords

与页面内容相关的关键词,使用逗号分隔。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。

4. viewpoint

为视口的初始大小提供指示,仅用于移动设备。

(1). width 用来设置 viewport 的宽度为设备宽度;

(2). initial-scale 为设备宽度与 viewport 大小之间的缩放比例;

5. robots

表示爬虫对此页面的处理行为,是用来做搜索引擎抓取的。

(1). all 搜索引擎将索引此网页,并继续通过此网页的链接索引文件将被检索;

(2). none 搜索引擎讲忽略此网页;

(3). index 搜索引擎索引此网页;

(4). follow 搜索引擎继续通过此网页的链接索引搜索其它的网页;

6. renderer

用来指定双核浏览器的渲染方式。

(1). webkit 默认webkit内核;

(2). ie-comp 默认IE兼容模式;

(3). ie-stand 默认IE标准模式;

http-equiv 属性

http-equiv也是和content一起使用,前者表示要表示的元数据的名称,后者是元数据的值。http-equiv所有允许的值都是特定 HTTP 头部的名称。

1. X-UA-Compatible

它是用来是做IE浏览器适配的。

(1). IE=edge以当前浏览器支持的最新版本来渲染,这个属性支持的范围是IE8-IE11;

(2). chrome=1如果当前IE浏览器安装了Goole Chrome Frame插件,就以chrome内核来渲染页面;

(3). 两者都存在 如果有chrome插件,就以chrome内核渲染,如果没有,就以当前浏览器支持的最高版本渲染;

你可能注意到了,如果在我们的http头部中也设置了这个属性,并且和meta中设置的有冲突,那么哪一个优先呢?

答案是:开发者偏好优先于Web服务器设置,即meta优先。

2. content-type

用来声明文档类型和字符集

3. x-dns-prefetch-control

一般来说,HTML页面中的a标签会自动启用DNS提前解析来提升网站性能,但是在使用https协议的网站中失效了,我们可以设置这个属性,然后将content的值设置为on,来打开dns对a标签的提前解析。

4. cache-control、Pragma、Expires

和缓存相关的设置,但是这些往往不生效,我们一般都通过http headers来设置缓存策略。

0 人点赞