一開始因為atom的炫酷外掛active power mode 而選擇atom編輯器，作為一個小白上來就用外掛真是自找苦吃，各種百度各種查，終於發現不用手動下載外掛檔案放到atom檔案目錄下，而是直接在自帶的外掛平臺就可以找到。下載安裝一氣呵成。然而一個很大的問題出現了——中文顯示亂碼。

在編輯器中可以打中文，但是在預覽介面和用瀏覽器直接開啟.html檔案時，中文全部變成亂碼。一開始以為是外掛問題，也有說要改atom的樣式檔案中的字型，都試過，還是不好用。而且還出現一個奇怪的現象——有的檔案能夠顯示中文，有的不能，就算是同一段程式碼。

心灰意冷之下選擇朋友推薦的sublime編輯器。也按照需要安裝了幾個外掛（發現這倆編輯器很多快捷鍵是一樣的，比如外掛線上搜尋都是shift+ctrl+p），一開始很順利，除了沒有炫酷的打字效果。以為就sublime了。然而在第二天——同樣的問題又出現了。尤其在同一段程式碼而顯示不同的問題上，我覺得不是外掛的問題了。

空閒時跟朋友吐槽，他說了一些自己的意見，作為小白我只記得了“編碼”這個詞。在網上查了一些這方面，一開始懷疑的也是編輯器本身的編碼，然而同一段程式碼應該不存在這個問題，況且我試過，編輯器一直預設utf8編碼，那麼就不是編輯器本身的問題。然後，我想到何不從現象入手，直接在百度查詢“.html檔案亂碼”，然後真相大白——我少了一行程式碼！折騰了3天的問題終於得到解決。

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

對於http-equive和content就算是查了參考手冊也還是不明白，先記在這裡以後再查。

http-equiv 屬性為名稱/值對提供了名稱。並指示伺服器在傳送實際的文件之前先在要傳送給瀏覽器的 MIME 文件頭部包含名稱/值對。

當伺服器向瀏覽器傳送文件時，會先發送許多名稱/值對。雖然有些伺服器會發送許多這種名稱/值對，但是所有伺服器都至少要傳送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文件。

使用帶有 http-equiv 屬性的 <meta> 標籤時，伺服器將把名稱/值對新增到傳送給瀏覽器的內容頭部。例如，新增：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires"
 
 content="31 Dec 2008">

這樣傳送到瀏覽器的頭部就應該包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

當然，只有瀏覽器可以接受這些附加的頭部欄位，並能以適當的方式使用它們時，這些欄位才有意義。

content 屬性提供了名稱/值對中的值。該值可以是任何有效的字串。

content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

2017.4.3更新

指定文件的字元編碼，理想的方式是通過伺服器在頭部資訊中傳送字元編碼，不過也可以在文件這個級別上指定。

在html4.01中需要這樣做

<meta http-equiv="charset" content="iso-8859-1">

在XHTML1.0中就得在一個開始的XML標籤中宣告meta元素。

<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<meta charset="utf-8">