认识＜meta＞

概要：在查看网页源码的时候，经常发现有<meta>标签存在，于是查了一下它的作用，发现有很多功能。下面就简单的阐述一些常见的功能。

一【什么是<meta>标签】

meta，即meta-information，可以提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

<meta>永远位于head元素内部，不包含任何内容，并且元数据总是以名称/值的形式被成对传递的。

二 【属性】

- 必须的属性

- 可选的属性

三【常用功能】

1.SEO相关

　　● 页面关键词 ：每个网页应具有描述该网页内容的一组唯一的关键字。

　　使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。例如：

　　● 页面描述 ：每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

　　● 搜索引擎搜索方式 ：robots（机器人向导），用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all、none、index、noindex、follow、nofollow。默认是all。例如：

　　● 页面重定向与刷新 ：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。例如：

　　上例代码表示5秒之后跳转到博客园首页。

　　● 页面作者 ：以自由格式定义的网页作者的名称。例如：

　　● 页面版权 ：copyright (版权)，描述页面的版权。例如：

　　● 编辑器 ：generator是编辑器的说明。例如：

　　content的值是你所使用的编辑器。

　　● referrer：html文档控制http请求中的referer。可用的值：

　　例如，百度首页源码中的：

2.移动设备

　　● viewport ：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。

　　可用的值：

　　注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

　　● WebApp全屏模式 ：伪装app，离线应用。

　　● 隐藏状态栏/设置状态栏颜色 ：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent。

　　● 添加到主屏后的标题 ：

　　● 忽略数字自动识别为电话号码 ：

　　● 忽略识别邮箱 ：

　　● 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)

　　● 移动端的<meta> 

3.网页相关

　　● 声明编码（HTML5）：描述当前页面使用的编码，例如：

　　● 优先使用 IE 最新版本和 Chrome 

　　● 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。

　　国内双核浏览器默认内核模式如下：
　　　　1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
　　　　2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）　　

　　● 禁止百度转码 ：通过百度手机打开网页时，百度可能会对你的网页进行转码，加上广告，为此可在 head 内添加：

　　● 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

　　● Windows 8

　　● 站点适配：主要用于PC-手机页的对应关系。

　　● expires (期限) ：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅

　　注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。

　　● pragma (cach模式) ：禁止浏览器从本地机的缓存中调阅页面内容。

　　● set-cookie ：定义一个cookie

　　注意：必须使用GMT的时间格式。

　　● default-style ：指定 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。

四【参考文档】

1.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

2.http://fex.baidu.com/blog/2014/10/html-head-tags/?qq-pf-to=pcqq.c2c

3.https://segmentfault.com/a/1190000002407912