HTML、XML、XHTML的區別
- HTML，超文本標記語言，是語法較為松散的、不嚴格的Web語言；
- XML，可擴展標記語言，主要用于存儲數據和結構參考；
- XHTML，可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更嚴格參考。
HTML 語義化
即讓標簽發揮合適和正確的作用，從而根據內容使得頁面結構化。
HTML語義化有以下優勢：
- 清晰的頁面結構：去掉或樣式丟失的時候，也能讓頁面呈現清晰的結構，增強頁面的可讀性。
- 支持更多的設備：屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。 如果你使用的含語義的標記，屏幕閱讀器會根據你的標簽來判斷網頁的內容，而不是一個字母一個字母的拼寫出來。
- 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重。
- 便于團隊開發和維護：在團隊中大家都遵循同一個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。
如何做到html語義化
- 代碼使用中<div>和<span>最沒有語義，因此應該盡量少使用，因此需要按照應用場景來規范使用HTML標簽。
- 熟悉各標簽規范的屬性，給HTML標簽設置必要的屬性。
內容與樣式分離的原則
一個網頁主要包含以下3塊內容：
- html ———— 結構；
- css ———— 表現；
- JavaScript ———— 行為。
html即為內容，css即為樣式，內容與樣式分離也就是html和css的分離。
因此在寫html文件應該把重點放到結構化和內容上面，讓HTML能提現頁面結構或者內容,，然后進行 css 樣式設置，減少 HTML 與 CSS 契合度（即內容與樣式分離） ，寫JS的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）。
分離原則的優點
- 瀏覽器加載網頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當中，頁面體積容量變得更小。
- 網頁修改設計時，效率、省時。根據html標簽內ID或class的標記，到CSS里找到相應的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構和其他部分的樣式。
- 典型的應用就是網頁換膚，使用相同的 html 結構，不同的 css 樣式。
- 更好地被搜索引擎收錄。基于內容與樣式分離的原則，html的語義化就是首要考慮的,網頁中語義化的標簽代碼就會更加適合搜索引擎。
- css樣式的分離，它可以根據不同的瀏覽器，達到顯示效果的統一。保證網頁架構不變形的前提下，放心在不同瀏覽器渲染顯示樣式。
常見的meta標簽
作用
meta常用于定義頁面的說明，關鍵字，最后修改日期，和其它的元數據。這些元數據將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它網絡服務。
meta的屬性組成
- name屬性
- http-equiv屬性
name屬性
name屬性主要用于描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便于搜索引擎抓取。
meta標簽中name屬性語法格式是：
<meta name="參數" content="具體的描述">
name屬性的集中參數以及應用：
- 關鍵字——keywords
用于向搜索引擎告知網頁關鍵字
<meta name="keywords" content="html5,html">
- 網站內容描述——description
用于向搜索引擎說明網站主要內容
<meta name="description" content="隨時隨地發現新鮮事！微博帶你欣賞世界上每一個精彩瞬間，了解每一個幕后故事。分享你想表達的，讓全世界都能聽到你的心聲！" >
- 移動端的窗口——viewport
<meta name="viewport" content="width=device-width, initial-scale=1"&>
- 定義搜索引擎爬蟲的方式————robots
具體參數如下：
none : 搜索引擎將忽略此網頁，等價于noindex，nofollow。
noindex : 搜索引擎不索引此網頁。
nofollow: 搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁。
all : 搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引，等價于index，follow。
index : 搜索引擎索引此網頁。
follow : 搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁。
作者————author
<meta name="author" content="Bootstrap中文網">
網頁制作軟件————generator
完整的meta列表：
meta-tags.md
文檔聲明
<!DOCTYPE html>
HTML文檔需要以文檔類型聲明（英語非正式說法“doctype”）開頭。在瀏覽器中，文檔類型聲明有助于確定渲染模式——特別是是否使用怪異模式（指在計算機領域中，一些網頁瀏覽器為了維持對較舊的網頁設計的向后兼容性，而使用的一種技術，有別于嚴格遵循萬維網聯盟（W3C）與互聯網工程任務組（IETF）標準而設計的“標準模式”。）。
嚴格模式和混雜模式
- 在標準模式中，瀏覽器以其支持的最高標準呈現頁面，；
- 在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。
瀏覽器亂碼的原因
- 碼產生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。
- 亂碼一般是英文以外的字符才會出現。
參考資料：
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
常見的瀏覽器以及內核
| 瀏覽器 | 內核 |
|---|---|
| IE | Trident |
| chrome | WebKit |
| safari | WebKit |
| firefox | Gecko |
| opera | WebKit |
常見的標簽以及應用場景
| 標簽 | 場景 |
|---|---|
| head標簽 | head標簽是頁面的“頭部”， 一般來說，只有6個標簽能放在<head>標簽內：<title>、<meta>、<link>、<style>、<script>、<base> |
| body標簽 | 頁面主體 |
| h1~h6標簽 | 設置不同的標題 |
| p標簽 | 標記一段文字 |
| <br/>標簽 | 換行 |
| <div>標簽 | 定義文檔中的分區或節，分割頁面部分 |
| <ul>標簽 | 無序列表 |
| <ol>標簽 | 有序列表 |
| <form>標簽 | 設置一個表單 |
| <img>標簽 | 設置一個圖像 |
