新增元素
语义化更好的标签元素
- 结构元素:article、aside、header、hgroup、footer、figure、section、nav
- 其他元素:video、audio、canvas、embed、mark、progress、meter、time、command、details、datagrid、keygen、output、source、menu、ruby、wbr、bdi、dialog、
废除的元素
纯表现元素、部分浏览器支持的元素和对可用性产生负面影响的元素
- 纯表现元素:basefont、big、center、font、s、strike、tt、u 用css代替
- 部分浏览器支持的元素:applet、bgsound、blink、marquee
- 对可用性产生负面影响的元素:frameset、frame、noframes,在html5中不支持frame框架,只支持iframe框架
新增的API
-
Canvas:首先获取canvas元素的上下文对象,然后使用该上下文对象中的绘图功能进行绘制。
<canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //设置颜色,默认为black context.fillStyle = "red"; context.fillRect(0,0,100,100); //默认为black context.strokeStyle = "blue"; context.strokeRect(120,0,100,100); </script> 复制代码
-
SVG:SVG是html5的另一项图形功能,是一种标准的矢量图形,是一种文件格式,有自己的API。
<svg height=100 width=100> <circle cx=50 cy=50 r=50/> </svg> 复制代码
-
音频和视频:2大好处,一是作为浏览器原生支持的功能,新的audio和video元素无需安装;二是媒体元素向web页面提供了通用、集成和可脚本化控制的API。
<video src="video.webm" controls> <object data="videoplayer.swf" type="application/x-shockwave-flash"> <param name="movie" value="video.swf" /> Your browser does not support HTML5 video. </object> </video> 复制代码
浏览器支持性检测:用js动态创建,检测特定函数是否存在。
var hasVideo = !!(document.createElement('video').canPlayType); 复制代码
-
Geolocation:可以请求用户共享他们的位置。位置信息来源IP地址、三维坐标、GPS、从RFID、Wifi和蓝牙到Wifi的MAC地址、GSM或CDMA手机的ID、用户自定义数据
navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError); //更新位置信息 function updateLocation(position){ //纬度 var latitude = position.coords.latitude. //经度 var longitude = position.coords.longitude. //准确度 var accuracy = position.coords.accuracy. //时间戳 var timestamp = position.coords.timestamp. } //处理错误信息 function handleLocationError(error){ console.log(error); } //监听位置更新 var watchId=navigator.geolocation.watchPostion(updateLocation,handleLocationError); //不再接收位置更新 navigator.geolocation.clearWatch(watchId); 复制代码
-
Communication:跨文档消息通信,可以确保iframe、标签页、窗口间安全地进行跨源通信。
//发送消息 window.postMessage('hello,world','http://www.example.com'); //接收消息 window.addEventListener('message',messageHandler,true); function messageHandler(e){ switch(e.origin){ case 'friend.example.com': //处理消息 processMessage(e.data); break; default: break; } } 复制代码
-
XMLHttpRequest Level2:改进了跨源XMLHttpRequest和进度事件,XMLHttpRequest Level2通过CORS实现了跨源XMLHttpRequest。跨源HTTP请求包含一个Origin头部,它为服务器提供HTTP请求的源信息。
-
WebSockets:要连接远程主机,只需新建一个WebSocket实例,提供希望连接的对端URL。
-
Forms:新表单元素tel、email、url、search、range、number 未来的表单元素color、datetime、datetime-local、time、date、week、month
-
新表单特性和函数:placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required
-
拖放API:draggable属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer对象
<div id="draggable" draggable="true">Draggable Div</div>
<script>
var draggableElement = document.getElementById("draggable");
draggableElement.addEventListener('dragstart',function(event){
console.log("拖动开始!");
event.dataTransfer.setData('text','hello world!');
})
</script>
复制代码
-
Web Workers API:Web Workers可以让Web应用程序具备后台处理能力,对多线程的支持性非常好。但是在Web Workers中执行的脚本不能访问该页面的window对象,也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应,但是仍然会消耗CPU周期,导致系统反应速度变慢。
-
Web Storage API:sessionStorage(保存在session中,浏览器关闭,数据消失)、localStorage(保存在客户端本地,除非手动删除,否则一直保存)
//sessionStorage和localStorage方法一致 //保存数据 localStorage.setItem(key,value); //读取数据 localStorage.getItem(key); //删除单个数据 localStorage.removeItem(key); //删除所有数据 localStorage.clear(); //得到某个索引的key localStorage.key(index); 复制代码