前言

認(rèn)識(shí)HTML5

• 之前學(xué)的是HTML4或者HTML4.1蟹地；

• 網(wǎng)頁開發(fā)：

• html：結(jié)構(gòu) 4.0

• Css：樣式 2.0

• Js：行為 用戶交互

• HTML5 是html4.0 升級(jí)版

• 結(jié)構(gòu)：Html5 螟左、樣式：css3 、行為: API侠仇，有所增強(qiáng)，如地理定位瞎抛、web存儲(chǔ)钓株、拖拽等。

• HTML5并不僅僅只是做為HTML標(biāo)記語言的一個(gè)最新版本斋荞，更重要的是它制定了Web應(yīng)用開發(fā)的一系列標(biāo)準(zhǔn)荞雏，成為第一個(gè)將Web做為應(yīng)用開發(fā)平臺(tái)的HTML語言。

• HTML5定義了一系列新元素平酿，如新語義標(biāo)簽凤优、智能表單、多媒體標(biāo)簽等蜈彼，可以幫助開發(fā)者創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用筑辨，還提供了一些Javascript API，如地理定位幸逆、重力感應(yīng)棍辕、硬件訪問等，可以在瀏覽器內(nèi)實(shí)現(xiàn)類原生應(yīng)用还绘，甚至結(jié)合Canvas我們可以開發(fā)網(wǎng)頁版游戲楚昭。

• H5范稱：HTML + CSS3 + JS API

• 優(yōu)點(diǎn)：http://www.intertid.com/school/2014/595568.shtml

語法規(guī)范

• HTML5在語法規(guī)范上也做了比較大的調(diào)整，去除了許多冗余的內(nèi)容拍顷，書寫規(guī)則更加簡潔抚太、清晰。

• 特點(diǎn)：

• 更簡潔;

• 更寬松

  • 單標(biāo)簽不用寫關(guān)閉符號(hào)昔案；
  • 雙標(biāo)簽可省略結(jié)束標(biāo)簽凭舶；
  • html、head爱沟、body帅霜、colgroup、tbody可以完全省略呼伸；
  • 實(shí)際開發(fā)中應(yīng)規(guī)范書寫身冀，不建議太隨意。

• W3C驗(yàn)證地址：https://validator.w3.org/

語義標(biāo)簽

• 此章節(jié)學(xué)習(xí)目的為了理解增加語義標(biāo)簽的目的括享，以及各語義標(biāo)簽所表達(dá)的意義搂根，在網(wǎng)頁布局中能夠合理使用標(biāo)簽。

• 傳統(tǒng)網(wǎng)頁布局：

<!-- 頭部 -->
<div class="header">
     <ul class="nav"></ul>
</div>
<!-- 主體部分 -->
<div class="main">
    <!-- 文章 -->
    <div class="article"></div>
    <!-- 側(cè)邊欄 -->
    <div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>

• H5 經(jīng)典網(wǎng)頁布局:

<!-- 頭部 -->
<header>
    <ul class="nav"></ul>
</header>
<!-- 主體部分 -->
<div class="main">
    <!-- 文章 -->
    <article></article>
    <!-- 側(cè)邊欄 -->
    <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

常用新語義標(biāo)簽

• 本質(zhì)上新語義標(biāo)簽與<div>穴翩、<span>沒有區(qū)別锦积，只是其具有表意性丰介，使用時(shí)除了在HTML結(jié)構(gòu)上需要注意外背蟆，其它和普通標(biāo)簽的使用無任何差別，可以理解成<div class="nav">相當(dāng)于<nav>哮幢。不要好奇带膀，它只是一個(gè)標(biāo)簽！
• 盡量避免全局使用header橙垢、footer垛叨、aside等語義標(biāo)簽。

兼容處理

• 在測(cè)試IE的兼容的時(shí)候钢悲，有一個(gè)叫做ietest 的軟件点额，這個(gè)軟件可以模擬IE6~IE11舔株。

• 在不支持HTML5新標(biāo)簽的瀏覽器里莺琳，會(huì)將這些新的標(biāo)簽解析成行內(nèi)元素inline對(duì)待，所以我們只需要將其轉(zhuǎn)換成塊元素(block)即可使用载慈。但是在IE9版本以下惭等，并不能正常解析這些新標(biāo)簽，但是可以識(shí)別通過document.createElement('tagName')創(chuàng)建的自定義標(biāo)簽办铡，于是我們的解決方案就是將HTML5的新標(biāo)簽全部通過document.createElement('tagName')來創(chuàng)建一遍辞做，這樣IE低版本也能正常解析HTML5新標(biāo)簽了。

• 在實(shí)際開發(fā)中我們更多采用的是通過檢測(cè)IE瀏覽器的版本來加載第三方的一個(gè)JS庫來解決兼容問題寡具。

