网页制作基础知识:全面学习掌握字符编码
发布时间：2019-04-13浏览次数：841
<p>
</p>
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr>
<td style="WORD-WRAP: break-word" bgcolor="#fdfddf">
<font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">字符编码的前世今生.</font>
</td>
</tr></tbody></table>
<blockquote>
<p>由于“<span class="wp_keywordlink_affiliate">字符编码</span>”这个话题牵涉到的历史久远、机构众多、专业术语较多，所以本篇文章可能会略长，为了避免内容过于枯燥，我会尽量用一种通俗易懂的语言来写这篇文章。</p>
<p>其中本文的第一篇章会对历史中的主要<span class="wp_keywordlink_affiliate">字符编码</span>进行介绍，由于篇幅较长，如果读者对此已很了解，可直接跳过进行第二章的阅读。</p>
<p>完成本篇文章的过程中参考和阅读了大量的文章和文献，写本篇文章的目的一是让自己对“<span class="wp_keywordlink_affiliate">字符编码</span>”能够做一个较深的理解，二是希望给曾经徘徊或正在徘徊在编码困惑中的前端们一个很好的参考，搞清楚字符编码问题是前端万事之基石。由于本人才疏学浅，好多信息也是从网络和书籍中参考而来，错误之处难免，请大家指正。——————题记</p>
</blockquote>
<h2>跟随历史的足迹看字符编码</h2>
<h3>古代的通信方式</h3>
<p>很久很久以前，人们之间的长途通讯主要是用信鸽、骑马送报、烽烟等方式进行：</p>
<p><img width="624" height="160" class="aligncenter" alt="imgchar1" src="http://www.webjx.com/files/allimg/130802/1200390.jpg"></p>
<p>不过这些方式无不例外都是出奇的慢，同时也受天气、地理等因素的影响。</p>
<h3>世界第一条电报</h3>
<p>直到1837年，世界第一条电报诞生，当时美国科学家莫尔斯尝试用一些“点”和“划”来表示不同的字母、数字和标点符号，这套表示字符的方式也被称为“摩尔斯电码”：</p>
<p><img width="624" height="160" class="aligncenter" alt="imgchar2" src="http://www.webjx.com/files/allimg/130802/1200391.jpg"></p>
<h3>世界第一台计算机</h3>
<p>再后来到了1946年，世界第一台计算机诞生。发明计算机的同学们用8个晶体管的“通”或“断”组合出一些状态来表示世间万物，不过当时的计算机有一间半教室那么大，六头大象重，从现在看来这简直就是个怪物，但在当时却是震惊世界与改变世界的一项重要发明：</p>
<p style="text-align: center;"><img width="640" height="214" class="aligncenter" alt="imgchar3" src="http://www.webjx.com/files/allimg/130802/1200392.jpg"></p>
<h3>ASCII</h3>
<p>8个晶体管的“通”或“断”即可以代表一个字节，刚开始，计算机只在美国使用，所有的信息在计算机最底层都是以二进制（“0”或“1”两种不同的状态）的方式存储，而8位的字节一共可以组合出256（2的8次方）种状态，即256个字符，这对于当时的美国已经是足够的了，他们尝试把一些终端的动作、字母、数字和符号用8位(bit)来组合：</p>
<ul>
<li>0000 0000 ~ 0001 1111 共 <strong>33</strong> 种状态用来表示终端的特殊动作，如打印机中的响铃为 0000 0111 ，当打印机遇到 0000 0111 这样的字节传过来时，打印机就开始响铃；</li>
<li>0010 0000 ~ 0010 1111 、 0011 1010~0110 0000 和 0111 1101 ~ 0111 1110 共 <strong>33</strong> 种状态来表示英式标点符号，如 0011 1111  既代表英式问号“?”；</li>
<li>0011 0000 ~ 0011 1001 共 <strong>10 </strong>种状态来表示“0~9”10个阿拉伯数字；</li>
<li>0100 0001 ~ 0101 1010 和 0110 0001 ~ 0111 1010共 <strong>52</strong>种状态来表示大小写英文字母；</li>
</ul>
<p>自此，一共只用到了128种状态，即128个字符，刚好占用了一个字节中的后7位，共包括33个控制字符和95个可显示字符，这一字符集被称为ASCII（American <strong>S</strong>tandard <strong>C</strong>ode for <strong>I</strong>nformation <strong>I</strong>nterchange，美国信息交换标准代码<strong>）</strong>，这一套字符集在<strong>1967年</strong>被正式公布。</p>
<h4>讲到这里，引出几个基础概念：</h4>
<ul>
<li>
<strong>比特（bit）</strong>：也可称为“位”，是计算机信息中的最小单位，是 binary digit（二进制数位）<strong> </strong>的 缩写，指二进制中的一位</li>
<li>
<strong>字节（Byte）</strong>：计算机中信息计量的一种单位，一个位就代表“0”或“1”，每8个位（bit）组成一个字节（Byte）</li>
<li>
<strong>字符（Character）</strong>：文字与符号的总称，可以是各个国家的文字、标点符号、图形符号、数字等</li>
<li>
<strong>字符集（Character Set）：</strong>是多个字符的集合</li>
<li>
<strong>编码（Encoding）：</strong> 信息从一种形式或格式转换为另一种形式的过程</li>
<li>
<strong>解码（decoding）：</strong> 编码的逆过程</li>
<li>
<strong>字符编码（Character Encoding）：</strong> 按照何种规则存储字符</li>
</ul>
<p>现在我们来看我们文章开头提到的第一条电报的诞生，莫尔斯编码中包含了大小写英文字母和数字等符号。</p>
<p>这里的每一个符号其实就是<strong>⌈字符⌋</strong>，</p>
<p>而这所有的字符的集合就叫做<strong>⌈字符集⌋</strong>，</p>
<p>“点”或“划”与字符之间的对应关系即可以称为<strong>⌈字符编码⌋</strong>。</p>
<h3>而电报的原理是：</h3>
<blockquote>
<p>“点”对应于短的电脉冲信号，“划”对应于长的电脉冲信号，这些信号传到对方，接收机把短的电脉冲信号翻译成“点”，把长的电脉冲信号转换成“划”，译码员根据这些点划组合就可以译成英文字母，从而完成了通信任务。</p>
</blockquote>
<p>这里把字符表示为“点”或“划”并对应为电脉冲信号的过程既是<strong>⌈编码⌋</strong>，</p>
<p>而译码员把接收机接收到的脉冲信号转化成点划后译成字符的过程即为<strong>⌈解码⌋</strong>。</p>
<p>而对于计算机诞生之后，只不过是将摩斯电码中的“点”和“划”换成了以8位字节二进制流的方式表示，如数字1的二进制流是0011 0001，对应的十进制流是49，十六进制流是31。</p>
<h3><span class="wp_keywordlink_affiliate">EASCII</span></h3>
<p>虽然刚开始计算机只在美国使用，128个字符的确是足够了，但随着科技惊人的发展，欧洲国家也开始使用上计算机了。不过128个字符明显不够呀，比如法语中，字母上方有注音符号，于是，一些欧洲国家就决定，利用字节中闲置的最高位编入新的符号。比如，法语的é的二进制流为1000 0010，这样一来，这些欧洲国家的编码体系，可以表示最多256个字符了。</p>
<p>但是，这里又出现了新的问题。不同的国家有不同的字母，因此，哪怕它们都使用256个符号的编码方式，代表的字母却不一样。比如，1000 0010在法语编码中代表了é，在希伯来语编码中却代表了字母Gimel (ג)，在俄语编码中又会代表另一个符号。但是不管怎样，所有这些编码方式中，0–127表示的符号是一样的，不一样的只是128–255的这一段。</p>
<p><strong><span class="wp_keywordlink_affiliate">EASCII</span></strong>（<strong>Extended ASCII</strong>，延伸美国标准信息交换码）由此应运而生，EASCII码比ASCII码扩充出来的符号包括表格符号、计算符号、希腊字母和特殊的拉丁符号:</p>
<p><img width="573" height="322" class="aligncenter" alt="o_EXT-ASC" src="http://www.webjx.com/files/allimg/130802/1200393.gif"></p>
<h3>GB2312</h3>
<p>EASCII码对于部分欧洲国家基本够用了，但过后的不久，计算机便来到了中国，要知道汉字是世界上包含符号最多并且也是最难学的文字。</p>
<p>据不完全统计，汉字共包含了古文、现代文字等近10万个文字，就是我们现在日常用的汉字也有几千个，那么对于只包含256个字符的EASCII码也难以满足天朝的需求了。</p>
<p>于是⌈<strong>中国国家标准总局</strong>⌋（现已更名为⌈国家标准化管理委员会⌋）在<strong>1981年</strong>，正式制订了<strong>中华人民共和国国家标准简体中文字符集</strong>，全称<strong>《<strong>信息交换用汉字编码字符集·基本集</strong>》，</strong>项目代号为<strong>GB 2312</strong> 或 <strong>GB 2312-80</strong>（GB为国标汉语拼音的首字母），此套字符集于当年的5月1日起正式实施。</p>
<h4>包含字符：</h4>
<p>共包含7445个字符，6763个汉字和682个其他字符（拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母）</p>
<h4>存储方式：</h4>
<p>基于EUC存储方式，每个汉字及符号以两个字节来表示，第一个字节为“高位字节”，第二个字节为“低位字节”</p>
<h3>BIG5</h3>
<p>要知道港澳台同胞使用的是繁体字，而中国大陆制定的GB2312编码并不包含繁体字，于是信息工业策进会在<strong>1984年</strong>与台湾13家厂商签定“16位个人电脑套装软件合作开发（BIG-5）计划”，并开始编写并推出BIG5标准。</p>
<p>之后推出的倚天中文系统则基于BIG5码，并在台湾地区取得了巨大的成功。在BIG5诞生后，大部分的电脑软件都使用了Big5码，BIG5对于以台湾为核心的亚洲繁体汉字圈产生了久远的影响，以至于后来的window 繁体中文版系统在台湾地区也基于BIG5码进行开发。</p>
<h4>包含字符：</h4>
<p>共收录13,060个汉字及441个符号</p>
<h4>编码方式：</h4>
<p>用两个字节来为每个字符编码，第一个字节称为“高位字节”，第二个字节称为“低位字节”</p>
<h3><span class="wp_keywordlink_affiliate">Unicode</span></h3>
<h4>由来：</h4>
<p>在计算机进入中国大陆的相同时期，计算机也迅速发展进入了世界各个国家。</p>
<p>特别是对于亚洲国家而言，每个国家都有自己的文字，于是每个国家或地区都像中国大陆这样去制定了自己的编码标准，以便能在计算机上正确显示自己国家的符号。</p>
<p>但带来的结果就是国家之间谁也不懂别人的编码，谁也不支持别人的编码，连大陆和台湾这样只相隔了150海里，都使用了不同的编码体系。</p>
<p>于是，世界相关组织意识到了这个问题，并开始尝试制定统一的编码标准，以便能够收纳世界所有国家的文字符号。</p>
<p>在前期有两个尝试这一工作的组织：</p>
<ul>
<li>国际标准化组织（ISO）</li>
<li>统一码联盟</li>
</ul>
<p>国际标准化组织（ISO）及国际电工委员会（IEC）于1984年联合成立了ISO/IEC小组，主要用于开发统一编码项目；</p>
<p>而Xerox、Apple等软件制造商则于1988年组成了统一码联盟，用于开发统一码项目。</p>
<p>两个组织都在编写统一字符集，但后来他们发现各自在做相同的工作，同时世界上也不需要两个不兼容的字符集，于是两个组织就此合并了双方的工作成果，并为创立一个单一编码表而协同工作。</p>
<p><img width="200" height="200" class="aligncenter" alt="200px-Unicode_logo.svg" src="http://www.webjx.com/files/allimg/130802/1200394.png"><br>1991年，两个组织共同的工作成果<span class="wp_keywordlink_affiliate">Unicode</span> 1.0正式发布，不过Unicode 1.0并不包含CJK字符（即中日韩）。</p>
<h4>版本历史：</h4>
<ul>
<li>Unicode 1.0：1991年10月</li>
<li>Unicode 1.0.1：1992年6月</li>
<li>Unicode 1.1：1993年6月</li>
<li>Unicode 2.0：1997年7月</li>
<li>Unicode 2.1：1998年5月</li>
<li>Unicode 2.1.2：1998年5月</li>
<li>Unicode 3.0：1999年9月</li>
<li>Unicode 3.1：2001年3月</li>
<li>Unicode 3.2：2002年3月</li>
<li>Unicode 4.0：2003年4月</li>
<li>Unicode 4.0.1：2004年3月</li>
<li>Unicode 4.1：2005年3月</li>
<li>Unicode 5.0：2006年7月</li>
<li>Unicode 5.1：2008年4月</li>
<li>Unicode 5.2：2009年10月</li>
<li>Unicode 6.0：2010年10月</li>
<li>Unicode 4.1：2005年3月</li>
<li>Unicode 6.1：2012年1月31日</li>
<li>Unicode 6.2：2012年9月</li>
</ul>
<h3>
<strong>ISO/IEC</strong> 8859</h3>
<p>ISO/IEC小组在1984年成立后的第三年（即<strong>1987年</strong>）开始启动ISO 8859标准的编写，ISO 8859是一系列8位字符集的标准，主要为世界各地的不同语言（除CJK）而单独编写的字符集，一共定义了15个字符集：</p>
<ul>
<li>ISO/IEC 8859-1：西欧语言</li>
<li>ISO/IEC 8859-2  ：中欧语言</li>
<li>ISO/IEC 8859-3 ：南欧语言</li>
<li>ISO/IEC 8859-4： 北欧语言</li>
<li>ISO/IEC 8859-5： 斯拉夫语</li>
<li>ISO/IEC 8859-6： 阿拉伯语</li>
<li>ISO/IEC 8859-7：希腊语</li>
<li>ISO/IEC 8859-8：希伯来语</li>
<li>ISO/IEC 8859-9：土耳其语</li>
<li>ISO/IEC 8859-10： 北日耳曼语</li>
<li>ISO/IEC 8859-11：泰语</li>
<li>ISO/IEC 8859-13： 波罗的语族</li>
<li>ISO/IEC 8859-14： 凯尔特语族</li>
<li>ISO/IEC 8859-15：西欧语言，收录芬兰语字母和大写法语重音字母，以及欧元（€）符号</li>
<li>ISO/IEC 8859-16 ：东南欧语言，主要供罗马尼亚语使用，并加入欧元（€）符号</li>
</ul>
<p>其中ISO/IEC 8859-1至ISO/IEC 8859-4四个项目早在1982年就已经编写出来，只不过是由ANSI与ECMA合作完成，并于1985年正式公布，ISO/IEC小组成立后，这一成果被其收录，并改名为ISO/IEC 8859 前四个项目。</p>
<p>大家其实发现以上15个字符集中并没有代号为“ISO/IEC 8859 -12”的字符集，据说-12号本来是预留给印度天城体梵文的，但后来却搁置了（阿三有了自己的编码－ISCII）。由于英语没有任何重音字母，故可使用以上十五个字符集中的任何一个来表示。</p>
<h3> ISO/IEC<strong> 10646 / </strong>UCS</h3>
<p>1993年，ISO/IEC 10646标准第一次发表，ISO/IEC 10646是ISO 646的扩展，定义了1个31位的字符集。ISO 10646标准中定义的字符集为UCS，UCS是Universal Character Set的缩写，中文译作<strong>通用字符集。</strong></p>
<h4>版本：</h4>
<p>ISO/IEC 10646-1：第一次发表于1993年，现在的公开版本是2000年发表的ISO/IEC 10646-1:2000。</p>
<p>ISO/IEC 10646-2：在2001年发表。</p>
<h4>包含字符：</h4>
<p>最初的ISO 10646-1:1993的编码标准，即Unicode 1.1，收录中国大陆、台湾、日本及韩国通用字符集的汉字共计20,902个，当然每个版本的Unicode标准的字符集所包含的字符数不尽相同，UCS包含了已知语言的所有字符，除了拉丁语、希腊语、斯拉夫语、希伯来语、阿拉伯语、亚美尼亚语、格鲁吉亚语，还包括中文、日文、韩文这样的方块文字，此外还包括了大量的图形、印刷、数学、科学符号。</p>
<p>UCS给每个字符分配一个唯一的代码，并且赋予了一个正式的名字，通常在表示一个Unicode值的十六进制数的前面加上“U+”，例如“U+0041”代表字符“A”。</p>
<h4>编码方案：</h4>
<p>UCS仅仅是一个超大的字符集，关于UCS制定的编码方案有两种：<strong>UCS-2</strong>和<strong>UCS-4</strong>，Unicode默认以UCS-2编码。</p>
<p>顾名思义，UCS-2就是用两个字节编码，UCS-4就是用4个字节（实际上只用了31位，最高位必须为0）编码。那么UCS-2其实可以容纳的字符数为65536（2的16次方），而UCS-4可以容纳的字符数为2147483648（2的31次方）。其实对于UCS-2已经是完全够用了，基本可以包含世界所有国家的常用文字，如果需要考虑一些偏僻字，那么UCS-4则绝对可以满足了，21亿个字符哪怕是整个宇宙也够用了吧！</p>
<h3>UTF</h3>
<p>Unicode 诞生，随之而来的计算机网络也发展了起来，Unicode 如何在网络上传输也是一个必须考虑的问题，于是在1992年，面向网络传输的UTF标准出现了。</p>
<p>UTF是<strong>U</strong>nicode <strong>T</strong>ransformation <strong>F</strong>ormat的缩写，中文译作Unicode转换格式。其实我们从现在可以把Unicode看作是一个标准或组织，而UCS就是一个字符集，那么UCS在网络中的传输标准就是UTF了。</p>
<p>前面提到了UCS的编码实现方式为UCS-2和UCS-4，即要么是每个字符为2个字节，要么是4个字节。如果一个仅包含基本7位ASCII字符的Unicode文件，每个字符都使用2字节的原Unicode编码传输，其第一字节的8位始终为0，这就造成了比较大的浪费。但是，聪明的人们发明了UTF-8，UTF-8采用可变字节编码，这样可以大大节省带宽，并增加网络传输效率。</p>
<h4>UTF-8</h4>
<p>使用1~4个字节为每个UCS中的字符编码：</p>
<ol>
<li>128个ASCII字符只需一个字节编码（Unicode范围由U+0000至U+007F）</li>
<li>拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文及它拿字母需要二个字节编码（Unicode范围由U+0080至U+07FF）</li>
<li>大部分国家的常用字（包括中文）使用三个字节编码</li>
<li>其他极少使用的生僻字符使用四字节编码</li>
</ol>
<h4>UTF-16/UCS-2</h4>
<p>UCS-2的父集，使用2个或4个字节来为每个UCS中的字符编码：</p>
<ol>
<li>128个ASCII字符需两个字节编码</li>
<li>其他字符使用四个字节编码</li>
</ol>
<h4>UTF-32/UCS-4</h4>
<p>等同于UCS-4，对于所有字符都使用四个字节来编码</p>
<h3>GB13000</h3>
<p>前面提到了Unicode的迅速发展，至1993年时，包含CJK的Unicode 1.1已经发布了，天朝的ZF也意识到了需要一个更大的字符集来走向世界，于是在同一年，中国大陆制定了几乎等同于Unicode1.1的GB13000.1-93国家编码标准（简称GB13000）。是的，你没听错，中华人民共和国信息产业部把Unicode里的所有东东拿过来，然后自己重新修订发布了下，改为了国家标准GB13000。此标准等同于 <em>ISO/IEC 10646.1:1993和Unicode 1.1。</em></p>
<h3>GBK</h3>
<p>1995年，在GB13000诞生后不久，中国教育科研网（NCFC）与美国NCFnet直接联网，这一天是中国被国际承认为开始有网际网路的时间。此后网络正式开始在中国大陆接通，个人计算机开始在中国流行，虽然当时只是高富帅才消费得起的产品。中国是一个十几亿人口的大国，微软意识到了中国是一个巨大的市场，当时的微软也将自己的操作系统市场布局进中国，进入中国随之而来要解决的就是系统的编码兼容问题。</p>
<p>之前的国家编码标准GB 2312，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖中国大陆99.75%的使用频率。但对于人名、古汉语等方面出现的罕用字和繁体字，GB 2312不能处理，因此微软利用了GB2312中未使用的编码空间，收录了GB13000中的所有字符制定了汉字内码扩展规范<strong>GBK</strong>（K为汉语拼音 Kuo Zhan中“扩”字的首字母）。所以这一关系其实是大陆把Unicode1.1借鉴过来改名为了GB13000，而微软则利用GB2312中未使用的编码空间收录GB13000制定了GBK。所以GBK是向下完全兼容GB2312的。</p>
<h4>包含字符：</h4>
<p>共收录21886个字符， 其中汉字21003个， 字符883个</p>
<h4>编码方式：</h4>
<p>GBK只不过是把GB2312中未使用的空间，编码了其他字符，所以GBK同样是用两个字节为每个字符进行编码。</p>
<h3>GB18030</h3>
<p>微软到了99年前后，说GBK已经落伍了，现在流行UTF-8标准，准备全盘转换成UTF-8，但中国ZF不是吃素的，编写并强制推出了GB18030标准。GB18030的诞生还有一个原因是GBK只包含了大部分的汉字和繁体字等，我们的少数民族兄弟根本木有考虑！中国有56个民族，其中有12个民族有自己的文字，那怎么办呢？在<strong>2000年</strong>，电子工业标准化研究所起草了GB18030标准，项目代号“<strong>GB 18030-2000</strong>”，全称<strong>《信息技术-信息交换用汉字编码字符集-基本集的扩充》</strong>。此标准推出后，在中国大陆之后的所售产品必须强制支持GB18030标准，不然不得卖！（这招挺狠的 – -#）</p>
<h4>版本：</h4>
<ul>
<li>GB 18030-2000</li>
<li>GB 18030-2005</li>
</ul>
<h4>包含字符：</h4>
<p>GB18030收录了GBK中的所有字符，并将Unicode中其他中文字符（少数民族文字、偏僻字）也一并收录进来重新编码。其中GB 18030-2000共收录27533个汉字，而GB 18030-2005共包含70244个汉字。</p>
<h4>编码方式：</h4>
<p>采用多字节编码，每个字符由1或2或4个字节进行编码</p>
<h2> 前端眼中的字符编码</h2>
<p>前面我们穿越回过去对字符编码做了下了解，那么这些字符编码跟我们到底有啥关系？</p>
<h3>基本原理：</h3>
<p>当我们打开编辑器coding时，按下ctrl+s的那一刻，其实等于是将自己的工作成果存储进了计算机，而这里最关键的是我们以什么字符编码来进行存储，我们以intellij编辑器为例：</p>
<p><img width="420" height="320" class="aligncenter" alt="charset_f1" src="http://www.webjx.com/files/allimg/130802/1200395.png"></p>
<p>我们在编写此文档时，是以UTF-8编码方式进行coding，当我们按下ctrl+s时，则此文档以utf-8编码方式存储进了计算机（右下角的UTF-8），而head区域中的<strong><meat charset=”utf-8″></strong>的作用则是告诉浏览器此文档以utf-8编码方式编码。</p>
<p>我们此时用Hex编辑器打开这个文件，来看看他的二进制流：</p>
<p><img width="527" height="268" class="aligncenter" alt="charset_f2" src="http://www.webjx.com/files/allimg/130802/1200396.png"></p>
<p>其中红框标注出的即为“小海”两个中文字的二进制流，第一个为”11100101 10110000 10001111″转化为十六进制则为“E5B08F”，第二个为“10110101 10110111 00001101”转化为十六进制为“E6B5B7”，而当我们去查询UTF-8的码表时发现“E5B08F”对应的字符为“小”，“E6B5B7”对应的字符则为“海”，至此当我们用浏览器进行预览页面时，由于浏览器同样以UTF-8方式对此页面进行解码，“小海”两个字则可以被正确的显示出来。</p>
<h3>乱码是个XX</h3>
<p>做过前端的基本都遇到过乱码问题吧？好吧，下面就带大家来揭开这一神秘的面纱。</p>
<h4>我们用notepad打开上面的文件，并重新以GBK方式编码，然后用intellij打开后：</h4>
<p><img width="434" height="291" class="aligncenter" alt="charset_f4" src="http://www.webjx.com/files/allimg/130802/1200397.png"></p>
<p>乱了有木有！居然变成了“C��”，木有道理呀！我在用notepad编辑文件时采用的是gbk编码，而头部申明的也是gbk，本身notepad打开也是正常，但用intellij打开却乱了！</p>
<p>罪魁祸首：<strong>编辑器默认编码</strong>。每个编辑器都会有默认编码，如果没有为一个项目单独设置过默认编码，打开一个单独的文件，编辑器往往以自己的默认编码去解码这个文件，如上图，我们的inellij编辑器的默认是UTF-8解码，而文件是GBK编码方式，那么打开肯定就是乱的拉。</p>
<p>所以编辑器也是一个因素，DW则可以智能判断文件的编码方式，上述文件用DW打开并不会乱码，而intellij可能对中文的支持并不是很好，所以还不能智能判断中文编码，默认以UTF-8解码（当然默认编码自己是可以修改的）。</p>
<p>很多读者可能还有一个疑问，为啥乱码出来的是“C��”？</p>
<p>其实原理已在上面的基本原理中做过介绍，即编辑器ctrl+s存进计算机时是GBK，但尝试用utf-8来解析，对应的utf-8中的码表中却找到了“C��”，感兴趣的同学可以自己研究下。</p>
<h4>我们现在将文件重新编辑，即编辑时采用GBK，但头部申明为UTF-8：</h4>
<p><img width="414" height="284" class="aligncenter" alt="charset_f5" src="http://www.webjx.com/files/allimg/130802/1200398.png"></p>
<p>然后用浏览器打开后，就是这样了：</p>
<p><img width="398" height="90" class="aligncenter" alt="charset_f7" src="http://www.webjx.com/files/allimg/130802/1200399.png"></p>
<p>乱了有木有！这个其实和编辑器打开一个文件乱码的原理是一致的：即<strong>编辑器编码时所采用的字符编码和解码时所采用的字符编码不一致</strong>。上述栗子，我们在coding时采用的是GBK编码，但头部却告诉浏览器这个文档是UTF-8编码，那么浏览器在用UTF-8解码时就会出现了乱码。</p>
<h3> 申明编码的方式</h3>
<p>我们在coding时需要告诉浏览器自己的文件采用了什么字符编码，下面列出一些常见的方法：</p>
<p><meta charset="gb2312"> //html5<br><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> //html4 xhtml<br><script src="http://ossweb-img.qq.com/images/js/foot.js" charset="gb2312"></script><br><link href="http://gameweb-img.qq.com/css/common.css" rel="stylesheet" charset="gb2312" ></p>
<p>我们可以在head区域的meta元素中为整个页面申明编码方式<br>，也可以为单独的外链文件申明编码方式（link/script等元素）。问题是如果页面头部和外链文件中只有部分申明或者全部申明，那么对应的到底是以什么方式解码呢？这里就有一个优先级的问题，具体的判定关系如下：</p>
<p><img width="637" height="386" class="aligncenter" alt="charset_f8" src="http://www.webjx.com/files/allimg/130802/12003910.png"></p>
<p>通过上述判定，我们其实可以发现，一个页面中优先级最高的其实是服务端的编码设置，如果一旦服务端设置了编码A，那么页面即以A来解析。</p>
<p>目前Google采用的是这一做法，这样的传输效率会更高，不需要在头部额外再单独申明编码，但这样其实也有一定的风险，除了需要有一个严谨的编码规范，还需要确保服务器上的页面都保持同一编码，一旦不一致就会造成乱码，所以目前这一方案在国内用的并不多。</p>
<p>其他的，如果外链资源设置了编码C，那么即以C来解析，无论服务端和头部是否申明编码。</p>
<p>但必须要提醒大家的是：<strong>申明的编码只是告诉浏览器相关的内容是以什么方案去解码，并不是这一部分内容就采用了这个编码。</strong>所以大家在coding时的编码一定要确保和你申明的保持统一，不然就会出现乱码的问题。</p>
<h3>BOM是个神马</h3>
<p>BOM是<strong>byte-order mark</strong>的缩写，为Unicode标准为了用来区分一个文件是UTF-8还是UTF-16或UTF-32编码方式的记号，又称字节序。</p>
<p>UTF-8以单字节为编码单元，并没有字节序的问题，而UTF-16以两个字节为编码单元，在解释一个UTF-16文本前，首先要弄清楚每个编码单元的字节序。例如“奎”的Unicode编码是594E，“乙”的Unicode编码是4E59。如果我们收到UTF-16字节流“594E”，那么这是“奎”还是“乙”？这是UTF-16文件开头的BOM就有作用了。</p>
<p>采用Unicode编码方式的文件如果开头出现了“FEFF”，“FEFF”在UCS中是不存在的字符，也叫做“ZERO WIDTH NO-BREAK SPACE”，那么就表明这个文件的字节流是Big-Endian（高字节在前）的；如果收到“FFFE”，就表明字节流是Little-Endian（低字节在前）。</p>
<p>在UTF-8文件中放置BOM主要是微软的习惯，BOM其实是为UTF-16和UTF-32准备的，微软在UTF-8使用BOM是因为这样可以把UTF-8和ASCII等编码明确区分开，但这样的文件在Window以外的其他操作系统里会带来问题。</p>
<h3>我们以Window下的文本文件为例：</h3>
<p><img width="201" height="113" alt="charset_f9" src="http://www.webjx.com/files/allimg/130802/12003911.png"></p>
<p>在保存时可以选择ANSI、Unicode、Unicode big endian和UTF-8四种编码方式。</p>
<ul>
<li>其中ANSI是默认的编码方式，对于英文文件是ASCII编码，对于简体中文文件是GB2312编码（只针对Windows简体中文版，如果是繁体中文版会采用Big5码）；</li>
<li>Unicode其实是UTF-16 endian big编码方式，这个把带有BOM的小端序UTF-16称作Unicode而又不详细说明，也是微软的习惯；</li>
<li>而Unicode big endian则是带有BOM的大端序编码方式</li>
</ul>
<p>目前UTF-16通常用于系统文件的编码，而UTF-32由于对每个字符都采用四个字节编码，所以现在互联网中大部分都采用UTF-8来进行编码传输。</p>
<h2>关于未来的展望</h2>
<h3>概述</h3>
<p style="text-align: center;"><img width="364" height="238" alt="charset_1" src="http://www.webjx.com/files/allimg/130802/12003912.jpg"></p>
<p style="text-align: center;">（图：中国地区ALEXA排名前20的站点所采用的编码占比）</p>
<p style="text-align: center;"><img width="426" height="238" alt="charet_2" src="http://www.webjx.com/files/allimg/130802/12003913.jpg"></p>
<p style="text-align: center;">（图：腾讯互娱所有业务所采用的编码占比）</p>
<p>左图表明GB2312、GBK与UTF-8编码三分天下，而右图显示腾讯互娱的业务大多数采用了GB2312，零星的采用了其他编码。总的就是不同的字符编码方案基本都存在了，而这也与各公司业务的历史原因也有一定的关系。</p>
<p>当我们在项目的最初期时采用了一种非Unicode编码方案时，随着业务的壮大，积累的页面越来越多，到后期想去改成Unicode编码方案，就会担心出错的问题，所以现在大多数公司都采用了延用初期编码的方式，如淘宝，腾讯互娱等，以及四大门户。</p>
<h3>摆在眼前的问题</h3>
<p>可是，某一天了，我们的网站用户港澳台用户也变多了，我们需要支持繁体怎么办？</p>
<p>某一天，我们的业务拓展到东南亚了，我们需要我们的网站也能支持那些国家的语言怎么办？</p>
<p>如今，国内大多数公司采用的方案是，为相应的环境单独做一套编码文件，如 http://big5.china.com.cn/ ，又如 http://big5.qidian.com。</p>
<p>再比如，哪一天了，我们的网站需要支持少数民族的语言怎么办？</p>
<p>难道像央视这样切成图么？</p>
<p><img width="565" height="35" alt="" src="http://www.webjx.com/files/allimg/130802/12003914.png"></p>
<p>嗯，这一切都只是暂时的方案，但人一旦变得懒起来，就不愿意去改变一些东西，就比如UTF-8。</p>
<h3>拥抱国际化标准</h3>
<p>一切就等着我们敞开胸怀去拥抱，而不是沉浸在过去的喜悦中。最终的编码方案决定权在我们自己手里，改变，只是时间的问题。</p>
付款方式
苹果客户端
安卓客户端
官方微信
新浪微博
TOP
