HTML5总结

媒体API

音频–audio
1、标记属性：
（1）src:设置音频的播放路径
（2）autoplay:自动播放。浏览器不支持自动播放 --浏览器规定:媒体必须通过用户交互才会播放
（3）controls:设置是否显示播放控制面板
（4）loop：设置是否循环播放。
（5）muted：设置是否默认静音

2、接口属性：
（1）paused：判断音频是否处于暂停状态。
（2）volume：返回/设置当前音频播放的音量（取值：0-1）。
（3）duration：返回音频播放的总时长（单位：秒）。
（4）currentTime：返回/设置音频播放的当前位置（依靠当前秒数来实现）。
（5）currentSrc：返回音频的URL地址。
（6）ended：返回音频的播放是否结束。
（7）muted：返回/设置音频的静音效果。
（8）playbackRate：设置音频播放的速度。（0.5-慢速播放，1-正常，2-二倍播放）

3、接口方法：
（1）play()：让音频播放。
（2）pause()：让音频暂停。

4、接口属性和接口方法的使用：
（1）接口属性和接口方法必须使用音频对象的实例进行调用。

5、接口事件：
（1）play：当音频文件播放（调用了play()方法）时触发。
（2）pause：当音频文件暂停（调用了pause()方法）时触发。
（3）ended：当音频文件播放结束时触发。
（4）volumechange：当音量发生变化时触发。
（5）ratechange：当播放速度发生变化时触发。
（6）timeupdate：当音频的当前播放位置发生变化时触发，只要音频处于播放状态就会
一直触发该事件。
（7）durationchange：当音频的总时长发生变化时触发，即播放的歌曲发生变化时触发。

视频–video
1、由于视频同音频一样无法自动播放，所以标记必须带有controls属性来实现控制
面板。

2、有的视频可能第一帧是没有任何画面的。
解决方案：可以利用poster属性为视频设置一个封面图。

3、标记具备width和height属性，来设置视频的宽高。
若只设置width或height中的一个，另一个属性会根据视频的比例等比缩放。

4、如何获取视频的原始尺寸：
可以使用视频的接口属性：videoWidth、videoHeight。这两个接口属性应该是用在
window.onload事件中。
var myVideo=document.getElementById(“myVideo”);
window.οnlοad=function(){
console.log(myVideo.videoWidth);
console.log(myVideo.videoHeight);
}
注意：视频对象的实例只能通过DOM操作获得节点来得到，不能通过构造函数来得到。

5、视频的大小如何适配移动端？利用媒体查询来实现。
@media screen and (max-width:768px) {
video{
width:100%;
}
}

文件类

1、Files类：文件域.files
2、File类：Files.item（index）
3、FileReader类
4、Blob

文件域

1、文件域必须具备name属性。

2、无法通过value属性得到具体的取值（希望得到所选择文件的路径）。
原因：浏览器不支持文件真实路径的返回，让服务器上的文件路径保密。
alert(tp.value); //c:\fakepath\ 这是一个虚拟路径

3、HTML5中为文件域新增了两个属性：
（1）multiple，放置性属性，允许文件域一次选择多个文件。
（2）accept，取值为表示文件类型的MIME格式字符串，可以在弹出的资源管理器中对
文件进行格式筛选。
MIME（多用途互联网邮件扩展）是一个描述文件类型的字符串，由主类型和子类
型组成：
text/css（css文件） text/javascript（js文件） text/plain（文本文件）
主类型：application、image、audio、video、text。

FileList类
1、功能：获取用户从文件域中选择的所有文件的集合。

2、创建FileList类的实例：使用文件域的files属性就可以创建FileList类的实例。
var files=tp.files;
alert(files); //[object FileList] 文件列表对象

3、FileList类的属性：length，返回FileList类所包含的文件个数。

4、FileList类的方法：item(index)，返回FileList类所包含的索引值为index的那一个文件。
除了可以使用item()方法得到某一个文件以外，还可以使用类似于数组下标的格式来得
到某一个文件。
例：要得到用户选择的索引值为5的文件。
var files=tp.files;
var temp1=files.item(5);
var temp2=files[5];

File类
1、功能：表示一个文件。

2、如何得到File类的实例：利用FileList类的item()方法得到的对象就是File类的实例。
alert(temp1); //[object File]

