html聲明charset="utf-8"后,瀏覽器訪問中文依舊亂碼(絕對有效)


 

1.情景展示

  html文件已經聲明字符集為UTF-8,但是瀏覽器訪問依舊亂碼。

  標題和頁面內容都是亂碼,這是怎么回事?

2.原因分析

   charset="UTF-8"是讓瀏覽器要用utf-8來解釋,而文檔的編碼格式,是保存時的選擇決定的。

  也就是說:這個HTML文件保存時的字符集不是UTF-8!

  所以,HTML的編碼格式不是utf-8卻讓瀏覽器以utf-8的格式進行解析,自然會亂碼。

  但是,事實果真如此嗎?

  使用notepad++打開該文件,發現文檔的字符集就是:utf-8。

  這是不是很奇怪?

3.解決方案

  從網上看到,說是默認編碼格式是ANSI,需要改成UTF-8,顯然,我的格式現在已經是UTF-8了,為什么還是亂碼?

  抱着死馬當活馬醫的態度,選中文件--》打開方式選擇記事本--》文件另存為:(編碼格式已經默認為UTF-8了)

  替換原文件。

  這個時候,再用notepad++打開該文件,你會發現該文件編碼集已經發生了改變:

 

  編碼集由UTF-8改為UTF-8-BOM了。

  這次再用瀏覽器訪問該網頁,中文顯示不再亂碼了。

4.效果展示

  到這就結束了,怎么可能,程序員的探索精神哪里去了?

5.擴展應用

  對於已經熟練使用開發工具的人,誰也不會傻到將文檔的編碼集設置為ANSI的,指定文檔編碼集的工作已經由開發工具替代了,我們只需要設置一下就好了。

  那么,現在來探索一下,使用ANSI編碼的html文件,究竟能不能被瀏覽器正確解析。

  第一步:在桌面新建一個文本文檔。

  雙擊打開,手敲html模板:

  保存之后,修改文件后綴名為html

  使用瀏覽器打開,可以正常顯示,不會亂碼!

  此時的文檔編碼為:ANSI,可以使用記事本重新打開該html文件--》文件--》另存為:

  或者,直接使用notepad++打開該文件,右下角顯示的就是:該文件的編碼集。

  這就可以證明,使用記事本創建的文件,默認的編碼集是:ANSI。

  第二步:添加uf-8聲明,告知瀏覽器以utf-8格式解析html內容

  再次打開瀏覽器,顯示已經亂碼了。

  這,才是網絡上流傳的由ANSI編碼引起亂碼的真相!!!

  第三步:將該文件的字符集改為utf-8。

  使用記事本打開該文件--》另存為--》字符集指定為UTF-8,保存,替換原文件

  使用瀏覽器再次訪問,這就又可以顯示正常了。

  此時顯示正常是因為:文檔編碼集為UTF-8,瀏覽器也以UTF-8的字符集來解析html文件。

  此時,再用notepad++打開,右下角的字符集也變成了:UTF-8-BOM。

  第四步:得出結論。

  使用Windows記事本新建的文件,默認字符集是:ANSI,另存為UTF-8格式,其實際格式為帶有BOM的utf-8,並不是我們平常開發是指定的(真正意義上的)utf-8!

  此時,是不是完事了?沒有,繼續!

  新的問題來了:為什么UTF-8-BOM,瀏覽器解析不亂碼,而UTF-8,瀏覽器解析就亂碼呢?

  通過notepad++,將該文件的字符集改為無bom格式的utf-8,也就是真正的utf-8。

  修改成功。

  保存,再次使用瀏覽器打開該文件,你會發現:仍然可以正常顯示。

  是不是很奇怪?為了進一步驗證,我們這次再把剛開始的那個html文件由utf-8-bom改成utf-8試試!

  結果還是不行,還是會亂碼!

  結論:我這種情況,估計很少有人碰到,不管它了,就這吧。不過,可以肯定的是:

不管文檔的編碼集是UTF-8,還是UTF-8-BOM,都不影響瀏覽器以UTF-8字符集進行正常解析中文!

但是,至於為什么開頭的文件使用UTF-8為何會亂碼,無從得知!

  補充:20191119

  如果你使用的是jsp,一定要加上這段代碼:

<%-- 告知tomcat以utf-8的字符集生成html文件 --%>
<%@ page language="java"  pageEncoding="UTF-8"%>

  否則jsp轉java的時候使用的字符集是iso-8859-1,servlet返回的html文件的字符集也是iso-8859-1,而不是utf-8。如下圖所示:

  換句話說,雖然將jsp文件的字符集是utf-8,但是tomcat使用java編譯時使用的卻是iso-8859-1,所以最終響應到瀏覽器的html的編碼集是iso-8859-1;

  而我們實際開發的時候字符集是utf-8,所以當頁面存在中文的時候就會出現亂碼問題。

寫在最后

  哪位大佬如若發現文章存在紕漏之處或需要補充更多內容,歡迎留言!!!

 相關推薦:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM