<meta>标签详解
1. 概览
<meta>标签是HTML中的辅助标签，意为描述HTML文档的元数据
元数据（Metadata）是数据的数据信息。元数据不会显示在浏览器上，但是会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据，元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
2. 用法
<meta>标签通常位于<head>标签内。 标签中最常用的两个属性是name和content,两个属性一般会同时出现，构成一个键值对， name定义元信息的名称，content指定对元信息的描述。 需要注意的是，有些情况http-equiv属性可以代替name属性,有些元信息的设置用的是 http-equiv属性而不是name属性
<meta name="键" content="值">
<meta http-equiv="健" content="值">
3. meta常用设置
3.1 设置字符编码
<!--设置字符集编码为utf8-->
<meta charset="utf-8">
<!--设置文件格式并同时设置字符集编码，这种写法目前已不太常用-->
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
常见的字符集编码除了 utf-8 还有 gbk,gb2312等等
3.2 搜索引擎相关
进行这些设置对SEO更加友好
<!--网页关键字 向搜索引擎说明你的网页的关键词-->
<meta name="Keywords" content="8-12个以英文逗号隔开的单词/词语">
<!-- 网页描述 告诉搜索引擎你的站点的主要内容-->
<meta name="Description" content="80字以内的一段话，与网站内容相关">
<!-- 网页作者 告诉搜索引擎你的站点的制作的作者 -->
<meta name="Author" content="yourName">
<!--控制搜索引擎对本网页的抓取情况-->
<meta name="Robots" content= "all|none|index|noindex|follow|nofollow">
<!--
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
-->
<!--重访，通知搜索引擎多长时间访问一次-->
<meta name="Revisit-after" content="7 days" >
<!--网页生成工具 就是网页是用什么工具编辑开发的，比如 sublime、dearwave等-->
<meta name="Generator" content="">
<!--网页文档的修改时间-->
<meta name="Revised" content="David, 2008/8/8/" />
<!--网页版权信息-->
<meta name="Copyright" content="2009-2014©版权所有">
这些信息设置只有，搜索引擎在抓取的时候会读取元信息， 其中最常用的是 Keywords和Description
3.3 设置定时刷新
<meta http-equiv="Refresh" content="n;url=http://.......">
其中，n是数字，表示多少秒后刷新， url指定刷新是跳转到的页面，如果不指定则本页面刷新。
3.4 指定IE的用哪种版本渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge">
值IE=edge表示使用IE最高版本渲染页面， 当然也可以设置为 IE=8、IE=10等等为IE指定具体的版本进行渲染。
3.5 设置双核浏览器默认的引擎
目前所知，360浏览器支持该项
<meta name="renderer" content="webkit"> <!--默认webkit内核 推荐设置为此项-->
除了webkit这个值，还有ie-comp表示ie兼容模式，ie-stand表示ie标准模式，切记，抵制IE，人人有责。
3.6 viewport设置
viewport指的是网页视口，因为移动浏览器默认会对网页进行缩放，所以我们在开发移动页面的时候，viewport一定要进行设置
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--最常用的设置，表示宽度为设置宽度，缩放比例为1-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
content可以进行一下6项设置，每一项有,隔开，6项不用每次都写全
- width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）
- height : 和width相对应，指定高度
- initial-scale : 初始缩放比例，页面第一次加载时的缩放比例
- maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0
- minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0
- user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放
3.7 缓存设置
<!-- 禁止浏览器从本地计算机的缓存中访问页面内容,浏览器不缓存 -->
<meta http-equiv="Pragma" content="no-cache">
<!--缓存控制-->
<meta http-equiv="cache-control" content="no-cache|no-store|public|private|max-age">
<!--
no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
max-age : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
-->
<!--设置缓存的有效期至2017年12月31日16点， 如果设置为0表示立即过期，也就是不缓存-->
<meta http-equiv="expires" content="Fri, 31 Dec 2017 16:00:00 GMT">
具体需要学习http缓存相关的知识，可以搜集资料自行学习
3.8 cookie 设置
<!--格式-->
<meta http-equiv="Set-Cookie" content="key=value,path,expires,date">
<!--具体范例-->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">
cookie中的每一项都是有默认值的，除了key，value 其他不是都需要设置的，具体需要深入学习cookie的相关知识
3.9 ios平台Safari相关设置
<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--添加到主屏后的标题-->
<meta name="apple-mobile-web-app-title" content="标题">
<!--忽略数字自动识别外电话号码-->
<meta name="format-detection" content="telephone=no" />
<!--忽略识别邮箱-->
<meta name="format-detection" content="email=no"/>
<!--添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner-->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
3.10 Android平台chrome浏览器相关设置
<!--启用WebApp全屏模式-->
<meta name="mobile-web-app-capable" content="yes">
3.11 windows8平台相关设置
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png">
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#0e90d2">
3.12 其他各浏览器的相关设置
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
3.13 百度搜索引擎的相关设置
<!--禁止百度转码-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--适配服务 如果站点有pc版和移动版本， format制定移动版的格式， url是移动版的地址-->
<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">
3.14 废弃的一些设置
<!--网页打开时的动画效果-->
＜meta http-equiv="Page-Enter" content="revealTrans(duration=５.０, transition=２０)"＞
<!--网页关闭时的动画效果-->
＜meta http-equiv="Page-Exit" content="revealTrans(duration=５.０, transition=２０)"＞
<!--网页的打开方式 类似于 a标签中的target属性-->
＜meta http-equiv="window-target" content="_top|_blank"＞
总结
meta可以设置的信息非常非常的多，我们很难把这些都记下来，说实话能从头到尾看一遍就很累了，我们只需要把经常用到的记下来就可以。
比较常用的设置有 Keywords、 Description、 X-UA-Compatible 这些。
开发响应式页面或移动页面的话， viewport是一定要用的
此外为了保证兼容性 renderer 最好设置为 "webkit"
最后别忘了 <meta charset="utf-8"> 设置字符集编码。
这些都是笔者在开发中经常用到的。
（完）