META清单

Posted by

移动前端第二弹:善用meta

2016/04/19 · CSS ·
Meta

原文出处:
杜瑶(@doyoe)   

前言

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!

前言

在移动前端第一弹:viewport详解中,我们讲了viewport,那是一个关于meta的故事。这次我们会就将meta这个故事讲得更广阔、更有意思一些。

写过HTML的童鞋,应该都对这个不陌生,或用它来定义页面编码,或用它来定义搜索引擎抓取方式,或用它定义页面关键字,描述等等。

http-equiv属性

显示字符集的设定

<meta  http-equiv=”Content-Type”  content=”text/html;
 charset=utf-8″>

<meta  http-equiv=”Content-Language”  content=”zh-CN”>

说明:用以说明主页制作所使用的文字以及语言;又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;

Refresh (刷新)

<meta http-equiv=”Refresh” content=”n; url=;

说明:定时让网页在指定的时间n内,跳转到你的页面;

Expires (期限)

<meta  http-equiv=”Expires”  content=”Mon,12 May 2001 00:20:00
GMT”>

说明:可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;

Pragma (cach模式)

<meta  http-equiv=”Pragma”  content=”no-cache”>

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;

Set-Cookie (cookie设定)

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

说明:cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

Pics-label (网页RSAC等级评定)

<meta  http-equiv=”Pics-label”  content=””>

说明:网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;

Window-target (显示窗口的设定)

<meta  http-equiv=”windows-Target”  content=”_top”>

说明:强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;

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页面。

声明使用的浏览器及版本

x-ua-compatible设置是从IE8开始增加的(很明显,只适用于IE),对于过往的版本无法识别。开发者可以通过设置x-ua-compatible来指定渲染引擎的类型和版本,并且因为需求不同可以有多种不同的设置。当直接指定content为IE的某个具体版本,如上述代码第1条,客户端的IE将会使用IE7.0标准模式对页面进行渲染,并忽略Doctype定义。当指定的IE版本在客户端IE中不存在时,IE将会尝试将该值转换为最为接近的版本。例如指定一个低于5.0的IE版本,如上述代码第2条,客户端的IE将会使用IE5.0对页面进行渲染,由于IE5.0并没有标准模式,所以将会直接使用quirks
mode来渲染;如果指定一个大于客户端IE的版本,如上述代码第3条,假定客户端IE的最高版本为9.0,那么IE会将该值转换为IE=9,即使用IE9.0标准模式对页面进行渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=7″/>

<meta  http-equiv=”x-ua-compatible”  content=”IE=4″/>

当指定的content值加了Emulate前缀时,如上述代码,客户端IE将会根据Doctype定义来决定如何来对页面进行渲染。假设页面使用了标准的Doctype,那么此定义效果等同上面的情况;假设页面并没有使用标准的Doctype,那么将使用quirks
mode来渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=EmulateIE7″/>

当指定的content值为IE=Edge时,如上述代码,客户端的IE将会使用最高的标准模式对页面进行渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=Edge”/>

当指定的content值有多个版本时,如上述代码,假定客户端IE版本为8.0或者9.0,则使用IE7.0标准模式对页面进行渲染;假定客户端IE版本为10.0或者11.0,则直接使用对应版本的标准模式对页面进行渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=7, 10, 11″/>

当指定的content值为IE=Edge,
chrome=1时,如上述代码,假定客户端安装了Google Chrome
Frame,则在IE中使用chrome的渲染引擎来渲染页面,否则,将会使用客户端IE最高的标准模式对页面进行渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=Edge,
chrome=1″/>

meta列表

好的meta使用,能更好地提高页面的可用性及被检索的几率。

这里并不会列出所有的meta使用方式,只挑选一些常用及实际意义比较大的讲讲,当然也包括一些厂商私有定制的。

 

name属性

关键词

<Meta name=”Keywords”
Content=”关键词1,关键词2,关键词3,关键词4,……”>

说明:为搜索引擎提供的关键字

Description (简介)

<Meta name=”Description” Content=”你网页的简述”>

说明:Description用来告诉搜索引擎你的网站主要内容

Robots (机器人向导)

<Meta name=”Robots”
Content=”All|None|Index|Noindex|Follow|Nofollow”>

说明:Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。

all:文件将被检索,且页面上的链接可以被查询;

none:文件将不被检索,且页面上的链接不可以被查询;(和 “noindex, no
follow” 起相同作用)

