作为前端，你必须要知道的 meta 标签知识
前言
前几天面试的时候，面试官问：你都知道什么 meta 标签？用处是什么？尽可能多的说出来。我：嗯…… 嗯…… 我一般都自动生成……面试官：……后来俺找资料好好学了下，再看了 taobao 和头条的网页才知道：meta 标签用处可大得很呐！今天就来浅浅总结一下。
顺便感叹一下字节这块适配做的是真的蛮好。
概览
meta 标签一般放在整个 html 页面的 head 部分，在 MDN 中对他这样定义：meta 是 文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（ <base>、 <link>, <script>、 <style> 或 <title>）之一表示的任何元数据。
是不是感觉看起来很抽象？说白了就是为了传达信息。
name 属性
name 和 content 一起使用，前者表示要表示的元数据的 名称，后者是元数据的 值。
author
用来表示网页的作者的名字，例如某个组织或者机构。
html
<meta name="author" content="aaa@mail.abc.com" />description
是一段简短而精确的、对页面内容的描述。以头条和 taobao 的 description 标签为例：
keywords
与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。还是以头条和 taobao 为例：
viewport
为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。
可能你也发现了，我们在 vscode 中自动生成 html 的代码片段时，会自动生成：
html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />width 用来设置 viewport 的宽度为设备宽度；initial-scale 为设备宽度与 viewport 大小之间的缩放比例。
robots
表示爬虫对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。
它的 content 可以为：
all:搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索none:搜索引擎讲忽略此网页index:搜索引擎索引此网页follow:搜索引擎继续通过此网页的链接索引搜索其它的网页
renderer
用来指定双核浏览器的渲染方式，比如 360 浏览器，我们可以通过这个设置来指定 360 浏览器的渲染方式。
html
<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 浏览器安装了 Google Chrome Frame 插件，就以 chrome 内核来渲染页面。
像上图这种两者都存在的情况：如果有 chrome 插件，就以 chrome 内核渲染，如果没有，就以当前浏览器支持的最高版本渲染。
另外，这个属性支持的范围是 IE8-IE11
你可能注意到了，如果在我们的 http 头部中也设置了这个属性，并且和 meta 中设置的有冲突，那么哪一个优先呢？
答案是：开发者偏好（ meta 元素）优先于 Web 服务器设置（HTTP 头）。
content-type
用来声明文档类型和字符集
x-dns-prefetch-control
一般来说，HTML 页面中的 a 标签会自动启用 DNS 提前解析来提升网站性能，但是在使用 https 协议的网站中失效了，我们可以设置：
来打开 dns 对 a 标签的提前解析
cache-control、Pragma、Expires
和缓存相关的设置，但是遗憾的是这些往往不生效，我们一般都通过 http headers 来设置缓存策略
总结
常用了就是这些啦~实际使用时还有很多新的需要学习，这就需要俺们平时多看看其他网站是怎么设置 meta 的~ 一起加油叭
参考文章
传送门