HTML 學習筆記(中文顯示亂碼問題)

由于最近在學習 HTML,學習過程中中文顯示亂碼問題幾乎所有初學者都會遇到,因此本節(jié)為大家介紹中文顯示亂碼的原因及解決方案,希望對大家有所幫助。

中文顯示亂碼的原因

網(wǎng)頁顯示中文亂碼是在瀏覽器(例如:Firefox,IE等)對 HTML 網(wǎng)頁進行解釋的時候形成的,其形成原因是瀏覽器無法正確識別網(wǎng)頁內(nèi)容所屬語系。新建一個 HTML 文件,并輸入以下內(nèi)容:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
</head>

<body>
    <ul>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>葡萄</li>
    </ul>

    <ol>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>葡萄</li>
    </ol>
</body>

</html>

當我們通過瀏覽器(測試使用的是Firefox瀏覽器)顯示該網(wǎng)頁時,效果如下所示:

messy_code_1.png

好遺憾,中文顯示亂碼了。這是由于瀏覽器會將該網(wǎng)頁語種辨認為“歐洲語系”,因此無法正確顯示中文。

中文顯示亂碼的解決方案

中文顯示亂碼的解決方案就是通過正確設置字符編碼來使得瀏覽器能夠正確識別網(wǎng)頁內(nèi)容所屬語系。例如上面的例子中,將charset=iso-8859-1修改為charset=utf-8即可。utf-8 是世界性通用字符編碼格式,可以完美的支持中英文編碼,無論是中文網(wǎng)頁或者英文網(wǎng)頁均不會出現(xiàn)亂碼問題。修改后的代碼如下所示:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <ul>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>葡萄</li>
    </ul>

    <ol>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>葡萄</li>
    </ol>
</body>

</html>

顯示效果如下所示:

messy_code_2.png

為什么有時我們已經(jīng)加入了正確的字符編碼還是會出現(xiàn)中文亂碼呢?因為我們忽略了一樣東西,那就是HTML 文件的實際編碼方式(例如:Notepad++ utf-8無BOM格式編碼),如果 HTML 文件的實際編碼方式和 charset 設定的相同就不會出現(xiàn) HTML中文亂碼問題,如果不同就可能出現(xiàn)中文亂碼。

相關資料:

  1. http://www.cnblogs.com/IT-Monkey/p/3651330.html
  2. http://www.dabu.info/html-display-chinese-garbled-solution.html
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容