• IE678不支持H5秤茅，需要引入html5shiv.js文件：

<!--條件注釋，只有IE才能夠識(shí)別-->
<!--[if lte ie 8]>
    <script src="html5shiv.min.js"></script>
<![endif]-->

表單

• HTML5在Web表單方向做了很大的改進(jìn)童叠，如拾色器框喳、日期/時(shí)間組件等，使表單處理更加高效厦坛。
• 此章節(jié)學(xué)習(xí)目的五垮，了解HTML5表單的新增的特性，以及PC和移動(dòng)設(shè)備間的差異杜秸，其兼容性較差放仗。

輸入類型 (表單類型，表單元素撬碟，表單屬性,表單事件诞挨。)

• 注：部分類型是針對(duì)移動(dòng)設(shè)備生效的，且具有一定的兼容性亭姥，在實(shí)際應(yīng)用當(dāng)中可選擇性的使用稼钩。

表單元素（標(biāo)簽）

• <datalist> 數(shù)據(jù)列表與input配合使用

<input type=”text” list=”data”>
<datalist id=”data”>
    <option>男</option>
    <option>女</option>
    <option>不詳</option>
</datalist>

• <keygen>：生成加密字符串(了解)

• keygen元素的作用是提供一種驗(yàn)證用戶的可靠方法；

• keygen元素是密鑰對(duì)生成器（key-pair generator）达罗。當(dāng)提交表單時(shí)坝撑，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰粮揉，一個(gè)公鑰巡李。

• 私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器扶认。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）侨拦。

• <output>：不可當(dāng)做數(shù)據(jù)提交，樣式辐宾、作用和label差不多狱从；

• <meter>：表示度量器，不建議用作進(jìn)度條叠纹；如果不在正常范圍內(nèi)季研，可以顯示黃色警告色；

<meter value="81" min="0" max="100" low="60" high="80"/>

• 樣式和<progress></progress>差不多誉察，但是擁有警告等顏色与涡；
• Max-width；
• Min-width持偏。

表單屬性

• placeholder：占位符驼卖；
• autofocus：自動(dòng)獲取焦點(diǎn)；
• name：給表單添加name屬性之后鸿秆，可以顯示歷史輸入的內(nèi)容酌畜；
• multiple：文件上傳多選或多個(gè)郵箱地址；
• autocomplete：自動(dòng)完成填充卿叽，用于表單元素桥胞，也可用于表單自身(on/off)；
• form：指定表單項(xiàng)屬于哪個(gè)form附帽，處理復(fù)雜表單時(shí)會(huì)需要埠戳；
• novalidate：關(guān)閉驗(yàn)證，可用于<form>標(biāo)簽蕉扮；
• required：必填項(xiàng)整胃，表示此表單不能為空；
• pattern：正則表達(dá)式喳钟，驗(yàn)證表單屁使、手機(jī)號(hào)在岂，如

<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">

• 表單重寫沒有提及，自行驗(yàn)證蛮寂，共包含應(yīng)用于提交按鈕上蔽午，如：<input type="submit" formaction="xxx.php">。

表單事件

• oninput：用戶輸入內(nèi)容時(shí)觸發(fā)酬蹋，可用于移動(dòng)端輸入字?jǐn)?shù)統(tǒng)計(jì)及老；
• oninvalid 驗(yàn)證不通過時(shí)觸發(fā)。

input.oninvalid = function(){
    this.setCustomValidity("你郵箱輸錯(cuò)掉了范抓，現(xiàn)在重新輸入");
};

案例練習(xí)

