关于meta
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
meta标签可分为两大部分：http-equiv和name变量。
content 基于内容，这个属性为 http-equiv 或 name 属性提供了与其相关的值的定义.
http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义.
常用meta
http-equiv
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
- content-type:设定页面使用的字符集.
例子:
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
GB2312时，代表说明网站是采用的编码是简体中文；
ISO-8859-1时，代表说明网站是采用的编码是英文；
UTF-8时，代表世界通用的语言编码；
PS：html5页面的做法是直接使用<meta charset="utf-8"/>
- X-UA-Compatible:IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题.
例子:
<meta http-equiv="X-UA-Compatible" content="IE=7"> 以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8"> 以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame. PS：谷歌添加一个插件：Google Chrome Frame（谷歌内嵌浏览器框架GCF），
这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，
实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。
- refresh:自动刷新并指向新页面。
例子:
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> PS：2代表页面停留2秒后跳转到后面的网址上
- expires:设定网页的过期时间。
例子:
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> PS：必须使用GMT的时间格式
- set-cookie:如果网页过期，那么自动删除本地cookie
例子:
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> PS：必须使用GMT的时间格式。
- windows-target:强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
例子:
<meta http-equiv="Window-target" content="_top">
name
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
- author:标注网页的作者.
例子:
<meta name="author" content="zhn" />
- keywords:页面关键词，用于被搜索引擎收录.
例子:
<meta name="keywords" content="web前端,web学习, javascript">
- description:页面描述，用于搜索引擎收录.
例子:
<meta name="description" content="Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。它还记录了 Mozilla 产品的文档，例如 Firefox OS。">
- viewport:用于控制页面缩放.
例子:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 详情可查看：http://www.cnblogs.com/lovesong/p/4355029.html
- renderer:指定双核浏览器默认以何种方式渲染页面。
例子:
<meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp">//默认IE兼容模式 <meta name="renderer" content="ie-stand">//默认IE标准模式 PS：360浏览器支持
- generator:说明网站采用的什么软件制作.
例子:
<meta name="generator" content="Microsoft"/>
- revised:网页文档的修改i时间.
例子:
<meta name="revised" content="设计网, 6/24/2015"/>
- robots:用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引.
例子:
<meta name="robots" content="none"/> 取值：all|none|index|noindex|follow|nofollow, 默认all all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件将不被检索，页面上的链接可以被查询。
- copyright:网站版权信息.
例子:
<meta name="copyright" content="本页版权zhn所有。All Rights Reserved" />
推荐使用的meta标签:
<!-- 设置文档的字符编码 --> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->
<!-- 允许控制资源的过度加载 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <!-- 尽早地放置在文档中 --> <!-- 仅应用于该标签下的内容 -->
<!-- Web 应用的名称（仅当网站被用作为一个应用时才使用）--> <meta name="application-name" content="应用名称">
<!-- 针对页面的简短描述（限制 150 字符）--> <!-- 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 --> <meta name="description" content="一个页面描述">
<!-- 控制搜索引擎的抓取和索引行为 --> <meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 --> <meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
<!-- 关于你的网站主题的简短描述 --> <meta name="subject" content="你的网站主题">
<!-- 非常简短（少于 10 个字）的描述。主要用于学术论文。--> <meta name="abstract" content="">
<!-- 完整的域名或网址 --> <meta name="url" content="https://example.com/">
<!-- 在客户端存储 cookie，web 浏览器的客户端识别 --> <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 地理标签 --> <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" --> <meta name="geo.region" content="country[-state]"> <!-- 如 content="New York City" --> <meta name="geo.placename" content="city/town">
为移动设备添加 viewport
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --> width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) content 参数： width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否允许用户缩放(yes/no) minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。 <meta name="viewport" content="width=device-width,user-scalable=yes"> 适配 iPhone 6 和 iPhone 6plus 则需要写： <meta name="viewport" content="width=375"> <meta name="viewport" content="width=414"> 大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，
大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。
SEO 优化部分
页面标题<title>标签(head 头部必须) <title>your title</title>
页面关键词 keywords <meta name="keywords" content="your keywords">
页面描述内容 description <meta name="description" content="your description">
定义网页作者 author <meta name="author" content="author,email address">
定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 <meta name="robots" content="index,follow">
百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加
<meta http-equiv="Cache-Control" content="no-siteapp" />
参考:
http://www.cnblogs.com/herozhi/p/5993844.html
http://www.cnblogs.com/lovesong/p/5745893.html
https://developer.mozilla.org/zh-CN/