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

html5 charset能用嗎?

Dec 01, 2016 am 10:39 AM
charset html5

前一段某項目中頁面在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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符

See all articles