H5新特性
1.語義化標(biāo)簽：header抗碰、footer价脾、section匾荆、nav、aside粒督、article
2.增強(qiáng)型表單：input 的多個 type
3.新增表單元素：datalist陪竿、keygen禽翼、output
4.新增交互表單屬性：placehoder屠橄、required、min 和 max
5.音頻視頻：audio闰挡、video
6.canvas
7.地理定位
8.拖拽
9.web存儲
10.新事件：onresize锐墙、ondrag、onscroll长酗、onmousewheel溪北、onerror、onplay、onpause
11.WebSocket：單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議
語義化標(biāo)簽
增強(qiáng)型表單
新增表單元素
新增表單屬性
音頻視頻
?HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)之拨，即使用 <audio> 元素茉继。
?HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法
canvas
HTML5 <canvas>?元素用于圖形的繪制，通過腳本?(通常是JavaScript)來完成.
<canvas>?標(biāo)簽只是圖形容器蚀乔，必須使用腳本來繪制圖形烁竭。
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成
地理定位
HTML5 Geolocation API 用于獲得用戶的地理位置吉挣。
鑒于該特性可能侵犯用戶的隱私派撕，除非用戶同意，否則用戶位置信息是不可用的睬魂。
拖拽
拖拽是一種常見的特性终吼，即抓取對象以后拖到另一個位置。在 HTML5 中氯哮，拖放是標(biāo)準(zhǔn)的一部分际跪，任何元素都能夠拖放。
設(shè)置元素為可拖放
為了使元素可拖動蛙粘，把 draggable 屬性設(shè)置為 true?
web存儲
sessionStorage—客戶端數(shù)據(jù)存儲垫卤，只能維持在當(dāng)前會話范圍內(nèi)。
? ? ? ? ? ? ?sessionStorage 方法針對一個 session 進(jìn)行數(shù)據(jù)存儲出牧。當(dāng)用戶關(guān)閉瀏覽器窗口后穴肘，數(shù)據(jù)會被刪除。
localStorage—客戶端數(shù)據(jù)存儲舔痕，能維持在多個會話范圍內(nèi)评抚。
? ? ? ? ? ? ?localStorage 對象存儲的數(shù)據(jù)沒有時間限制。第二天伯复、第二周或下一年之后慨代，數(shù)據(jù)依然可用。
對于大量復(fù)雜數(shù)據(jù)結(jié)構(gòu)啸如，一般使用IndexDB
新事件
css3
1.選擇器
2.背景和邊框
3.文本效果
4.2D/3D 轉(zhuǎn)換
5.動畫侍匙、過渡
6.用戶界面
選擇器
:last-child /* 選擇元素最后一個孩子 */
:first-child /* 選擇元素第一個孩子 */
:nth-child(1) /* 按照第幾個孩子給它設(shè)置樣式 */
:nth-child(even) /* 按照偶數(shù) */
:nth-child(odd) /* 按照奇數(shù) */
:disabled /* 選擇每個禁用的E元素 */
:checked /* 選擇每個被選中的E元素 */
:not(selector) /* 選擇非 selector 元素的每個元素 */
::selection /* 選擇被用戶選取的元素部分 */
偽類選擇器：
:last-child /* 選擇元素最后一個孩子 */
:first-child /* 選擇元素第一個孩子 */
:nth-child(1) /* 按照第幾個孩子給它設(shè)置樣式 */
a:link {color: #FF0000}/* 未訪問的鏈接 */
a:visited {color: #00FF00}/* 已訪問的鏈接 */
a:hover {color: #FF00FF}/* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF}/* 選定的鏈接 */
偽元素：創(chuàng)建了 html 中不存在的元素，用于將特殊的效果添加到某些選擇器
::before {}/* 選擇器在被選元素的前面插入內(nèi)容和定義css叮雳，使用 content 屬性來指定要插入的內(nèi)容想暗。 */
::after {}/* 選擇器在被選元素的后面插入內(nèi)容和定義css，使用 content 屬性來指定要插入的內(nèi)容帘不。 */
:first-letter /* 選擇該元素內(nèi)容的首字母 *
/:first-line /* 選擇該元素內(nèi)容的首行 */
::selection /* 選擇被用戶選取的元素部分 */
背景和邊框
背景：
background-size：規(guī)定背景圖片的尺寸（cover：填充说莫；100% 100%：拉伸）
background-origin：規(guī)定背景圖片的定位區(qū)域
對于 background-origin 屬性，有如下屬性
背景圖片可以放置于 content-box寞焙、padding-box 或 border-box 區(qū)域
邊框：
border-radius：圓角
box-shadow / text-shadow：陰影
border-image：邊框圖片
文本效果
2D/3D 轉(zhuǎn)換
2D 轉(zhuǎn)換（transform）
1.translate()：元素從其當(dāng)前位置移動储狭，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)互婿。 transform: translate(50px, 100px);
2.rotate()：元素順時針旋轉(zhuǎn)給定的角度。若為負(fù)值辽狈，元素將逆時針旋轉(zhuǎn)慈参。transform: rotate(30deg);
3.scale()：元素的尺寸會增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)刮萌，也可以一個值（寬高）懂牧。transform: scale(2,4);
4.skew()：元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)尊勿。transform: skew(30deg, 20deg);
5.matrix()： 把所有 2D 轉(zhuǎn)換方法組合在一起僧凤，需要六個參數(shù)，包含數(shù)學(xué)函數(shù)元扔，允許您：旋轉(zhuǎn)躯保、縮放、移動以及傾斜元素澎语。6.transform:matrix(0.866,0.5,-0.5,0.866,0,0);
3D 轉(zhuǎn)換
1.rotateX()：元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)途事。transform: rotateX(120deg);
2.rotateY()：元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform: rotateY(130deg);
3.perspective：規(guī)定 3D 元素的透視效果
動畫擅羞、過渡
過渡效果（transition）尸变，使頁面變化更平滑，以下參數(shù)可直接寫在 transition 后面
1.transition-property ：執(zhí)行動畫對應(yīng)的屬性减俏，例如 color召烂，background 等，可以使用 all 來指定所有的屬性娃承。
2.transition-duration：過渡動畫的一個持續(xù)時間奏夫。
3.transition-timing-function：在延續(xù)時間段，動畫變化的速率历筝，常見的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
4.transition-delay：延遲多久后開始動畫
動畫（animation）
先定義 @keyframes 規(guī)則（0%酗昼，100% | from，to）
然后定義 animation梳猪，以下參數(shù)可直接寫在 animation 后面
1.animation-name: 定義動畫名稱
2.animation-duration: 指定元素播放動畫所持續(xù)的時間長
3.animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,?,?,?)： 指元素根據(jù)時間的推進(jìn)來改變屬性值的變換速率麻削，即動畫的播放方式
4.animation-delay: 指定元素動畫開始時間
5.animation-iteration-count: infinite | number：指定元素播放動畫的循環(huán)次數(shù)
6.animation-direction: normal | alternate： 指定元素動畫播放的方向，其只有兩個值春弥，默認(rèn)值為normal呛哟，如果設(shè)置為 normal 時，動畫的每次循環(huán)都是向前播放惕稻；另一個值是 alternate竖共，規(guī)定動畫在下一周期逆向地播放（來去播放）
7.animation-play-state: running | paused ：控制元素動畫的播放狀態(tài)
用戶界面
CSS3中蝙叛，新的用戶界面特性包括重設(shè)元素尺寸俺祠、盒尺寸以及輪廓等
resize
box-sizing
outline-offset
resize 屬性規(guī)定是否可由用戶調(diào)整元素尺寸。如果希望此屬性生效，需要設(shè)置元素的 overflow 屬性蜘渣，值可以是 auto淌铐、hidden 或 scroll
box-sizing 屬性可設(shè)置的值有 content-box、border-box 和 inherit
content-box 是W3C的標(biāo)準(zhǔn)盒模型蔫缸，元素寬度 = 內(nèi)容寬度 + padding + border：意思是 padding 和 border 會增加元素的寬度腿准，以至于實際上的 width 大于原始設(shè)定的 width
border-box 是ie的怪異盒模型，元素寬度 = 設(shè)定的寬度拾碌，已經(jīng)將 padding 和 border 包括進(jìn)去了吐葱，比如有時候在元素基礎(chǔ)上添加內(nèi)距 padding 或 border 會將布局撐破，但是使用 border-box 就可以輕松完成
inherit：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值
outline-offset 屬性對輪廓進(jìn)行偏移校翔，并在超出邊框邊緣的位置繪制輪廓
CSS 兼容內(nèi)核
-moz-：代表FireFox瀏覽器私有屬性
-ms-：代表IE瀏覽器私有屬性
-webkit-：代表safari弟跑、chrome瀏覽器私有屬性
-o-：代表opera瀏覽器私有屬性
