HTML中meta标签的作用与使用

META标签用来描述一个HTML网页文档的属性

META标签可分为两大部分：HTTP-EQUIV和NAME变量。

name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：＜meta name=”参数” content=”具体的参数值”＞ 。其中name属性主要有以下几种参数:

• Keywords(关键字)
  • 说明：keywords用来告诉搜索引擎你网页的关键字是什么。
  • 举例：＜meta name ="keywords" content="science, education,culture,politics,ecnomics，relationships, entertaiment, human"＞
• description(网站内容描述)
  • 说明：description用来告诉搜索引擎你的网站主要内容。
  • 举例：＜meta name="description" content="This page is about the meaning of science, education,culture."＞
• viewport(移动端窗口)
  • 说明：主要用来设计移动端网页。
  • 举例：<meta name="viewport" content="width=device-width, initial-scale=1">
• robots(定义搜索引擎爬虫的索引方式)
  • 说明：用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数all,none,index,noindex,follow,nofollow。默认是all。
  • 举例：<meta name="robots" content="none">
• author(作者)
  • 说明：标注网页的作者。
  • 举例：<meta name="author"content="Lxxyx,root@163.com">  

• generator(网页制作软件)
  • 说明：用于标明网页是什么软件做的。
  • 举例：<meta name="generator"content="Sublime Text3">  

• copyright(版权)
  • 说明：用于标注版权信息。
  • 举例：<meta name="copyright"content="Lxxxx"> 

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

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

  • <meta name="renderer" content="webkit"> //默认webkit内核

  • <meta name="renderer" content="ie-comp"> //默认IE兼容模式

  • <meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv属性

http-equiv顾名思义，相当于http协议中文件头的作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
meat标签的http-equiv属性语法格式是：＜meta http-equiv=”参数” content=”参数变量值”＞ ；其中http-equiv属性主要有以下几种参数：

• content-Type(显示字符集的设定)
  • 说明：设定页面使用的字符集。
  • 用法：<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐

  • <meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

• X-UA-Compatible(浏览器采取何种版本渲染当前页面)
  • 说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）
  • 用法：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
• cache-control(指定请求和响应遵循的缓存机制)
  • 说明：指导浏览器如何缓存某个响应以及缓存多长时间。
  • 用法：<meta http-equiv="cache-control" content="no-cache">

  • no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

  • no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）

  • public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

  • private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）

  • maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

  • no-siteapp：用于禁止当前页面在移动端浏览时，被百度自动转码。

• Expires(期限)
  • 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
  • 用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞
    注意：必须使用GMT的时间格式。
• Pragma(cache模式)
  • 说明：禁止浏览器从本地计算机的缓存中访问页面内容。
  • 用法：＜meta http-equiv="Pragma" content="no-cache"＞
    注意：这样设定，访问者将无法脱机浏览。
• Refresh(刷新)
  • 说明：自动刷新并指向新页面。
  • 用法：＜meta http-equiv="Refresh" content="2; URL=http://www.root.net"＞
    注意：其中的2是指停留2秒钟后自动刷新到URL网址。
• Set-Cookie(cookie设定)
  • 说明：设置cookie, 如果网页过期，那么存盘的cookie将被删除。
  • 用法：＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞
    注意：必须使用GMT的时间格式。
• Window-target(显示窗口的设定)
  • 说明：强制页面在当前窗口以独立页面显示。
  • 用法：＜meta http-equiv="Window-target" content="_top"＞
    注意：用来防止别人在框架里调用自己的页面。

• Pics-label(网页等级评定)
  • 说明：设定网站的限制级别。
  • 用法：＜meta http-equiv="Pics-label" content=""＞
    注意：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站。

• Page-Enter(进入页面)、Page-Exit(离开页面)时的效果
  • 说明：设定进入和离开页面时的特殊效果。
  • 用法：<meta  http-equiv="Page-Enter" content="revealTrans（duration=10,transition=50）"><meta  http-equiv="Page-Exit" content="revealTrans（duration=20，transition=6）">
    注意：这个功能即FrontPage中的"格式/网页过渡"，不过所加的页面不能够是一个frame页面。