HTML <meta>标签

HTML <meta>标签

定义：

<meta>元素提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词

属性：

• content（必需）：定义与name或http-equiv属性相关的元信息
• http-equiv：把content属性关联到HTTP，如果没有提供name属性，content的值会对应http-equiv属性
• name：把content属性关联到一个名称
• scheme：HTML5已经不支持了，不讲。
• charset：html5新加

http-equiv

content-type | charset | expires | refresh | set-cookie | X-UA-Compatible | pragma | window-target | pics-label

• content-type

  <meta http-equiv="content-type" content="text/html; charset=gb2312">

  注意content-type中的charset定义字符集，告诉服务器响应的格式，而Accept-charset则告诉服务器，发送给服务器的内容可能的编码。HTML5定义了个新的charset属性来代替这个写法：

  <meta charset="ISO-8859-1">

• charset

  <meta http-equiv="charset" content="iso-8859-1">

• expires

  <meta http-equiv="expires" content="31 Dec 2008">

  表示存在时间，在这时间之前不去发送请求，GMT格式

• refresh

  <meta http-equiv="Refresh" content="5;url=http://xxx.com" />

  表示5秒后重定向到新链接，若无网址字段则每5秒刷新一次

• set-cookie

  <meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">

  如果存盘的cookie过期就被删掉，GMT格式

• X-UA-Compatible

  <META http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

  针对IE8引入，其他浏览器不识别，

  IE=5 | 7 | 8...：无论是否有<!DOCTYPE>，都采用该版本的标准模式

  IE=Emulate7 | Emulate8...：模式遵循<!DOCTYPE>，默认是兼容模式

  IE=edge：保持使用最高级别模式显示内容，这个很有用

  关于chrome=1：谷歌的外挂插件Google Chrome Frame（谷歌内嵌浏览器框架GCF），使用IE浏览网页时实际上是使用Chrome浏览器内核渲染，最低支持IE6，但前提是客户端已经安装GCF

• pragma

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

  cache模式，no-cache禁止浏览器从本地缓存中访问页面内容（这样会使得离线用户无法脱机浏览）

• window-target

  <meta http-equiv="widow-target" content="_top | _blank | _self | _parent">

  强制页面在当前窗口以独立页面显示，可防止别人在框架里调用自己的页面（想到大街网那个样子了）

• pics-label

  在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的，浏览器可阻挡一些色情暴力的网站，这里不作深入

name

keywords | description | author | generator | revised | viewport | renderer | robots | copyright | revisit-after

• keywords

  <meta name="keywords" content="HTML,ASP,PHP,SQL">

  定义一组关键字（逗号分隔），引擎搜索根据关键字对文档进行分类

• description

  <meta name="description" content="这里是描述" />

• author

  <meta name="author" content="Manji">

• generator

  <meta name="generator" content="Dreamweaver 8.0en">

  编辑器

• revised

  <meta name="revised" content="David, 2008/8/8/" />

  定义页面的最新版本

• viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale:1.0, user-scalable:no">

  手机把页面放到一个虚拟的窗口（viewport）里，通常比屏幕宽，这样网页就不用挤在小窗口里，viewport由移动版Safari引入，用来控制viewport的大小和缩放。

  字段说明：

  width：[num | device-width]，viewport大小

  initial-scale：[ratio]，初始缩放比例

  maximum-scale：[ratio]，允许用户缩放最大比例

  minimum-scale：[ratio]，允许用户缩放最小比例

  user-scalable：[yes | no]是否允许用户缩放

  一个对移动网页优化的页面常包含前三个属性，后两个属性，如果定义不能缩放，网页会更像一个App应用。

  据说还有个特殊的针对Android不支持width的问题的字段——target-densitydpi

• renderer

  <meta name="render" content="webkit | ie-comp | ie-stand">

  360浏览器宣称全球首家支持“内核自主控制”，是针对360浏览器的，其他浏览器不识别。

• robots

  <meta name="Robots" Content="all|none|index|noindex|follow|nofollow">

  告诉搜索机器人哪些页面需要索引

  字段说明：

  all：文件可被检索，链接可被查询

  none：文件不被检索，链接不被查询

  index：文件可被检索（允许登陆页面）

  noindex：文件不被检索，链接可被查询（即禁止登陆页面）

  follow：链接可被查询

  nofollow：文件可被检索，链接不被查询（即禁止继续发掘）

• copyright

  <meta name="copyright" content="Manji All Rights Reserved">

• revisit-after

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

  重访，告诉网络蜘蛛/机器人重访的时间

其他见到的一些（也许都是一些网站自定义的吧）

http-equiv还有：page-enter/page-exit（定义页面进入离开时的效果，但经过试验，似乎并未出现预期效果！）、MSThemeCompatible（是否在IE中关闭XP主题）、IE6（什么？）、content-script-type（w3c规范，指明页面中脚本的类型，不过现在似乎没什么用了吧）

name还可以指定任意值：如creationdate（创建日期）、document ID（文档编号）、level（等级）……

<meta name="data-spm" content="1">——发现自淘宝，似乎跟淘宝有直接关系

<meta property="wb:webmaster" content="3aababe5ed22e23c">——发现自百度