H5的新特性(详细汇总)_h5新特性-优快云博客

本文介绍了HTML5的拖放功能、自定义data属性、语义化标签、多媒体处理、Canvas绘图、地理位置API、本地存储以及新的表单控件。同时，提到了Web技术如WebWorker、WebSocket和Geolocation的使用，为现代网页开发提供了更多可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、拖拽释放(Drapanddrop)APIondrop
拖放是一种常见的特性，即抓取对象以后拖到另一个位置
在HTML5中，拖放是标准的一部分，任何元素都能够拖放
2、自定义属性data-id
3、语义化更好的内容标(header,nav,footer,aside,article,section)
4、音频,视频(audio,video)如果浏览器不支持自动播放怎么办?在
属性中添加autoplay(谷歌浏览器不支持音频自动播放，但是视频支
持静音自动播放)
5、画布Canvas
5.1） getContext()方法返回一个用于在画布上绘图的环境
Canvas.getContext(contextID)参数contextID指定了您想要在画布上
绘制的类型。当前唯一的合法值是“2d” ，它指定了二维绘图，并且导
致这个方法返回一个环境对象，该对象导出一个二维绘图API
5.2） cxt.stroke()绘制线条
5.3） canvas和image在处理图片的时候有什么区别?
image是通过对象的形式描述图片的,canvas通过专门的API将图片绘制
在画布上.
6、地理(Geolocation)API其实Geolocation就是用来获取到当前设备的经
纬度（位
置）
7、本地离线存储localStorage用于长久保存整个网站的数据，保存的数
据没有过
期时间，直到手动去删除
8、 sessionStorage该数据对象临时保存同一窗口(或标签页)的数据，在关
闭窗口或标签页之后将会删除这些数据。
9、表单控件calendar,date,time,email,url,search,tel,file,
number
10、新的技术webworker,websocket,Geolocation