你真的了解head标签下的meta？

> 你真的了解meta标签的详细用途吗？
> 今天啊我们来好好缕一缕meta这个标签
> 接下来我们从四个方面来介绍meta标签
> 分别是：
> meta是什么
> meta的组成
> meta能做什么
> meta的属性与值 


#### meta标签分两大部分： http标题信息（http-equiv）和页面描述信息（name）


### meta能做什么
* 控制页面缓冲
* 自动刷新并指向新的页面
* SEO搜索引擎优化
* 定义页面使用语言
* 实现网页转换时的动态效果
* 网页定级评价




#### charset  （首先我们来看下charset（HTML5新增））
** 规定 HTML 文档的字符编码 **
```html
<meta charset="utf-8">
```
注意：
> ** charset属性是HTML5中的新属性，且替换了： **
> `<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`




### meta的属性与值
首先我们来总览下都有哪些属性及对应的值
> 1. name
> 2. content
> 3. http-equiv


#### name 
** 网页描述的关键字、摘要、作者和定义robots(搜索引擎机器人)行为、为搜索引擎提供信息 ** 


主要参数有：


* format-detection
* robots
* revisit-after
* viewport
* apple-mobile-web-app-capable


##### format-detection
** 用来检测HTML中的一些格式的 **
```html
<meta name="format-detection" content="telephone=no,email=no,adress=no">
```
`telephone=no`  禁止了把数字转化为拨号链接
`email=no`      禁止作为邮箱地址 告诉设备不识别邮箱
`adress=no`     禁止跳转至地图


##### robots
有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。


```html
<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">  默认是all
```


* all:      文件将被检索，且页面上的链接可以被查询
* none:     文件将不被检索，且页面上的链接不可以被查询
* index:    文件将被检索
* follow:   页面上的链接可以被查询
* noindex:  文件将不被检索，但页面上的链接可以被查询
* nofollow: 文件将不被检索，页面上的链接可以被查询


##### revisit-after
通知搜索引擎多少天访问一次
```html
<meta name='revisit-after' content='7 days'>
```


##### viewport
```
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
```


width: 控制viewport的大小，可以指定一个值，或者特殊的值，如device-width为设备的宽度
height: 和width相对应，指定高度
initial-scale： 初始缩放比例，页面第一次加载时候缩放比例
maximum-scale: 允许用户缩放到的最大比例
minimum-scale: 允许用户缩放到的最小比例
user-scalable: 用户是否可以手动缩放


##### apple-mobile-web-app-capable
** 删除/显示 默认的苹果工具栏和菜单栏 **
```html
<meta name="apple-mobile-web-app-capable" content="yes"> 
```
注意：
> content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。




#### content
> content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
> content 属性始终要和 name 属性或 http-equiv 属性一起使用。


#### http-equiv
> http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，
> 以帮助正确地显示网页内容




主要的参数有：


* X-UA-Compatible
* expires
* pragma
* refresh
* set-cookie
* window-target
* content-type
* pics-label
* content-language
* cache-control
* content-script-type


##### X-UA-Compatible
```html
<meta http-equiv="X-UA-Compatible" content="IE=7">
```
以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面


```
<meta http-equiv="X-UA-Compatible" content="IE=edge"
```
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。


##### expires
** 可以用于设定网页到期时间，一旦网页过期必须到服务器上重新传输 **
```html
<meta http-equiv="expires" content="Wed, 20 Jun 2016 22:33:00 GMT">
```
注意：
> ** 必须使用GMT的时间格式 **


##### pragma
** 禁止浏览器从本地计算机的缓存中访问页面内容用法 **
```html
<meta http-equiv="pragma" content="no-cache">
```
注意：
> ** 访问者将无法脱机浏览 **


##### refresh
** 自动刷新并指向新页面 **
```html
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com/">
```
注意：
> ** 其中2是指停留2秒后自动刷新到URL网址 **


##### set-cookie
** 如果网页过期，则存盘的cookie将被删除 **
```html
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Wednesday,20-Jun-2017 24:00:00 GMT; path=/">
```
注意：
> ** 必须使用GMT的时间格式 **


##### window-target
** 强制页面在当前窗口以独立页面显示 **
```html
<meta http-equiv="window-target" content="_top">
```
注意：
> ** 这个属性是用来防止别人在框架里调用自己的页面
> content选项： 
> _blacnk   在新窗口显示 
> _top      当前整个窗口显示
> _self     当前容器显示，比如框架嵌套
> _parent   父容器显示，比如框架嵌套
> **


##### content-type
** 设定页面使用的字符集 **
```html
<meta http-equiv="content-type" content="">
```
注意：
> ** 需要放在head标签最前面 **


##### pics-label
** 网页等级评定说明：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。 **
```html
<meta http-equiv="pics-label" content="">
```


##### content-language
** 显示语言的设定 **
```html
<meta http-equiv="content-language" content="zh-cn">
```


##### cache-control
** HTTP 1.1  引入了 Cache-Control 响应头参数以给站长们更多控制网站内容的权力，同时弥补了 Expires的局限. **


```html
<meta http-equiv="cache-control" content="no-cache">
```
cache-control的参数包括:


* max-age=[单位：秒 seconds] — 设置缓存最大的有效时间
* s-maxage=[单位：秒 seconds] — 类似于 max-age, 但是它只用于公享缓存 (e.g., proxy)
* public — 响应会被缓存，并且在多用户间共享。正常情况, 如果要求 HTTP 认证,响应会自动设置为 private
* private — 响应只能够作为私有的缓存(e.g., 在一个浏览器中)，不能在用户间共享
* no-cache — 响应不会被缓存,而是实时向服务器端请求资源。这一点很有用，这对保证HTTP 认证能够严格地禁止缓存以保证安全性很有用（这是指页面与public结合使用的情况下）.既没有牺牲缓存的效率，又能保证安全
* no-store — 在任何条件下，响应都不会被缓存，并且不会被写入到客户端的磁盘里，这也是基于安全考虑的某些敏感的响应才会使用这个
* must-revalidate — 响应在特定条件下会被重用，以满足接下来的请求，但是它必须到服务器端去验证它是不是仍然是最新的
* proxy-revalidate — 类似于 must-revalidate,但不适用于代理缓存


##### content-script-type
** W3C网页规范，指明页面中脚本的类型 **
```html
<meta http-equiv="content-script-type" content="text/javascript">
```


##### 其他
```html
<meta http-equiv="page-enter" content="revealTrans(duration=1.0,transtion=12)">
```
在IE5.5及以上版本的浏览器中，增加了页面过渡效果，经过检查和实验，IE中是可以的，谷歌浏览器是不支持的


```html
<meta http-equiv="page-exit" content="revealTrans(duration=1.0,transtion=12)">
```
设定离开页面时的特殊效果


* `Duration` 值为网页动态过渡的时间，单位为秒
* `Transition` 是过渡方式，它的值为0到23，分别对应24种过渡方式


0. 盒状收缩
1. 盒状放射
2. 圆形收缩
3. 圆形放射
4. 由下往上
5. 由上往下
6. 从左至右
7. 从右至左
8. 垂直百叶窗
9. 水平百叶窗
10. 水平格状百叶窗
11. 垂直格状百叶窗
12. 随意溶解
13. 从左右两端向中间展开
14. 从中间向左右两端展开
15. 从上下两端向中间展开
16. 从中间向上下两端展开
17. 从右上角向左下角展开
18. 从右下角向左上角展开
19. 从左上角向右下角展开
20. 从左下角向右上角展开
21. 水平线状展开
22. 垂直线状展开
23. 随机产生一种过渡方式