Shiny

一分鐘學前端（4）：銝剜 中文亂碼？

October 07, 2019 #HTML#一分鐘學前端

前面幾篇都是介紹英文的內容，是時候進入多語言的情況了，畢竟除了英文以外還會中文嘛！就改改 HTML 變成 中文 吧！

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>中文</h1>
    <img src="https://shinychang.net/static/4b01f6f30d7488a25755a71ca7d06b03/0f7c5/CleanShot%202019-10-05%20at%2019.09.52%402x.jpg" />
  </body>
</html>

下載 HTML，然後在下載的資料夾裡面點兩下打開，就可以看到下圖的內容

![](./images/CleanShot 2019-10-07 at [email protected])

如果你是 Chrome 的使用者的話，也許還是會出現 中文 ，而不是 銝剜 這種亂碼，這是因為 Chrome 已經強大到可以自動判斷正確編碼了

為了解決編碼，你需要在 head 裡面加入以下內容：

<meta charSet="utf-8"/>

來讓瀏覽器知道是用 UTF-8 的編碼方式，所謂的 UTF-8 就是一種國際編碼原則，把各種文字給予一個編碼，就類似ㄅㄆㄇㄈ這樣的東西都會給他一個編號

切記一定要放在 <head> 的後面，放在所有其他文字的前面，不然在這個標籤之前的文字還是亂碼唷！

<!DOCTYPE html>
<html>
  <head>
    <meta charSet="utf-8" />
  </head>
  <body>
    <h1>中文</h1>
    <img src="https://shinychang.net/static/4b01f6f30d7488a25755a71ca7d06b03/0f7c5/CleanShot%202019-10-05%20at%2019.09.52%402x.jpg" />
  </body>
</html>

下載正確的 HTML，然後在下載的資料夾裡面點兩下打開，就可以看到下圖的內容

![](./images/CleanShot 2019-10-07 at [email protected])

Experienced JavaScript / Node.js engineer & team lead.
Facebook Medium LinkedIn CodeSandbox GitHub Email