很多小伙伴搞网站开发的时候很容易遇到网站中文乱码的问题,这时候就会各种百度,然后把提到的方法都试一遍。有些解决了,但也解决地莫名其妙。有些没有解决,甚至试遍了搜到的所有方法都未必成功,这极大打击了学习者的信心。
目前网上似乎也没有人比较系统地总结过Web应用在文字编码方面的问题,深受这个问题的困扰,于是我花了大概一整周的时间去测试研究总结。期间遇到了不少奇奇怪怪的问题,包括IDE软件本身的BUG等等,所幸的是以后自己再遇到乱码之类问题的时候就会系统地去排查了,不会再像大海捞针一样瞎搜solution。
本文旨在剖析网站开发过程中文字编码所参与的过程,大致理顺一个网页从最初生产到最后呈现的完整技术链,其中涉及到的所有编码环节,只要其中一个出错,都有可能导致最后的呈现出现乱码甚至更严重的问题。
一个HTML网页,往简单来说,无非就是一个文本文件,网页的编码问题可以从以下最根本的两个方面入手:
- 生成网页时所采用的编码
- 读取网页时所采用的编码
对网页使用的外联文件,如外联JavaScript文件、外联CSS文件等,甚至是网站后端所采用的代码文件,类似地同样可以从“写”与“读”这两个方面入手。始终坚持的原则就是,用什么编码,就用什么解码。
下文可能会涉及到Unicode、GB2312、UTF-8、UTF-16等编码的一些基本知识,这里就不详述了,有兴趣的可以去百度一下了解个大概即可。
生成网页时所采用的编码
生成一个网页,无非就两种办法。一是程序员手动码一个HTML文档,二是通过JSP、nodejs等相关技术动态生成一个网页。
先来说说程序员手动码出来的HTML文档。
通常我们写一个HTML文档的时候都会在文档中指定编码,例如:
<meta charset="UTF-8"/>
<meta charset="GB2312"/>
<meta http-equiv="content-type" content="text/html charset=UTF-8"/>
<meta http-equiv="content-type" content="text/html charset=GB2312"/>
以上任意一条都可以指定HTML文档使用的编码。
在css文件中,同样有类似语句。
@charset "UTF-8";
@charset "GB2312";
这些语句,在上面提到的两方面都会发挥作用。在保存文档的时候,IDE需要根据所指定编码去保存文档;在读取文档的时候,用户代理(如浏览器)需根据指定的编码去解析内容。
但是,需要注意的时,在文档中做了如此指定,并不代表这个HTML文档就一定会按照你所指定的编码去保存。