HTML Meta, http-equiv, Refresh

原文：

http://www.lifelaf.com/blog/?p=481

在HTML页面中，如果想实现定时刷新或重定向，我们可以使用meta标签的refresh功能：

<!-- 5秒后刷新页面 -->
<metahttp-equiv="refresh"content="5">

<!-- 5秒后重定向到http://example.com -->
<metahttp-equiv="refresh"content="5; url=http://example.com">

那么，meta标签是什么？http-equiv又是什么？这种refresh方式如何使用？而它又有哪些好处呢？

meta标签

顾名思义，meta标签的作用是对HTML页面的元数据信息进行描述，从而为浏览器的渲染提供更多的信息。一个HTML页面可以包含多个meta标签，而每一个meta标签则用键值对的方式保存一条元数据：

<metaname="key_here"content="value_here">

值得注意的是，在HTML中meta标签是没有结束标签的，而在XHTML中则与之相反，meta标签必须被显式的关闭。

http-equiv

在meta标签中，有一类特殊的key类型，叫做http-equiv。根据W3C的定义，http-equiv可以在meta标签中替代name，如果这么做的话，HTTP服务器会把http-equiv属性及其值放在HTTP response的响应头里面(http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.2)：

The http-equiv attribute can be used in place of the name attribute and has a special significance when documents are retrieved via the Hypertext Transfer Protocol (HTTP). HTTP servers may use the property name specified by the http-equiv attribute to create an [RFC822]-style header in the HTTP response.

问题是：目前没有一个HTTP服务器是这么做的(http://stackoverflow.com/questions/5236900/meta-http-equiv-is-it-sent-as-part-of-an-http-header-or-does-the-client-parse)。原因很明显，如果要这么做的话，HTTP服务器就得预先解析所有的HTML文件并缓存所有的http-equiv键值对，而这是一个不小的开销。我们可以做一个有趣的小实验，编写一个含有http-equiv值的HTML文件并部署到HTTP服务器上；用Firefox打开该HTML文件并用 Firebug截取相关的HTTP response，我们会发现http-equiv的内容并没有出现在response的响应头中。

事实上，http-equiv功能(出现在response的响应头中)的实现不是由HTTP服务器来完成的，而是由浏览器来模拟的。浏览器解析 HTML文档的时候会把http-equiv的键值对当作响应头来处理(如果http-equiv与真正传回来的响应头冲突，http-equiv会覆写响应头)。

refresh

在http-equiv类型的meta标签中，有一种可用于定时刷新页面：refresh

<!-- x秒后刷新当前页面 -->
<metahttp-equiv="refresh"content="x">

<!-- x秒后重定向到URLLINK -->
<metahttp-equiv="refresh"content="x; url=URLLINK">

<!-- 浏览器打开页面后立即重定向到URLLINK -->
<metahttp-equiv="refresh"content="0; url=URLLINK">

在上面第三个例子中，浏览器一旦打开页面就立即转接到了另外一个URL，为什么会有这么“奇怪”的写法？直接向客户端提供目标地址(URLLINK)不就可以了吗？什么情况下需要这么做呢？

一个典型的场景是webapp中的首页设置(welcome page)。如果我们需要展示给用户的首页地址只是一个URL而不是一个真实存在的文件，比如/Index.action，那么在web.xml中直接将 Index.action作为welcome page进行设置是行不通的 — webapp将会报错：Index.action文件不存在。而解决方案就是编写一个非常简单的Index.html文件并将其作为首页，在该文件中指定，一旦文件打开则立即重定向到Index.action：

<!DOCTYPE html><html><head><metahttp-equiv="refresh"content="0; url=Index.action"></head><body></body></html>

与别的方法(在HTTP服务器中设置301,302重定向规则，或在页面中使用JavaScript进行重定向)相比，通过meta标签来实现重定向的好处很明显：

简单易用。不需要在Web服务器上进行额外的配置，也不需要编写额外的脚本代码。
由HTML标准定义，主流浏览器均支持(模拟http响应头)。

shaochuancs@gmail.com