网页设计中文乱码原理剖析

很多小伙伴搞网站开发的时候很容易遇到网站中文乱码的问题，这时候就会各种百度，然后把提到的方法都试一遍。有些解决了，但也解决地莫名其妙。有些没有解决，甚至试遍了搜到的所有方法都未必成功，这极大打击了学习者的信心。

目前网上似乎也没有人比较系统地总结过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文档就一定会按照你所指定的编码去保存。