3、File类的属性：
（1）name，返回文件的文件名。
（2）size，返回文件的大小，以字节（B）为单位。
（3）type，返回文件的MIME类型。
（4）lastModifiedDate，返回文件最后一次修改的格林尼治日期。
（5）lastModified，返回文件最后一次修改的时间戳，从1970年1月1日到最后一次修
改的日期之间的毫秒数。
例：让用户从文件域中选择的文件（图片）在浏览器页面中展示每个文件的属性。
（1）计算机中所有的文件在内存中都是以二进制进行存储的。
例如：有一个图片在计算机中是这样存储的：10101010010110110100111101010
（2）一个二进制位被称为1“比特”，比特（bit，简写为b）是一个单位，只能存储一
个二进制数值。
例如：10110 这个二进制数据占据5bit。
11 这个二进制数据占据2bit。
（3）规定：8比特是一个“字节”（Byte，简写为B）。
公式：1Byte = 8bit 1B=8b
例如：1010 这个二进制数据占据4bit，0.5Byte。
10110101 这个二进制数据占据1Byte。
（4）在字节这个单位上添加数量级已得到更大的可以用来计数的单位。
千字节1KB = 1024 B 可以表示一张图片、一篇文档。
兆字节1MB = 1024 KB = 10241024 B 可以表示一张图片、一首歌曲。
吉字节1GB = 1024 MB = 102410241024 B 可以表示一个视频、一部电影。
太字节1TB = 1024 GB = 1024102410241024 B 可以表示一台服务器的容量。

如何获得有效地文件URL地址：
HTML5提供了两种有效地文件URL地址，这两种地址都是单页面可用的动态地址。

1、Blob地址：
var blobAddress = window.URL.createObjectURL(File类实例);
格式：blob:null/87f38671-b37c-4350-97af-20e20d276d1e
下载图片：下载

2、Base64地址：
使用FileReader类的readAsDataURL()方法进行读取。

Blob类：（二进制大文件：压缩文件、图片文件、音频文件、视频文件）
1、Blob类是File类的父类。、

2、如何创建Blob类的实例：
var blob = new Blob(array,{
type:MIME类型, //type:“text/html;charset=utf-8”
ending:“transparent”、“native” //设置如何处理文件末尾的结束符
})

3、FileReader类和Blob类的区别：
FileReader类的功能是读取已有文件。
Blob类的功能是创建文件

智能表单

新增的表单元素：
1、网址：

2、电子邮箱：
multiple属性：允许书写多个利用逗号隔开的电子邮箱地址。

3、滑竿：
<input type=“range” max=“最大值” min=“最小值” step=“步长” value=“默认值”
οninput=“age.value=this.value” />

4、微调器：

5、电话： 在IOS系统中会弹出数字键盘。

6、搜索框：

7、颜色框：

8、备选列表：使用标记的list属性与datalist进行绑定。

……

9、日期拾取器：


主流浏览器无法支持
返回如下格式：2020-W17，表示2020年第17周
返回如下格式：2020-12
返回如下格式：2020-04-16T05:59

10、输出框： value属性用来设置输出框所显示的内容

表单元素的新增属性：
1、multiple：适用于、、。

2、placeholder：设置文本框的占位符内容。

3、autofocus：自动获取鼠标焦点，一个表单中只允许有一个表单元素设置该属性。
window.οnlοad=function(){
document.forms[0].email.focus();
}

4、list：用来绑定备选列表。

5、autocomplete：自动完成，取值为on（开启自动完成）、off（关闭自动完成）。

6、form：书写在表单元素上，为书写在任意位置的表单元素指定它所属的表单
formaction：书写在具备submit功能的按钮上。
formmethod：书写在具备submit功能的按钮上。
默认情况下，具备submit功能的按钮将利用标记的method属性取值提交数据到

标记的action属性指定的文件中。 具备submit功能的按钮可以使用formmethod、formaction属性来进行不同方式和不同文 件的数据提交。 formenctype：单独设置提交数据的类型（作用：告知后台数据类型）。 默认值：application/x-www-form-urlencoded，表示提交的数据时普通的表单数据。 取值：application/form-data，表单中具备文件域时应该改为该类型，表示提交的数据 包含二进制大文件。 formtarget：单独设置提交数据的目标打开方式。取值：_self、_blank HTML4阶段要求表单元素必须书写在标记对中。提交数据或重置数据都只 针对所在表单中的表单元素。 HTML5阶段不再要求必须书写在标记对中，可以书写在任意位置。 例如： 注册1 注册2

表单的验证：
H5的智能表单是在单击了具备submit功能的按钮之后自动开启验证。
1、与表单验证相关的HTML属性：
（1）required：表示该表单元素必须填写内容。
（2）pattern：为表单元素的取值指定一个必须匹配的正则表达式。
例如：

