HTML页面meta标签常用的属性/属性值

标签定义及使用说明<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。web开发中我们经常用到meta标签，这里我们来汇总一些meta标签常用的属性及其属性值。1.<meta charset="UTF-8">charset 属性是 HTML5 中的新属性，定义HTML文档的字符编码，告诉浏览器使用要使用哪种编码格式编码，‘UTF-8’属性值是一种支持中文的编码格式，如果不使用，在火狐、IE、搜狗等浏览器会出现中文乱码。例如，如果不使用<meta charset="UTF-8">，<p>厉害了，我的哥</p>，会显示为：2.<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）。3.<meta name="description" content="Free Web tutorials on HTML and CSS">规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。4.<meta name="author" content="Hege Refsnes">规定页面的作者的名字。5.<meta http-equiv="refresh" content="3">定义文档自动刷新的时间间隔。如<meta http-equiv="Refresh" content="5;URL=http://www.baidu.com/">两秒后自动刷新并指向新页面。一般不推荐使用此属性，刷新页面通常使用js实现。6.<meta http-equiv="X-UA-Compatible"content="IE=edge">7.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放8.<meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0">清除浏览器中的缓存，它和其它几句合起来用，就可以使你再次进入曾经访问过的页面时，浏览器必须从服务端下载最新的内容，达到刷新的效果。用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 。

此属性用于：当我们使用IE浏览器渲染页面时，告诉IE应该使用其渲染引擎的最新版本（edge）。此属性官方解释比较冗余，个人理解是：使用IE浏览器渲染页面时，若该浏览器有多个版本的内核（IE9、IE10...）时，使用最高版本的内核渲染页面，这样也会对一些CSS3新特性兼容的更好，比如CSS动画在IE9是不能实现的。更多关于该标签的理解可以参考老外的解释（http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e）。在bootstrap框架中有使用该标签（http://getbootstrap.com/），如下图

'viewport'是一个显示区域，就是指定在设备的哪一区域显示页面，这个属性常用于移动端开发（如微信公众号页面）
width - viewport的宽度

此标签可以使当前显示区域成为一个响应式容器，可以使用CSS3新属性@media查询，实现不同终端的适配