HTML、XML、XHTML有什么區別？
- HTML全稱是Hyper Text Markup Language（超文本標記語言），是通用的web語言，上手方便，但它語法結構松散、很多地方模糊不清。具有代碼不規范與臃腫、數據與表現混雜等問題。
- XML全稱是Extensible Markup Language(可擴展標記語言)，用于定義其他語言的一種元語言，前身為SGML。它提供了一種基本結構和其它標記語言必須遵守的一組規則。語言結構復雜，語法嚴謹，上手較困難，后多用于網絡數據的轉換和描述。
- XHTML全稱是 Extensible Hyper Text Markup Language（可擴展超文本標記語言)， 由XML規則改進而來的HTML，主要內容與HTML相差不大，但語法方面更加嚴格。
怎樣理解HTML 語義化？
HTML 語義化是什么？
HTML中的標簽，用以描述內容的含義或意義，即語義。如，我們一看到h1 標簽，就明白h1 中包括的內容是一級標題，遇到p 標記標簽，就明白標簽內的是段落，這些含義不會隨著樣式的改變而改變。
HTML語義化，讓HTML 只負責網頁的內容，把所有的樣式交給CSS。語義化的好處
- 去掉或丟失樣式時也能呈現清晰的頁面結構
- 方便其他設備解析，如屏幕閱讀器，盲人閱讀器和移動設備等
- 對搜索引擎和爬蟲更加友好
- 便于團隊開發和維護
- 應注意的問題---選擇合適的標簽、使用合理的代碼
- 盡量少使用無語義`<div>`和`<span>`
- 不要使用純樣式標簽，如b、font、u等，改用CSS 設置
- 需要強調的文本可以包含在`<strong>`和`<em>`標簽中
怎樣理解內容與樣式分離的原則？
- 寫HTML 時先不管樣式，重點放在HTML 語義化和結構上，讓HTML 能體現頁面結構或者內容，之后再去寫樣式
- HTML 內不允許出現屬性樣式，盡量不要出現行內樣式，可用類選擇器和id 選擇器進行控制
有哪些常見的meta標簽？
<meta>標簽提供關于HTML文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。它可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。 ——W3School
| 屬性 | 值 | 描述 |
|---|---|---|
| http-equiv | content-type/expires/refresh/set-cookie/windows-target | 把content屬性關聯到HTTP頭部。 |
| name | author/description/keywords/generator/revised/viewport | 把 content 屬性關聯到一個名稱。 |
| content | some text | 定義用于翻譯 content 屬性值的格式。 |
- content-type
<meta http-equiv="content-language" content="zh-cn">```
用以說明主頁制作所使用的文字和語言
- expires
```<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT">```
用于設定網頁的到期時間，一旦過期則必須到服務器上重新調用，注意要使用GMT時間格式
- refresh
`<meta http-equiv="refresh" content="n,url=http://yourlink">`
讓網頁在指定的時間n內跳轉到鏈接頁面
- pragma
`<meta http-equiv="pragma" content="no-cache">`
用于設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定后一旦離開網頁就無法從Cache中再調出
- set-cookie
`<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">`
用于cookie設定，如果網頁過期，存盤的cookie將被刪除。需要注意的也是必須使用GMT時間格式
- windows-target
`<meta name="windows-target" content="_top">`
強制頁面在當前窗口中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用
- X-UA-Compatible
`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">`
優先使用ie最新版本和chrome
- viewport
`<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">`
用于優化移動瀏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。
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)
- keywords
`<meta name="keywords" content="your tags">`
為搜索引擎提供參考，網頁內容所包含的核心搜索關鍵詞
- description
`<meta name="description" >`
為搜索引擎提供參考，網頁的描述信息;搜索引擎采納后，作為搜索結果中的頁面摘要(snippet)顯示
- robots
`<meta name="robots" content="index,nofollow">`
用于設定搜索引擎檢索方式
1. all：文件將被檢索，且頁面上的鏈接可以被查詢；
2. none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
3. index：文件將被檢索；
4. follow：頁面上的鏈接可以被查詢；
- noindex：文件將不被檢索；
- nofollow：頁面上的鏈接不可以被查詢。
參考文檔
[常用meta整理](https://segmentfault.com/a/1190000002407912)
[META標簽](http://baike.baidu.com/view/740572.htm)
#### 文檔聲明的作用？標準模式與混雜模式指什么？<！doctyte html> 的作用？
1. 文檔聲明的作用
文檔聲明即DOCTYPE ，全稱為Document type，用來說明在web設計中你用的是什么版本的文檔類型，可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。該標簽決定了瀏覽器選擇何種協議解析你的文檔，位于HTML 文檔的第一行。
>參考
[標點符--網頁的DOCTYPE聲明的作用](https://www.biaodianfu.com/doctype.html)
[W3C--DOCTYPE](http://www.w3school.com.cn/tags/tag_doctype.asp)
- 標準模式與混雜模式指什么
瀏覽器解析文檔的兩種方式
標準（非怪異）模式
混雜（怪異）模式
- 標準模式
瀏覽器根據W3C標準呈現頁面。
- 混雜模式
以兼容模式呈現頁面,模擬老式瀏覽器的行為，防止站點無法工作。這種模式并未嚴格遵循W3C 標準。DOCTYPE 不存在或者形式不正確會導致頁面以混雜模式呈現，這種行為會導致錯誤或不可預測，應盡量避免。
- 想了解更多內容請查閱以下網站
- [怪異模式（Quirks Mode）對 HTML 頁面的影響](https://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)
- [Activating Browser Modes with Doctype](https://hsivonen.fi/doctype/)
- <！doctyte html> 的作用
用于聲明這是個HTML 5 文檔
#### 瀏覽器亂碼的原因是什么？如何解決？
造成HTML 網頁亂碼原因主要是HTML 源代碼的編碼方式和瀏覽器解碼方式產生沖突導致的。
** 解決方式**
清楚自己的IDE 是用何種編碼方式保存THML 文檔的，接著在HTML `<head>`里面添加`<meta charset="你的編碼方式">`
想了解更多請查閱：[關于瀏覽器亂碼](http://ruoyu.jirengu.com/post/%E5%85%B3%E4%BA%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B9%B1%E7%A0%81)
#### 常見的瀏覽器有哪些？分別是什么內核？
|瀏覽器|內核|
|----|-------|
|IE8-IE9-IE10|Trident 4.0-Trident 5.0-Trident 6.0|
|Firefox|Gecko|
|Safari|Webkit|
|Google Chrome|Chromium（基于WebKit內核開發的一個分支），Blink（28及往后版本）|
|Opera|Chromium，Blink（15及往后版本）|
|獵豹安全|1.0-4.2版本為Trident+Webkit，4.3版本為Trident+Blink；|
|360安全|1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink；|
|360極速|7.5之前為Trident+Webkit,7.5為Trident+Blink；|
|傲游|1.x、2.x為IE內核，3.x為IE與Webkit雙核|
|搜狗高速|1.x為Trident，2.0及以后版本為Trident+Webkit；|
參考：[學習也休閑--常見的瀏覽器內核](http://www.studyofnet.com/news/625.html)