一、html5視頻《video》
1、視頻格式：
（1）ogg 是帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。
（2）MPEG4 是帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件。
（3）WebM =是帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。
2、video的標(biāo)簽屬性
（1）autoplay 出現(xiàn)該屬性視頻就會(huì)馬上播放

<video src="./2f53d5a0d3459eefe705379f41fc193f.mp4" autoplay="autoplay"></video>

（2）controus 出現(xiàn)該屬性 視頻顯示播放按鈕。
（3）height 用于設(shè)置瀏覽器高度
（4）width 用于設(shè)置瀏覽器寬度

    <video src="./2f53d5a0d3459eefe705379f41fc193f.mp4" controls="controls" width="500px" height="500px"></video>

（5）loop 如果出現(xiàn)該屬性 播放完在循環(huán)播放
（6）preload 出現(xiàn)該屬性 預(yù)備播放
（7）src 播放視頻的url
二、音頻標(biāo)簽《audio》
1、audio音頻格式
（1）Ogg Vorbis （2）MP3 （3）Wav
2、audio 標(biāo)簽屬性
（1）autoplay 出現(xiàn)該屬性音頻就緒就會(huì)馬上播放
（2）controus 出現(xiàn)該屬性 視頻顯示播放按鈕。
（3）preload 出現(xiàn)該屬性 預(yù)備播放
（4）src 播放音頻的url
三、Canvas（用于繪畫(huà)）
1、什么是canvas？
（1）canvas 元素用于在網(wǎng)頁(yè)上繪制圖形。
拖拽、
（2）拖拽是一種特別常見(jiàn)特性，應(yīng)用范圍非常廣，在HTML5中拖拽成了一部分，任何元素都可以拖拽。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
//找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
//然后，創(chuàng)建 context 對(duì)象：
var ctx=c.getContext("2d");
//getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
//下面的兩行代碼繪制一個(gè)紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

四、sessionStorage（臨時(shí)存儲(chǔ)）和localStorage（長(zhǎng)期存儲(chǔ)）
1、sessionStorage 是臨時(shí)存儲(chǔ) 瀏覽器頁(yè)面關(guān)閉會(huì)消失

   // 設(shè)置sessionStorage
   sessionStorage.setItem('存儲(chǔ)對(duì)象名', 存儲(chǔ)對(duì)象值)
   // 讀取sessionStorage
   sesessionStorage.getItem('存儲(chǔ)對(duì)象名')

2、localStorage 是永久存儲(chǔ) 瀏覽器頁(yè)面關(guān)閉不會(huì)消失

   // 設(shè)置localStorage
    localStorage.setItem('存儲(chǔ)對(duì)象名', 存儲(chǔ)對(duì)象值)//將localStorage中存儲(chǔ)信息，由于localStorage中的存儲(chǔ)值必須是個(gè)字符串，我們可以使用JSON.stringify()這個(gè)方法把他變成字符串
    // 讀取localStorage
    localStorage.getItem('存儲(chǔ)對(duì)象名')// 獲取localStorage中的信息，在獲取到信息是，我們可以只使用JSON.parse()轉(zhuǎn)換成對(duì)象使用
    //刪除或清空l(shuí)ocalStorage的方法
    // 1、刪除指定的
    localStorage.removeItem("變量")
    // 2、清空所有的
    localStorage.clear()
    // 遍歷本地存儲(chǔ)的方法
    for (var i in localStorage) {
        if (localStorage.getItem(i)) {
            console.log(localStorage.getItem(i));
        }
    }

五、新增的語(yǔ)義化標(biāo)簽
1、section：獨(dú)立內(nèi)容模塊 ，可以h1-h6組成大綱 ，表示文檔結(jié)構(gòu)，有章節(jié)、頁(yè)眉、頁(yè)腳或其他部分。
2、article ：（文章） 文章核心部分
3、aside 標(biāo)簽內(nèi)容之外相輔的信息 側(cè)邊欄
4、header 頭部/標(biāo)題
5、footer 尾部標(biāo)簽
6、nav 導(dǎo)航
7、figure標(biāo)簽 代替原來(lái)的li>img+p就是有文字有圖片的區(qū)域
六、新增的表單控件
1、type"email"：限制用戶輸入為油箱類型