2、与表单验证相关的接口属性：
（1）willValidate：返回表单元素是否需要验证。
A .带有required属性、pattern属性的表单元素需要验证。
B .type属性取值为email、url、number的表单元素需要验证。
（2）validationMessage：只读属性，返回表单元素验证错误时的提示内容，若表单元素
验证通过，则该属性返回空串。

3、与表单验证相关的接口方法：
（1）checkValidity()：判断表单/表单元素是否通过了验证。
注意：该方法只能给出最终的验证结果，无法判断验证的错误类型。
（2）setCustomValidity(errorMessage)：自定义验证错误提示语。
使用了setCustomValidity()方法之后，checkValidity()将一直返回false。

ValidityState类：
1、如何获取ValidityState类的实例：采用表单元素的validity属性。

var nick=document.forms[0].nick; var vNick=nick.validity; alert(vNick); //[object ValidityState]

2、ValidityState类的属性：
（1）valueMissing：判断required验证，返回true表示没有通过required验证。
（2）patternMismatch：判断pattern验证。
（3）typeMismatch：判断email、url、number验证。
（4）tooLong：判断maxlength验证。
（5）rangeUnderflow：判断min验证。
（6）rangeOverflow：判断max验证。
（7）stepMismatch：判断step验证。
（8）customError：判断自定义验证。

WebStorage本地存储

webStorage包括两种：localStorage、sessionStorage。

一、如何创建本地存储对象：
创建localStorage对象：var storage=window.localStorage;
创建sessionStorage对象：var storage=window.sessionStorage;

二、创建本地存储数据：
1、window.localStorage.键名=“键值”;
2、window.localStorage.setItem(“键名”, “键值”);
3、window.localStorage[“键名”]=键值;

三、读取本地存储数据：
1、console.log(window.localStorage.键名);
2、console.log(window.localStorage.getItem(“键名”));
3、console.log(window.localStorage[“键名”]);
若指定键名的本地数据不存在，则返回null。

四、删除本地存储数据：
window.localStorage.removeItem(“键名”);

五、清除本地存储数据：
window.localStorage.clear();

六、获取本地存储的变量个数：
console.log(window.localStorage.length);

七、允许通过索引值引用本地存储的键名和键值：
1、键名：window.localStorage.key(index);
2、键值：window.localStorage.[window.localStorage.key(index)];

Drag API

一、如何让元素可拖放：
1、有三个元素默认可拖放：、、被选中的文本。
2、其他元素可以添加HTML5新增的属性来实现拖放效果。
draggable=“true | false | auto”
二、与拖放与有关的事件：
1、dragstart，当被拖放对象（SOURCE，源对象）开始拖放时触发该事件。
2、drag，当被拖放对象（SOURCE，源对象）正在处于拖拽过程中触发该事件。
当拖放动作开始且尚未结束之时，该事件会一直被触发。
3、dragend，当被托访对象（SOURCE，源对象）拖放操作结束时触发该事件。

4、dragenter，有可拖放对象进入本元素时触发该事件。
5、dragleave，有可拖放对象离开本元素时触发该事件。
6、dragover，有可拖放对象在本元素范围内移动时触发该事件。
当可拖放对象进入到某个元素且尚未离开之时，该事件会一直触发。

7、drop，有可拖放对象在本元素内部放下时触发该事件。
drop事件生效需要在dragover事件中执行event.preventDefault()方法。
三、DataTransfer类：
1、如何创建DataTransfer类的实例：
在拖放事件中使用event.dataTransfer属性来创建DataTransfer类的实例。
target.οndrοp=function(event){ alert(event.dataTransfer); } //[object DataTransfer]
2、功能：实现在拖放过程中源对象和目标对象之间的数据传递。
3、如何在拖放过程中实现源对象和目标对象之间的数据传递。
（1）在源对象（可拖放对象）上使用DataTransfer类的setData()。
event.dataTransfer.setData(“format”,“data”);
（2）在目标对象上使用DataTransfer类的getData()。
var temp = event.dataTransfer.getData(“format”);
4、从浏览器以外拖放文件：
DataTransfer类的属性：
（1）files：得到由用户从浏览器以外拖拽到指定位置的多个文件的FileList类的实例。
（2）types：
（3）items：
5、DataTransfer类的方法：
setDragImage(image,x,y)：为拖放动作设置一个图片并跟随鼠标。
image，设置要跟随鼠标拖放的图片，可以是一个new Image()实例。
x，指定图像的横坐标跟随鼠标。
y，指定图像的纵坐标跟随鼠标。
该方法必须设置在dragstart事件中。