文章参考: HTML meta标签总结与属性使用介绍 和 HTML中的meta标签常用属性及其作用总结

在html中，我们总免不了跟meta标签打交道，以前只是有一些简单的了解，作为html中必不可少的一部分，还是需要更深入的理解下。

<meta>元素

<meta>元素可以提供有关页面的元信息，比如针对搜索引擎和搜索引擎更新频度的描述和关键词。每个<meta>元素只能用于一种用途，如果想定义多个文档信息，则需要在head标签中添加多个meta元素。

属性（name和http-equiv）

• name属性主要用于描述网页，比如网页关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
  词法格式：

  <meta name="参数"  content="具体的描述">

参数：

1. keywords(关键字)
   说明：告诉搜索引擎网页的关键字。
   例如:

       <meta name="keywords" content="简书，博客，meta">
   

2. description(网站内容的描述)
   说明: 告诉搜索引擎网站的主要内容
   例如:

     <meta name="description" content="这是一篇关于meta标签的博客">
   

3. robots(定义搜索引擎爬虫的索引方式)
   说明: robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
   content的参数有all,none,index,noindex,follow,nofollow。默认是all。
   例如：

       <meta name="robots" content="none">
   

   具体参数如下：

   • none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
   • noindex : 搜索引擎不索引此网页。
   • nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
   • all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
   • index : 搜索引擎索引此网页。
   • follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

4. author(作者)
   说明：用于标注网页作者
   例如：

       <meta name="author" content=卧江流">
   

5. copyright(版权)
   说明：用于标注版权信息
   例如:

     <meta name="copyright" content="xxx">
   

6. revisit-after(搜索引擎爬虫重访时间)
   说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
   例如：

  <meta name="revisit-after" content="7 days" >

7. renderer(双核浏览器渲染方式)
   说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。
   例如：

      <meta name="renderer" content="webkit"> //默认webkit内核
      <meta name="renderer" content="ie-comp"> //默认IE兼容模式
      <meta name="renderer" content="ie-stand"> //默认IE标准模式
   

8. viewport(移动端视口)
   • viewport提供有关视口初始大小的提示，仅供移动设备使用。
     例如：

         meta name="viewport" content="width=device-width, initial-scale=1">
     

     content内容：
     • width，可能为一个正整数或者字符串"device-width",以像素为单位i，定义viewport(视口)的宽度。
     • height，可能为一个正整数或者字符串"device-width",以像素为单位i，定义viewport(视口)的高度。
     • initial-scale，一个0.0到10.0之间的正数，定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度)与视口大小之间的缩放比例。
     • maximum-scale，一个0.0到10.0之间的正数，定义缩放的最大值，它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
     • minimum-scale，一个0.0到10.0之间的正数，定义缩放的最小值，它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
     • user-scalable，一个布尔值(yes或no)，如果设置为no，用户将不能放大或缩小网页，默认值是yes。
     • 如果不设置viewport，默认视口宽度是980
     • content设置width，不设置initial-scale，视口宽度为设置的width值
     • content内容为空时，默认视口宽度是980
     • content设置initial-scale但是不设置width，可以根据initial-scale计算出视口宽度
       initial-scale = 屏幕宽度/视口宽度

• http-equiv属性
  http-equiv属性指定所要模拟的标头字段的名称，content属性用来提供值。

   <meta http-equiv="参数" content="具体的描述">

content-Type声明网页字符编码:

  <meta http-equiv="content-Type" content="text/html charset=UTF-8">
  // html5中
  <meta charset="UTF-8">

refresh指定一个时间间隔(以秒为单位)，在此时间过去之后从服务器重新载入当前页面，也可以另外指定一个页面。

  <meta http-equiv="refresh" content="2;URL="http://www.baidu.com">  // 2s后从当前页跳转到百度

X-UA-Compatible浏览器采用何种版本渲染当前页面。

    // 指定IE和chorme使用最新版本渲染当前页面
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1">

expires用于设定网页的到期时间，过期后网页必须到服务器上重新传输

<meta http-equiv="expires" content="ThursDay 15 Nov 2017 10:15 GMT">

catch-control 用于指定所有缓存机制在整个请求/响应链中必须服从的指令

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

content有以下值：

使用meta标签清除页面缓存

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 <meta http-equiv="Pragma" content="no-cache" />
 <meta http-equiv="Expires" content="0" />