html5网页编码

你是如何指定一个页面的编码的呢?你知道浏览器是怎么识别编码的吗?

首先,一个很简单的例子,用遇简的HTML页面来看看各浏览器下有什么不同:

<!DOCTYPE html>

最简HTML,<head><body>都没有内容,服务器也不给出具体的编码声明,直接从本地打开,各个浏览器下查看页面的编码:

浏览器 显示编码 备注
IE6 UTF-8  
IE8 UTF-8  
IE9 GB2312 系统默认字符集
Firefox3.5 GBK2312 系统默认字符集
Firefox4.0 ISO-8859-1 西欧语言,英语默认编码
Chrome GBK 系统默认字符集
Opera 中文-自动检测 应该也是GB2312

从表格中可以看出,对于没有使用任何手段声明编码的页面,各浏览器有着不同的解析。当然在最简的页面中,无论用什么编码(当然前提是ASCII的超集)都没有影响,但足以表现出正确设置编码的重要性。

编码声明

HTML4和HTML5分别采用了一个章节来阐述编码声明的方法,可以点击这里查看HTML4的相关章节点击这里查看HTML5的相关章节

本文出处:http://www.otakustay.com/learning-html5-charset

首先,何为编码?编码即是通过一定的方式,指定浏览器(或称用户代理)以一种特殊的算法来解析字节流,以得到真正正确的内容。在HTML的标准中,编码可以使用别名来表示。编码的别名来自于IANA的定义,只有在该列表中出现的编码才可以被浏览器识别。因此如果把UTF-8写成UTF8,浏览器就有可能完全不予理睬。另外,编码别名是大小写不敏感的。

在HTML4中,提出有3种方法指定页面的编码,根据优先级高低依次是:

  1. HTTP头里的Content-Type字段后跟随字符集。
  2. 使用<meta http-equiv="Content-Type">标签来声明。
  3. 对于部分外部资源,如<script>标签加载的js文件,可以通过标签上的charset属性声明。

这个自然没有什么疑问,需要注意的是,通过<meta http-equiv="Content-Type">标签来声明页面的话,当浏览器遇上该标签时,如果发现自己使用的编码与标签声明的不符,是会回到头里重新解析页面的。这会导致页面的一部分被重新解析,因此如果试图使用标签的方式声明编码的话,建议将标签尽可能地写在前面。一个最佳实践是写在<head>标签之后,任何其他标签之前。关于这一点,Google PageSpeed也有相应的介绍

时代演进

但是随着时间的推移,开发者渐渐发现了一件事。就如同DOCTYPE的最简声明一样,其实浏览器在读取<meta>标签的编码的时候,并不是严格地按照标准进行的。总而言之,由于在HTML的解析阶段,基于在Tokenizer阶段之前就必须确定好页面的编码,因此浏览器不可能像分析DOM树一样,在DOM树构建的时候再分解<meta>标签的结构,取出其中的http-equivcontent属性,再确定编码。

现实中,浏览器做了一件非常简单的事,来读取<meta>标签定义的编码:

  1. 确定这是一个<meta>标签,这根据HTML解析的状态机,由"<"字符加上"meta"字符串就能确定。
  2. 查找该字符串(此处还没有标签的概念,只是个字符串),找到一个子字符串"charset"。
  3. 再向后读,忽略掉所有的空格字符,找到第一个有意义的字符c。
    • 如果c不是"="这个字符,则回到第2步继续找。
    • 如果c是"="这个字符,继续向下走。
  4. 再跳掉所有的空格字符和单引号、双引号等,向后扫描,直到遇上单引号、双引号、空格字符、结束标签等不应该出现的字符为上,截取其中扫描得出的字符串s。
  5. 分析s,得到编码别名。

从上面的算法,不难发现,下面几种写法,其实都能让浏览器正确地识别出编码:

  • <meta http-equiv="Cotnent-Type" content="text/html; charset=utf-8" />
  • <meta charset="utf-8" />
  • <meta charset=utf-8 />
  • ……以及其他很多古怪的写法。

于是,随着历史的推进,终于有一天,各浏览器厂商们坐在了一起,开始讨论这个问题……最终他们惊奇地发现各自的实现非常相似(也许根本就是相互借 鉴),所以他们决定将这种方式变成一个标准……最后,再经过漫长的讨论,HTML5中广为人爱的编码声明方式就诞生了。在HTML5中,称其为“meta charset元素”,其最简形式如下:

<meta charset=utf-8>

当然这是HTML的语法,如果遵从XHTML并觉得XHTML更加亲切地话,写成<meta charset="utf-8" />也是没问题的。

而前文所述的具体获取编码的算法也被详细地记录在案,可以在这里看到

到了HTML5时代,标准再次对编码的声明方式做了修正和细化,总得来说有以下的区别:

  • HTML5允许使用BOM来决定编码,但仅支持UTF-16的BOM(即U+FEFF),且没有说明BOM指定编码的优先级如何。
  • HTML5添加了meta charset标签。
  • HTML5规定如果一个页面没有指定编码,则使用ASCII作为其编码,而HTML4则规定浏览器可以根据所处的环境自行选择。

其他杂项