• 注冊(cè)表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form{
            width: 200px;
            margin: 40px auto;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>注冊(cè)信息</legend>
            <label>手機(jī)號(hào)：<input type="tel" name="b" id="userName" pattern="/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/"></label><br>
            <label>密&nbsp&nbsp&nbsp碼：<input type="password" name="c" id="pwd"></label><br>
            <input type="submit" style="width: 200px;">
        </fieldset>
    </form>
    <script>
        var userName = document.getElementById("userName");
        var pwd = document.getElementById("pwd");
        userName.onblur = function () {
            this.oninvalid = function () {
                this.setCustomValidity("您輸入的手機(jī)號(hào)有誤");
            }
        }
    </script>
</body>
</html>

多媒體

• 并非所有用戶的瀏覽器都安裝了Flash插件骄恶，并且移動(dòng)設(shè)備的瀏覽器并不支持Flash插件。通過HTML5播放音頻/視頻匕垫，以及針對(duì)不同瀏覽器所支持的格式僧鲁，做多瀏覽器兼容處理。

音頻

• HTML5通過<audio>標(biāo)簽來解決音頻播放的問題象泵。使用非常簡單：

<audio scr="xxx.mp3"></audio>

• 并且可以通過附加屬性可以更友好控制音頻的播放寞秃，如：

• autoplay：自動(dòng)播放；

• controls：是否顯不默認(rèn)播放控件；

• loop：循環(huán)播放；

• preload：預(yù)加載俩莽，同時(shí)設(shè)置autoplay時(shí)有些屬性會(huì)失效。

• 由于版權(quán)等原因堂淡，不同的瀏覽器可支持播放的格式是不一樣的：（目前馋缅，audio元素支持的三種音頻格式如下）

• 兼容性寫法

<audio>
    <source src="music.mp3">
    <source src="music.ogg">
    <source src="music.wav">
    抱歉扒腕，您的瀏覽器不支持音頻播放
</audio>

• 瀏覽器兼容哪一種格式，會(huì)自動(dòng)獲取對(duì)應(yīng)的格式進(jìn)行播放萤悴，不會(huì)顯示最下面的文字瘾腰；如果瀏覽器都不兼容這三種音頻格式(IE678)，就會(huì)顯示最下面的文字覆履。

視頻

• HTML5通過<video>標(biāo)簽來解決視頻播放的問題蹋盆。同音頻標(biāo)簽用法完全一樣，<video>使用也相當(dāng)簡單硝全，如下所示：

<video scr="xxx.mp4" controls="controls"></video>

• 同樣栖雾，通過附加屬性可以更友好的控制視頻的播放:

• autoplay：自動(dòng)播放；

• controls：是否顯示默認(rèn)播放控件伟众；

• loop：循環(huán)播放析藕；

• preload：預(yù)加載，同時(shí)設(shè)置了autoplay凳厢，此屬性將失效账胧；

• width：設(shè)置播放窗口寬度竞慢；

• height：設(shè)置播放窗口的高度。

• 由于版權(quán)等原因治泥，不同的瀏覽器可支持播放的格式是不一樣的筹煮，當(dāng)前video元素支持的三種視頻格式如下：

DOM擴(kuò)展

獲取元素

• 老版本：document.getElementsByClassName ('class');：通過類名獲取元素，以類數(shù)組形式存在居夹；

• H5：

• document.querySelector('div');：通過CSS選擇器獲取符合匹配條件的第一個(gè)元素败潦；

• document.querySelector(".box");：第一個(gè)元素；

• document.querySelector("#box");：第一個(gè)元素准脂；

• document.querySelectorAll('selector'); 通過CSS選擇器獲取元素变屁，以類數(shù)組形式存在。

• 在H5中意狠，DOM新增的獲取元素功能類似jQuery中的方法：（jQuery方法獲取到的是數(shù)組）

• $(".box");粟关；

• $("#box");；

• $("div.box");环戈。

類名操作

• 老版：只能直接指定闷板，如box1.className="content hide";；
• jQuery中：addClass()/removeClass()/hasClass()/toggleClass()院塞；
• H5中遮晚，新增功能和jQuery中方法一樣好用：
• Node.classList.add('class');：添加class；
• Node.classList.remove('class');：移除class拦止；
• Node.classList.toggle('class');： 切換class县遣，有則移除，無則添加汹族；
• Node.classList.contains('class');： 檢測(cè)是否存在class萧求；
• Node指一個(gè)有效的DOM節(jié)點(diǎn)，是一個(gè)通稱顶瞒。

自定義屬性data-*=""

• 在HTML5中我們可以自定義屬性必須要以data-開頭夸政，例如data-info="我是自定義屬性";，通過Node.dataset['info'];我們便可以獲取到自定義的屬性值榴徐。
• Node.dataset是以類對(duì)象形式存在的守问；
• 當(dāng)我們?nèi)缦赂袷皆O(shè)置時(shí)，則需要以駝峰格式才能正確獲瓤幼省：

data-my-name="yijiang";
//獲取
Node.dataset['myName']

案例練習(xí) (tab 切換)

