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>
下面这篇文章总结的很好，可以参考：http://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无障碍互联网运用，多媒体（包括音频，视频）等等，真正利用的时候再详细研究。
