这张图是一个澳大利亚摄影师Roger Stonehouse偶然在越南时捕捉到的，
这不是摆拍，
当时走在路上的就是这样一个不羁的Rock少年牵着一个有点羞怯的小和尚走在路上，
非常奇妙一刻被摄影师捕捉下来了。
看似充满矛盾和不搭调却又格外的和谐美好，
取名《an odd couple》
定义和用法
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！
标签分类
meta标签分两大部分：http-equiv和name变量。
http-equiv
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
meta标签的http-equiv属性语法格式是：
<meta http-equiv="参数" content="参数变量值">
其中http-equiv属性主要有以下几种参数：
- 1.expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
用法：<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
注意：必须使用GMT的时间格式。
- 2.Pragma(cach模式)
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：<meta http-equiv="Pragma" content="no-cache">
注意：这样设定，访问者将无法脱机浏览。
- 3.Refresh(刷新)
说明：需要定时让网页自动链接到其它网页的话，就用这句了。
用法：<meta http-equiv="Refresh" content="5;URL=http://www.yahoo.com">
注意：其中的5是指停留5秒钟后自动刷新到URL网址。
- 4.Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
用法：<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">
注意：必须使用GMT的时间格式。
- 5.Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
用法：<meta http-equiv="Window-target" content="_top">
注意：用来防止别人在框架里调用你的页面。
- 6.Content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- 7.Content-Language（显示语言的设定）
用法：<meta http-equiv="Content-Language" content="zh-cn"/>
- 8.Cache-Control
说明：指定请求和响应遵循的缓存机制。 在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
- 9.X-UA-Compatible
说明：X-UA-Compatible是IE8的一个专有meta属性，它告诉IE8采用何种IE版本去渲染网页，在html的head标签中使用。可以在微软官方文档获取更多介绍。
为什么要用X-UA-Compatible？
在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。
使用下面这段代码后，开发者无需考虑网页是否兼容IE8浏览器，只要确保网页在IE6、IE7下的表现就可以了。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
//emulate 仿真
//给网站添加X-UA-Compatible标签
//我建议使用下面的X-UA-Compatible标签：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
//IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame
参考文章：X-UA-Compatible是什么
name
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。 meta标签的name变量语法格式是：
meta标签的name属性语法格式是：
<meta name="参数" content="具体的参数值">
其中参数主要有下面几种参数：
- 1.keywords(关键字)
说明：keywords用来告诉搜索引擎你网页的关键字是什么。
举例：<meta name ="keywords" content="life, universe, mankind, plants, relationships, the meaning of life, science">
- 2.description(简介)
说明：description用来告诉搜索引擎你的网站主要内容。
举例：<meta name="description" content="This page is about the meaning of life, the universe, mankind and plants.">
- 3.robots(机器人向导)
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：<meta name="robots" content="none">
| 参数 | 含义 |
|---|---|
| all | 文件将被检索，且页面上的链接可以被查询 |
| none | 文件将不被检索，且页面上的链接不可以被查询 |
| index | 文件将被检索 |
| follow | 页面上的链接可以被查询 |
| noindex | 文件将不被检索，但页面上的链接可以被查询 |
| nofollow | 文件将被检索，但页面上的链接不可以被查询 |
- 4.author(作者)
说明：标注网页的作者
举例：<meta name="author" content="ajie,ajie@netease.com">
以上是meta标签的一些基本用法，其中最重要的就是:keywords和description的设定。
为什么呢？道理很简单，这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问 你的站点!
根据现在流行搜索引擎(Lycos，AltaVista等)的工作原理,搜索引擎首先派出机器人自动 在www上搜索，当发现新的网站时，便检索页面中的keywords和decription，并将其加入到自 己的数据库，然后再根据关键词的密度将网站排序。
也就是说：
-
如果你的页面中根本没有keywords和description的meta标签，那么机器人是 无法将你的站点加入数据库，网友也就不可能搜索到你的站点。
-
如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面 被点击的可能性也是非常小的。
charset
| 编号 | 语言 |
|---|---|
| GB2312 | 简体中文 |
| BIG5 | 繁体中文 |
| iso-2022-jp | 日文 |
| ks_c_5601 | 韩文 |
| ISO-8859-1 | 英文 |
| UTF-8 | 世界通用的语言编码 |
补充
对下段代码的解释：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
viewport是用在移动端开发的，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
viewport对应的content参数如下：
| content属性值 | 含义 |
|---|---|
| width | 可视区域的宽度，值可为数字或关键词device-width |
| height | 同width |
| intial-scale | 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 |
| minimum-scale | 可视区域的缩放级别 |
| maximum-scale | 用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上 |
| user-scalable | 是否可对页面进行缩放，no 禁止缩放 |