• 方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab欄練習(xí)</title>

    <style>
        body{
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .tab{
            margin: 30px auto;
            width: 400px;
            background-color: #fafafa;
        }

        nav{
            height: 40px;
            background-color: #009999;
            display:flex;
            text-align: center;
            line-height:40px;
            overflow: hidden;
        }
        nav a{
            text-decoration: none;
            width: 100px;
            border-right: 1px solid #fff;
        }
        nav a:last-child{
            border-right: none;
        }
        nav a.active{
            background-color: #00dddd;
        }

        .tab ol{
            line-height: 30px;
        }
        .tab .cont{
            overflow: hidden;
            display: none;
        }

    </style>
</head>
<body>
   <div class="tab">
       <nav>
           <a href="javascript:;" data-content="local" class="active">本地新聞</a>
           <a href="javascript:;" data-content="global">國際新聞</a>
           <a href="javascript:;" data-content="sport">體育新聞</a>
           <a href="javascript:;" data-content="funny">娛樂新聞</a>
       </nav>

       <section class="cont" id="local" style="display: block">
           <ol>
               <li>111南方大旱耗帕，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱袱贮，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱仿便，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱探越，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
       <section class="cont" id="global">
           <ol>
               <li>222南方大旱狡赐，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱钦幔，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱枕屉，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱鲤氢，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱搀擂，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
       <section class="cont" id="sport">
           <ol>
               <li>333南方大旱卷玉，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱哨颂，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱相种，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱威恼，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱寝并，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
       <section class="cont" id="funny">
           <ol>
               <li>444南方大旱箫措，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱衬潦，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱斤蔓，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱镀岛，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱弦牡，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
   </div>

    <script>
        var aArr = document.querySelectorAll("nav a");

        for(var i=0; i<aArr.length; i++){
            aArr[i].onclick = function () {
                //獲取到當(dāng)前選中的標(biāo)簽
                var current = document.querySelector(".active");
                //獲取當(dāng)前標(biāo)簽的對(duì)應(yīng)section的id
                console.log(current);
                var currentID = current.dataset["content"];
                //取消當(dāng)前選中狀態(tài)
                current.classList.remove("active");
                //隱藏對(duì)應(yīng)的內(nèi)容部分
                document.querySelector("#"+currentID).style.display = "none";

                //改變當(dāng)前選中標(biāo)簽狀態(tài)
                this.classList.add("active");
                //獲取當(dāng)前選中狀態(tài)對(duì)應(yīng)的section的id
                var thisID = this.dataset["content"];
                //顯示對(duì)應(yīng)的內(nèi)容
                document.querySelector("#"+thisID).style.display = "block";
            }
        }
    </script>
</body>
</html>

• 方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab欄練習(xí)</title>

    <style>
        body{
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .tab{
            margin: 30px auto;
            width: 400px;
            background-color: #fafafa;
        }

        nav{
            height: 40px;
            background-color: #009999;
            display:flex;
            text-align: center;
            line-height:40px;
            overflow: hidden;
        }
        nav a{
            text-decoration: none;
            width: 100px;
            border-right: 1px solid #fff;
        }
        nav a:last-child{
            border-right: none;
        }
        nav a.active{
            background-color: #00dddd;
        }

        .tab ol{
            line-height: 30px;
        }
        .tab .cont{
            overflow: hidden;
            display: none;
        }

    </style>
</head>
<body>
   <div class="tab">
       <nav>
           <a href="javascript:;" data-content="local">本地新聞</a>
           <a href="javascript:;" data-content="global">國際新聞</a>
           <a href="javascript:;" data-content="sport">體育新聞</a>
           <a href="javascript:;" data-content="funny">娛樂新聞</a>
       </nav>

       <section class="cont" id="local">
           <ol>
               <li>111南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱漂羊，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱驾锰，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱拨与，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱稻据，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>111南方大旱艾猜，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
       <section class="cont" id="global">
           <ol>
               <li>222南方大旱买喧，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱匆赃，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱淤毛，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱算柳，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱低淡，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>222南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
       <section class="cont" id="sport">
           <ol>
               <li>333南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱蔗蹋，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱何荚，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱猪杭，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱餐塘，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>333南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
       <section class="cont" id="funny">
           <ol>
               <li>444南方大旱皂吮，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱戒傻，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱蜂筹，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱需纳，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱，農(nóng)作物減產(chǎn)絕收面積上畝</li>
               <li>444南方大旱艺挪，農(nóng)作物減產(chǎn)絕收面積上畝</li>
           </ol>
       </section>
   </div>

    <script>
        var aArr = document.querySelectorAll("nav a");

        (function (index) {

            for(var i=0; i<aArr.length; i++){
                //選中一個(gè)進(jìn)行初始化
                if (i == index){
                    //給對(duì)應(yīng)的標(biāo)簽綁定選中狀態(tài)
                    aArr[i].classList.add("active");
                    //獲取對(duì)應(yīng)的section的id
                    var myID = aArr[i].dataset["content"];
                    document.querySelector("#"+myID).style.display = "block";
                }
                console.log(aArr[index]);

                //綁定點(diǎn)擊事件
                aArr[i].onclick = function () {
                    //獲取到當(dāng)前選中的標(biāo)簽
                    var current = document.querySelector(".active");
                    //獲取當(dāng)前標(biāo)簽的對(duì)應(yīng)section的id
                    console.log(current);
                    var currentID = current.dataset["content"];
                    //取消當(dāng)前選中狀態(tài)
                    current.classList.remove("active");
                    //隱藏對(duì)應(yīng)的內(nèi)容部分
                    document.querySelector("#"+currentID).style.display = "none";

                    //改變當(dāng)前選中標(biāo)簽狀態(tài)
                    this.classList.add("active");
                    //獲取當(dāng)前選中狀態(tài)對(duì)應(yīng)的section的id
                    var thisID = this.dataset["content"];
                    //顯示對(duì)應(yīng)的內(nèi)容
                    document.querySelector("#"+thisID).style.display = "block";
                }
            }
        })(0);

    </script>
</body>
</html>

H5新增API

多媒體

• 方法：load() 加載不翩、play() 播放、pause() 暫停麻裳；

• 屬性：

• currentTime 視頻播放的當(dāng)前進(jìn)度慌盯；

• duration:視頻的總時(shí)間；

• paused:視頻播放的狀態(tài)掂器。

• 事件：

• oncanplay：事件在用戶可以開始播放視頻/音頻（audio/video）時(shí)觸發(fā)亚皂；

• ontimeupdate：通過該事件來報(bào)告當(dāng)前的播放進(jìn)度；

• onended：播放完時(shí)觸發(fā)国瓮。

• 全屏切換：video.webkitRequestFullScreen();灭必。

• 案例：視頻播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>視頻播放器</title>

    <link rel="stylesheet" href="../fontawesome/css/font-awesome.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        figure{
            width: 720px;
            height: 410px;
            border: 1px solid #000;
            margin: 40px auto;
        }
        figcaption{
            text-align: center;
            line-height: 40px;
            font-family: "Microsoft Yahei";
            font-size: 24px;
        }

        .player{
            width: 720px;
            height: 360px;
            border: 1px solid #000;
            margin: 10px auto;
            background: #000 url(h5-source/loading.gif) center no-repeat;
            background-size: auto 100%;
            position: relative;
            border-radius: 20px;
        }
        .player video{
            display: block;
            height: 100%;
            margin: 0 auto;
        }

        .controls{
            width: 700px;
            height: 40px;
            position: absolute;
            left: 10px;
            bottom: 10px;
            background: rgba(200,120,140,0.8);
        }
        .switch{
            width: 20px;
            height: 20px;
            position: absolute;
            left: 10px;
            top: 10px;
            background-color: #bbb;
            text-align: center;
            line-height: 20px;
            color: white;
        }

        progress{
            width: 450px;
            height: 10px;
            background-color: white;
            /*color: red;*/
            position: absolute;
            left: 40px;
            top: 15px;
        }
        .time{
            position: absolute;
            left: 500px;
            line-height: 40px;
        }
        .extend{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            text-align: center;
            line-height: 20px;
        }

    </style>
</head>
<body>
    <figure>
        <figcaption>視頻播放器</figcaption>

        <div class="player">
            <video src="h5-source/fun.mp4"></video>
            <div class="controls">
                <a href="#" class="switch icon-play"></a>
                <progress value="20" max="100"></progress>
                <div class="time">
                    <span class="currentTime">--:--:--</span>
                    /
                    <span class="totalTime">--:--:--</span>
                </div>
                <a href="#" class="extend icon-resize-full"></a>
            </div>
        </div>
    </figure>

    <script>
        //獲取視頻
        var video = document.querySelector("video");
        //播放暫停按鈕
        var switchBtn = document.querySelector(".switch");
        //進(jìn)度條
        var progressBar = document.querySelector("progress");
        //當(dāng)前時(shí)間
        var currentTime = document.querySelector(".currentTime");
        //總時(shí)間
        var totalTime = document.querySelector(".totalTime");
        //全半屏
        var extendBtn = document.querySelector(".extend");

        //2.播放暫停按鈕點(diǎn)擊
        switchBtn.onclick = function () {
            //判斷按鈕狀態(tài)，如果當(dāng)前暫停乃摹，點(diǎn)擊之后開始播放禁漓，并更改按鈕狀態(tài)，反之同理
            if (video.paused){
                this.classList.remove("icon-play");
                this.classList.add("icon-pause");
                video.play();
            }else {
                this.classList.remove("icon-pause");
                this.classList.add("icon-play");
                video.pause();
            }
        };

        var totalT = 0;
        //1.視頻加載完成之后孵睬，進(jìn)入可播放狀態(tài)
        video.oncanplay = function () {
            alert(111);
            //獲取總時(shí)間
            console.log(video.duration);
            totalT = video.duration;
            //時(shí)
            var h = Math.floor(totalT/3600);
            //分
            var m = Math.floor(totalT%3600/60);
            //秒
            var s = Math.floor(totalT%60);

            //把格式化成 00:00:00
            h = h>=10 ? h:"0"+h;
            m = m>=10 ? m:"0"+m;
            s = s>=10 ? s:"0"+m;
            totalTime.innerHTML = h + ":" + m + ":" + s;
            //設(shè)置當(dāng)前播放時(shí)間為 00:00:00
            currentTime.innerHTML = "00:00:00";

        };


        var currentT = 0;
        //3.視頻播放過程中播歼，要不斷更新當(dāng)前時(shí)間和當(dāng)前進(jìn)度條
        video.ontimeupdate = function () {
            currentT = video.currentTime;
            //更新視頻播放進(jìn)度
            progressBar.value = currentT / totalT * 100;

            //時(shí)
            var h = Math.floor(currentT/3600);
            //分
            var m = Math.floor(currentT%3600/60);
            //秒
            var s = Math.floor(currentT%60);
            //化成格式 00:00:00
            h = h>=10 ? h:"0"+h;
            m = m>=10 ? h:"0"+m;
            s = s>=10 ? s:"0"+s;
            currentTime.innerHTML = h + ":" + m + ":" + s;
        };

        //4.全半屏播放
        extendBtn.onclick = function () {
            video.webkitRequestFullScreen();
        }
    </script>
</body>
</html>

拖拽

• 在HTML5的規(guī)范中，我們可以通過為元素增加屬性draggable="true";來設(shè)置此元素是否可以進(jìn)行拖拽操作掰读，其中圖片秘狞、鏈接默認(rèn)是開啟的。

拖拽元素

• 頁面中設(shè)置了draggable="true"屬性的元素蹈集。

目標(biāo)元素

• 頁面中任何一個(gè)元素都可以成為目標(biāo)元素烁试。

事件監(jiān)聽

• 說明：

• ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)颂鸿。
  默認(rèn)地伤为，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置据途，我們必須阻止對(duì)元素的默認(rèn)處理方式绞愚；

