meta 标签
定义及作用
meta：元，这里的 meta 标签指的是元数据(metadata)。
metadata：Metadata is "data [information] that provides information about other data"[1]翻译过来，元数据是一种描述数据的数据。在网页中，meta 标签是用来描述网页的数据，它描述了当前网页的一些属性（但不会直接显示在网页上面），如网页的字符编码(charset)、关键字(keywords)等，这样浏览器或搜索引擎看到这些数据的时候就可以有根据地进行相应操作。
使用
meta 标签通常在<head>标签之间，举个例子，下面是meta_demo.html的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="note">
<meta name="author" content="GurifYuanin">
<meta name="generator" content="Sublime Text">
<meta name="renderer" content="webkit">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="charset" content="UTF-8">
<title>demo</title>
</head>
<body>
Hello meta!
</body>
</html>
可以看到，解读 meta 标签上的属性可以 键值对 (name/http-equiv + content)的概念来理解，就像现实生活中描述一件事物：这件东西的 材质 是 金属 ，这个人的 名字 是 小明 ，这个电池的 电量 是 10000毫安 等等。
换而言之， name 或 http-equiv 表示 键 ，也就是 材质 、 名字 、 电量 这些属性名， content 表示 值 ，也就是 金属 、 小明 、 10000毫安 这些属性值，一个 meta 标签上通常有一对 键值对 。
meta 标签的属性：
| 属性 | 常用值 | 描述 |
|---|---|---|
| name |
keywords
description viewport robots author generator copyright revisit-after renderer |
元数据名(可选) |
| http-equiv |
content-Type
X-UA-Compatible cache-control refresh |
元数据名(可选) |
| content | 相应内容 | 元数据内容(必选) |
| scheme | 元数据格式(可选) |
name
keywords：关键字
描述该网页的一组关键字，方便搜索引擎检索与辨识网站。
<meta name="keywords" content="key1 key2 key3...">
description：描述
描述该网页的一段文字(不超过150个字符)，方便搜索引擎检索与辨识网站。
<meta name="description" content="this page is ...">
robots：机器（爬虫）
定义搜索引擎爬虫的索引方式，也就是告诉搜索引擎哪些可以爬，哪些不需要爬。
| 值 | 描述 |
|---|---|
| none | 搜索引擎将忽略此网页 |
| noindex | 搜索引擎不索引此网页 |
| nofollow | 搜索引擎不继续通过此网页的链接索引搜索其它的网页 |
| all | 搜索引擎将索引此网页与继续通过此网页的链接索引 |
| index | 搜索引擎索引此网页 |
| follow | 搜索引擎继续通过此网页的链接索引搜索其它的网页 |
<meta name="robots" content="none">
revisit-after：再访
搜索引擎再次访问的时间间隔。
<meta name="revisit-after" content="1 year">
author：作者
标注网页的作者。
<meta name="author" content="your name">
generator：生成器
网页的制作工具。
<meta name="generator" content="editor">
copyright：版权
网页的版权所有。
<meta name="copyright" content="owner">
renderer：渲染器
告诉浏览器该用那种内核来渲染网页。
| 值 | 描述 |
|---|---|
| webkit | webkit极速内核 |
| ie-comp | ie兼容内核 |
| ie-stand | ie标准内核 |
<meta name="renderer" content="webkit">
viewport：视窗
移动设备显示设置，多个参数用逗号隔开。
| 参数名 | 参数值 | 描述 |
|---|---|---|
| width |
device-width
200~1000
|
窗口显示宽度，默认是980 |
| height |
device-height
223~1000
|
窗口显示高度 |
| initial-scale | 0~10 | 初始缩放比例 |
| minimum-scale | 0~10 | 最小缩放比例 |
| maximum-scale | 0~10 | 最大缩放比例 |
| user-scalable |
yes
no
|
是否允许手动拖动缩放 |
| target-desitydpi |
high-dpi
medium-dpi
low-dpi
device-dpi
|
规定css中1px中有多少物理像素(安卓设备特有的属性) |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
http-equiv
content-Type：内容类型
设置网页内容的编码字符集，但在HTML5中可以用更简洁的方式来写，以下两种写法是等价的。
<!-- 传统写法 -->
<meta http-equiv="charset" content="utf-8">
<!-- HTML5中 -->
<meta charset="utf-8">
X-UA-Compatible：UA兼容
设置浏览器兼容模式版本，只有在IE浏览器且IE8之后可以用，其他无效。
| 值 | 描述 |
|---|---|
| IE=版本号 | 指定对应版本号的IE引擎来渲染网页 |
| IE=edge | 指定最高版本的IE引擎来渲染网页 |
| IE=edge,chrome=1 | 指定最高版本的IE引擎来渲染网页且开启Chrome Frame（Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页，因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。[6]） |
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
cache-control：缓存控制
控制获取网页的时候是否允许从本地获取。
| 值 | 描述 |
|---|---|
| no-cache | 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存 |
| no-store | 不允许缓存，每次都要去服务器上，下载完整的响应 |
| no-siteapp | 禁止当前页面在移动端浏览时被自动转码。 |
| public | 缓存所有响应，但并非必须。因为max-age也可以做到相同效果 |
| private | 只为单个用户缓存，因此不允许任何中继进行缓存 |
| maxage | 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒 |
<meta http-equiv="cache-control" content="no-siteapp">
expires：期限
本地网页缓存最长存活时间，过了这个时间再次读取的时候就必须再次访问服务器获取新网页。
<meta http-equiv="expires" content="mon 01 Jun 2018 23:59:59 GMT">
refresh：刷新
打开网页后延迟一段时间(秒)后自动跳转到的页面。
<meta http-equiv="refresh" content="1; URL=https://www.google.com/">
Set-Cookie：设置cookie
顾名思义，就是设置cookie
<meta http-equiv="Set-cookit" content="message=xxx; expires=Monday, 01-January-2018 23:59:59 GMT;">
参考文献
[1] 维基百科 Metadata https://en.wikipedia.org/wiki/Metadata
[2] Lxxyx HTML meta标签总结与属性使用介绍 https://segmentfault.com/a/1190000004279791
[3] Tink meta常用属性 https://tink.gitbooks.io/fe-collections/content/ch02-html/s03-meta.html
[4] W3C HTML <meta> 标签 http://www.w3school.com.cn/tags/tag_meta.asp
[5] 菜鸟教程 HTML <meta> 标签 http://www.runoob.com/tags/tag-meta.html
[6] Sivan 给网站添加X-UA-Compatible标签 http://lightcss.com/