meta标签知识

概述

meta 标签一般放在整个 html 页面的 head 部分

1、定义：

meta 是文档级元数据元素，用来表示那些不能由其它 HTML 相关元素（< base >、< link >、< script >、< style >或< title >）之一标识的任何元数据

2、元数据的类型：

• 如果设置了 name 属性，meta 元素提供的是文档级别的元数据，应用于整个页面
• 如果设置了 http-equiv 属性 meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同
• 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符集
• 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据

name属性

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

author

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

<meta name='author' content='aaa@mal.abc.com'>

description

是一段简短而精确的、对页面的描述。以头条和淘宝的 description标签为例

keywords

与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。还是以头条和淘宝为例

viewport

为 viewport（视口）的初始大小提供指示。目前用于移动设备。
在 vscode中自动成的代码片段时，会自动生成：

<meta name='viewport' content='width=device-width,inital-scale=1.0'>

width用来设置 viewport 的宽度为设备宽度
inital-scale为设备宽度与 viewport大小之间的缩放比例

robots

表示爬虫对此页面的处理行为，或者说，应当遵守的规则，用来做搜索引擎抓取的
它的 content 可以为：
1、all：搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索
2、name：搜索引擎将忽略此网页
3、index：搜素引擎索引此网页
4、follow：搜索引擎继续通过此网页的链接索引搜索其他的网页

renderer

用来指定双核浏览器的渲染方式，比如360浏览器，可以通过这个设置来指定360浏览器的渲染方式

<meta name='renderer' content='webkit'> // 默认webkit内核
<meta name='renderer' content='ie-comp'> // 默认IE兼容模式
<meta name='renderer' content='ie-stand'> // 默认IE标准模式

http-equiv

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

X-UA-Compatible

最长的间的 http-equiv 值可能就是 X-UA-Compatible了

它是用来做IE浏览器适配的
IE=edge告诉浏览器，以当前浏览器支持的最新版本来渲染，IE9就以IE9版本来渲染
chrome=1告诉浏览器，如果IE浏览器安装了 Goole chrome Frame插件，就以 chrome内核来渲染页面
向上图这种两者都存在的情况：如果又chrome插件，就以chrome内核渲染，如果没有，就以当前浏览器支持的最高版本渲染。
另外，这个属性支持的范围是 IE8-IE11
注意：如果在我们的 HTTP 头部中也设置了这个属性，并且和 meta中设置的有冲突，那么哪一个优先呢？
答案是：开发者偏好（meta元素）优先于Web服务器设置（HTTP头）

content-type

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

<meta http-equiv="Content-type" conetnt="text/html;charset=utf-8">

x-dns-prefetch-contorl

一般来说，html页面中的 a标签会自动启用DNS提前解析来提升网站性能，但是在使用 HTTP协议的网站中失效了，我们可以设置：

<meta http-equiv='x-dns=prefetch-control' content="on">

来打开dns对 a 标签的提前解析

cache-contorl、Pragma、Expires

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