背景
关于meta标签，熟悉却又陌生，开发过程中这些配置很多都是由编辑器自动生成，导致容易忽略这些细节。网络上也有很多这种类似的文章，仅以此文总结和加深下印象。
概念
关于meta，官方文档的解释是：HTML语言头部的辅助性标签，提供有关页面的元数据（metadata，描述数据的数据）。
作用：用于指定网页的描述（description）、关键词（keyword）、作者（author）、最后修改时间（last modified）等数据。可以被浏览器、搜索引擎或其他web服务调用。
属性
那关于meta标签的属性值，可以简单分为：
charset: HTML5新增属性，定义文档字符编码
<meta charset="utf-8">
name：定义name值，指定meta标签作用，主要用于描述网页，如网页关键字、叙述等。用于SEO优化。
http-equiv: 和name属性类似，主要用于关联http头部。
content: 可以认为是name和http-equiv属性值对应的具体内容。
http-equiv
1、X-UA-Compatible 告知浏览器以何种版本渲染页面
<!-- 优先使用IE最新版本和Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
2、refresh 让网页在一定时间内刷新或跳转
<!-- 30s后刷新 -->
<meta http-equiv="refresh" content="30" >
<!-- 30s后跳转到百度 -->
<meta http-equiv="refresh" content="30;URL="http://www.baidu.com" >
3、expires：指定网页过期时间，过期后需重新请求服务器
<meta http-equiv="expires" content="Fri Apr 26 2019 18:00:00 GMT+0800" >
4、content-Language 设置显示语言
<meta http-equiv="Content-Language"content="zh-cn"/>
5、cache-control： a、指定请求和响应遵循的缓存机制,content取值no-cache、no-cache、public等具体不详细展开了。
b、禁止百度自动转码
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp">
6、Set-Cookie cookie设定，如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date">
name属性
1、keywords 告诉搜索引擎网页的关键字
<meta name="keywords" content="前端，博客">
2、description 网站描述
<meta name="description" content="这是一个前端博客">
3、viewport 用户网页的可视区域,适用移动端布局。
content取值：
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）；
height：和 width 相对应，指定高度；
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例；
maximum-scale：允许用户缩放到的最大比例；
minimum-scale：允许用户缩放到的最小比例；
user-scalable：用户是否可以手动缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4、robots 定义搜索引擎爬虫的索引方式
<meta name="robots" content="none">
5、referrer 控制页面与服务器交互时发送请求的referer信息，取值never、always、origin
<meta name="referrer" content="origin">
name下的属性有很多，还包括各大浏览器以及手机之间自定义的属性，不能一一罗列，下面列举部分ios设备对meta定义的私有属性：
<!-- 是否启动webapp功能 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 控制状态栏显示样式 default（白色）black（黑色） black-translucent（灰色半透明） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 满屏模式full-screen mode删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-touch-fullscreen" content="yes" />
<!-- 忽略页面中的数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no,date=no,address=no,email=no">