理清URL编码

yongbin — Mon, 31 May 2010 11:05:23 +0000

URL中，什么字符需要编码？

关于URL编码，RFC1738做了如下的规定：

“Only alphanumerics [0-9a-zA-Z], the special characters “$-_.+!*’(),” [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL.”

RFC继而说明了保留字、特殊符号、不安全字符的含义——也就是说，下面三类字符可以不经过编码，直接出现在URL上：

[0-9a-zA-Z]
特殊字符：$-_.+!*’(),
保留字符：&/:;=?@

为了让我们思路更清晰，我们再总结一下，哪些字符必须要编码：

ASCII表中没有对应可显示字符的，例如汉字
不安全字符，包括：#”%<>[]{}|\^`~
不当做保留字符来使用的保留字符，即&/:;=?@

详见这张图，一目了然（点击看大图）：

URL编码在ASCII表中的体现

如何编码？

众所周知，字符是可由八位字节数（octet）来表示的，八位字节数可用十六进制来表示它的值。如字符“<”的八位字节数十六进制值是3C。在URL中，字符的编码方式为：“%”加上字符的两个十六进制数值。举几个例子：

“<”可以被编码为%3C，空格“SP”可被编码为“%20”
“田”的GB2312编码十六进制值是CC EF，这时“田”的URL编码为%CC%EF
“囧”的GBK编码十六进制值是87 E5，这时“囧”的URL编码为%87%E5
“田”的UTF-8编码十六进制值是E7 94 B0，这时“田”的URL编码为%E7%94%B0

URL中包含汉字时的更多话题

RFC1738没有规定汉字的编码方式，而是让浏览器自己去决定，因此造成了URL汉字编码的不统一。经过研究，对于URL中的“查询字符串”和“路径”中包含汉字，不同浏览器有不同的处理。

1. 查询字符串中包含汉字

在网址输入：http://www.baidu.com/s?wd=田囧，敲击回车，使用Fiddler观察浏览器发出的请求（以IE8和Firefox为例）：

查询字符串中含有中文

IE8将汉字作为GBK编码，直接发往服务器（这其实是不符合RFC规范的）；Firefox则多了一次加%的操作。Windows操作系统是GBK编码。得到结论，地址栏直接访问URL，汉字作为查询字符串(Query string)时，IE和Firefox会使用系统编码发至服务器端，Firefox会按规矩编码。

注意1：不要用Google进行测试，Google的搜索URL（类似：http://www.google.com/#hl=en&source=hp&q=田囧），搜索关键词那里不是查询字符串，因为前面有个#……我开始没注意到，被搞迷茫了很久……

注意2：这只是对URL直接访问的规律。如果页面时从链接点击打开的，例如从A页面含中文的链接打开了B页面，那么浏览器对中文的编码取决于A页面的编码。

2. URL路径中包含汉字

在网址直接输入：http://www.hudong.com/wiki/田囧，敲击回车，观察请求：

路径中含有中文

IE8和Firefox都把汉字作为UTF8，按规范进行了URL编码，还好。

总结

什么字符应该编码，什么字符不用编码，URL编码的基本问题，到此已经解决啦。

Web文档编码的指定

yongbin — Fri, 28 May 2010 02:32:36 +0000

Web开发中，文档常常指：(X)HTML文档、XML文档、CSS文档、js文档。指定文档编码的方式有以下几种：

HTTP Header中指定文档编码

在一个典型的HTTP响应头里，Content-Type的值中可以指定文档编码，如：

HTTP/1.1 200 OK
Date        Tue, 11 May 2010 04:09:22 GMT
Server      Apache
Content-Type    text/html; charset=gb2312

对于动态网页，用这种方式指定文档编码，在脚本中直接输出响应头即可：

header( 'Content-type: text/html; charset=gb2312' );

对于静态网页、CSS文件等，则需要在Apache等服务器中配置，例如：

AddType 'text/html; charset=gb2312' html

Content-Type meta元素中指定HTML文档编码

对于HTML文档（或当成HTML解析的XHTML文档），用这种方式指定文档编码，应在标签里的最上方，加入：

HTML5的charset meta元素

我们潮一些，DOCTYPE为HTML5的文档，可以用带有meta标签的charset属性指定文档编码，类似于这样：

用链接的charset属性指定编码

, ,

使用@charset指定CSS文档编码

如果CSS文档中存在非ASCII字符，为了不让浏览器费力去猜测编码，可以指定CSS文档的编码。一种方式是使用 @charset指定，在CSS文件的第一行：

@charset "utf-8";

编码指定方式的优先级

上述方式指定文档编码，会使用下面的优先级：

HTTP响应头的Content-Type
XML的首行声明
meta标签charset声明
链接的charset属性

例如对于一个CSS文件，它的编码优先级会按照下面的顺序指定：

HTTP Content-Type
@charset rule

总结

本文总结了Web文档（包括HTML, XHTML, XML, CSS, JS）的编码指定方式。比较常见的是(X)HTML文档中用meta标签指定编码，但优先级不如HTTP响应头高。外部js/css文件指定编码的方法也不尽相同，js文件用引用它的script tag charset attribute指定，css文件用文件开头的@charset指定。

Thinking for Fun » 编码