常见的html5有以下十个新特性： 1. Canvas绘图； 2. 表单元素； 3.语义标签； 4、媒体元素； 5. 地理位置； 6.拖放API； 7.WebWorker； 8. 网络存储； 9.WebSocket； 10.SVG绘图。 Canvas 元素用于在网页上绘制图形。
1.画布元素
Canvas元素用于在网页上绘制图形，有多种绘制路径、矩形、圆形、字符和添加图像的技术。 Canvas通过js绘制2D图形并逐像素渲染，如果在图片完成后进行更改，则整个场景将重新绘制。
2. 表单元素
(1)新增表单元素
：元素指定输入字段的选项列表，使用元素的列表元素与该元素的id绑定；
：为了提供可靠的用户身份验证技术，标签为表单指定了一组密钥对生成器；
：用于不同类型的输出，例如估计或脚本输出。
(2)新增表单属性
placehoder属性：在用户输入值之前，会在输入字段上显示简短的提示，这是默认的框提示；
required属性：是一个布尔属性，必填输入字段不为空；
pattern属性：描述用于验证元素值的正则表达式；
max/min属性：最大值和最小值；
step属性：指定输入字段的合法数字区间；
height/width属性：图像类型标签的图像高度和厚度；
autofocus属性：是一个布尔属性，在页面加载时手动获取焦点；
multiple 属性：它是一个布尔属性，指定元素中要选择的多个值。
3. 语义标签
语义标签不仅使标签拥有自己的含义，语义标签的优点：（1）使界面的代码结构清晰，方便代码阅读和团队开发； （2）方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）分析，以语义方式呈现网页； (3)有利于搜索引擎优化(SEO)。
4. 媒体元素
播放音频文件的要素————
(1)控制属性提供播放暂停和音量控制；
(2) 和 之间插入浏览器不支持的元素的提示文字；
(3) 允许使用多个元素链接不同的音频文件，浏览器使用第一个支持的音频文件；
(4) 支持三种音频格式：mp3、wax、ogg。
播放视频文件的元素
（1）control属性提供播放暂停和音量控制，也可以使用dom操作：play()和pause()；
(2) video元素提供了控制视频宽度和高度的规范。 如果设置了，则在页面加载时保留，如果不设置，则不保留，页面会按照原始视频进行更改。
5、地理定位
HTML5使用getCurrentPosition()方法来获取用户的位置，并可以据此估计位置距离。
6.拖放API
拖动是一种常见功能，即抓取对象然后将其拖动到另一个位置。 在 HTML5 中，拖动是标准的一部分，任何元素都可以拖动。 拖动过程分为源对象和目标对象。 源对象是指您要拖动的元素，目标对象是指拖动后要放置的目标位置。
拖动的源对象（可能已连接）可以触发风暴 - 3：
整个拖动过程的组成：dragstart*1+drag*n+dragend*1。
拖动目标物体可触发的风暴（无需通讯） - 4：
整个拖动过程的组成1：dragenter*1+dragover*n+dragleave*1；
整个拖动过程的组成2：dragenter*1+dragover*n+drop*1。
七、WebWorker
在 HTML 页面中执行脚本时，页面状态在脚本完成之前没有响应。 WebWorker是一个在后台运行的JavaScript，独立于其他脚本，不会影响页面的性能。 当 WebWorker 在后台运行时，您可以继续执行任何您喜欢的操作：单击、选择内容等。
8. 网络存储
WebStorage是H5引入的一个重要功能，用于帮助解决cookie存储的本地缓存。 早些时候，本地存储使用cookie。 而且Web存储需要更安全、更快速，WebStorage容量为5M，而cookie只有4K。
九、WebSocket
WebSocket 合约提供了 Web 应用程序客户端和服务器之间的全双工通信机制。 在WebSocket API中，浏览器和服务器只需要进行一次握手html5界面，然后浏览器和服务器之间就创建了一条快速通道html5界面，两者可以直接互相传输数据。 浏览器通过 JavaScript 向服务器发送请求建立 WebSocket 连接。 连接建立后，客户端和服务器端可以直接通过TCP连接交换数据。 获得WebSocket连接后，可以通过send()向服务器发送数据，并通过onmessagestorm接收服务器返回的数据。
10.SVG绘图
SVG 指的是可缩放矢量图形，它是一种使用 XML 描述 2D 图形的语言。 在 SVG 中，每个绘制的形状都被视为一个对象。 如果 SVG 对象的属性发生更改，这允许浏览器手动渲染图形。
