HTML5新增的語(yǔ)義化標(biāo)簽
之前布局，基本用div來(lái)做，div對(duì)于搜索引擎來(lái)說(shuō)，是沒(méi)有語(yǔ)義的；
<header>：頭部標(biāo)簽
<nav>：導(dǎo)航標(biāo)簽
<article>：內(nèi)容標(biāo)簽
<section>：定義文檔某個(gè)位置
<aside>：側(cè)邊欄標(biāo)簽
<footer>：尾部標(biāo)簽
注意：
這種語(yǔ)義化標(biāo)簽主要是針對(duì)搜索引擎的；
這些新標(biāo)簽，頁(yè)面中可以使用多次
在IE9中，需要把這些元素轉(zhuǎn)換為塊級(jí)元素
移動(dòng)端更喜歡使用這些標(biāo)簽
HTML5還增加了許多標(biāo)簽

HTML5新增的多媒體標(biāo)簽
使用他們可以很方便的在頁(yè)面中嵌入音頻和視頻，而不再使用flash和其他瀏覽器插件，主要包含兩個(gè)：

HTML5新增的input表單
驗(yàn)證的時(shí)候必須添加form表單域，點(diǎn)擊提交按鈕就可以驗(yàn)證表單；
type="email"：限制用戶輸入必須為Email類型
type="url"：限制用戶輸入必須為URL類型
type="date"：限制用戶輸入必須為日期類型
type="time"：限制用戶輸入必須為時(shí)間類型
type="month"：限制用戶輸入必須為月類型
type="week"：限制用戶輸入必須為周類型
type="number"：限制用戶輸入必須為數(shù)字類型
type="tel"：手機(jī)號(hào)碼
type="search"：搜索框
type="color"：生成一個(gè)顏色選擇表單

HTML5新增的input表單屬性
required="required"：必填，不能為空
placeholder=""：提示文本，存在默認(rèn)值時(shí)不顯示
修改顏色：
input::placehoder { color: pink;}
autofocus="autofocus"：自動(dòng)聚焦
autocomplete="off/on"：當(dāng)用戶在字段開(kāi)始輸入時(shí)，瀏覽器基于之前輸入過(guò)的值，應(yīng)該顯示出在字段中填寫的選項(xiàng)。默認(rèn)已打開(kāi)，需要放在表單內(nèi)，同時(shí)加上name屬性，同時(shí)成功提交
multiple="multiple"：可以多選文件提交

CSS3現(xiàn)狀
新增的CSS3特性有兼容性問(wèn)題，ie9+才支持
移動(dòng)端支持優(yōu)于PC端
不斷改進(jìn)中
應(yīng)用相對(duì)廣泛
現(xiàn)階段主要學(xué)習(xí)：新增選擇器，盒子模型以及其它特性

新增選擇器

屬性選擇器（類選擇器，屬性選擇器，偽類選擇器，權(quán)重都是0.0.1.0）
屬性選擇器可以根據(jù)元素特定屬性來(lái)選擇元素，這樣可以不借助類或者id選擇器。
E[att]：選擇具有att屬性的E元素
E[att="val"]：選擇具有att屬性且屬性值等于val的E元素
E[att^="val"]：選擇具有att屬性且屬性值以val開(kāi)頭的E元素
E[att$="val"]：選擇具有att屬性且屬性值以val結(jié)尾的E元素
E[att*="val"]：選擇具有att屬性且屬性值含有val的E元素

結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來(lái)選擇元素，常用語(yǔ)根據(jù)父級(jí)選擇器里面的子元素
E :first-child：匹配父元素中的第一個(gè)子元素E
ul li:frist-chlid（權(quán)重0.0.1.2）
E :last-child：匹配父元素的最后一個(gè)E元素
E :nth-child(n)：匹配父元素中的第n個(gè)子元素E，n可以是數(shù)字（從1開(kāi)始），關(guān)鍵字(even偶數(shù)/odd奇數(shù))和公式（里面只能是n字母，從0開(kāi)始，3n，2n，n+1（第一個(gè)后面），-n+5（前5個(gè)））
E :first-of-type：指定類型E的第一個(gè)
E :last-of-type：指定類型E的最后一個(gè)
E :nth-of-type(n)：指定類型E的第n個(gè)
區(qū)別：
nth-child會(huì)把所有的子元素排序號(hào)，先看序號(hào)，之后看前面的E，全部匹配才能選擇出來(lái)；
nth-type-of會(huì)把指定元素的盒子排列序號(hào)；

偽元素選擇器
利用CSS創(chuàng)建新標(biāo)簽元素，而不需要HTML標(biāo)簽，簡(jiǎn)化HTML結(jié)構(gòu)（遮罩層，等）
::before：在元素內(nèi)部前面插入內(nèi)容
::after：在元素內(nèi)部后面插入元素
注意：
before和after創(chuàng)建一個(gè)元素，但是屬于行內(nèi)元素
新創(chuàng)建的這個(gè)元素在文檔樹(shù)中找不到，所以稱為偽元素
語(yǔ)法element::before{}
before和after必須有content屬性
before在父元素內(nèi)容的前面創(chuàng)建元素，after在父元素內(nèi)容后面插入元素
偽元素選擇器和標(biāo)簽選擇器一樣，權(quán)重為0.0.0.1

CSS3盒子模型
box-sizing: content-box/boder-box;
content-box：盒子實(shí)際大小等于原大小+padding+border（默認(rèn)）
boder-box：盒子實(shí)際大小等于指定大小

圖片模糊
filter: 函數(shù)();濾鏡
eg: filter: blur(5px);：blur模糊處理，數(shù)值越大越模糊；

calc函數(shù)（計(jì)算）
width: calc(100%-80px);'+-*/'：可計(jì)算

過(guò)渡：
不使用flash，JS，經(jīng)常和:hover一起使用，
transition:要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始;
屬性：想要變化的CSS屬性，寬高，背景顏色，內(nèi)外邊距等，所有：all；
花費(fèi)時(shí)間：單位秒
運(yùn)動(dòng)曲線：默認(rèn)ease（漸慢），liner（勻速），ease-in（加速），ease-out（加速），ease-in-out（先加速后減速）（可以忽略）
何時(shí)開(kāi)始：延遲觸發(fā)，默認(rèn)0s（可忽略）
誰(shuí)做過(guò)渡給誰(shuí)加