认识<meta>

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

一【什么是<meta>标签】

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

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

二 【属性】

- 必须的属性

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息

- 可选的属性

属性	值	描述
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP 头部。
name	author description keywords generator revised others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

三【常用功能】

1.SEO相关

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

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

<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">

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

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

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

<meta name="robots" content="index,follow">
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询；
 -->

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

<meta http-equiv="refresh" content="5;url=http://www.cnblogs.com/">

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

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

<meta name="author" content="author name">

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

<meta name="copyright" content="本页版权归XX所有。All Rights Reserved">

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

<meta name="generator" content="PCDATA|FrontPage|">

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

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

值	描述
never	删除http请求head中的referer
always	不改变http请求dead中的referer的值。注意，这种情况下，如果当前页面使用了https协议，而要加载的资源使用http协议，加载资源的请求head中也会携带referer。
origin	从当前页面中发起的http请求只携带origin部分。
default	如果当前页面使用的是https协议，而正要加载的资源使用的是普通的http协议，则将http请求head中的referer置为空。

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

<meta content="always" name="referrer">

2.移动设备

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

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

　　可用的值：

属性	可取的值	描述
width	一个可能的正整数值或者设备的呈现表面的宽度	定义了视口的宽度，以px为单位
height	一个可能的正整数值或者设备的呈现表面的高度	定义了视口的高度，以px为单位
initial-scale	在0.0和10.0之间的正数	描述设备宽度（纵向模式下设备的宽度，横向模式下设备的高度）与视口大小的比率
maximum-scale	在0.0和10.0之间的正数	限定缩放的最大值;它必须大于或等于最小尺度
minimum-scale	在0.0和10.0之间的正数	限定缩放的最小值;它必须是小于或等于最大尺度
user-scalable	布尔值（yes或no）	如果设置为no，则用户不能够在所述网页进行放大。默认值是yes。

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

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

<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 启用 WebApp 全屏模式 -->

　　● 隐藏状态栏/设置状态栏颜色 ：只有在开启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"> 

　　● 移动端的<meta>

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别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">
<!-- 适应移动端end -->

3.网页相关

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

<meta charset='utf-8' />

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

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

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

<meta name="renderer" content="webkit|ie-comp|ie-stand">

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

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

<meta http-equiv="Cache-Control" content="no-siteapp" />

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

<meta http-equiv="Pragma" content="no-cache">

　　● Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

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

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

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

<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

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

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

<meta http-equiv="pragma" content="no-cach">

　　● set-cookie ：定义一个cookie

<meta http-equiv="set-Cookie" content="cookievalue=xxx; expires=wednesday,21-Oct-98 16:14:21 GMT; path=/">

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

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

<meta http-equiv="default-style" content="the document's preferred stylesheet">

四【参考文档】

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

4.http://www.cnblogs.com/esshs/articles/157588.html