美文网首页
HTML 学习笔记(中文显示乱码问题)

HTML 学习笔记(中文显示乱码问题)

作者: TW安洋 | 来源:发表于2016-12-11 11:01 被阅读575次

由于最近在学习 HTML,学习过程中中文显示乱码问题几乎所有初学者都会遇到,因此本节为大家介绍中文显示乱码的原因及解决方案,希望对大家有所帮助。

中文显示乱码的原因

网页显示中文乱码是在浏览器(例如:Firefox,IE等)对 HTML 网页进行解释的时候形成的,其形成原因是浏览器无法正确识别网页内容所属语系。新建一个 HTML 文件,并输入以下内容:

<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浏览器)显示该网页时,效果如下所示:

messy_code_1.png

好遗憾,中文显示乱码了。这是由于浏览器会将该网页语种辨认为“欧洲语系”,因此无法正确显示中文。

中文显示乱码的解决方案

中文显示乱码的解决方案就是通过正确设置字符编码来使得浏览器能够正确识别网页内容所属语系。例如上面的例子中,将charset=iso-8859-1修改为charset=utf-8即可。utf-8 是世界性通用字符编码格式,可以完美的支持中英文编码,无论是中文网页或者英文网页均不会出现乱码问题。修改后的代码如下所示:

<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

为什么有时我们已经加入了正确的字符编码还是会出现中文乱码呢?因为我们忽略了一样东西,那就是HTML 文件的实际编码方式(例如:Notepad++ utf-8无BOM格式编码),如果 HTML 文件的实际编码方式和 charset 设定的相同就不会出现 HTML中文乱码问题,如果不同就可能出现中文乱码。

相关资料:

  1. http://www.cnblogs.com/IT-Monkey/p/3651330.html
  2. http://www.dabu.info/html-display-chinese-garbled-solution.html

相关文章

网友评论

      本文标题:HTML 学习笔记(中文显示乱码问题)

      本文链接:https://www.haomeiwen.com/subject/jcsemttx.html