网站开发中常见的编码和乱码问题的解决

2025-04-24 20:19:13

大家在做网页的时候也许会发现,辛辛苦苦写好的代码,在浏览器中预览时却显示一大堆乱码,这个时候开始头痛了,怎么解决呢,如果去樘论罪朋网上搜索的话,一大堆关于编码的知识弄得越来越糊涂,回头一看代码写的没错啊,但是为什么呢?其实本人也是遇到了这个问题,然后研究了一段时间,所以现在分享出来,希望给大家一个清晰的思路,然后在这个基础之上放心做网站,本文简单介绍了UTF-8编码和gb2312编码的基本区别,然后通过两款优秀的网页代码编辑软件Sublime Text2和Notepad++进行比较,提供一个比较好的解决方案,适用于做HTML、asp、php等类型的网页时出现的编码问题,下面开始吧!

工具/原料

电脑

Sublime Text、Notepad++等软件

Sublime Text2的网页编码设置

1、首先介绍Sub盟敢势袂lime Text,这是一款优秀的代码编辑工具,最新版是Sublime Text2,功能非常多我就不多说了,属蟓彩瘵业界的评价也是非常高,那么我们首先来在电脑桌面上新建一个文本文档,来演示网页编程中出现的问题。文本文档建好后,将"新建文本文档.txt"重命名为静态网页文件"wangye.html",这是弹出提示点击"确定"即可,这个时候电脑一定要设置好显示文件扩展名。如下图所示:

网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决

2、此时我们用Sublime Text2将这个wangye.html打开。如图所示就是Sublime Text2的环境界面,此时在里面可以写代码,这里指出Sublime Text不支持gbk中文编码。我们依次用gb2312编码和utf-8编码进行测试。

网站开发中常见的编码和乱码问题的解决

3、首先我们写入简单的网页编码如下图所示,特别注意这段代码<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />这说明网页是用gb2312也就是中文简体进行编码,此时浏览器也会用gb2312进行显示。

网站开发中常见的编码和乱码问题的解决

4、我们将上面的内容保存,按快捷键"Ctrl+S"即可保存,我们用浏览器打开预览一下看有什么结果。

网站开发中常见的编码和乱码问题的解决

5、结果我们看到了,网页标题和内容都是乱码,佯镧诱嚣只有英文hello可以正确显示,这是为什么呢,这里强调一下,Sublime Text默认编码是UTF-8,通俗恝依在绌来讲UTF-8是世界通用性的编码,用途也是最广泛的,而gb2312仅仅适用于中国。这个时候我们如果确实想用gb2312编码怎么办呢,我们点击"文件",然后找到"保存编码",单击"UTF-8包含BOM",这时关闭Sublime Text之后,再次打开网页会发现一切正常了。看下图:

网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决

6、如果我们做网站的时候不用gb2312编码,我们改成utf-8会怎么样呢,看下图:

网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决

7、这个时候我们发现,将<meta>标签里面的改成utf-8后,我们不管怎么设置UTF-8还是UTF-8包含BOM显示出来都很正常。下面我们总结一下用Sublime Text2编写网页的时候到底该如何编码,编码设置方法就是第五步的方法。

8、Sublime Text2不支持中文编码,如果我们用gb2312进行编码,需要设置编码为UTF-8包含BOM,如果我们用utf-8进行编码,设置UTF-8或者设置成UTF-8包含BOM都可以,但是推荐用UTF-8,就是不含BOM的纯UTF-8。这是两种编码的相应设置方法。下面简单介绍一下Notepad++这款软件。

Notepad++下的网页编码设置

1、我们还是和前面一样建立网页文件,在Notepad++环境下打开。先用gb2312编码并预览,如图所示:

网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决

2、我们发现没有任何乱码,一切正常。然后我们把gb2312改为utf-8保存后试试看。看下面的图片:

网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决

3、我们会发现,仍然显示正常,这到底是为什么呢,我们可以打开编码设置来看一下,我们看下面的图片。单击"格式"就可以看到默认编码。

网站开发中常见的编码和乱码问题的解决

4、我们看到默认编码的选择格式是"以UTF-8格式编码",但是我们开始设置的是gb2312呀,其实注意了,在Notepad++和Sublime Text不一样,Notepad++中,默认UTF-8编码已经包含BOM,我们看到选择项里面还有一项"以UTF-8无BOM格式编码",这一项才是纯UTF-8格式的编码,我们改成这一项试试。并把代码改为gb2312

网站开发中常见的编码和乱码问题的解决
网站开发中常见的编码和乱码问题的解决

5、我们会发现,这个时候网页显示也是乱码,这是因为网页代码的编码和Notepad++中设置的实际编码不同,所以浏览器按照gb2312解析时会出现错误。由此我们总结一下用Notepad++编写网页代码是,编码的设置方法:

6、如果我们使用gb2312编码,那么相应的Notepad++中的格式编码要设置为UTF-8这个是包含BOM的,一般默认即可不用设置。如果我们使用UTF-8编码,那么Notepad++中的格式设置成"以UTF-8格式编码"或者"以UTF-8无BOM格式编码"都可以,就是说我们默认就可以,但是推荐使用UTF-8无BOM格式编码,这样的话更符合国际标准。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