1.應用程序標籤
DataList(數據列表)
Progress(進度條)
Meter(數值顯示器) 示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>應用程序標籤</title> <style> .my-progress{ -webkit-appearance: none; } </style></head><body><!--數據列表，呈現需要載體--><input type="text" list="data-list"><datalist id="data-list"> <option value="張三"></option> <option value="李四"></option></datalist><!--進度條--><progress></progress><!--progress默認最大值是1，可以設定自己想要的值--><progress class="my-progress" value="30" max="100"></progress><meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter></body>可以利用數據列表（data-list）做一個那種帶下拉框的輸入框，可以根據用戶輸入的內容匹配下拉框的內容（select2也可以實現這種需求，而且最低可以兼容到IE8，推薦用select2）,後面的progress和meter樣式不好控制，用的不太多。
2.自定義屬性（data-*）
在html5中可以自定義數據，以data開頭，利用這個自定義標籤我們可以把屬性暫時存儲到頁面中，在js中可以使用，例子如下：
<html lang="en"><head> <meta charset="UTF-8"> <title>data屬性</title></head><body> <ul id="list"> </ul></body><script> // 鍵是ID 值是信息 var data = { 01: { name: "張三1", age: 18 }, 02: { name: "張三2", age: 19 }, 03: { name: "張三3", age: 20 } }; var list = document.getElementById("list"); for(var id in data){ var item = data[id]; var liem = document.createElement("li"); liem.innerHTML = item.name; //自定義data-*屬性 liem.setAttribute("data-name",item.name); liem.setAttribute("data-age",item.age); list.appendChild(liem); //點擊獲取dataset屬性 liem.addEventListener("click",function(){ //下面這兩種方式均可以，都不帶data- alert(this.dataset['name']); alert(this.dataset.name); }) }</script>下面這篇文章總結的很好，可以參考：//blog.csdn.net/qq_31851435/article/details/53100691
3.新的表單提交方式
傳統的一共有9中表單提交方式，html5新增了幾種，目前只用在移動端，pc端兼容性有問題，而且在輸入的時候並沒有進行驗證，比如類型是email的，並沒有校驗郵箱格式，還是需要我們自己手動寫正則表達式驗證的，只是在手機端當喚起輸入法的時候會自動切換到英文輸入法。
<head> <meta charset="UTF-8"> <title>新的表單提交方式</title></head><body><h3>傳統的表單提交方式（9種）</h3>用戶名：<input type="text"> <br>密碼：<input type="password"><br>性別：<input type="radio"><br>課程:<input type="checkbox"><br>隱藏：<input type="hidden">文件：<input type="file"><br>按鈕：<input type="button" value="按鈕"><br>表單:<input type="submit"><br>重置：<input type="reset"><br><hr><h3>新的表單提交方式（目前只用在移動端）</h3>顏色：<input type="color"><br>網址：<input type="url"><br>搜索：<input type="search" results="10" placeholder="Search..."><br>郵箱：<input type="email" pattern="^\*.com"><br>日期：<input type="date" min="2015-09-01" max="2018-09-01"><br>圖片：<input type="image"><br>範圍：<input type="range" min="0" max="50" value="10"><br>數字：<input type="number"></body>
4.新的選擇器
html5提供新的選擇器，querySelector選擇單個的元素，返回滿足條件的第一個元素，是一個dom元素，querySelectorAll選擇全部的元素，返回滿足條件的全部元素，是一個dom數組，裡面可以是id，標籤或class類。
<html lang="en"><head> <meta charset="UTF-8"> <title>新選擇器</title></head><body><h3>新選擇器</h3><ul> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li> <li class="item">item7</li> <li class="item">item8</li> <li class="item">item9</li> <li class="item">item10</li></ul></body><script> //匿名函數，可以將作用域分隔開 (function(){ var liem = document.querySelector(".item"); //只選擇第一個 console.log(liem.innerHTML); var lis = document.querySelectorAll("ul>li"); //選擇全部 for(var i=0;i<lis.length;i++){ console.log(lis[i]); lis[i].addEventListener("click",function(){ debugger; //可以調試代碼。類似於瀏覽器打斷點 console.log(this.innerHTML); }) } })()</script>5.元素類列表（Element.classList）
新H5中DOM對象多了一個classList屬性，是一個數組:
add 添加一個新的類名
remove 刪除一個類名
contains 判斷是否包含一個指定的類名
toggle 切換一個類名。 element.toggle('class-name',[addorremove])，第一個參數是類名，第二個參數是布爾值，如果是true，則添加類名，如果是false,則去掉類名。示例：
<head> <meta charset="UTF-8"> <title>元素類列表</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body><div class="container"> <div class="collapse navbar-collapse"> <nav class="navbar navbar-default"> <a class="navbar-brand" href="#">Brand</a> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </div></div><script> //匿名函數 (function(){ /** 點擊時添加和刪除類名**/ var lis = document.querySelectorAll(".nav li"); for(var i=0;i<lis.length;i++){ lis[i].addEventListener("click",function(e){ //去掉原先所有的樣式 for(var j=0;j<lis.length;j++){ lis[j].classList.remove("active"); } //添加點擊樣式 this.classList.add("active"); e.preventDefault(); //取消事件的默認操作 }) } /** 點擊時存在類名則刪除，不存在類名則添加**/ var elem = document.querySelector(".navbar-brand"); //點擊時如果存在active這個屬性則去掉，如果不存在這個屬性則加上 elem.addEventListener("click",function(e){ //判斷是否包含active這個類名 var isExist = elem.classList.contains("active"); this.classList.toggle("active",!isExist); e.preventDefault(); }) })()</script></body>6.訪問歷史Api
在HTML5中可以通過window.history操作訪問歷史狀態，讓一個頁面可以有多個歷史狀態
window.history.forward(); // 前進
window.history.back(); // 後退
window.history.go(); // 刷新
history.pushState(放入歷史中的狀態數據, 設置title(現在瀏覽器不支持)， 改變歷史狀態)，通過JS可以加入一個訪問狀態
<head> <meta charset="UTF-8"> <title>歷史記錄</title></head><body><input type="button" value="測試歷史記錄" onclick="addHistory()"></body><script> //添加歷史記錄 function addHistory(){ //判斷瀏覽器是否支持歷史記錄，畢竟是h5的新特性，低版本瀏覽器不支持 if(window.history && history.pushState){ //支持 history.pushState(new Date().toLocaleDateString(),"設置歷史記錄的標籤，但是目前瀏覽器還不支持","?demo="+new Date().toLocaleTimeString()); }else{ console.log("抱歉，瀏覽器不支持歷史記錄") } } //下面這個事件是點擊瀏覽器中的前進或後退時觸發 window.addEventListener("popstate",function(e){ console.log("點擊了歷史按鈕"+e.state); })</script>7.全屏Api
H5中可以用requestFullScreen()方法實現指定元素的全屏顯示（類似於瀏覽器中按F11）。首先需要獲取需要全屏顯示的元素，然後判斷瀏覽器是屬於谷歌內核還是火狐內核或者其它瀏覽器，然後調用響應方法即可。(注意：目前這個特性瀏覽器兼容性還比較差，谷歌和火狐可以)
var elem = 需要全屏的元素;if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen();} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();} else if (elem.requestFullScreen){ elem.requestFullScreen();}<head> <meta charset="UTF-8"> <title>全屏顯示</title></head><body><h3 style="cursor: pointer">點我全屏顯示</h3><p>測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示 測試全屏顯示測試全屏顯示測試<br> 全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示</p><script> //匿名函數 (function () { //獲取事件源和要全屏顯示的元素 var elem = document.querySelector("p"); document.querySelector("h3").addEventListener("click",function(e){ //判斷瀏覽器是否支持全屏顯示 if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.requestFullScreen){ elem.requestFullScreen(); }else{ console.log("瀏覽器不支持全屏顯示") } }); })()</script></body>8.Application Cache離線訪問技術
在H5中可以利用Application Cache實現離線訪問技術，測試時可以通過谷歌瀏覽器——NetWork——No throttling(Disable cache後面的那個下拉框)——下拉選擇Offline(模擬未聯網的情形)。示例如下：
html代碼：<html lang="en" manifest="cache.manifest"><head> <meta charset="UTF-8"> <title>離線訪問</title> <link rel="stylesheet" href="style.css"></head><body><p>這是html頁面中的內容</p><script src="script.js"></script></body>style.css文件代碼body::before{ content: "這是Css中引入的內容"; font-size: 40px;}script.js文件代碼：document.write("這是js中引入的內容")cache.manifest文件代碼：CACHE MANIFEST# version 1.0.1CACHE: 08離線訪問.html script.js style.cssNETWORK: *解釋：在html代碼中通過css的偽類和js的document.write函數分別輸出兩句話，模擬請求其它文件，然後在manifest（緩存清單）中定義了一個cache.manifest的緩存清單文件，文件裡首先定義了當前軟件的版本，下面的CACHE，代表斷網情況下，從下面定義的文件中讀取文件，NETWORK代表聯網時候要讀取的文件，星號代表全部。即斷網時從我定義的文件中讀取文件，聯網時，讀取全部文件，這樣便可實現離線訪問。
9.web網頁存儲
h5中提供sessionStorage和localStorage兩種數據存儲方式，前者存儲的內容只在本次會話中存儲，瀏覽器關閉數據消失，後者是可以永久存儲在瀏覽器中，除非手動或通過程序刪除。這兩種存儲方式比cookie存儲的數據量大，而且可以存儲對象數據（cookie只能存儲字符串數據）。
<head> <meta charset="UTF-8"> <title>網頁存儲</title></head><body><textarea rows="5" cols="30" id="txt-data"></textarea><input type="button" value="設置數據" id="set-data"><input type="button" value="獲取數據" id="get-data"><script> (function(){ var txtValue = document.querySelector("#txt-data"); console.log(txtValue.value); //設置數據 document.querySelector("#set-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ sessionStorage.setItem("key",txtValue.value); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) //獲取數據 document.querySelector("#get-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ txtValue.value = sessionStorage.getItem("key"); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) })()</script></body>10.操作文件Api
通過file表單選擇文件，之後利用h5提供的文件api可以獲取文件名，大小，類型，最後修改時間等文件信息。
<html lang="en"><head> <meta charset="UTF-8"> <title>操作文件</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body> <div class="container"> <form> <input type="file" class="form-control hidden" id="btn_file" multiple> <input type="button" value="選擇文件" class="btn btn-success" id="btn_select"> <div class="list-group" id="ul_list"> <!--待追加數據位置--> </div> </form> </div></body><script> (function(){ var btn_file = document.querySelector("#btn_file"); var btn_select = document.querySelector("#btn_select"); var ul_list = document.querySelector("#ul_list"); //利用“hidden”類將文件輸入框隱藏，當點擊“選擇文件按鈕時”，調用選擇文件按鈕，選擇文件， // 因為input type="file"這個無法修改樣式，把它隱藏，點擊其它按鈕時，在其它按鈕中調用點擊上傳文件 btn_select.addEventListener("click",function(){ btn_file.click(); }) //選擇文件完成後（即文件內容發生改變後） btn_file.addEventListener("change",function(e){ var files = btn_file.files; //獲取所有文件，並遍歷 for(var i=0;i<files.length;i++){ console.log(files[i]); var liem = document.createElement("li"); liem.setAttribute("class","list-group-item"); liem.innerHTML = ' <h4 class="list-group-item-heading">'+files[i].name+'</h4>'+ '<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'kb</p>' ul_list.appendChild(liem); } }) })()</script>這裡是用到了bootstrap的樣式，因為file表單比較醜，而且無法改變樣式，所以我們可以把文件表單隱藏（用hidden隱藏樣式），提供一個按鈕，當點擊這個按鈕時去雕砌選文件的彈框，multiple屬性支持一次選擇多個文件。
11.拖拽文件
拖拽文件時需要依次註冊以下事件：
dragenter 註冊拖拽進入事件
dragleave 註冊拖拽離開事件
dragover 註冊滑動事件（在這裡面阻止默認事件）
drop 註冊鬆手落地事件。 在拖動鬆手落地事件中判斷拖進來的是文件還是圖片地址還是文字，分別進行處理。e.dataTransfer獲取拖動進來的信息。
<head> <meta charset="UTF-8"> <title>拖拽文件</title> <link rel="stylesheet" href="css/bootstrap.css"> <style> #target{ height: 200px; border: 5px dashed #c0c0c0; color: #505050; padding: 20px; font-size: 40px; cursor: pointer; text-align: center; -webkit-user-select: none; } #target.actived{ border-color: #888; color: #080808; box-shadow: 0 0 80px #e0e0e0 inset; } </style></head><body><div class="container"> <div class="page-header"> <h3>拖拽文件</h3> </div> <div class="jumbotron"> <p>我們這裡測試拖拽文件</p> <img src="test.png"> </div> <div id="target"> 拖拽文件進來 <ul id="result" class="list-group"></ul> </div></div></body><script> (function(){ var target = document.querySelector("#target"); var fileList = document.querySelector('#result'); //註冊拖拽進入事件 target.addEventListener("dragenter",function(){ this.classList.add("actived"); //添加樣式 }) //註冊拖拽文件離開事件 target.addEventListener("dragleave",function(){ this.classList.remove("actived"); //添加樣式 }) //註冊落地事件之前必須要先阻止默認事件，這裡在滑動裡面阻止默認事件 target.addEventListener("dragover",function(e){ e.preventDefault(); //阻止默認事件 e.stopPropagation(); }) //註冊鬆手落地事件 target.addEventListener("drop",function(e){ //判斷拖入進來的是文件，圖片還是文字，分別處理 if(e.dataTransfer.files.length){ //拖入的是文件 var files = e.dataTransfer.files; for (var i = 0; i < files.length; i++) { var li = document.createElement('li'); li.setAttribute('class', 'list-group-item'); // 創建信息的子節點 li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>'; fileList.appendChild(li); } }else{ //不是文件 var data = e.dataTransfer.getData('text/plain'); //判斷拖入的是文本還是圖片 if(data){ //拖入的是文本,直接置換 target.innerHTML = data; }else{ //拖入的是圖片 var imgElem = document.createElement("img"); imgElem.src = data; target.appendChild(imgElem); } } }) })()</script>12.訪問設備信息
h5提供了許多可以訪問設備的Api，但是目前基本都應用在手機端，pc端使用非常有限。
獲取網絡狀態。
// × 所有PC瀏覽器現在都不支持 只有手機端的Firefoxvar connectionInfo = navigator.connection;或者下面這個方法：if (navigator.onLine){ console.log('online');}else{ console.log('offline');}獲取重力感應方向
window.addEventListener('deviceorientation', function(event) { var a = event.alpha; // Y軸 上下方向 var b = event.beta; // Z軸 東西方向 var g = event.gamma; // X軸 南北方向});加速度計
window.addEventListener('devicemotion', function(e) { // 獲取加速計數據 {x,y,z} var acceleration = e.accelerationIncludingGravity;});地理座標
navigator.geolocation.getCurrentPosition(function(e) { // e.coords.longitude : 經度, e.coords.latitude : 緯度 document.querySelector('#result').innerHTML = JSON.stringify(e.coords);}, function(e) { document.querySelector('#result').innerHTML = JSON.stringify(e);});navigator.geolocation.watchPosition(success, error);H5還有其它的一些特性，包括語義化標籤，ARIA無障礙互聯網應用，多媒體（包括音頻，視頻）等等，真正使用的時候再詳細研究。
相關推薦
推薦中...