介绍HTML5新特性

总结了共八点，包含语义化标签，多媒体标签、表单增强、离线存储、地理位置、拖放API、Canvas绘图、自定义数据类型。下面简单介绍下

语义化标签

方便网站的seo (Search Engine Optimization搜索引擎优化)
新增的一些语义化标签
<header>: 头部标签
<nav>: 导航标签
<article>: 内容标签
<section>: 定义文档某个区域
<aside>: 侧边栏标签
<footer>:尾部标签

多媒体标签

audio和video

video

兼容写法

<video controls="controls" width="300">
    <source src="move.ogg" type="video/ogg">
    <source src="move.mp4" type="video/mp4">
   您的浏览器暂不支持 <video> 标签播放视频
</video>

浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

audio

兼容写法

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

表单增强

表单元素新增属性

• placeholder
• required
• pattern
• autofocus
• …

新增表单输入元素类型

• email
• url
• number
• range
• date
• …

Canvas绘图

离线存储

• Web Storage（SessionStorage LocalStorage）
• IndexedDB API

地理定位

Geolocation API允许Web应用获取用户的地理位置信息（需授权），实现基于位置的服务（导航、附近搜索等）

拖放支持

Drag and Drop API使得网页实现拖放操作变得更加简单

自定义数据类型

自定义属性（Custom Attributes），允许开发者在HTML元素上添加自定义的属性，以便存储额外的数据或提供特定的功能。

自定义属性的命名应以data-开头，后面可以跟上任意的自定义名称，这样的命名有助于确保自定义属性不与HTML或其他标准属性冲突，并且兼容更好。

代码示例

<div id="myDiv" data-name="XH" data-age="22"><div>

如何获取自定义属性

var div = document.getElementById("myDiv");

// 第一种方式
var name = div.getAttribute("data-name");
var age = div.getAttribute("data-age");

// 第二种方式
var name = div.dataset.name;
var age = div.dataset.age;

注意：获取自定义属性的值始终为字符串，如果自定义属性的值为数字类型，需要使用parseInt和parseFloat将其进行转化