<input type="email" name="email">

2、type=”url”：限制用戶輸入為網(wǎng)址，即輸入內(nèi)容必須含有"http:"

    <input type="url" name="" id="">

3、type=Date ：日期選擇器

<input type="date" name="bday">

4、type=”search”：搜索

    <input  type="search" >

5、type=”color”：顏色

    <input type="color" name="" id="">

6、type=”tel”：手機(jī)號(hào)

<input type="tel" name="usrtel">

六、html5 地理位置

<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
    var x = document.getElementById("demo");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else {
            x.innerHTML = "該瀏覽器不支持獲取地理位置。";
        }
    }
    function showPosition(position) {
        x.innerHTML = "緯度: " + position.coords.latitude +
            "<br>經(jīng)度: " + position.coords.longitude;
    }
</script>

一、CSS3 新特性

1、新增屬性選擇器
（1）E[att^=“val”] ：選擇具有att屬性且屬性值為以val開(kāi)頭的字符串的E元素。
（2）E[att$=“val”] ：選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素。
（3）E[att*=“val”] ：選擇具有att屬性且屬性值為包含val的字符串的E元素。

<style>
    div[class^="a"]{    /*以a開(kāi)始*/
        background-color: blue;
    }
    div[class$="a"]{    /*以a結(jié)束*/
        background-color: green;
    }
    div[class*="a"]{    /*選擇到所有含a的*/
        background-color: red;
    }
</style>
 <div class="abc">div1</div>
 <div class="acc">div2</div>
 <div class="cba">div3</div>

2、新增的偽類選擇器
（1）、:not(s)：匹配不含有s選擇符的元素E。

<style>
    p {
        color: #000000;
    }
    :not(p) {
        color: #ff0000;
    }
</style>
    <h1>這是標(biāo)題</h1>
    <p>這是一個(gè)段落。</p>
    <p>這是另一個(gè)段落。</p>
    <div>這是 div 元素中的文本。</div>

（2）、:root：匹配E元素在文檔的根元素。在HTML中，根元素永遠(yuǎn)是HTML

<style> 
:root
{
    background:#ff0000;
}
</style>
<h1>我是h</h1>

（3）、:last-child ：匹配父元素的最后一個(gè)子元素E。

<style> 
p:last-child
{
background:#ff0000;
}
</style>
<p>p1</p>
<p>p2</p>
<p>p3</p>

（4）、:only-child：匹配父元素僅有的一個(gè)子元素E。

p:only-child
{
background:#ff0000;
}
</style>
<div>
<p>這是一個(gè)段落。</p>
</div>
<div>
<span>這是一個(gè) span。</span>
<p>這是一個(gè)段落。</p>
</div>

（5）、:nth-child(n)：匹配父元素的第n個(gè)子元素E，假設(shè)該子元素不是E，則選擇符無(wú)效。

<style>            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
<div class="list">
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

（6）:nth-last-child(n) ：匹配父元素的倒數(shù)第n個(gè)子元素E，假設(shè)該子元素不是E，則選擇符無(wú)效。

<style>
    p:nth-last-child(2) {
        background: #ff0000;
    }
</style>
<h1>這是標(biāo)題</h1>
<p>第一個(gè)段落。</p>
<p>第二個(gè)段落。</p>
<p>第三個(gè)段落。</p>
<p>第四個(gè)段落。</p>
<p>第五個(gè)段落。</p>

（7）:first-of-type：匹配父元素下第一個(gè)類型為E的子元素。

<style>
    p:first-of-type {
        background: #ff0000;
    }
</style>
<p>一</p>
<p>二</p>
<p>三</p>
<p>四</p>
<p>五</p>

（8）:last-of-type：匹配父元素下的所有E子元素中的倒數(shù)第一個(gè)。

<style> 
p:last-of-type
{
background:#ff0000;
}
</style>
<h1>這是標(biāo)題</h1>
<p>這是第一個(gè)段落。</p>
<p>這是第二個(gè)段落。</p>
<p>這是第三個(gè)段落。</p>
<p>這是第四個(gè)段落。</p>

（9）:only-of-type：匹配父元素的所有子元素中唯一的那個(gè)子元素E。

<style>
    p:only-of-type {
        background: #ff0000;
    }
