一、網頁亂碼的問題是如何產生的？怎樣解決?
- 知識拓展~幾種編碼方式的認識
- ASCII
American Standard Code for Information Interchange，美國信息交換標準代碼）是基于拉丁字母的一套電腦編碼系統。它主要用于顯示現代英語，而其擴展版本EASCII則可以部分支持其他西歐語言，并等同于國際標準ISO/IEC 646。其由128個字符組成，包括大小寫字母、數字0-9、標點符號、非打印字符（換行符、制表符等4個）以及控制字符（退格、響鈴等）組成，每個字符占7位（1字節是8位）。- ISOLatin-1
ISO 8859-1，正式編號為ISO/IEC 8859-1:1998，它是因為對于一些特殊的拉丁字符，比如法文德文里某些字符，ASCII字符集不包括的情況下。于是歐洲人發明了一種8位字符集是ISO 8859-1Latin 1，也簡稱為ISOLatin-1。它對ASCII做了個擴充，對于0-127之間的字符還使用ASCII里的字符不變， 把位于128-255之間的字符表示拉丁字母表中特殊語言字符。- Unicode
Unicode是計算機科學領域里的一項業界標準。它對世界上大部分的文字系統進行了整理、編碼，使得電腦可以用更為簡單的方式來呈現和處理文字。Unicode的實現方式不同于編碼方式。一個字符的Unicode編碼是確定的。但是在實際傳輸過程中，由于不同系統平臺的設計不一定一致，以及出于節省空間的目的，對Unicode編碼的實現方式有所不同。Unicode的實現方式稱為Unicode轉換格式（Unicode Transformation Format，簡稱為UTF）- UTF-8
UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼)，也是一種前綴碼。它可以用來表示Unicode標準中的任何字符，且其編碼中的第一個字節仍與ASCII兼容，這使得原來處理ASCII字符的軟件無須或只須做少部分修改，即可繼續使用。因此，它逐漸成為電子郵件、網頁及其他存儲或發送文字的應用中，優先采用的編碼。
UTF-8使用一至六個字節為每個字符編碼：
1.128個US-ASCII字符只需一個字節編碼（Unicode范圍由U+0000至U+007F）。
2.帶有附加符號的拉丁文、希臘文、西里爾字母、亞美尼亞語、希伯來文、阿拉伯文、敘利亞文及它拿字母則需要兩個字節編碼（Unicode范圍由U+0080至U+07FF）。
3.其他基本多文種平面（BMP）中的字符（這包含了大部分常用字，如大部分的漢字）使用三個字節編碼（Unicode范圍由U+0800至U+FFFF）。
4.其他極少使用的Unicode 輔助平面的字符使用四至六字節編碼（Unicode范圍由U+10000至U+1FFFFF使用四字節，Unicode范圍由U+200000至U+3FFFFFF使用五字節，Unicode范圍由U+4000000至U+7FFFFFFF使用六字節）。- GBK
GBK是由中國制定一套自己的規則，于是用2個字節來表示一個漢字，總共可以覆蓋2萬多個文字。 對于英文，保留和你UTF-8同樣的方式使用一個字節來表示。
- 網頁亂碼的問題是如何產生的？
- 亂碼的根本原因保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的
- 亂碼一般是英文以外的字符才會出現。
- 網頁亂碼的問題怎樣解決？
-
保證編寫代碼的保存方式和瀏覽器解析代碼格式保持一致，要使瀏覽器知道是的代碼文件使用了什么樣的編碼格式。比如，如果你的文件是保存為utf-8格式，那么一定要在html 的
<head>里添加<meta charset="utf-8">，這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了，直接用utf-8去解碼。 同理，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">。
二、顏色有幾種寫法？紅色、 綠色、藍色、白色、黑色如何表示？ 透明黑色如何表示？#ccc的顏色， #eee的顏色？ #333的顏色？
- 顏色有幾種寫法？
寫法如下：
-
命名顏色
- 用法：直接使用顏色名；eg：
p{ color:red;}
- 用法：直接使用顏色名；eg：
-
RGB~~通過組合不同的紅色、綠色、藍色分量來創造顏色
- 用法1：整數型RGB,整數范圍為0~255，eg:
p{ color:rgb(255,255,255);} - 用法2：百分數型RGB,百分數范圍為0~100%，eg:
p{ color:rgb(100%,100%,100%);} - 用法3：十六進制型RGB,eg:
p{ color:#FFFFFF;}
- 用法1：整數型RGB,整數范圍為0~255，eg:
-
RGBA~~在RGB的基礎上增加了alpha通道，用來設置顏色的透明度
- 用法：
p{ background:rgba(r,g,b,a);},其中r，g，b三個參數正整數的取值范圍是0255；百分數值的取值范圍是0100%；a參數的取值范圍是0~1,1表示元素完全不透明，0表示元素完全透明不可見 - HSL~~通過對色調（H），飽和度（S），亮度（L）三個顏色通道的變化以及它們相互之間的疊加得到各式各樣的顏色
- 用法：
p{ background:hsl{h,s,l};},其中，h取整數值，可以為任意整數，其中0（360或-360）表示紅色，60表示黃色，120表示綠色，180表示青色，240表示藍色，300表示洋紅，當值大于360時，實際值等于該值除360之后的余數；s取百分數，范圍為0100%，其中0表示灰度（沒有該顏色），100%表示飽和度最高（該顏色最鮮艷）；**l**取值范圍為0100%，其中0最暗（黑色），100最亮（白色）
- 用法：
-
HSLA~~HSLA是HSL的拓展模式，在HSL的基礎上增加一個透明通道alpha來設置不透明參數
- 用法：
p{ background:hsla{h,s,l,a};}，其中h，s，l參數同HSL一樣，a參數取值0~1，值越大，透明度越低
- 用法：
- 紅色、 綠色、藍色、白色、黑色如何表示？
| 顏色種類 | 直接命名法表示 | RGB整數型表示 | RGB百分數表示 |
|---|---|---|---|
| 紅色 | red | rgb(255,0,0) | rgb(100%,0%,0%) |
| 綠色 | green | rgb(0,128,0) | rgb(0%,50%,0%) |
| 藍色 | blue | rgb(0,0,255) | rgb(0%,0%,100%) |
| 白色 | white | rgb(255,255,255) | rgb(100%,100%,100%) |
| 黑色 | black | rgb(0,0,0) | rgb(0%,0%,0%) |
以下為續表1
| 顏色種類 | RGB十六進制表示 | RGBA整數型表示 | RGBA百分數型表示 |
|---|---|---|---|
| 紅色 | #FF0000 | rgb(255,0,0,1) | rgb(100%,0%,0%,1) |
| 綠色 | #008000 | rgb(0,128,0,1) | rgb(0%,50%,0%,1) |
| 藍色 | #0000FF | rgb(0,0,255,1) | rgb(0%,0%,100%,1) |
| 白色 | #FFFFFF | rgb(255,255,255,1) | rgb(100%,100%,100%,1) |
| 黑色 | #000000 | rgb(0,0,0,1) | rgb(0%,0%,0%,1) |
以下為續表2
| 顏色種類 | HSL表示 | HSLA表示 |
|---|---|---|
| 紅色 | hsl(0,100%,50%) | hsl(0,100%,50%,1) |
| 綠色 | hsl(120,100%,25%) | hsl(120,100%,25%,1) |
| 藍色 | hsl(240,100%,50%） | hsl(240,100%,50%,1） |
| 白色 | hsl(0,0%,100%) | hsl(0,0%,100%,1) |
| 黑色 | hsl(0,0%,0%) | hsl(0,0%,0%,1) |
3 . 透明黑色如何表示？
| 顏色種類 | RGBA表示 | HSLA表示 |
|---|---|---|
| 透明黑色 | rgb(0%,0%,0%,0.6) | hsl(0,0%,0%,0.6) |
以上透明黑色為40%的透明
4 . #ccc的顏色， #eee的顏色？ #333的顏色？
- #ccc表示淺灰色
- #eee表示灰色
- #333表示深灰色
三、<!doctype html> 的作用是什么？
- doctype告訴瀏覽器你的文檔類型是什么，通過使用doctype可以使瀏覽器可以更準確地解釋和顯示頁面；隨著HTML5的到來，HTML變成了一個“活標準，它會隨著技術的發展形成相應的文檔，不再會有版本號,但是會有向后兼容性；
<!doctype html>告訴瀏覽器文檔類型是HTML5，以HTML5的規則來解釋文檔內容?。?！
四、嚴格模式和混雜模式指什么？
- 嚴格模式是指瀏覽器在打開文檔時，按照嚴格的規范來呈現頁面。
- 混雜模式是指瀏覽器在打開文檔時，以一種比較寬松的向后兼容的方式呈現頁面
五、meta 有什么作用，常見的值有哪些?
1 . <meta>元素可提供有關頁面的元信息（meta-information），主要用于描述網頁，比如針對搜索引擎和更新頻度的描述和關鍵詞。它可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。 —— W3School
2 . 常見的屬性、值及常見用法：
- 必要屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| content | some text) | 定義與http-equiv或name屬性相關的元信息 |
- 可選屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| http-equiv | content-type / expire / refresh / set-cookie | 把 content 屬性關聯到 HTTP 頭部 |
| name | author / description / keywords / generator / revised / others | 把 content 屬性關聯到一個名稱 |
| content | some text | 定義用于翻譯 content 屬性值的格式 |
頁面關鍵詞，每個網頁應具有描述該網頁內容的一組唯一的關鍵字。
<meta name="keywords" content="your tags" />頁面描述，每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。
<meta name="description" content="150 words" />-
搜索引擎索引方式，robotterms是一組使用逗號(,)分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。確保正確使用nofollow和noindex屬性值。
<meta name="robots" content="index,follow" />
- **頁面重定向和刷新**：content內的數字代表時間（秒），既多少時間后刷新。如果加url,則會重定向到指定網頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）。
```<meta http-equiv="refresh" content="0;url=" />```
- **其他**
<meta name="author" content="author name" />
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />
- **viewport**：能優化移動瀏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
1. width：寬度（數值 / device-width）（范圍從200 到10,000，默認為980 像素）
2. height：高度（數值 / device-height）（范圍從223 到10,000）
3. initial-scale：初始的縮放比例 （范圍從>0 到10）
4. minimum-scale：允許用戶縮放到的最小比例
5. maximum-scale：允許用戶縮放到的最大比例
6. user-scalable：用戶是否可以手動縮 (no,yes)
**以上內容主要來自：**
1. [W3C](http://www.w3school.com.cn/tags/tag_meta.asp)
2. [segmentfault](https://segmentfault.com/a/1190000002407912)
## 六、<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1>"有什么作用？
- **X-UA-Compatible**是針對 IE8 版本的一個特殊文件頭標記，用于為 IE8 指定不同的頁面渲染模式，對于ie8之外的瀏覽器是不識別的
- **IE=edge**會強制瀏覽器按照最新的標準去渲染
- **chrome=1**將允許站點在使用了谷歌瀏覽器內嵌框架（Chrome Frame）的客戶端渲染，對于沒有使用的，則沒有任何影響。
- [知識拓展](http://www.ido321.com/940.html)
## 七、 常見的瀏覽器有哪些，什么內核？
| 瀏覽器 | 內核 |
| :--------: | :--------: |
|Firefox | Gecko |
|Safari、chrome | Webkit |
|IE | Trident |
|Opera | Gecko（曾經）、WebKit（現在） |
|QQ瀏覽器、360瀏覽器 | Webkit+Trident |
**版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源！?。?！**