index:文件将被检索;(让robot/spider登录)

follow:页面上的链接可以被查询;转自环 球 网校edu24ol.com转自环 球
网校edu24ol.com转自环 球 网校edu24ol.com

noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)

nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

作者

<Meta name=”Author” Content=”张三,abc@sina.com”>

说明:标注网页的作者或制作组

Generator (编辑器)

<Meta name=”Generator” Content=”PCDATA|FrontPage|”>

说明:编辑器的说明 注意:Content=”你所用编辑器”

revisit-after (重访)

<META name=”revisit-after” CONTENT=”7 days”>

常规

声明文档使用的字符编码

XHTML

<meta charset=”utf-8″ />

1
<meta charset="utf-8" />

该声明用来指定文档的编码,除了utf-8,可选值还有:ISO-8859-1、BIG5、iso-8859-2,
iso-2022-jp, iso-2022-kr, gb2312等

当然,你可能还见过使用另外一种方式来定义文档字符编码:

XHTML

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″
/>

1
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

相对于这种方式,更推荐你使用第1种,言外之意,就是推荐使用HTML5

声明页面刷新或跳转

XHTML

<meta http-equiv=”refresh” content=”10″ /> <meta
http-equiv=”refresh” content=”10; url=” />

1
2
<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />

该声明用来指定页面自刷新或者跳转到其它页面,其中的时间单位是s

声明页面过期时间

XHTML

<meta http-equiv=”expires” content=”0″ /> <meta
http-equiv=”expires” content=”Wed, 26 Feb 1997 08:21:57 GMT” />

1
2
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

该声明用来指定页面的过期时间,一旦网页过期,从服务器上重新请求,其中时间必须使用GMT格式,或者直接是0(即不缓存)

声明页面是否缓存

XHTML

<meta http-equiv=”pragma” content=”no-cache” /> <meta
http-equiv=”cache-control” content=”no-cache” />

1
2
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

上述语句都可以用来指定文档不被缓存。一些仍然在使用HTTP/1.0的可以使用第1条,第2条由HTTP/1.1提供,常用值还有:public,
no-cache, no-store等

声明作者信息

XHTML

<meta name=”author” content=”joy, dooyoe@gmail.com” />

1
<meta name="author" content="joy, dooyoe@gmail.com" />

声明文档关键字

XHTML

<meta name=”keywords” content=”CSS, HTML, JavaScript, 前端” />

1
<meta name="keywords" content="CSS, HTML, JavaScript, 前端" />

多关键字之间以半角逗号分隔

声明文档描述

XHTML

<meta name=”description” content=”这是一份meta列表” />

1
<meta name="description" content="这是一份meta列表" />

文档描述内容最好是完整的一句话,以不超过50个字符为宜

声明使用的浏览器及版本

x-ua-compatible设置是从IE8开始增加的(很明显,只适用于IE),对于过往的版本无法识别。
开发者可以通过设置x-ua-compatible来指定渲染引擎的类型和版本,并且因为需求不同可以有多种不同的设置:

Case1:

XHTML

<meta http-equiv=”x-ua-compatible” content=”IE=7″ /> <meta
http-equiv=”x-ua-compatible” content=”IE=4″ /> <meta
http-equiv=”x-ua-compatible” content=”IE=xx” /> <meta
http-equiv=”x-ua-compatible” content=”IE=50″ />

1
2
3
4
<meta http-equiv="x-ua-compatible" content="IE=7" />
<meta http-equiv="x-ua-compatible" content="IE=4" />
<meta http-equiv="x-ua-compatible" content="IE=xx" />
<meta http-equiv="x-ua-compatible" content="IE=50" />

当直接指定contentIE的某个具体版本,如上述代码第1条,客户端的IE将会使用IE7.0标准模式对页面进行渲染,并忽略Doctype定义。
当指定的IE版本在客户端IE中不存在时,IE将会尝试将该值转换为最为接近的版本。
例如指定一个错误的或者低于5.0的IE版本,如上述代码第2,3条,客户端的IE将会使用IE5.0对页面进行渲染,由于IE5.0并没有标准模式,所以将会直接使用quirks mode来渲染;
如果指定一个大于客户端IE的版本,如上述代码第4条,假定客户端IE的最高版本为9.0,那么IE会将该值转换为IE=9,即使用IE9.0标准模式对页面进行渲染。

相关文章