HTML5介紹
H5的特點
1）更簡潔、但是在實際開發中要注意書寫規范，利於后期維護
2）標簽的語義化
擴展：語義化的重要性：
① 當頁面加載失敗的時候，還能夠呈現出清晰的結構
② 有利於SEO優化，利於被搜索引擎收錄（即便於網絡爬蟲的識別）
③ 在項目開發及維護時，語義化的也很大程度上降低開發難度，節省成本
和新結構標簽的區別和意義
3）語法更寬松
4）多設備跨平台
5）自適應網頁設計
4、H5新增加的語義化標簽
<header> 頭標簽
<nav>導航標簽
<section> 章節、頁眉、欄目
<article> 文章標簽
<aside> 側邊欄導航
<footer> 頁腳
1）section
表示內容區塊,一般入章節、頁眉、頁腳或者頁面中的其他部分。可以與h1-h6等元素結合起來使用，標示文檔的結構
2）article
表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或者報紙中的一篇文章
3）aside
Aside表示acticle元素的內容之外的，與article元素的內容相關的輔助信息。
4）header
表示頁面中一個內容區塊或者整個頁面的標題
5）footer
表示整個頁面或者頁面中的一個內容區塊的腳注。一般來說，他會包含創作者的姓名、創作日期以及創作者聯系信息。
6）nav
表示頁面中導航鏈接的部分、① 傳統的導航條 ② 騰訊新聞 ③側邊欄導航 ④內業導航 ：百度百科 ⑤翻頁操作
7）figure
表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。規定獨立的流內容（圖像、圖表、照片、代碼等等）。使用figcaption元素為figure元素添加標題。
◆ figure 是一種元素的組合，帶有可選 標題。用來表示網頁上一塊獨立的內容。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。
◆ figcaption 表示 figure 的標題。從屬於 figure ， 並且， figure 中只能放置一個 figcaption
8）video
定義視頻，比如電影片段或其他視頻流
<video src="路徑地址" controls>您的瀏覽器不支持video</video>
video允許有多個source元素，source元素可以連接不同的視頻文件，瀏覽器將使用第一個可識別的格式進行播放
9）embed
embed標簽用於定義嵌套的內容，包括各種媒體，格式可以是midi、wav、AIFF、AU、MP3、Flash等
10）audio
定義音頻，比如音樂或其他音頻流
H5新增加的表單元素
1）email
專門用來輸入email地址的文本框,如果該文本框中內容不是email地址格式的，則不允許提交。但它不檢查email地址是否存在。提交時可以為空，除非加上了required屬性。 具有multiple屬性，它允許在該文本框中輸入一串以逗號分隔的email地址。
2）url
url：專門用來輸入URL地址的文本框。如果該文本框中內容不是URL地址格式的，則不允許提交。
3）number
Number：專門用來輸入數字的文本框。在提交時會檢查其中的內容是否為數字，具有min、max、step的屬性。
4）range
是用來只允話輸入一段范圍內數值的文本框，它具有min屬性與max屬性，及step屬性，可以指定每次拖動的步幅。
min 最小值
max 最大值
step 數字間隔
5）date pickers (date, month, week, time, datetime, datetime-local)
擁有多個可供選取日期和時間的新輸入類型。 date - 選取日、月、年 Internet Explorer 或 Firefox 不支持 "month" 元素。
month - 選取月、年 Internet Explorer 或 Firefox 不支持 "month" 元素。
week - 選取周和年Internet Explorer 或 Firefox 不支持 "month" 元素。
time - 選取時間（小時和分鍾）Internet Explorer 或 Firefox 不支持 "month" 元素。
datetime - 選取時間、日、月、年（UTC 時間）Internet Explorer、Firefox 或者 Chrome 不支持 "datetime 元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。
datetime-local - 選取時間、日、月、年（本地時間）Internet Explorer 或 Firefox 不支持 "month" 元素。
H5新增加的表單驗證
1）placeholder
placeholder屬性：文本框處於未輸入狀態時文本框中顯示的輸入提示。
2）autofocus
autofocus屬性：給文本框、選擇框、或者按鈕控件加上該屬性，當打開頁面時，該控件自動獲得國標焦點，一個頁面只能有一個。
3）required
required屬性：驗證輸入不能為空
4） list
list屬性：結合datalist元素使用
5） autocomplete
autocomplete屬性：注：表單元素要必須有name屬性。輸入富足和所用的自動完成功能，是一個節省輸入時間，同時也十分方便的功能。
HTML5增加了大量在提交時對表單及表單元素內容有效性驗證的功能。
6）自動驗證
min、max、step：為包含數字或日期的 input 類型規定限定（約束）
max: 最大值
min: 最小值
step: 數字間隔
盒子模型
CSS盒子模型：CSS-標准盒模型 & 怪異盒模型
CSS中盒子模型是分為兩種:: W3C標准 和 IE標准盒子模型。
大多數瀏覽器采用W3C標准模型，而IE中則采用Microsoft自己的標准。
怪異模式是“部分瀏覽器在支持W3C標准的同時還保留了原來的解析模式”，怪異模式主要表現在IE內核的瀏覽器。
DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。
當不對doctype進行定義時，會觸發怪異模式。
在標准模式下，一個塊的總寬度 = width + margin(左右) + padding(左右) + border(左右)
在怪異模式下，一個塊的總寬度 = width + margin(左右)（即width已經包含了padding和border值）