</style>
    <div>
        <p>p</p>
    </div>
    <div>
        <p>hhh</p>
        <p>hhh</p>
    </div>

（10）、:nth-of-type(n) ：匹配父元素的第n個(gè)子元素E。

<style>
p:nth-of-type(2){
background:#ff0000;
}
</style>
<h1>這是標(biāo)題</h1>
<p>第一個(gè)段落。</p>
<p>第二個(gè)段落。</p>
<p>第三個(gè)段落。</p>
<p>第四個(gè)段落。</p>
<p>第五個(gè)段落。</p>

（11）、:nth-last-of-type(n)：匹配父元素的倒數(shù)第n個(gè)子元素E。

<style>
    p:nth-last-of-type(1) {
        background: #ff0000;
    }
</style>

        <p>p</p>
        <p>hhh</p>
        <p>hhh</p>

（12）:empty：匹配沒(méi)有任何子元素（包括text節(jié)點(diǎn)）的元素E。

<style>
    p:empty {
        width: 100px;
        height: 20px;
        background: #ff0000;
    }
</style>
    <p></p>
    <p></p>
    <p>第三個(gè)段落。</p>
    <p>第四個(gè)段落。</p>
    <p>第五個(gè)段落。</p>

二、透明度

1、opacity

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        opacity: 0.5;
    }
</style>
<div></div>

2、bgra

<style>
   div {
       width: 100px;
       height: 100px;
       background-color:rgba(250,250,250,0.9);
   }
</style>
<div></div>

三、Word Wrap

word-break: break-word; //長(zhǎng)單詞換行

四 文字陰影

<style>
  div {
     text-shadow:x方向偏移量 y方向偏移量 陰影長(zhǎng)度 陰影顏色;
  }
</style>
<div>asdas </div>

五、盒子陰影

<style>
    div {
       box-shadow:x方向偏移量 y方向偏移量 陰影長(zhǎng)度 陰影顏色;
    }
</style>
<div>asdas </div>

六、漸變

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義

七 、媒體查詢

@media screen and (min-width:970px){
            body{
                background-color: red;
            }
        }
        @media screen and (min-width: 560px) and (max-width: 969px){
            body{
                background-color: green;
            }
        }
        @media screen and (min-width: 321px) and (max-width: 559px){
            body{
                background-color: blue;
            } 
        }
        @media screen and (max-width: 320px){
            body{
                background-color: yellow;
            } 
        }

媒體查詢書(shū)寫(xiě)規(guī)則
注意：為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來(lái)寫(xiě),但是我們最喜歡的還是從小到大來(lái)寫(xiě)，這樣代碼更簡(jiǎn)潔

八 、邊框圓角

 border-radius: 數(shù)值+單位(em,rem,px,%);

九、動(dòng)畫(huà)

  /* 動(dòng)畫(huà)名稱 */
  animation-name: move;
  /* 動(dòng)畫(huà)花費(fèi)時(shí)長(zhǎng) */
  animation-duration: 2s;
  /* 動(dòng)畫(huà)速度曲線 */
  animation-timing-function: ease-in-out; //上圖運(yùn)動(dòng)曲線這里也可以使用
  /* 動(dòng)畫(huà)等待多長(zhǎng)時(shí)間執(zhí)行 */
  animation-delay: 2s;
  /* 規(guī)定動(dòng)畫(huà)播放次數(shù) infinite: 無(wú)限循環(huán) */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 動(dòng)畫(huà)結(jié)束之后的狀態(tài) */
  animation-fill-mode: forwards;

十、彈性盒（flex）

        display: flex;//設(shè)置彈性和
        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;
        /* 從尾部開(kāi)始排列 不影響子元素排列順序 */
        justify-content: center;
        /* 從主軸居中對(duì)齊 */
        justify-content: space-around;
        /* 平分主軸剩余空間 */
        justify-content: space-between;
        /* 兩邊對(duì)齊，中間評(píng)分剩余空間 */
        justify-content: space-evenly;
        /* 間距相同 */
        align-items: flex-start;//從頭部開(kāi)始
        align-items: flex-end;//從尾部開(kāi)始
        align-items: center;//居中顯示
        align-items: stretch;//拉伸
    }