keywords：亂碼、顏色、<!DocType>、嚴格模式、meta元素、內核
一、網頁的亂碼是如何產生的?怎樣解決?
ps：二進制是人為定義的，屏幕顯示的圖形字符是人為定義的，除了輸入機器的高低電壓，一切都是人為定義的。
1、編碼
編碼是信息從一種形式或格式轉換為另一種形式的過程。解碼，是編碼的逆過程。
編碼最初是出于保密需要，避免重要情報泄露。后來隨著技術的進步，人們發現編碼能夠在極其有限的資源下傳遞出足夠清晰的信息，其中最為著名的要數摩斯電碼（morse code）。
編碼是信息從一種形式或格式轉換為另一種形式的過程。如同函數y=kx（k為常量，恒定），輸入x，則輸出y，這個k就是編碼表。
摩斯電碼的編碼如下：
在y=kx中輸入x（點、劃組合），根據規則輸出y（26個英文字母），整個實現過程就是編碼。
2.用位（bit）表示文本
上帝創造了0和“與非”，其他的由人創造.（God gave us 0 and Nand; Everything else was done by humans)
bit（比特），全名“binary digit”（中文：二進制數字）。1比特，代表一個二進制數字位（注意這里提到的“位”的概念，比如10就是2位，110就是3位）。只要談到比特，通常是指特定數目的比特位。在計算機時代，比特被視作信息塊的基本單位，我們在電腦或者任何終端上所看到的內容都是以二進制的形式存儲、讀取、交換的。
計算機不明白人類語言，但它理解邏輯語言（即是或否），因此計算機天然就能夠利用二進制表示信息。聰明的人類想到利用二進制來讓計算機明白自然語言，即為所有的字母、數字、符號制定唯一的代碼，每個代碼具有唯一的位數。一些代碼表示字母，一些代碼表示標點符號，一些表示數字，甚至可以表示空格。美國為此制定了信息交換標準代碼，即ASCII碼。ASCII碼是7位編碼，用二進制0000000~1111111表示，需要用一個字節表示（1字節=8位）。
ASCII僅考慮美國人的需要，中文、韓文、日文、德文等字符很難表示，為適配世界上所有語言，1988年幾個主要的計算機公司研究出Unicode編碼。Unicode編碼采用16位，需要2個字節，可以表示65536個字符。
3.UTF-8和Unicode
UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼.它可以用來表示Unicode標準中的任何字符，且其編碼中的第一個字節仍與ASCII兼容
ASCII和Unicode都是字符集,Unicode的特點決定了使用這種編碼存儲會浪費很多資源，這在20世紀初期是無法接受的，因此Unicode中的字符該以何種形式存儲成了問題。人們提出了3中方法：UTF-8，UTF-16，UTF-32。目前Unicode最常用的存儲方式是UTF-8。我們在存儲文本或者瀏覽網頁時，可以看到編碼一般是Unicod（UTF-8），這就是說要采用Unicode字符集并以UTF-8的二進制形式存儲。
參考：1、字符編碼筆記：ASCII，Unicode和UTF-8
2、編碼的奧秘
4、網頁亂碼的形成與解決。
任何形式的亂碼都是網頁所采用的編碼方式與html的實際內容無法匹配，不能正確解讀html的文本。問題定義清楚，解決辦法不言自明。首先看html的以何種編碼存儲，再看瀏覽器會以何種編碼解析，使html的存和取采用同樣的編碼即可。
二、CSS中的顏色表示
1、顏色有幾種寫法？
在css中顏色可以由以下方法指定（分顏色值和顏色名），詳細解釋見參考資料：
- HEX（十六進制）
- RGB（紅綠藍）
- RGBA（A指透明度）
- HSL（色調、飽和度、亮度）
- HSLA（A指透明度）
- 預定義（由顏色名指定）
2、紅色、 綠色、藍色、白色、黑色如何表示？ 透明黑色如何表示？
使用HEX：
#p1 {background-color: #ff0000;} /* red /
#p2 {background-color: #00ff00;} / green /
#p3 {background-color: #0000ff;} / blue /
#p4 {background-color: #ffffff;} / blank /
#p5 {background-color: #000000;} / black /
使用RGB：
#p1 {background-color: rgb(255, 0, 0);} / red /
#p2 {background-color: rgb(0, 255, 0);} / green /
#p3 {background-color: rgb(0, 0, 255);} / blue /
#p4 {background-color: rgb(255,255,255);}/blank/
#p5 {background-color: rgb(0,0,0);}/black/
使用HSL（代表任意值）：
#p1 {background-color: hsl(0, 100%, 50%);} /* red /
#p2 {background-color: hsl(120, 100%, 50%);} / green /
#p3 {background-color: hsl(240, 100%, 50%);} / blue /
#p4 {background-color: hsl(, , 100%);} / blank /
#p5{background-color: hsl(, , 0%);} / black /
透明黑色：
#p2 {background-color: hsl(, , 0%，0.5);} / 透明黑色*/
#p1 {background-color: rgba(0,0,0,0.5);}
3、#ccc的顏色，#eee的顏色？#333的顏色？
#ccc即#cccccc，是一種銀灰色（靠近黑色）,#eee是銀白色（靠近白色），#333是灰黑色。透明黑色
參考資料：CSS Legal Color Values
三、HTML相關
1、<!doctype html>的作用是什么？
DocType是文檔類型（document type）,處于文檔的最前面的位置，當一個頁面確定了正確的doctype，就相當于告訴瀏覽器，該以怎么樣的方式來解釋css，也即是規定了瀏覽器文檔使用哪一種html或者xhtml規范。
<!doctype html>就是告訴瀏覽器頁面按照html5標準編寫。
2、嚴格模式（strict mode）和混雜模式（quirks mode）指什么？
混雜模式就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計、并未嚴格遵循 W3C 標準的網頁而產生的一種頁面渲染模式。
嚴格模式則是遵循W3C標準呈現頁面的模式。
參考資料：
ie和firefox 盒子模型區別以及quirks mode(怪異模式)和strict mode(嚴格模式]
怪異模式（Quirks Mode）對 HTML 頁面的影響
3、meta有什么作用，常見的值有哪些？
<meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
meta標簽屬性分別是http-equiv屬性、name屬性、charset屬性、content屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
name屬性對應的值：
- keywords （關鍵詞）
- description(網站內容描述)
- referrer
- viewport
http-equiv屬性對應的值：
- Content-Type
- X-UA-compatible
參考資料：html的meta總結，html標簽中meta屬性使用介紹
4、下列代碼的作用
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
1、如果支持Google Chrome Frame：GCF，則使用GCF渲染；2、如果系統安裝ie8或以上版本，則使用最高版本ie渲染；3、否則，這個設定可以忽略。
參考資料：關于content=”IE=edge,chrome=1″介紹-讓網頁優先采用Chrome渲染
5、 常見的瀏覽器有哪些，什么內核
（continued）