• 這要通過調(diào)用ondragover事件的event.preventDefault()方法。

• 將一個(gè)盒子中的元素拖拽到另外一個(gè)盒子中颖医。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>

    <style>
        .box1,.box2{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            float: left;
            margin: 40px;
        }
        .sBox{
            width: 75px;
            height: 75px;
            background-color: #f00;
            float: left;
            border-radius: 50%;
            text-align: center;
            line-height: 75px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="sBox" draggable="true">1</div>
    <div class="sBox" draggable="true">2</div>
    <div class="sBox" draggable="true">3</div>
    <div class="sBox" draggable="true">4</div>
    <div class="sBox" draggable="true">5</div>
    <div class="sBox" draggable="true">6</div>
    <div class="sBox" draggable="true">7</div>
    <div class="sBox" draggable="true">8</div>
</div>
    <div class="box2"></div>

    <script>
        //獲取事件源
        var sBoxs = document.querySelectorAll(".sBox");
        var box1 = document.querySelector(".box1");
        var box2 = document.querySelector(".box2");

        var temp = null;
        //給各個(gè)小盒子綁定事件
        for(var i=0; i<sBoxs.length; i++){
            sBoxs[i].ondragstart = function () {
                temp = this;
            };
        }

        //給目標(biāo)元素綁定事件
        box2.ondragover = function (event) {
            event.preventDefault();
        };
        box2.ondrop = function () {
            this.appendChild(temp);
        };

        box1.ondragover = function (event) {
            event.preventDefault();
        };
        box1.ondrop = function () {
            this.appendChild(temp);
        }
    </script>
</body>
</html>

全屏

• HTML5規(guī)范允許用戶自定義網(wǎng)頁上任一元素全屏顯示位衩；

• requestFullscreen() 開啟全屏顯示；

• cancleFullscreen() 關(guān)閉全屏顯示熔萧；

• 不同瀏覽器需要添加前綴如：

• webkitRequestFullScreen糖驴、

• mozRequestFullScreen

• webkitCancleFullScreen、

• mozCancleFullScreen

• 兼容性寫法：

var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
       docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
       docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
       docElm.webkitRequestFullScreen();
    }

