H5新特性總結(jié)
html5總的來說比html4多了八個新特性总棵，但其不支持ie8及ie8以下版本的瀏覽器
一漓骚、語義標(biāo)簽
二硝清、增強(qiáng)型表單
三蕾哟、視頻和音頻
四覆积、Canvas繪圖
五搂誉、地理定位
六徐紧、拖放API
七、WebWorker
八炭懊。本地存儲
在HTML5中新加的video和radio,也對應(yīng)有方法并级、屬性和事件
以video標(biāo)簽為例：
<video id='video' controls = “controls”>
為兼容不同格式的視頻
`
<video>
<source src=”1.mp4” type=”video/mp4” />
<source src = “2.ogg” type=”video/ogg” />
<source src=”3.webm” type=”video/webm” />
</video>`
2.localStorage/sessionStorage
localStorage.setItem("變量名", "要存的東西")
// 本地長時間儲存 setItem設(shè)置 ("變量名"，"要存的東西")
console.log(localStorage.getItem("變量名"));
sessionStorages.setItem("變量名", "要存的東西")
// 本地短時間儲存 setItem設(shè)置 ("變量名"侮腹，"要存的東西")關(guān)閉網(wǎng)頁就會消失
console.log(sessionStorage.getItem("變量名"));
3語義化標(biāo)簽
nav構(gòu)建導(dǎo)航組件嘲碧。、
header標(biāo)簽 一般是頭部標(biāo)簽
main 標(biāo)簽 一般是主要部分
footer 尾部標(biāo)簽 主要處理尾部
aside 標(biāo)簽 側(cè)邊欄
4input表單屬性
<input type="color">選主要用于選取顏色<br>
<input type="date" name="" id=""> 從一個日期選擇器選擇一個日期<br>
<input type="time" name="" id=""> 時間<br>
<input type="email"> 郵箱<br>
<input type="number"> 選擇一個月份<br>
<input type="url">地址<br>
5
css3新特性
過度
div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
div:hover {
width: 200px;
height: 100px;
transition: linear 0.4s ease 0;
/* transition： CSS屬性父阻，花費(fèi)時間愈涩，效果曲線(默認(rèn)ease)，延遲時間(默認(rèn)0)復(fù)制代碼 */
border: 1px solid #000;
}
動畫語義化標(biāo)簽：header加矛、footer履婉、section、nav斟览、aside毁腿、article
增強(qiáng)型表單：input 的多個 type
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
新增表單元素：datalist、keygen趣惠、output
output:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
datalist:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
keygen:
<form action="demo_keygen.php" method="get">
用戶名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<form action="demo_keygen.asp" method="get">
用戶名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
```Worker語法("文件路徑")這個文用來處理比較耗費(fèi)時間的
新增表單屬性：placehoder狸棍、min 和 max
音頻視頻：audio、video canvas
##### audio 屬性
src:文件路徑
autoplay:自動播放
loop:循環(huán)
controls:控制條
muted:靜音
preload:預(yù)加載（當(dāng)使用autoplay時味悄，preload自動失效）
<audio controls src="http://www.w3school.com.cn/i/song.mp3">
</audio>
#### video 屬性
src:文件路徑
autoplay:自動播放
loop:循環(huán)
controls:控制條
muted:靜音
preload:預(yù)加載（當(dāng)使用autoplay時草戈，preload自動失效）
width:寬度
height:高度
poster:海報(bào)
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>
</video>
**拖拽**
H5之前沒有拖放API，可以使用“鼠標(biāo)按下 + 鼠標(biāo)移動”兩個事件來模擬用戶拖動事件侍瑟。
H5之后專門提供了七個鼠標(biāo)拖動相關(guān)事件句柄：
```csharp
拖動的源對象(source)可能觸發(fā)的事件：
dragstart：拖動開始
drag：拖動中
dragend：拖動結(jié)束
拖動的目標(biāo)對象(target)可能觸發(fā)的事件：
dragenter：拖動進(jìn)入
dragover：拖動懸停
drop：松手釋放
dragleave：拖動離開
注意：拖放API事件句柄中所有的事件對象都有一個dataTransfer屬性（數(shù)據(jù)運(yùn)輸對象）唐片，用于在源對象和目標(biāo)對象間傳遞數(shù)據(jù)丙猬。
源對象：event.dataTransfer.setData(key, value)
目標(biāo)對象：var value = event.dataTransfer.getData(key)
本地存儲：localStorage - 沒有時間限制的數(shù)據(jù)存儲；sessionStorage - 針對一個 session 的數(shù)據(jù)存儲费韭，當(dāng)用戶關(guān)閉瀏覽器窗口后茧球，數(shù)據(jù)會被刪除
(1)window.sessionStorage：類數(shù)組對象，通過key=>value對存儲字符串?dāng)?shù)據(jù)——會話級存儲
特點(diǎn)：一次性儲存星持，數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
添加數(shù)據(jù)：sessionStorage['key'] = 'value'
修改數(shù)據(jù)：sessionStorage['key'] = 'newValue'
刪除數(shù)據(jù)：delete sessionStorage['key']
獲得數(shù)據(jù)：var v = sessionStorage['key']
(2)window.localStorage：類數(shù)組對象抢埋，通過key=>value對存儲字符串?dāng)?shù)據(jù)——本地/跨會話級/永久存儲
長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
特點(diǎn):數(shù)據(jù)永久存儲督暂，沒有時間限制揪垄；大小限制5M(夠用了)；只存儲字符串
添加數(shù)據(jù)：localStorage['key'] = 'value'
修改數(shù)據(jù)：localStorage['key'] = 'newValue'
刪除數(shù)據(jù)：delete localStorage['key']
獲得數(shù)據(jù)：var v =localStorage['key']
媒體查詢：
響應(yīng)式布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/567.css" media="screen and (max-width:567px)">
<link rel="stylesheet" href="./css/568.css" media="screen and (min-width:568px)">
<link rel="stylesheet" href="./css/768.css" media="screen and (min-width:768px)">
<link rel="stylesheet" href="./css/992.css" media="screen and (min-width:992px)">
<link rel="stylesheet" href="./css/1200.css" media="screen and (min-width:1200px)">
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
width = device-width：寬度等于當(dāng)前設(shè)備的寬度
initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0）
minimum-scale：允許用戶縮放到的最小比例（默認(rèn)設(shè)置為1.0）
maximum-scale：允許用戶縮放到的最大比例（默認(rèn)設(shè)置為1.0）
user-scalable：用戶是否可以手動縮放（默認(rèn)設(shè)置為no逻翁，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁面）
超小屏幕（手機(jī)饥努，小于 768px）
@media (max-width: 768px) { ... }
小屏幕（平板，大于等于 768px）
@media (min-width: 768px) and (max-width: 768px) { ... }
中等屏幕（桌面顯示器八回，大于等于 992px）
@media (min-width: 992px) and (max-width: 992px) { ... }
大屏幕（大桌面顯示器酷愧，大于等于 1200px）@media (max-width: 768px) {
//手機(jī)移動端分辨率
}
@media (min-width: 768px) and (max-width: 992px) {
//PAD中屏分辨率
}
CSS3選擇器：
**“:first-child**”選擇器表示的是選擇父元素的第一個子元素的元素E。
**:last-child**”選擇器選擇的是元素的最后一個子元素
**“:nth-child(n**)”選擇器用來定位某個父元素的一個或多個特定的子元素缠诅。
**“:nth-last-child(n)**”從某父元素的最后一個子元 素開始計(jì)算溶浴，來選擇特定的元素。
**“:first-of-type**”選擇器類似于“:first-child”選擇器滴铅，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素戳葵。
**“:last-of-type**”選擇器 他選擇是父元素下的某個類型的最后一個子元素
**“:nth-of-type(n)**”選擇器和“:它只計(jì)算父元素中指定的某種類型的子元素就乓。
**“:nth-last-of-type(n)**”選擇父元素中指定的某種子元素類型汉匙，但它的起始方向是從最后一個子元素開始
**“:only-child”**選擇器匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素生蚁。
**“:only-of-type**”選擇器用來選擇一個元素是它的父元素的唯一一個相同類型的子元素噩翠。
**:checked**選擇器
圓角效果：
border-radius:10px; /* 所有角都使用半徑為10px的圓角
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角邦投、右下角和左下角伤锚，順時針 */
陰影：
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];
陰影顏色：默認(rèn)黑色; 投影方式：inset時為內(nèi)部陰影，省略為外部陰影
為邊框應(yīng)用圖片：
border-image:url(borderimg.png) 70 repeat
rgba顏色：
background-color:rgba(100,120,60,0.5); 最后的0.5代碼透明度
漸變色彩：
CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)志衣。
線性漸變：linear-gradient(to left, red, orange); to left為漸變方向從右到左屯援；to top;to right;to bottom;to top left;to top right 顏色可多個分別為從起始到終止的色彩。
溢出省略：
text-overflow:ellipsis;溢出文字以省略號出現(xiàn)念脯，需要下面三個屬性同時使用
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
-
文本陰影text-shadow：
text-shadow: X-Offset(水平偏移) Y-Offset(垂直偏移) blur（陰影的模糊程度狞洋，其值不能是負(fù)值，如果值越大绿店，陰影越模糊吉懊，反之陰影越清晰） color;
background-origin設(shè)置元素背景圖片的原始起始位置：參數(shù)分別表示從邊框庐橙、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景借嗽。no-clip表示不裁切态鳖，和參數(shù)border-box顯示同樣的效果。
background-size設(shè)置背景圖片的大小
彈性布局：
Flexbox 是 flexible box 的簡稱（注：意思是“靈活的盒子容器”）恶导，是 CSS3 引入的新的布局模式浆竭。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設(shè)備下可預(yù)測地展現(xiàn)出來惨寿。
它之所以被稱為 Flexbox 兆蕉，是因?yàn)樗軌驍U(kuò)展和收縮 flex 容器內(nèi)的元素，以最大限度地填充可用空間缤沦。與以前布局方式（如 table 布局和浮動元素內(nèi)嵌塊元素）相比虎韵，F(xiàn)lexbox 是一個更強(qiáng)大的方式：
在不同方向排列元素
重新排列元素的顯示順序
更改元素的對齊方式
動態(tài)地將元素裝入容器
## ```apl
display: flex;
flex-direction: row;
/*彈性盒方向：主軸方向X軸 */
flex-direction: column;
/* 彈性盒方向：主軸Y軸方向 */
flex-direction: row-reverse;
/* 彈性盒方向：主軸方向X軸 倒敘 */
flex-direction: column-reverse;
>/* 彈性盒方向：主軸Y軸方向 倒敘*/
>flex-wrap: nowrap;
/* 彈性盒換行：不換行 默認(rèn)的 */
flex-wrap: wrap;
/* 彈性盒換行：換行 */
//設(shè)置主軸方向子元素排列順序
justify-content: flex-start;
/* 從左到右排列 默認(rèn)的 */
justify-content: flex-end;
/* 從尾部開始排列 不影響子元素排列順序 */
justify-content: center;
/* 從主軸居中對齊 */
justify-content: space-around;
/* 平分主軸剩余空間 */
justify-content: space-between;
/* 兩邊對齊，中間評分剩余空間 */
justify-content: space-evenly;
/* 間距相同 */
## # ```
-
animation動畫
一：animation是一個復(fù)合屬性缸废，一共有8個參數(shù);
一般是由@keyframes先定義動畫包蓝，然后animation使用動畫。
1.animation-name:動畫名稱企量，由@keyframes定義的
2.animation-duration：動畫的持續(xù)時間
3.animation-timing-function：動畫的過渡類型
4.animation-delay：動畫的延遲時間
5.animation-iteration-count：動畫的循環(huán)次數(shù)
6.animation-direction：設(shè)置動畫在循環(huán)中是否反向運(yùn)動
7.animation-fill-mode：設(shè)置動畫時間之外的狀態(tài)
8.animattion-play-state:設(shè)置動畫的狀態(tài)测萎。 #
動畫運(yùn)動曲線：
animation-timing-function 屬性規(guī)定動畫的速度曲線。
animation-timing-function 屬性可接受以下值：
ease - 指定從慢速開始届巩，然后加快硅瞧，然后緩慢結(jié)束的動畫（默認(rèn)）
linear - 規(guī)定從開始到結(jié)束的速度相同的動畫
ease-in - 規(guī)定慢速開始的動畫
ease-out - 規(guī)定慢速結(jié)束的動畫
ease-in-out - 指定開始和結(jié)束較慢的動畫
代碼如下：
```
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
css2動畫轉(zhuǎn)換屬性：
2D 轉(zhuǎn)換 transform
描述：對元素進(jìn)行移動，縮放恕汇，轉(zhuǎn)動腕唧，拉長或拉伸。配合過渡和動畫知識瘾英，可以代替flash才能實(shí)現(xiàn)的效果枣接。
屬性值：多種轉(zhuǎn)化方法的屬性值，可以實(shí)現(xiàn)不同的轉(zhuǎn)換效果缺谴。
2D 轉(zhuǎn)換-位移-translate()
描述：當(dāng)transform的屬性值為translate()時但惶，可以實(shí)現(xiàn)位移效果。
語法：1.translate(x,y),x和y分別表示水平方向和垂直方向的移動距離湿蛔，可以為px的值和百分比膀曾。區(qū)分正負(fù)。
2.translate(x):只有一個值阳啥，表示水平方向的位移添谊。
2D 轉(zhuǎn)換-縮放-scale()
描述：當(dāng)transform的屬性值為scale()時，可以實(shí)現(xiàn)元素縮放效果苫纤。
語法：1.scale(x,y):x和y分別表示改變元素寬度和高度的倍數(shù)碉钠。
2.scale(n):只有一個值n纲缓，表示寬高同時縮放n倍。
3.scaleX(n):改變元素的寬度喊废。
4.scaleY(n):改變元素的高度祝高。
2D 轉(zhuǎn)換-旋轉(zhuǎn)-rotate()
描述：當(dāng)transform的屬性值為rotate()時，可以實(shí)現(xiàn)元素旋轉(zhuǎn)效果污筷，沿著元素的中心點(diǎn)進(jìn)行旋轉(zhuǎn)工闺。
語法：rotate(數(shù)字deg)：deg表示度數(shù)單位，正數(shù)表示順時針旋轉(zhuǎn)瓣蛀，負(fù)數(shù)表示逆時針旋轉(zhuǎn)陆蟆，2D旋轉(zhuǎn)只有一個屬性值。
注意：當(dāng)元素發(fā)生旋轉(zhuǎn)后惋增，元素的坐標(biāo)也會發(fā)生變化叠殷，因此，多個屬性值同時設(shè)置給transform時诈皿，書寫順序不同導(dǎo)致的轉(zhuǎn)換效果有差異林束。
2D 轉(zhuǎn)換-傾斜-skew()
描述：當(dāng)transform的屬性值為skew()的時候，可以實(shí)現(xiàn)元素的傾斜效果稽亏。
語法：skew(數(shù)字deg,數(shù)字deg)：兩個數(shù)字分別表示水平方向和垂直方向的旋轉(zhuǎn)角度壶冒，屬性值可以為正可以為負(fù)，第二個屬性值不寫默認(rèn)為0截歉。
2D 轉(zhuǎn)換-基準(zhǔn)點(diǎn) transform-origin()
描述：設(shè)置調(diào)整元素水平方向和垂直方向原點(diǎn)的位置胖腾。調(diào)整元素的基準(zhǔn)點(diǎn)。
語法：transform-origin: x y;x表示定義x軸的原點(diǎn)在何處瘪松，可能的值分別為left咸作，center，right凉逛，像素值性宏，百分比群井。y表示定義y軸的原點(diǎn)在何處状飞，可能的值同x相同。top书斜，center诬辈，bottom，像素值荐吉，百分比焙糟。
2D 轉(zhuǎn)換案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 225px;
height: 150px;
/* border: 1px solid black; */
margin: 300px auto;
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 225px;
height: 150px;
transform-origin: right top;
transition: all ease 1s 0s;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: pink;
}
.box3 {
background-color: salmon;
}
.box4 {
background-color: sandybrown;
}
.box5 {
background-color: tomato;
}
.box6 {
background-color: darkseagreen;
}
.box:hover div:nth-child(1) {
transform: rotate(60deg)
}
.box:hover div:nth-child(2) {
transform: rotate(120deg)
}
.box:hover div:nth-child(3) {
transform: rotate(180deg)
}
.box:hover div:nth-child(4) {
transform: rotate(240deg)
}
.box:hover div:nth-child(5) {
transform: rotate(300deg)
}
.box:hover div:nth-child(6) {
transform: rotate(360deg)
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>
透視屬性 perspective
描述：設(shè)置z軸的視線焦點(diǎn)的觀察位置，從而實(shí)現(xiàn)3D查看效果样屠。
屬性值：像素值數(shù)值越大穿撮，觀察點(diǎn)距離z軸原點(diǎn)越遠(yuǎn)缺脉，圖形效果越完整且接近原始尺寸。
注意：透視屬性需要設(shè)置給3D變化元素的父級悦穿。
總結(jié)：如果想實(shí)現(xiàn)元素的3D轉(zhuǎn)換攻礼，就需要給元素的父元素添加perspective屬性，屬性值越大圖形想過月接近原始尺寸栗柒，屬性值越小礁扮，3D旋轉(zhuǎn)效果越明顯。
3D 旋轉(zhuǎn)
描述：3D旋轉(zhuǎn)分為三個方向的角度旋轉(zhuǎn)瞬沦。
屬性值：rotateX(angle):定義沿著X軸的3D旋轉(zhuǎn)太伊。
rotateY(angle):定義沿著Y軸的3D旋轉(zhuǎn)。
rotateZ(angle):定義沿著Z軸的3D旋轉(zhuǎn)逛钻。
3D 位移
描述：3D位移也分為三個方向的位移僚焦。
屬性值：translateX(x):設(shè)置x軸的位移值。
translateY(y)：設(shè)置y軸的位移值曙痘。
translateZ(z): 定義3D位移叠赐，設(shè)置z軸的位移值
transform-style 屬性
描述：用于設(shè)置在被嵌套的子元素在父元素的3D空間中顯示，子元素會保留子集的3D轉(zhuǎn)換坐標(biāo)軸屡江。
語法：transform-style: 屬性值;
屬性值：
flat: 所有子元素在2D平面呈現(xiàn)芭概。
preserve-3d: 保留3D空間。
注意：該屬性一般設(shè)置給3D變換圖形的父元素惩嘉。
transform 瀏覽器兼容
瀏覽器兼容：IE10,Firefox,以及opera瀏覽器支持transform屬性罢洲，Chrome和Safari需要添加"-webkit-"前綴，IE9需要添加"-ms-"前綴文黎。
動畫
描述：在css3中動畫效果需要兩步惹苗，首先需要創(chuàng)建動畫，然后需要綁定動畫耸峭。
@keyframes 規(guī)則
描述：@keyframes規(guī)則用于創(chuàng)建動畫桩蓉，在@keyframes中定義某項(xiàng)css樣式，就能創(chuàng)建從一種樣式逐漸變化為另一種樣式的效果劳闹，可以改變?nèi)我舛嗟臉邮皆壕浚我舛嗟拇螖?shù)。
需要使用百分比來規(guī)定變化發(fā)生的時間本涕，或者使用關(guān)鍵詞"from"和"to",等同于0%和100%业汰，0%是動畫的開始，100%是動畫的結(jié)束菩颖。
語法：@keyframes 自定義動畫名稱 {
動畫過程样漆，可以添加任意百分比處的動畫細(xì)節(jié)
}
@keyframes 規(guī)則代碼示例
/* @keyframes 百分比形式 */
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
/* @keyframes 定義動畫 */
@keyframes move {
from {
transform: translateY(0)
}
to {
transform: translateY(100px);
}
}
動畫調(diào)用 animation 屬性
描述：將@keyframes創(chuàng)建的某個動畫綁定到選擇器上，否則不會產(chǎn)生動畫效果晦闰，animation屬性就是將動畫綁定到選擇器上放祟。
語法：div {
animation: 動畫名稱 過渡時間 速度曲線 動畫次數(shù) 延遲時間;
}
其中必須設(shè)置動畫名稱和過渡時間鳍怨，速度曲線于transition的運(yùn)動曲線一樣。
動畫代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
margin: 100px auto;
border-radius: 50%;
background-color: skyblue;
/* 綁定動畫 */
/* animation: move 3s linear; */
animation: move2 3s linear;
}
/* @keyframes 定義動畫 */
@keyframes move {
from {
transform: translateY(0)
}
to {
transform: translateY(100px);
}
}
/* @keyframes 百分比形式 */
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
