H5新特性總結
html5總的來說比html4多了八個新特性，但其不支持ie8及ie8以下版本的瀏覽器

一、語義標簽

二、增強型表單

三、視頻和音頻

四、Canvas繪圖

五、地理定位

六、拖放API

七、WebWorker

八。本地存儲

在HTML5中新加的video和radio,也對應有方法、屬性和事件
以video標簽為例：
<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設置 ("變量名"，"要存的東西")
console.log(localStorage.getItem("變量名"));
sessionStorages.setItem("變量名", "要存的東西")
    // 本地短時間儲存 setItem設置 ("變量名"，"要存的東西")關閉網(wǎng)頁就會消失
console.log(sessionStorage.getItem("變量名"));

3語義化標簽

nav構建導航組件。、
header標簽 一般是頭部標簽
main 標簽 一般是主要部分
footer 尾部標簽 主要處理尾部
aside 標簽 側邊欄

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屬性，花費時間，效果曲線(默認ease)，延遲時間(默認0)復制代碼 */
border: 1px solid #000;
}

動畫語義化標簽：header、footer、section、nav、aside、article
增強型表單：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語法("文件路徑")這個文用來處理比較耗費時間的

新增表單屬性：placehoder、min 和 max

音頻視頻：audio、video canvas

##### audio  屬性

    src:文件路徑
    autoplay:自動播放
    loop:循環(huán)
    controls:控制條
    muted:靜音
    preload:預加載（當使用autoplay時，preload自動失效）
    
    <audio controls src="http://www.w3school.com.cn/i/song.mp3">
    </audio> 


#### video 屬性

    src:文件路徑
     autoplay:自動播放
     loop:循環(huán)
     controls:控制條
     muted:靜音
     preload:預加載（當使用autoplay時，preload自動失效）
     width:寬度
     height:高度
     poster:海報
    
        <video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>
    </video> 
    
**拖拽** 

H5之前沒有拖放API，可以使用“鼠標按下 + 鼠標移動”兩個事件來模擬用戶拖動事件。

H5之后專門提供了七個鼠標拖動相關事件句柄：

```csharp
         拖動的源對象(source)可能觸發(fā)的事件：

                dragstart：拖動開始

                drag：拖動中

                dragend：拖動結束

         拖動的目標對象(target)可能觸發(fā)的事件：

                dragenter：拖動進入

                dragover：拖動懸停

                drop：松手釋放

                dragleave：拖動離開

       注意：拖放API事件句柄中所有的事件對象都有一個dataTransfer屬性（數(shù)據(jù)運輸對象），用于在源對象和目標對象間傳遞數(shù)據(jù)。

       源對象：event.dataTransfer.setData(key, value)

       目標對象：var value = event.dataTransfer.getData(key)

本地存儲：localStorage - 沒有時間限制的數(shù)據(jù)存儲；sessionStorage - 針對一個 session 的數(shù)據(jù)存儲，當用戶關閉瀏覽器窗口后，數(shù)據(jù)會被刪除

(1)window.sessionStorage：類數(shù)組對象，通過key=>value對存儲字符串數(shù)據(jù)——會話級存儲
 特點：一次性儲存，數(shù)據(jù)在瀏覽器關閉后自動刪除
 添加數(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對存儲字符串數(shù)據(jù)——本地/跨會話級/永久存儲
 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失;
 特點:數(shù)據(jù)永久存儲，沒有時間限制；大小限制5M(夠用了)；只存儲字符串
 添加數(shù)據(jù)：localStorage['key'] = 'value'
 修改數(shù)據(jù)：localStorage['key'] = 'newValue'
 刪除數(shù)據(jù)：delete localStorage['key']
 獲得數(shù)據(jù)：var  v =localStorage['key']

媒體查詢：

        響應式布局
<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：寬度等于當前設備的寬度

initial-scale：初始的縮放比例（默認設置為1.0）  

minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）

maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）   

user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面） 

超小屏幕（手機，小于 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) {

//手機移動端分辨率

}

@media (min-width: 768px) and (max-width: 992px) {

//PAD中屏分辨率

}

CSS3選擇器：

**“:first-child**”選擇器表示的是選擇父元素的第一個子元素的元素E。

**:last-child**”選擇器選擇的是元素的最后一個子元素

**“:nth-child(n**)”選擇器用來定位某個父元素的一個或多個特定的子元素。

**“:nth-last-child(n)**”從某父元素的最后一個子元 素開始計算，來選擇特定的元素。

**“:first-of-type**”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

**“:last-of-type**”選擇器 他選擇是父元素下的某個類型的最后一個子元素

**“:nth-of-type(n)**”選擇器和“:它只計算父元素中指定的某種類型的子元素。

**“: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軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

陰影顏色：默認黑色; 投影方式：inset時為內(nèi)部陰影，省略為外部陰影

為邊框應用圖片：

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（陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰） color;
  background-origin設置元素背景圖片的原始起始位置：

  參數(shù)分別表示從邊框、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數(shù)border-box顯示同樣的效果。
  background-size設置背景圖片的大小

彈性布局：

Flexbox 是 flexible box 的簡稱（注：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現(xiàn)出來。

它之所以被稱為 Flexbox ，是因為它能夠擴展和收縮 flex 容器內(nèi)的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內(nèi)嵌塊元素）相比，F(xiàn)lexbox 是一個更強大的方式：

• 在不同方向排列元素

• 重新排列元素的顯示順序

• 更改元素的對齊方式

• 動態(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;
  /* 彈性盒換行：不換行 默認的 */
  flex-wrap: wrap;
  /* 彈性盒換行：換行 */
  //設置主軸方向子元素排列順序
justify-content: flex-start;
  /* 從左到右排列 默認的 */
  justify-content: flex-end;
  /* 從尾部開始排列 不影響子元素排列順序 */
  justify-content: center;
  /* 從主軸居中對齊 */
  justify-content: space-around;
  /* 平分主軸剩余空間 */
  justify-content: space-between;
  /* 兩邊對齊，中間評分剩余空間 */
  justify-content: space-evenly;
  /* 間距相同 */
  
 ## #      ```