• 通過document.fullScreen檢測(cè)當(dāng)前是否處于全屏佛致。

• 不同瀏覽器需要添加前綴

• document.webkitIsFullScreen贮缕、

• document.mozFullScreen

• 全屏偽類：(了解)

• :full-screen .box {}、

• :-webkit-full-screen {}俺榆、

• :moz-full-screen {}

Web存儲(chǔ)

• 隨著互聯(lián)網(wǎng)的快速發(fā)展感昼，基于網(wǎng)頁的應(yīng)用越來越普遍，同時(shí)也變的越來越復(fù)雜罐脊，為了滿足各種各樣的需求定嗓，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來進(jìn)行存儲(chǔ)的萍桌，但是由于其存儲(chǔ)大小只有4k左右宵溅，并且解析也相當(dāng)?shù)膹?fù)雜，給開發(fā)帶來諸多不便上炎，HTML5規(guī)范則提出解決方案恃逻。

• Storage 存儲(chǔ)

• window.sessionStorage：會(huì)話存儲(chǔ)；

• window.localStorage(向本地保存數(shù)據(jù),有可能在瀏覽器內(nèi)存里面藕施，有可能在硬盤上面)寇损。

一、特性

• 設(shè)置铅碍、讀取方便润绵；
• 容量較大，sessionStorage約5M胞谈、localStorage約20M；
• 只能存儲(chǔ)字符串，可以將對(duì)象JSON.stringify() 編碼后存儲(chǔ)烦绳。

