HTML页面中文乱码怎么解决？两种常用HTML中文乱码解决方法
做前端开发或者自己搭静态网页的朋友，多半都碰到过HTML页面打开全是乱码的情况。本来写好的中文标题、段落，一打开浏览器变成一堆看不懂的方框或者奇怪字符，找半天找不到问题在哪，心态很容易炸。
其实大部分HTML中文乱码的问题，根源都出在字符编码设置不对，要么是代码里没声明编码，要么是文件保存的时候用的编码和声明的不一样，解决起来也不复杂。今天就说两种最常用的解决方法，大部分碰到的乱码情况都能搞定。
第一种也是最常用的方法，就是在HTML代码里加上正确的编码声明。很多新手写代码的时候，只专注写页面结构和内容，忘了加这行声明，浏览器打开的时候就会自动猜编码，一旦猜错就直接乱码了。
具体怎么加呢？现在通用的编码都是UTF-8，它能支持全世界绝大多数语言的字符，中文当然也没问题。你只要在HTML的标签里面，加上这么一行代码就行：。
这里要注意两个容易错的点，第一个是位置，这行meta标签一定要放在的最开头，至少要放在所有包含中文内容的标签前面，不然浏览器读到中文内容的时候，还没读到编码声明，还是会猜错。第二个是拼写，很多人会把charset拼错，或者少写引号，写错了浏览器也识别不出来，还是会出问题。
如果你用的是旧版的HTML4，那声明的写法会有点不一样，是，不过现在基本上都用HTML5了，直接写第一种短写法就行，两种写法都能生效，看你自己的代码规范选。
那加了声明之后还是乱码怎么办？这就要用到第二种方法，检查文件本身的保存编码是不是和声明的一致。很多人明明代码里写了UTF-8，结果保存文件的时候，编辑器默认用了GBK或者GB2312编码，两边对不上，浏览器当然解析不出来，自然就乱码了。
举个例子，你用Windows自带的记事本写HTML代码，记事本默认保存编码是ANSI，在国内的Windows系统里ANSI对应的就是GBK编码。如果你代码里声明了UTF-8，保存的时候还是用默认的ANSI，打开肯定乱码。这种情况解决方法很简单，只要重新把文件按UTF-8编码保存一遍就行。
不管你用什么代码编辑器，VS Code、Sublime还是WebStorm，都能改保存编码。拿最常用的VS Code举例子，打开你的HTML文件之后，看编辑器右下角，会显示当前文件的编码，点击它之后顶部会弹出选项，选“通过编码保存”，然后选UTF-8就搞定了。
如果是用记事本，保存的时候点“另存为”，在保存窗口下方就能看到编码选项，把它改成UTF-8再保存，替换原来的文件就好。
还有一种比较少见的情况，就是你把网页放到服务器上之后，服务器会默认返回一个编码头，如果这个编码和你HTML里声明的不一样，也会导致乱码。比如服务器返回的编码头是GBK，你HTML里写的是UTF-8，浏览器会优先用服务器返回的编码，还是会乱。这种情况如果是用Apache服务器，可以改一下.htaccess文件，加上AddDefaultCharset UTF-8就行了，如果是Nginx，就在配置文件里加上charset utf-8;，这样服务器返回的编码也和网页一致，就不会出问题了。
我自己刚学写HTML的时候，就碰到过这个问题，那时候用记事本写了个个人介绍页面，代码检查了好几遍，打开就是乱码，折腾了快一小时才发现，原来是记事本保存的时候没选UTF-8，改完保存立刻就正常了。
其实总结下来，碰到HTML中文乱码，先检查有没有加编码声明，再检查文件保存编码和声明一不一致，90%以上的问题都能解决。如果改完之后还是不行，可以清一下浏览器缓存再刷新，有时候浏览器缓存了旧的错误页面，也会让你误以为问题没解决。
现在的前端开发工具其实都很智能了，新建HTML文件的时候，模板一般都会自动加上UTF-8的声明，保存编码默认也是UTF-8，很少会出问题。但如果你是新建空白文件自己写，或者从别的地方复制过来的代码，还是要多检查一下这两点，省得碰到乱码还要浪费时间找原因。
HTML乱码,HTML中文乱码,HTML乱码解决,中文乱码解决,HTML页面乱码,HTML编码错误,UTF-8编码,HTML编码声明,文件保存编码,前端乱码解决
[Q]：HTML页面为什么会出现中文乱码？
[A]：大多数中文乱码都是字符编码不匹配导致的，常见原因包括没在代码里声明页面编码、文件保存编码和页面声明的编码不一致、服务器返回的编码和网页编码不匹配。
[Q]：解决HTML中文乱码最常用的方法是什么？
[A]：最常用的方法是在HTML的标签顶部添加UTF-8编码声明，代码为，让浏览器明确识别页面编码。
[Q]：加了编码声明还是中文乱码怎么办？
[A]：这种情况需要检查文件本身的保存编码，确保文件保存的编码和你声明的编码一致，一般改成UTF-8重新保存即可解决。
[Q]：用Windows记事本写HTML为什么容易乱码？
[A]：Windows记事本默认保存编码是ANSI，国内系统下对应GBK编码，如果你的代码声明了UTF-8编码，两边编码不匹配就会出现乱码，保存时手动改成UTF-8即可。
[Q]：VS Code里怎么修改HTML文件的保存编码？
[A]：打开文件后点击编辑器右下角显示的当前编码，选择通过编码保存，再选择UTF-8保存即可。
[Q]：HTML5的编码声明和旧版HTML4有什么区别？
[A]：HTML5只需要写短声明即可，HTML4需要写更长的，现在通用HTML5的写法。
[Q]：上传服务器后HTML出现中文乱码是什么原因？
[A]：大概率是服务器默认返回的编码和你网页声明的编码不一致，浏览器会优先使用服务器返回的编码，修改服务器配置，默认返回UTF-8编码即可解决。
[Q]：改完编码还是乱码是怎么回事？
[A]：可以先清理浏览器缓存再刷新页面，有时候浏览器缓存了之前出错的旧页面，会让人误以为问题还没解决。
其实大部分HTML中文乱码的问题，根源都出在字符编码设置不对，要么是代码里没声明编码，要么是文件保存的时候用的编码和声明的不一样，解决起来也不复杂。今天就说两种最常用的解决方法，大部分碰到的乱码情况都能搞定。
第一种也是最常用的方法，就是在HTML代码里加上正确的编码声明。很多新手写代码的时候，只专注写页面结构和内容，忘了加这行声明，浏览器打开的时候就会自动猜编码，一旦猜错就直接乱码了。
具体怎么加呢？现在通用的编码都是UTF-8，它能支持全世界绝大多数语言的字符，中文当然也没问题。你只要在HTML的标签里面，加上这么一行代码就行：。
这里要注意两个容易错的点，第一个是位置，这行meta标签一定要放在的最开头，至少要放在所有包含中文内容的标签前面，不然浏览器读到中文内容的时候，还没读到编码声明，还是会猜错。第二个是拼写，很多人会把charset拼错，或者少写引号，写错了浏览器也识别不出来，还是会出问题。
如果你用的是旧版的HTML4，那声明的写法会有点不一样，是，不过现在基本上都用HTML5了，直接写第一种短写法就行，两种写法都能生效，看你自己的代码规范选。
那加了声明之后还是乱码怎么办？这就要用到第二种方法，检查文件本身的保存编码是不是和声明的一致。很多人明明代码里写了UTF-8，结果保存文件的时候，编辑器默认用了GBK或者GB2312编码，两边对不上，浏览器当然解析不出来，自然就乱码了。
举个例子，你用Windows自带的记事本写HTML代码，记事本默认保存编码是ANSI，在国内的Windows系统里ANSI对应的就是GBK编码。如果你代码里声明了UTF-8，保存的时候还是用默认的ANSI，打开肯定乱码。这种情况解决方法很简单，只要重新把文件按UTF-8编码保存一遍就行。
不管你用什么代码编辑器，VS Code、Sublime还是WebStorm，都能改保存编码。拿最常用的VS Code举例子，打开你的HTML文件之后，看编辑器右下角，会显示当前文件的编码，点击它之后顶部会弹出选项，选“通过编码保存”，然后选UTF-8就搞定了。
如果是用记事本，保存的时候点“另存为”，在保存窗口下方就能看到编码选项，把它改成UTF-8再保存，替换原来的文件就好。
还有一种比较少见的情况，就是你把网页放到服务器上之后，服务器会默认返回一个编码头，如果这个编码和你HTML里声明的不一样，也会导致乱码。比如服务器返回的编码头是GBK，你HTML里写的是UTF-8，浏览器会优先用服务器返回的编码，还是会乱。这种情况如果是用Apache服务器，可以改一下.htaccess文件，加上AddDefaultCharset UTF-8就行了，如果是Nginx，就在配置文件里加上charset utf-8;，这样服务器返回的编码也和网页一致，就不会出问题了。
我自己刚学写HTML的时候，就碰到过这个问题，那时候用记事本写了个个人介绍页面，代码检查了好几遍，打开就是乱码，折腾了快一小时才发现，原来是记事本保存的时候没选UTF-8，改完保存立刻就正常了。
其实总结下来，碰到HTML中文乱码，先检查有没有加编码声明，再检查文件保存编码和声明一不一致，90%以上的问题都能解决。如果改完之后还是不行，可以清一下浏览器缓存再刷新，有时候浏览器缓存了旧的错误页面，也会让你误以为问题没解决。
现在的前端开发工具其实都很智能了，新建HTML文件的时候，模板一般都会自动加上UTF-8的声明，保存编码默认也是UTF-8，很少会出问题。但如果你是新建空白文件自己写，或者从别的地方复制过来的代码，还是要多检查一下这两点，省得碰到乱码还要浪费时间找原因。
HTML乱码,HTML中文乱码,HTML乱码解决,中文乱码解决,HTML页面乱码,HTML编码错误,UTF-8编码,HTML编码声明,文件保存编码,前端乱码解决
[Q]：HTML页面为什么会出现中文乱码？
[A]：大多数中文乱码都是字符编码不匹配导致的，常见原因包括没在代码里声明页面编码、文件保存编码和页面声明的编码不一致、服务器返回的编码和网页编码不匹配。
[Q]：解决HTML中文乱码最常用的方法是什么？
[A]：最常用的方法是在HTML的标签顶部添加UTF-8编码声明，代码为，让浏览器明确识别页面编码。
[Q]：加了编码声明还是中文乱码怎么办？
[A]：这种情况需要检查文件本身的保存编码，确保文件保存的编码和你声明的编码一致，一般改成UTF-8重新保存即可解决。
[Q]：用Windows记事本写HTML为什么容易乱码？
[A]：Windows记事本默认保存编码是ANSI，国内系统下对应GBK编码，如果你的代码声明了UTF-8编码，两边编码不匹配就会出现乱码，保存时手动改成UTF-8即可。
[Q]：VS Code里怎么修改HTML文件的保存编码？
[A]：打开文件后点击编辑器右下角显示的当前编码，选择通过编码保存，再选择UTF-8保存即可。
[Q]：HTML5的编码声明和旧版HTML4有什么区别？
[A]：HTML5只需要写短声明即可，HTML4需要写更长的，现在通用HTML5的写法。
[Q]：上传服务器后HTML出现中文乱码是什么原因？
[A]：大概率是服务器默认返回的编码和你网页声明的编码不一致，浏览器会优先使用服务器返回的编码，修改服务器配置，默认返回UTF-8编码即可解决。
[Q]：改完编码还是乱码是怎么回事？
[A]：可以先清理浏览器缓存再刷新页面，有时候浏览器缓存了之前出错的旧页面，会让人误以为问题还没解决。
评论 (0)