首頁 >web前端 >html教學 >html5 charset能用嗎?

html5 charset能用嗎?

伊谢尔伦
伊谢尔伦原創
2016-12-01 10:39:021408瀏覽

前一段某項目中頁面在IE6突然出現了亂碼,當時做了各種排查,最終推測是使用了HTML5的DOCTYPE和Charset以及中文註釋的問題,於是臨時採用舊的Charset方法來修復了下,後面亂碼再沒出現。

其實一直不太確定HTML5的Charset能否被IE6識別,於是做了一些測試。

先說下兩種Charset宣告方法,其實大家應該都很熟悉的:

後面我們簡稱第一種方法為HTML5方法,第二種方法為HTML4方法。

測試環境:

Windows XP Sp2,中文版+英文版兩個版本的IE6,及Windows 7 下IE9及其各種相容模式和Chrome、Firefox等的當前Stable版本;

因為我們用到的HTML檔案都是UTF8編碼的,所以這裡測試案例的HTML檔案也都是UTF8(無BOM)格式,專案用gbk或gb2312編碼的類似。

測試用了兩種方法:

meta方法:包含HTML5和HTML4兩種方法及其混搭

伺服器端方法:伺服器端設定charset,這裡使用nginx,charset=utf-8

測試案例- Meta方法:

UTF8

UTF8 HTML4方法

UTF8-GB2312

UTF8+中文註解在meta前

UTF8+中文4GBHTML和HE 2312-UTF8

GB2312+中文註釋在meta前

GB2312+中文註釋在HTML和HEAD之間

測試用例——服務器方法:

服務器設置編碼

meta編碼和服務器編碼不一致

上面各用例均可直接訪問

測試結果:

測試個用例在各瀏覽器中表現一致;

UTF-8的方案中,全部正常顯示;

charset聲明為gb2312,由於和文檔的UTF-8編碼不符,所以全部亂碼;

1,6用HTML5 charset分別定義了UTF8和gb2312,1正常顯示沒有亂碼,6亂碼-在中文版IE6和英文版IE6皆如此,說明IE6能辨識HTML5的charset;

1,2用例和6,7用例,分別用單獨用HTML5和HTML4方法定義charset,效果一樣;

值得注意的是,第三個用例先用HTML5的方法設定UTF-8編碼,再用HTML4的編碼設定為gb2312,但頁面顯示正常,而第八個用例反之,結果頁面顯示亂碼,所以可以推測,第二個meta標籤並沒有生效;

4、5用例並沒有亂碼,說明單純的HTML註釋並不一定會導致亂碼,這裡沒有測試這兩個位置加載不同編碼的js等外部文件時可能發生的情況;

伺服器方法中,用例1並沒有用meta設定charset,頁面顯示正常,而用例2中用meta設定charset=gb2312,與伺服器版本不同,但依然沒有亂碼,表示伺服器端回傳的charset優先權較高;

結論:

其實關於charset的規範,Google的開發文件中也有解釋:

要在HEAD標籤中;

在任何其它內容之前,也就是要在HEAD中的最前面;

包括空格和DOCTYPE聲明在內,要在前512個位元組之內;

HTML5和HTML4兩種寫法效果一樣,用其中之一即可;

上面的測試也證明,第4條是正確的,兩種寫法均可。

另外,伺服器端設定charset也是很不錯的做法,charset聲明直接在HTTP response中取得,效率更高,而且更方便。 Google目前在用這種方法。

所以只要頁面寫的規範,並不會出現亂碼的問題。所以可以大膽的使用HTML5的DOCTYPE和Charset聲明。但請盡量按照上面說的Google文件中的規格來,頭部不要放太多東西,js等外部資源更要放到後面去。

測驗中難免會有遺漏,如果有不正確的地方,歡迎指正並一起討論~~


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn