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,然後在下載的資料夾裡面點兩下打開,就可以看到下圖的內容

CleanShot 2019 10 07 at 22 40 43 2x

如果你是 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,然後在下載的資料夾裡面點兩下打開,就可以看到下圖的內容

CleanShot 2019 10 07 at 22 48 00 2x


Shiny

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