• animation動畫

  一：animation是一個復合屬性，一共有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：設置動畫在循環(huán)中是否反向運動
   7.animation-fill-mode：設置動畫時間之外的狀態(tài)
   8.animattion-play-state:設置動畫的狀態(tài)。   #

動畫運動曲線：

  animation-timing-function 屬性規(guī)定動畫的速度曲線。

  animation-timing-function 屬性可接受以下值：

  ease - 指定從慢速開始，然后加快，然后緩慢結束的動畫（默認）

  linear - 規(guī)定從開始到結束的速度相同的動畫

  ease-in - 規(guī)定慢速開始的動畫

  ease-out - 規(guī)定慢速結束的動畫

  ease-in-out - 指定開始和結束較慢的動畫

  代碼如下：

  ```
  #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
描述：對元素進行移動，縮放，轉(zhuǎn)動，拉長或拉伸。配合過渡和動畫知識，可以代替flash才能實現(xiàn)的效果。
屬性值：多種轉(zhuǎn)化方法的屬性值，可以實現(xiàn)不同的轉(zhuǎn)換效果。
2D 轉(zhuǎn)換-位移-translate()
描述：當transform的屬性值為translate()時，可以實現(xiàn)位移效果。
語法：1.translate(x,y),x和y分別表示水平方向和垂直方向的移動距離，可以為px的值和百分比。區(qū)分正負。
  2.translate(x):只有一個值，表示水平方向的位移。
2D 轉(zhuǎn)換-縮放-scale()
描述：當transform的屬性值為scale()時，可以實現(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()
描述：當transform的屬性值為rotate()時，可以實現(xiàn)元素旋轉(zhuǎn)效果，沿著元素的中心點進行旋轉(zhuǎn)。
語法：rotate(數(shù)字deg)：deg表示度數(shù)單位，正數(shù)表示順時針旋轉(zhuǎn)，負數(shù)表示逆時針旋轉(zhuǎn)，2D旋轉(zhuǎn)只有一個屬性值。
注意：當元素發(fā)生旋轉(zhuǎn)后，元素的坐標也會發(fā)生變化，因此，多個屬性值同時設置給transform時，書寫順序不同導致的轉(zhuǎn)換效果有差異。
2D 轉(zhuǎn)換-傾斜-skew()
描述：當transform的屬性值為skew()的時候，可以實現(xiàn)元素的傾斜效果。
語法：skew(數(shù)字deg,數(shù)字deg)：兩個數(shù)字分別表示水平方向和垂直方向的旋轉(zhuǎn)角度，屬性值可以為正可以為負，第二個屬性值不寫默認為0。
2D 轉(zhuǎn)換-基準點 transform-origin()
描述：設置調(diào)整元素水平方向和垂直方向原點的位置。調(diào)整元素的基準點。
語法：transform-origin: x y;x表示定義x軸的原點在何處，可能的值分別為left，center，right，像素值，百分比。y表示定義y軸的原點在何處，可能的值同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



         描述：設置z軸的視線焦點的觀察位置，從而實現(xiàn)3D查看效果。
  屬性值：像素值數(shù)值越大，觀察點距離z軸原點越遠，圖形效果越完整且接近原始尺寸。
  注意：透視屬性需要設置給3D變化元素的父級。
  總結：如果想實現(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):設置x軸的位移值。
  translateY(y)：設置y軸的位移值。
  translateZ(z): 定義3D位移，設置z軸的位移值
transform-style 屬性
描述：用于設置在被嵌套的子元素在父元素的3D空間中顯示，子元素會保留子集的3D轉(zhuǎn)換坐標軸。
語法：transform-style: 屬性值;
屬性值：
  
  flat: 所有子元素在2D平面呈現(xiàn)。
  preserve-3d: 保留3D空間。
注意：該屬性一般設置給3D變換圖形的父元素。
transform 瀏覽器兼容
瀏覽器兼容：IE10,Firefox,以及opera瀏覽器支持transform屬性，Chrome和Safari需要添加"-webkit-"前綴，IE9需要添加"-ms-"前綴。
動畫
描述：在css3中動畫效果需要兩步，首先需要創(chuàng)建動畫，然后需要綁定動畫。
@keyframes 規(guī)則
描述：@keyframes規(guī)則用于創(chuàng)建動畫，在@keyframes中定義某項css樣式，就能創(chuàng)建從一種樣式逐漸變化為另一種樣式的效果，可以改變?nèi)我舛嗟臉邮剑我舛嗟拇螖?shù)。

  需要使用百分比來規(guī)定變化發(fā)生的時間，或者使用關鍵詞"from"和"to",等同于0%和100%，0%是動畫的開始，100%是動畫的結束。
語法：@keyframes 自定義動畫名稱 {
  動畫過程，可以添加任意百分比處的動畫細節(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ù) 延遲時間;
}
其中必須設置動畫名稱和過渡時間，速度曲線于transition的運動曲線一樣。
動畫代碼示例

<!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>