HTML5标准学习-编码详解-H5教程-PHP中文网

首页

web前端

H5教程

HTML5标准学习-编码详解

黄舟

Mar 21, 2017 pm 03:14 PM

相信每一个前端工程师都或多或少遇上过“乱码”这位仁兄，无论你的基础有多么扎实，在生产的过程中都免不了偶尔和“乱码”兄弟喝上几杯茶吧。作为一个前端工程师，你是如何指定一个页面的编码的呢？你知道浏览器是怎么识别编码的吗？

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

<!DOCTYPE html>

最简HTML，93f0f5c25f18dab9d176bd4f6de5d30e和6c04bd5ca3fcae76e30b72ad730ca86d都没有内容，服务器也不给出具体的编码声明，直接从本地打开，各个浏览器下查看页面的编码：

浏览器	显示编码	备注
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的相关章节。

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

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

HTTP头里的Content-Type字段后跟随字符集。
使用09d68f3bd6bfd0744f37150627c89edd标签来声明。
对于部分外部资源，如3f1c4e4b6b16bbbd69b2ee476dc4f83a标签加载的js文件，可以通过标签上的charset属性声明。

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

时代演进

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

现实中，浏览器做了一件非常简单的事，来读取e8e496c15ba93d81f6ea4fe5f55a2244标签定义的编码：

确定这是一个e8e496c15ba93d81f6ea4fe5f55a2244标签，这根据HTML解析的状态机，由"226234e2d3ae66e3252575a6a24dc547
acbc3b8881b6b4f3abaf7379ad2340e7
5c63b0c9e2aeb7f2e73596ac1dc2ffb0
……以及其他很多古怪的写法。

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

<meta charset=utf-8>

当然这是HTML的语法，如果遵从XHTML并觉得XHTML更加亲切地话，写成acbc3b8881b6b4f3abaf7379ad2340e7也是没问题的。

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

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

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

其他杂项

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

如果使用e8e496c15ba93d81f6ea4fe5f55a2244标签声明编码的话，该编码只能是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声明来指定编码，即e4f551cb26a907a6bcdf652256fc4dfd。但是这个在IE6下会影响到DOCTYPE，所以开发者也不得在这一点上给予妥协，乖乖地去用HTML的声明方式。
关于现实中各编码声明方式的优先级，以及一些其他需要注意的细节，这篇文章值得一读。

最佳实践

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

以上是HTML5标准学习-编码详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5：如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1）多媒体支持：H5的和元素简化开发，提升用户体验。2）离线存储：WebStorage和IndexedDB允许离线使用，提升体验。3）性能优化：WebWorkers和元素优化性能，减少带宽消耗。

解构H5代码：标签，元素和属性Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成：1.标签定义内容类型，用尖括号包围，如。2.元素由开始标签、内容和结束标签组成，如内容。3.属性在开始标签中定义键值对，增强功能，如。这些是构建网页结构的基本单位。

了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles