HTML5高级特性详解

HTML5核心特性

新增表单元素
表单验证API
多媒体处理（视频、音频支持）
Canvas绘图功能
新API（拖拽、Web存储等）

表单元素更新：

新增了如datalist、progress、meter 和 output 等元素，丰富了表单的交互性和功能性。

表单验证API增强：

setCustomValidity(message)：允许开发者自定义验证失败时的提示信息；若无错误，则需调用setCustomValidity('')清空消息以确保表单可提交。
checkValidity()：检查表单或特定字段是否通过验证，返回布尔值。
示例代码：const isValid = formElement.checkValidity(); // isValid为true表示验证通过

新事件：invalid事件

formElement.addEventListener('invalid', function(event) { /* 在此处理第一个出错的表单元素 */ }, false);

通过ValidityState对象可以访问表单验证的状态信息，例如：element.validity。

Canvas绘图技术

Canvas是一个绘图元素，结合Javascript使用时，首先需要通过getContext('2d')方法获取绘图上下文，然后利用上下文提供的API进行绘图操作。更多Canvas API详情请参考W3Schools HTML5 Canvas教程。

拖放API详解

拖放功能涉及两个主要元素：源元素（被拖动的对象）和目标元素（接收拖动对象的容器）。

源元素事件：

dragstart：开始拖动时触发。
drag：拖动过程中持续触发。
dragend：拖动结束后触发。

目标元素事件：

dragenter：拖动过程中首次进入目标区域时触发。
dragover：当拖动对象悬停在目标元素上时触发。
drop：在目标元素上释放拖动对象时触发。
dragleave：拖动对象离开目标区域时触发。
重要提示：处理这些事件时，通常需要调用event.preventDefault()来阻止浏览器的默认行为。

DataTransfer对象：

用于在拖放过程中传递数据，可通过事件对象e访问。常用方法包括：
setData(type, data)：设置数据及其类型。
getData(type)：获取指定类型的数据。
clearData(type)：清除指定类型的数据。
setDragImage(image, x, y)：设置拖动过程中显示的图像。