【学习笔记一】HTML文件在浏览器中文显示乱码的缘由及解决办法

时间 2019-12-19

标签学习笔记一 html 文件浏览器中文显示乱码缘由解决办法栏目 HTML 繁體版

原文原文链接

最近在学习前端html相关知识(备注：前端小白一枚)，准备从移动端开发扩展到前端开发，但愿作一个大前端，即前端全栈工程师。为何要转向前端学习开发，在后面的文章中，我会详细阐述这个缘由和相关心得。html

在写第一个html文件时，就碰到问题，出师不利啊。不过，对于我来讲，任何问题的发生都有它的缘由，主要找到这个根本缘由，咱们碰到的问题基本均可以解决，请相信这句话！你觉的呢？前端

问题描述：

写了一个test.html文件，内容以下：浏览器

<!DOCTYPE HTML>
<html>
<body>

<h1>个人第一个标题</h1>
<p>个人第一个段落。</p>

</body>
</html>
复制代码

在浏览器打开，发现“全是乱码”。抓狂中😫……学习

问题解决：

碰到问题，一直抓狂也无济于事啊，心想必定要解决问题才行。此时，静下来，仔细想一想，在开发Android时也出现过中文显示乱码，那个时候主要是由于工程/文件编码设置的不对，设置为utf-8便可。编码

因此，根据以往的经验，设置文件的编码格式为utf-8(至于若是修改文件编码，这里就不详细展开了)，保存后再浏览结果，仍是乱码。这是怎么回事呢？此时，我不急，我问问度娘，看看别人有木有碰到相似的问题。输入关键字“html中文乱码”后回车，出来不少相关的结果。其中，几乎全部搜索结果都提到在html文件头加入spa

<head>
<meta charset="utf-8" />
</head>
复制代码

此时，test.html文件内容就改成了：code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>

<h1>个人第一个标题</h1>
<p>个人第一个段落。</p>

</body>
</html>
复制代码

接下来，双击test.html文件，祈祷“奇迹出现”，终于，看到正确结果了，中文正常显示了😊。cdn

问题终于解决了。htm

方法总结：

html显示中文乱码，咱们应该从如下两方面入手解决：utf-8

检查html文件编码是否为utf-8。若是不是，就改成utf-8编码。

在html文件头加入

<head>
<meta charset="utf-8" />
</head>
复制代码

==咱们在碰到任何问题时，都应该相信：咱们碰到的问题，是都能解决的，只要咱们静下心来，仔细分析缘由，就能找到解决办法的。==