除了编码的基本声明方式外,标准中还有不少需要注意的细节:

  • 如果使用<meta>标签声明编码的话,该编码只能是ASCII的超集编码。可以简单地认为ASCII超集就是支持ASCII的256个字符的编码。
  • HTML5非常推荐使用UTF-8编码。
  • 标准中提出不要使用UTF-32、JIS_C6226-1983、JIS_X0212-1990、HZ-GB-2312、JOHAB等字符集,并禁止使用CESU-8、UTF-7、BOCU-1和SCSU字符集。但事实上浏览器却至少能识别UTF-7。
  • 对于想要严格遵守XHTML的开发者,应当使用XML声明来指定编码,即<?xml version="1.0" encoding="UTF-8" standalone="no" ?>。但是这个在IE6下会影响到DOCTYPE,所以开发者也不得在这一点上给予妥协,乖乖地去用HTML的声明方式。
  • 关于现实中各编码声明方式的优先级,以及一些其他需要注意的细节,这篇文章值得一读。

最佳实践

  • 尽可能使用HTTP头指定编码。
  • 尽可能使用UTF-8,或者至少全站所有资源使用统一编码。
  • 如果想使用UTF-16,就给文件加上BOM,以确定是Little Endian还是Big Endian的。
  • 如果使用<meta>标签指定编码,可以不使用http-equiv的形式,但尽可能让标签出现在前面,至少保证在任何非ASCII字符之前。
  • 链接外部的脚本,如果无法确定编码相同的话,加上charset属性。
时间: 2024-10-13 20:45:10

html5网页编码的相关文章

免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和FileList对象.用于创建和写入的Blob和FileWriter对象.用于目录和文件系统访问的DirectoryReader和LocalFileSystem对象等,FileSystem功能的出现是浏览器在文件系统上的突破,具有里程碑的意义,虽然目前还尚未完全成熟,但足以让开发者发挥更大的想象空间.

免费的HTML5连载来了《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和FileList对象.用于创建和写入的Blob和FileWriter对象.用于目录和文件系统访问的DirectoryReader和LocalFileSystem对象等,FileSystem功能的出现是浏览器在文件系统上的突破,具有里程碑的意义,虽然目前还尚未完全成熟,但足以让开发者发挥更大的想象空间.

解决新版chrome无法设置网页编码的问题

chrome55以后 就移除了设置网页编码的功能,这时我们可以去chrome应用商店 搜索Set Character Encoding 这个扩展插件,安装后右键单击网页即可选择网页编码,如下图所示 另外再推荐一个前端用的chrome扩展插件 叫FE助手,里面有一些实用的功能.

网页编码就是那点事

编码一直是让新手头疼的问题,特别是 GBK.GB2312.UTF-8 这三个比较常见的网页编码的区别,更是让许多新手晕头转向,怎么解释也解释不清楚.但是编码又是那么重要,特别在网页这一块.如果你打出来的不是乱码,而网页中出现了乱码,绝大部分原因就出在了编码上了.此外除了乱码之外,还会出现一些其他问题(例如:IE6 的 CSS 加载问题)等等.我写本文的目的,就是要彻底解释清楚这个编码问题!如果你遇到了类似的问题,那就要仔细的看看这篇文章. ANSI.GBK.GB2312.UTF-8.GB1803

html网页编码问题

之前碰到过一些html编码乱码问题,都理解的模模糊糊,问了别人解释的也是模模糊糊.近期要做前端这个问题研究了下仅仅须要两句话就能非常清楚的解释了(之前问的那些人是不是自己都没理解非常郁闷.) <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 这段写在head中告诉浏览器用那种编码方式,浏览器就会自己主动选择相应的编码方式显示网页. 然后在保存这个html文件时选择编码方

[Python网络编程]gevent httpclient以及网页编码

之前看到geventhttpclient这个项目,https://github.com/gwik/geventhttpclient,官方文档说非常快,由于响应使用了C的解析,所以我一直想把这玩意用到项目中, 这两天一直在纠结这玩意,说实在一句话,比较难用,封装的不给力,最大缺陷如下: 1.不支持重定向,重定向需要自己来写,很费事 2.新建的httpclient对象只能发送同域名的请求 这相当的蛋疼,我花了一点时间封装了一下,解决了上面的两个问题,还增加了自动编解码问题,代码如下: #!/usr/

浏览器正确理解和使用GBK及UTF-8(UTF-8 + BOM)网页编码

网页编码英文译为web page encoding,是在网页中指定其特定的字符编码格式的库. GBK是国家标准GB2312基础上扩容后兼容GB2312的标准.GBK的文字编码是用双字节来表示的,即不论中.英文字符均使用双字节来表示,为了区分中文,将其最高位都设定成1.GBK包含全部中文字符,是国家编码,通用性比UTF8差,不过UTF8占用的数据库比GBK大. UTF-8:Unicode TransformationFormat-8bit,允许含BOM,但通常不含BOM.是用以解决国际上字符的一种

当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)

读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. --国际巨头Google.苹果等都支持HTML 5标准,要不要学,你看着办! BAT三巨头都偷偷用上HTML 5了 HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,他们都已经争先恐后地将HTML 5的新技术融入到现实的开发领域中了.本书的例子会涉及WebQQ.