【學習筆記一】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>
複製代碼

==咱們在碰到任何問題時，都應該相信：咱們碰到的問題，是都能解決的，只要咱們靜下心來，仔細分析緣由，就能找到解決辦法的。==

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。