二卿捎、window.sessionStorage

• 生命周期為關(guān)閉瀏覽器窗口;
• 在同一個(gè)窗口下數(shù)據(jù)可以共享。

三径密、window.localStorage

• 永久生效午阵，除非手動(dòng)刪除；
• 可以多窗口共享享扔。

四底桂、方法詳解

• setItem(key, value)：設(shè)置存儲(chǔ)內(nèi)容；
• getItem(key)：讀取存儲(chǔ)內(nèi)容惧眠；
• removeItem(key)：刪除鍵值為key的存儲(chǔ)內(nèi)容籽懦；
• clear()：清空所有存儲(chǔ)內(nèi)容；
• key(n)：以索引值來獲取存儲(chǔ)內(nèi)容（了解）氛魁。
• 案例：記住用戶名

五暮顺、其它（了解）

• WebSQL、IndexDB秀存，瀏覽器中的本地?cái)?shù)據(jù)庫捶码；
• 已經(jīng)被w3c 放棄了..
• 生命周期差異，存儲(chǔ)空間差異或链。

網(wǎng)絡(luò)狀態(tài)

• 我們可以通過window.onLine來檢測(cè)惫恼，用戶當(dāng)前的網(wǎng)絡(luò)狀況，返回一個(gè)布爾值;
• window.online用戶網(wǎng)絡(luò)連接時(shí)被調(diào)用澳盐；
• window.offline用戶網(wǎng)絡(luò)斷開時(shí)被調(diào)用尤筐。

<script>
    window.online = function () {
        alert("聯(lián)網(wǎng)");
    };
    window.addEventListener("offline",function () {
        alert("已斷網(wǎng)");
    });
</script>

應(yīng)用緩存

• HTML5中我們可以輕松的構(gòu)建一個(gè)離線（無網(wǎng)絡(luò)狀態(tài)）應(yīng)用，只需要?jiǎng)?chuàng)建一個(gè)cache manifest文件洞就。

一盆繁、優(yōu)勢(shì)

1. 可配置需要緩存的資源；

• 網(wǎng)絡(luò)無連接應(yīng)用仍可用旬蟋；
• 本地讀取緩存資源油昂，提升訪問速度，增強(qiáng)用戶體驗(yàn)倾贰；
• 減少請(qǐng)求冕碟，緩解服務(wù)器負(fù)擔(dān)。

二匆浙、緩存清單

• 一個(gè)普通文本文件安寺，其中列出了瀏覽器應(yīng)緩存以供離線訪問的資源，推薦使用.appcache為后綴名首尼，添加MIME類型：
• AddType text/cache-manifest .appcache
• 在.appcache文件中的內(nèi)容格式如下：

CACHE MANIFEST
#下面是要緩存的文件
CACHE:
        http://xxx.jpg

• 例如我們創(chuàng)建了一個(gè)名為demo.appcache的文件挑庶，然后在需要應(yīng)用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache"言秸，路徑要保證正確。

三迎捺、manifest文件格式

1. 頂行寫CACHE MANIFEST举畸；
2. 注釋使用#開頭；
3. CACHE:換行凳枝，指定我們需要緩存的靜態(tài)資源抄沮，如.css、image岖瑰、js等叛买；

• NETWORK:換行，指定需要在線訪問（聯(lián)網(wǎng)才能訪問）的資源蹋订，可使用通配符率挣；
• FALLBACK:當(dāng)前頁面無法訪問時(shí)退回的頁面(回退;后退)，寫法如下：
• 換行辅辩，當(dāng)被緩存的文件找不到時(shí)的備用資源：

FALLBACK:
        4O4.html

四难礼、其它

1. CACHE：可以省略，這種情況下將需要緩存的資源寫在CACHE MANIFEST玫锋；
2. 可以指定多個(gè)CACHE: NETWORK: FALLBACK:蛾茉，無順序限制；

• CACHE：需要緩存那些資源;
• NETWORK：不需要緩存那些資源撩鹿，指定必須在聯(lián)網(wǎng)狀態(tài)下才能訪問的資源谦炬；
• FALLBACK：當(dāng)訪問不到某個(gè)資源時(shí)，自動(dòng)由另外一個(gè)資源替換节沦。

CACHE MANIFEST
CACHE:(以下部分是需要緩存的資源)
    1.jpg
    js/jquery.min.js
NETWORK:
    js/demo.js
    # 可以使用 * 號(hào)替代
FALLBACK:
    one.css two.css
    //會(huì)緩存two.css 當(dāng)找不到one.css 會(huì)去找two.css 文件.

