html meta的使用详解
1 介绍：
meta标记看似是HTML语言HEAD区的一个辅助性标签，其实它的作用很大。META标签共有两个属性，它们分别是Http-equiv属性和Name属性。
2 name=viewport
eg：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
参数解释：
1)、width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）
2)、height : 和width相对应，指定高度
3)、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例
4)、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0
5)、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0
6)、user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放
3 meta中的name属性
Name属性语法格式是：<meta name="参数" content="具体的参数值">
<!--用以说明生成工具-->
<meta name="Generator" content="">
<!--向搜索引擎说明你的网页的关键词 说明：Keywords用来告诉搜索引擎你网页的关键字是什么。-->
<meta name="Keywords" content="">
<!-- 告诉搜索引擎你的站点的主要内容 说明：Description用来告诉搜索引擎你的网站主要内容。-->
<meta name="Description" content="">
<!-- 告诉搜索引擎你的站点的制作的作者 说明：标注网页的作者-->
<meta name="Author" content="你的姓名">
<!--说明：Robots用来告诉搜索机器人需要索引的页面有哪些。Content的参数有All、None、Index、Noindex、Follow、Nofollow。默认是All。 -->
<meta name="Robots" content= "all|none|index|noindex|follow|nofollow">
<!--
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
-->
4 meta中的 http-equiv属性
相当于HTTP的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确显示网页内容.
Http-equiv属性语法格式是：<meta http-equiv="参数" content="参数变量值">
<!--设置字符编码和文件格式 说明：设定页面使用的字符集。-->
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
<!--设置定时刷新 说明：自动刷新并指向新页面。-->
<meta http-equiv="Refresh" content="2;url=http://.......> 注意：其中的"2"是指停留2秒钟后自动刷新到URL网址，可以更改，但建议不要改得太大。
<!-- 告诉浏览器不要缓存页面 说明：禁止浏览器从本地计算机的缓存中访问页面内容。-->
<meta http-equiv="Pragma" content="no-cache">
<! -- //告诉浏览器不要缓存页面-->
<meta http-equiv="cache-control" content="no-cache">//告诉浏览器不要缓存页面
<!--禁用浏览器缓存此页面 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。-->
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"> 注意：必须使用GMT的时间格式。
<!--设置ie的文档兼容模式,设置IE7+的浏览器以IE7的兼容模式查看页面-->
<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=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.
注意：必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前
5 更多的meta和link
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 -->
<!--
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
-->
<!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏时的标题 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebAPP 全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 状态条颜色 -->
<meta name="format-detection" content="telephone=no" /> <!-- 屏蔽数字自动识别为电话号码 -->
<!-- favicon 图标 -->
<link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/>
<!-- iOS 图标 begin -->
<!--默认 57x57 像素-->
<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
<!-- iOS 图标 end -->
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
<!-- SEO 优化 -->
<meta name="description" content="" /> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<title>页面标题</title>
<!-- iOS 应用启动界面设置 begin -->
<!-- iPad Landscape – 1024 x 748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait – 768 x 1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->
<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<!-- iOS 应用启动界面设置 end -->
6 国产浏览器高速模式
国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，
这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。
幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了！
将下面的 <meta> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：
<meta name="renderer" content="webkit">
目前只有360浏览器支持此 <meta> 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代！