相信每乙個前端工程師都或多或少遇上過「亂碼」這位仁兄，無論你的基礎有多麼紮實，在生產的過程中都免不了偶爾和「亂碼」兄弟喝上幾杯茶吧。作為乙個前端工程師，你是如何指定乙個頁面的編碼的呢？你知道瀏覽器是怎麼識別編碼的嗎？
首先，乙個很簡單的例子，用遇簡的html頁面來看看各瀏覽器下有什麼不同：
瀏覽器顯示編碼
備註ie6
utf-8
ie8utf-8
ie9gb2312
系統預設字符集
firefox3.5
gbk2312
系統預設字符集
firefox4.0
iso-8859-1
西歐語言，英語預設編碼
chrome
gbk系統預設字符集
opera
中文-自動檢測
應該也是gb2312
從**中可以看出，對於沒有使用任何手段宣告編碼的頁面，各瀏覽器有著不同的解析。當然在最簡的頁面中，無論用什麼編碼（當然前提是ascii的超集）都沒有影響，但足以表現出正確設定編碼的重要性。
首先，何為編碼？編碼即是通過一定的方式，指定瀏覽器（或稱使用者**）以一種特殊的演算法來解析位元組流，以得到真正正確的內容。在html的標準中，編碼可以使用別名來表示。編碼的別名來自於iana的定義，只有在該列表**現的編碼才可以被瀏覽器識別。因此如果把utf-8寫成utf8，瀏覽器就有可能完全不予理睬。另外，編碼別名是大小寫不敏感的。
在html4中，提出有3種方法指定頁面的編碼，根據優先順序高低依次是：
http頭里的content-type欄位後跟隨字符集。
使用標籤來宣告。
對於部分外部資源，如標籤載入的js檔案，可以通過標籤上的charset屬性宣告。
這個自然沒有什麼疑問，需要注意的是，通過標籤來宣告頁面的話，當瀏覽器遇上該標籤時，如果發現自己使用的編碼與標籤宣告的不符，是會回到頭里重新解析頁面的。這會導致頁面的一部分被重新解析，因此如果試圖使用標籤的方式宣告編碼的話，建議將標籤盡可能地寫在前面。乙個最佳實踐是寫在標籤之後，任何其他標籤之前。關於這一點，google pagespeed也有相應的介紹。
但是隨著時間的推移，開發者漸漸發現了一件事。就如同doctype的最簡宣告一樣，其實瀏覽器在讀取標籤的編碼的時候，並不是嚴格地按照標準進行的。總而言之，由於在html的解析階段，基於在tokenizer階段之前就必須確定好頁面的編碼，因此瀏覽器不可能像分析dom樹一樣，在dom樹構建的時候再分解標籤的結構，取出其中的http-equiv和content屬性，再確定編碼。
現實中，瀏覽器做了一件非常簡單的事，來讀取標籤定義的編碼：
確定這是乙個標籤，這根據html解析的狀態機，由"<"字元加上"meta"字串就能確定。
查詢該字串（此處還沒有標籤的概念，只是個字串），找到乙個子字串"charset"。
再向後讀，忽略掉所有的空格字元，找到第乙個有意義的字元c。
再跳掉所有的空格字元和單引號、雙引號等，向後掃瞄，直到遇上單引號、雙引號、空格字元、結束標籤等不應該出現的字元為上，擷取其中掃瞄得出的字串s。
分析s，得到編碼別名。
從上面的演算法，不難發現，下面幾種寫法，其實都能讓瀏覽器正確地識別出編碼：
於是，隨著歷史的推進，終於有一天，各瀏覽器廠商們坐在了一起，開始討論這個問題……最終他們驚奇地發現各自的實現非常相似（也許根本就是相互借鑑），所以他們決定將這種方式變成乙個標準……最後，再經過漫長的討論，html5中廣為人愛的編碼宣告方式就誕生了。在html5中，稱其為「meta charset元素」，其最簡形式如下：
到了html5時代，標準再次對編碼的宣告方式做了修正和細化，總得來說有以下的區別：
除了編碼的基本宣告方式外，標準中還有不少需要注意的細節：
HTML5標準學習 DOCTYPE
所謂doctype，最初是xml的概念，即通過一種特定的語法，作為一種元資料，來描述xml文件中允許出現的元素，以及各元素的組成 巢狀規則等。具體的概念可以在wiki中中得到乙個更詳細的結果。但是在html中，doctype又有著一些不同的效果，其中之一就是著名的觸發瀏覽器標準模式的功能。即如果沒有...
HTML 教程 HTML5 標準
您可以使用 html 來建立自己的 web 站點。在本教程中，您將學習如何使用 html 來建立站點。html 很容易學習！相信您能很快學會它！本教程包含了數百個 html 例項。注意 對於中文網頁需要使用 宣告編碼，否則會出現亂碼。doctype html html head meta chars...
HTML 教程 HTML5 標準
超文字標記語言 英語 hypertext markup language，簡稱 html 是一種用於建立網頁的標準標記語言。您可以使用 html 來建立自己的 web 站點，html 執行在瀏覽器上，由瀏覽器來解析。在本教程中，您將學習如何使用 html 來建立站點。html 很容易學習！相信您能很...