• #表示注釋键思，只有當(dāng)demo.appcache文件內(nèi)容發(fā)生改變時(shí)或者手動(dòng)清除緩存后，才會(huì)重新緩存甫贯。
• chrome 可以通過chrome://appcache-internals/工具和離線（offline）模式來調(diào)試管理應(yīng)用緩存吼鳞。

地理定位

• 在HTML規(guī)范中，增加了獲取用戶地理信息的API叫搁，這樣使得我們可以基于用戶位置開發(fā)互聯(lián)網(wǎng)應(yīng)用赔桌，即基于位置服務(wù) (Location Base Service)。

一渴逻、獲取地理信息方式

1. IP地址疾党；

• 三維坐標(biāo)：

• GPS（Global Positioning System，全球定位系統(tǒng)）：
  目前世界上在用或在建的第2代全球衛(wèi)星導(dǎo)航系統(tǒng)（GNSS）有：1.美國 Global Positioning System （全球定位系統(tǒng)） 簡稱GPS惨奕；.2.蘇聯(lián)/俄羅斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球衛(wèi)星導(dǎo)航系統(tǒng)）簡稱GLONASS（格洛納斯）雪位；3.歐盟（歐洲是不準(zhǔn)確的說法，包括中國在內(nèi)的諸多國家也參與其中）Galileo satellite navigation system（伽利略衛(wèi)星導(dǎo)航系統(tǒng)） 簡稱GALILEO（伽利略）梨撞；4.中國 BeiDou(COMPASS) Navigation Satellite System（北斗衛(wèi)星導(dǎo)航系統(tǒng)）簡稱 BDS 雹洗；5.日本 Quasi-Zenith Satellite System （準(zhǔn)天頂衛(wèi)星系統(tǒng)） 簡稱QZSS 香罐；6.印度 India Regional Navigation Satellite System（印度區(qū)域衛(wèi)星導(dǎo)航系統(tǒng)）簡稱IRNSS；以上6個(gè)系統(tǒng)中國都能使用队伟。

• Wi-Fi穴吹；

• 手機(jī)信號(hào)幽勒。

• 用戶自定義數(shù)據(jù)：

• 如下對(duì)不同獲取方式的優(yōu)缺點(diǎn)進(jìn)行了比較嗜侮，瀏覽器會(huì)自動(dòng)以最優(yōu)方式去獲取用戶地理信息。

• 位置信息獲取方式對(duì)比：

二、隱私

• HTML5 Geolocation(地理位置定位) 規(guī)范提供了一套保護(hù)用戶隱私的機(jī)制威创。必須先得到用戶明確許可落午，才能獲取用戶的位置信息。

三肚豺、API詳解

• navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 獲取當(dāng)前地理信息溃斋；

• navigator.geolocation.watchPosition(successCallback, errorCallback, options) 重復(fù)獲取當(dāng)前地理信息；

• 當(dāng)成功獲取地理信息后吸申，會(huì)調(diào)用succssCallback(position)梗劫，并返回一個(gè)包含位置信息的對(duì)象position。

• 獲取坐標(biāo)Coords(坐標(biāo))：position.coords.latitude緯度呛谜、
  position.coords.longitude經(jīng)度在跳；

• 當(dāng)獲取地理信息失敗后，會(huì)調(diào)用errorCallback(error)隐岛，并返回錯(cuò)誤信息error猫妙；

• 可選參數(shù)options對(duì)象可以調(diào)整位置信息數(shù)據(jù)收集方式。

• 根據(jù)興趣可以玩玩全景地圖和VR（vr用Pano2VR工具可以制作聚凹，可百度查看全景地圖制作）割坠。

• 兼容：

<script>
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack);
    }else {
        alert("對(duì)不起齐帚，您的瀏覽器不能獲取到位置...");
    }
    //成功獲取位置時(shí)回調(diào)
    function successCallBack(position) {
        console.log(position.coords.latitude);
        console.log(position.coords.longitude);
    }
    //獲取位置失敗時(shí)回調(diào)
    function errorCallBack(error) {
        console.log(error);
    }
</script>

• 案例：
• 百度地圖案：
  • 使用百度地圖API，然后選擇jsAPI彼哼，然后根據(jù)需要選擇對(duì)應(yīng)的地圖樣式对妄，賦值對(duì)應(yīng)的代碼到項(xiàng)目中；
  • 在API控制臺(tái)生成秘鑰敢朱，并將秘鑰放到代碼對(duì)應(yīng)的位置剪菱；
  • 傳入對(duì)應(yīng)的經(jīng)緯度。

歷史

• 提供window.history拴签，對(duì)象我們可以管理歷史記錄孝常，可用于單頁面應(yīng)用，Single Page Application蚓哩，可以無刷新改變網(wǎng)頁內(nèi)容构灸。
• 舊版本瀏覽器..
• history.back() 回退；
• history.forward() 前進(jìn)岸梨。