用HBuilder X编辑器打开的网页出现中文乱码
一、问题描述
编辑区域代码显示正常,但是自带的web浏览器显示中文乱码。
此时看到右下角显示的是GB18030编码方式。
二、尝试解决
1.修改文件打开的指定编码方式(文件——以指定编码重新打开)
换了好几个编码方式,web浏览器一直显示中文乱码,换成utf-8后,甚至连编辑区代码也乱码了;再切换编码方式最后会搞得恢复不了,好在能撤销。
2.网上有说在头部加上标签meta和属性 charset="utf-8"的,也还是不行。
<head>
<meta charset="utf-8"/>
</head>
三、问题解决
总体上就是上面两个办法结合一下,再注意下小细节。
1.首先,在头部里加上代码< meta charset=“utf-8”/>,保存,如上图。
2.然后,修改编辑器的编码方式(文件——以指定编码重新打开),如上上图。
补充:我安装的是新版HBuilder X 2.4.2.20191115,编码方式的修改就这个办法,有些文档写着打开工具——选项,但新版没有这一项了,另外工具——设置上也是不能修改编码方式的。
3.正如上面所说,会发现编辑区的代码也乱码了,别急,ctrl+z撤销一下就行了。
怎么确定撤销到哪一步呢?我这里是一次就行了。你看到代码中< meta charset=“utf-8”/>存在,右下角显示的编码方式也是utf-8,同时编码区域不出现乱码就保存一次。可能此时右边的web浏览器显示的中文还是乱码,刷新一下就行 。
四、原因分析及问题规避
原因1:一开始写网页代码的时候没有设定好编码方式,并且用的是记事本写的话,默认的代码就是ANSI,直接用浏览器打开没有问题,但是用编辑器打开,编辑器就会按照它内部认为可行的编码方式打开。同时,一旦出现中文乱码了,还继续用会中文乱码的编码方式一直打开就会破坏数据,最后可能恢复不了。
原因2:(叨叨:尽管最后的解决和搜索出来的答案很接近了,但没有最后的撤销,我想这又得卡住了。)
主要是思考问题的时候太片面了,没有全局观,没有抓住解决问题的关键。中文乱码了说明编码有问题,那么解决的关键就是设定好编码方式,这是必须的。至于编辑器还是乱码,说明它还不懂事,那就让它懂,设置它或者关了再打开,总体上是要朝着相同的编码方式走的。两部基础的都设置好了,最后就等效果了。这也是上面三个加亮部分的内容。
问题规避:
(内容上)写网页就加上编码方式吧。
(思想上)解决问题思路:
——什么问题?涉及哪个知识点?问题出现在哪里(可用排除法)?
——能做的都做了还是出错?那考虑一下背后运行机制,它究竟是怎么出错的?(知己知彼,百战百胜)
同样的,其他中文乱码的问题也可这么解决。