新增公共属性
常用四类公共属性
HTML5新增了很多公共属性。
▶ hidden
▶ draggable
▶ contenteditable
▶ data-*
我们可以使用hidden属性来显示或隐藏某一个元素。
<element hidden="hidden"></element>
<div hidden>海贼王</div>在HTML5中，我们可以使用draggable属性来定义某一个元素是否可以被拖动。
draggable有两个属性值：true和false。默认值为false。
其实draggable="true"只能定义元素可以被拖动这一个行为，拖动后并不会改变元素的位置。
在HTML5中，我们可以使用contenteditable属性来定义某个元素的内容是否可以被编辑。
<p contenteditable="true">这是一段可以被编辑的文字</p>在HTML5中，我们可以使用data-*属性来为元素实现自定义属性。
<element data-*="属性值" ></element><p data-color="red">你的努力程度之低，根本轮不到拼天赋。</p>
oP.style.color=oP.dataset.color;如果是data-xxx格式，则应该写成obj.dataset.xxx。
如果是data-xxx-yyy格式，则应该写成obj.dataset.xxxYyy。
input新增的属性
为了提高开发效率，以及达到更好的用户体验，HTML5为input元素新增了大量的属性。
在实际开发中用得最多的有以下5个。
▶ autocomplete
▶ autofocus
▶ placeholder
▶ required
▶ pattern
我们可以使用autocomplete属性来实现文本框的自动提示功能。autocomplete属性一般都是结合datalist元素来实现自动提示功能。
<input type="text" autocomplete="on或off" />在HTML5中，我们可以使用autofocus属性来实现文本框自动获取焦点。
<input type="text" autofocus />我们可以使用required属性来定义文本框输入内容不能为空。如果文本框为空，则不允许提交。
<input type="text" required />在HTML5中，我们可以使用pattern属性来为文本框添加验证功能。
<input type="text" pattern="正则表达式" />email、url、tel这3个类型的input元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。
在HTML5中，form元素的新增属性中比较重要的只有一个，那就是：novalidate。
email、tel、url等类型的input元素中内置的验证机制默认会自动执行。但是在某些情况下，我们需要使用JavaScript来创建更为复杂且健全的验证，这时就要覆盖原有的验证机制了。
在HTML5中，我们可以使用novalidate属性来禁用form元素的所有文本框内置的验证功能。
<form novalidate="novalidate">元素拖放
在HTML5之前，如果想要实现一个元素的拖放效果，我们一般需要结合该元素的onmousedown、onmousemove、onmouseup等多个事件来共同完成。
在HTML5中，我们只需要给元素添加一个draggable属性。
如果仅给元素设置draggable="true"，则该元素只具备可拖曳的特点，并不能改变元素的位置。如果想要拖动改变元素的位置，我们还需要结合元素拖放触发的事件来操作。
拖放事件总共有7个，源元素触发事件3个，目标元素触发事件4个。
当图片拖动开始时，会触发ondragstart事件，此时我们使用offsetX、offsetY这两个变量记录图片初始坐标。当图片被拖动时，会触发ondrag事件，此时我们重新设置图片的位置。
.offsetX、e.offsetY分别表示鼠标相对于触发事件的对象的X坐标、Y坐标，e.pageX、e.pageY分别表示鼠标相对于当前窗口的X坐标、Y坐标。
在HTML5中，如果想要在元素拖放中实现数据传递，我们需要使用dataTransfer对象。dataTransfer对象主要用于在“源元素”与“目标元素”之间传递数据。
在整个拖曳过程中，具体操作是这样的：开始拖放源元素时（ondragstart事件），调用setData()方法保存数据；然后在放入目标元素时（ondrop事件），调用getData()方法读取数据。
source.ondragstart=function(e){
e.dataTransfer.setData("text/plain",e.target.id);
};
dest.ondrop=function(e){
e.dataTransfer.getData("text/plain");
};event.preventDefault()方法来屏蔽元素的默认行为。
文件操作
在HTML5中，文件上传是使用input元素来实现的，其中type属性取值为"file"。
文件上传input元素有两个重要属性：multiple和accept。multiple属性表示“是否选择多个文件”。
accept属性用于设置文件的过滤类型（MIME类型）。
<input type="file" accept="image/jpeg, image/png"/>在文件上传元素中，将会产生一个FileList对象，它是一个类数组对象，表示所有文件的集合。
File对象有以下4个属性：
file.size获取到的大小值的单位是B（字节）。
在HTML5中，专门提供了一个文件操作的API，即FileReader对象。我们通过FileReader对象可以很方便地读取文件中的数据。
FileReader对象有5个方法，其中4个用来读取文件数据，另外1个用于中断读取操作：
readAsText()方法有两个参数：第1个参数为File对象，第2个参数为文本的编码方式，默认值为“utf-8”。这个方法非常容易理解，表示将文件以文本方式读取，读取的结果就是这个文本文件的内容。
readAsBinaryString()方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串来存储文件。
abort()方法可以用来中止读取操作，在读取大文件时，这个方法非常有用。
FileReader对象提供了6个事件，用于检测文件的读取状态：
var reader = new FileReader();
reader.readAsText(file, 编码);
reader.onload = function(){
//成功读取后的操作
this.result;
};在线预览图片（readAsDataURL()方法）到了HTML5时代，我们使用FileReader对象的readAsDataURL()方法，可以不经过后台而直接将本地图片显示在页面中，这样可以减少前后端的频繁交互，减少服务器端的压力。
在HTML5中，还新增了一个Blob对象，用于代表原始二进制数据。
var blob = new Blob(dataArray, type);Blob()构造函数有两个参数，这两个参数都是可选参数，而并非必选参数。
第1个参数dataArray是一个数组，数组中的元素可以是以下类型的对象。
▶ String对象（即字符串）
▶ Blob对象（即其他Blob对象）
▶ ArrayBuffer对象
▶ ArrayBufferView对象
第2个参数type是一个字符串，表示Blob对象的MIME类型。常见的MIME类型。
Blob对象可以通过window.URL对象的createObjectURL()方法生成一个网络地址，然后结合a标签的download属性来实现下载文件的功能。
本地存储
Cookie这种方式有很多限制因素。
▶ 大小限制：大多数浏览器支持最大为4KB的Cookie。
▶ 数量限制：大多数浏览器只允许每个站点存储20个。
HTML5新增了3种全新的数据存储方式：localStorage、sessionStorage和indexedDB。其中，localStorage用于永久保存客户端的少量数据，sessionStorage用于临时保存客户端的少量数据，而indexedDB用于永久保存客户端的大量数据。
对于localStorage来说，每一个域名可以保存5MB数据。
sessionStorage对象保存的是“临时数据”，用户关闭浏览器后，数据就会丢失；而localStorage对象保存的是“永久数据”，用户关闭浏览器后，数据依然存在。
localStorage和sessionStorage都是window对象下的子对象。
indexedDB的数据库，该数据库是一种存储在客户端本地的NoSQL数据库，用于在本地存储大量数据。
var request = window.indexedDB.open(数据库名, 版本号);
request.onerror = function(){
console.log("创建或打开数据库失败！");
};
request.onsuccess = function(e){
console.log("创建或打开数据库成功！");
};音视频
在HTML5之前，如果想要在页面中展示音频、视频等，我们往往需要在浏览器中安装各种第三方插件（比如Flash Player、QuickTime等）来实现。
那个时候，我们一般都是使用object和embed这两个元素来实现的。
在HTML5时代中，正确的做法是：对于音频，使用audio元素来开发；对于视频，使用video元素来开发。
对于HTML5视频格式，主要有3种，分别是ogg、mp4和webm。不过，主流浏览器对这3种视频格式的支持程度都不一样。
在HTML5中，我们可以配合使用video元素和source元素，实现多种格式的视频播放。
<video>
<source type="vdieo/ogg" src="文件路径" />
<source type="video/mp4" src="文件路径" />
<source type="video/webm" src="文件路径" />
</video>
如果当前浏览器能同时识别几种视频格式，则最终将使用第一个可识别的格式文件。
实现网页背景音乐很简单，只要隐藏控件就可以了，也就是不添加controls属性。
