HTML5新增属性参考文档

什么是html5

1.H5并不是新的语言，而是html语言的第五次重大修改–版本

2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.

3.改变了用户与文档的交互方式：多媒体：video audio canvas

4.增加了其它的新特性：语义特性，本地存储特性，网页多媒体，以及动画

5.相对于h4:

1.进步：抛弃了一些不合理不常用的标记和属性 2.新增了一些标记和属性--表单 3.从代码角度而言，h5的网页结构代码更简洁。

什么是语义化标签

语义化标签：很直观的清楚这个标签的作用

header: 页眉 头部nav：导航main：主体内容article：文章aside：侧边栏footer：页脚，底部

语义标签兼容处理

ie9 及以下: 变成行内元素，手动变成块元素

ie8以下：根本不识别html5,手动创建html5标签或者引入html5shiv.min.js

表单新增的type属性

email：对邮箱可以进行验证tel：不会进行验证，会在手机端会切换成数字键盘url：会对输入的网址进行验证number：可以进行数字的输入，不是数字类型search：会携带清除的Xrange：范围限制的拉动杆color: 颜色的选择time: 时分的选择date：年月日的选择datetime-local：年月日时分的完整时间选择month：月份的选择week: 最终显示的格式为周

表单新增的属性

placeholder：默认占位符，当输入文本的时候，会自动将默认的占位清除autofocus：自动获取焦点autocomplete：会有提示之前填过的内容，前提条件：1.必须提交过，必须要有name属性required：为必填项，输入框不能为空，如果为空，会有提示pattern：正则表达式验证multiple：如果input类型为file，提交多个文件，如果类型email，可以输入多个邮箱form：值form表单的id名，这样的话就会将当前输入框和id对应的表单进行关联，提交的时候会一起提交

表单新增事件

oninput：只要内容发生变化，即触发事件onkeyup：键盘弹起时触发oninvalid：代表当前输入框验证没有通过即可触发 setCustomValidity：修改默认的提示内容

媒体标签

audio：播放音频文件的

src：音频文件的地址controls：控制面板autoplay：自动播放loop：循环播放

video

src：视频的文件地址controls：控制面板autoplay：自动播放muted：静音loop：循环播放poster：定义视频封面图，如果不设置，视频画面的第一帧width：视频的widthheight：视频height设置width不设置height,设置height，不设置widthsource标签：可以设置多个资源文件，浏览器在加载的时候，从上到下加载，如果不支持该文件类型，继续加载，一直到找到兼容该浏览器的资源文件

DOM 获取元素

querySelector：该方法可以传递任何选择器，但是只会查抄到满足条件的第一个querySelectorAll：该方法可以传递任何选择器。会查找到满足条件的所有的元素，最终返回的是伪数组，如果想设置样式，遍历该数组，拿到每一个元素，设置样式即可

类名的操作

所有关于类样式操作的都在classList，classList属于dom元素上的的

add：为当前元素添加类名，如果想添加多个用，进行分割remove：移除某一个类名toggle：进行类名的切换contains：判断是否包含某一个类名，如果包含，返回true，不包含返回false

DOM 自定义属性

如何自定义一个属性？ 凡是以data-开头的都是一个自定义属性如何获取自定义属性的值？ 所有的自定义属性都在dom元素下面的dataset里面以属性的形式进行存储如何修改自定义属性？ 给dataset里面对应的属性重新赋值，即修改完成

网络接口

online：网络连通时触发offline：网络断开时触发

全屏接口

requestFullScreen： msRequestFullscreen(ie全屏)cancelFullScreen：取消全屏，这个方法属于 documentfullscreenElement：判断当前状态，是否处于全屏，如果是全屏可以拿到全屏的元素，如果不是返回的就是null通过不同的前缀来解决兼容问题

FileReader上传图片的使用

FileReader是一个构造函数

所以就可以new FileReader 可以得到一个实例对象

readAsText：读取txt文件

readAsBinaryString：读取任意类型文件

readAsDataURL：这个方法url资源读取到的文件会获取到data开头的一段字符串

result：会将读取成功之后的内容存到result上

onload：读取成功

逻辑分析：

我们什么时候要读取图片？ 当我们选择图片上传之后要读取，所以注册onchange事件既然要读图片，就应该要拿到要读取的图片，拿到之后进行读取 var fileImg = document.querySelector(“input”).files[0]在onchange事件函数内部读取图片，但是什么方法可以读取图片？ readAsDataURL()这个方法用来读取图片既然这个方法可以读取图片，怎么拿到这个方法? new FileReader() 得到实例对象，通过实例对象可以调用readAsDataURL(fileImg )最终读取成功之后的结果存到了实例对象的result上，那么我们什么时候可以拿到result，也就是读取成功之后 所以在onload（代表图片读取成功）方法里，拿到result的结果最终将读取的结果 设置到页面上img的的src

百度地图使用

找到你想要的效果，复制代码申请秘钥，并且使用秘钥开发文档》工具支持》坐标拾取器利用百度工具生成地图名片

sessionStorage和localStorage的使用

sessionStorage作用：将数据保存到本地，存储的容量5mb左右

sessionStorage.setItem():像本地存储数据，第一个参数：key（name），第二个参数：value（值）

sessionStorage.getItem():获取本地sessionStorage的数据，参数为key

sessionStorage.removeItem()：移除本地sessionStorage的某一个数据，参数为key

sessionStorage的特性：

关闭浏览器，数据就会自动清除数据不可以多页面共享

localStorage.setItem,localStorage.getItem,localStorage.removeItem用法和sessionStorage一模一样

存储的内容大概20mb但是在同一个浏览器的不同窗口中可以共享数据永久存储，只有卸载浏览器或者手动清除浏览器缓存才能清除

在开发中，使用localStorage更多一些

播放器案例

多媒体：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

常用方法： play() 播放、 pause() 暂停 、paused

Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素

常用属性：

a) currentTime 视频播放的当前时间、

b) duration:视频的总时间 100000/60

c) paused:视频播放的状态.

常用事件：

a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

b) ontimeupdate: 视频时间发生变化就会触发

c) onended:播放完时触发—重置

准备工作：因为我们要大量操作video，我们可以在全局声明一个变量，来存储video元素

var video = $('video')[0]

播放和暂停功能

给暂停播放按钮注册点击事件在事件函数内部写逻辑：判断，如果当前状态为暂停，那么就播放，如果当前状态为播放，那么就暂停video.paused 判断当前状态是否为暂停 是暂停 true 播放状态 false if(video.paused){ video.play(); /移除暂停样式，添加播放样式/ } else{ video.pause(); /移除播放样式，添加暂停样式/ }toggleClass(“fa-play fa-pause”)；进行类名的切换

全屏功能

利用$拿到全屏按钮，给注册点击事件在事件函数内部：video.requestFullScreen该方法可以让视频全屏，有兼容性，加前缀 if(video.requestFullScreen){ video.requestFullScreen(); } else if(video.webkitRequestFullScreen){ video.webkitRequestFullScreen(); } else if(video.mozRequestFullScreen){ video.mozRequestFullScreen(); } else if(video.msRequestFullscreen){ video.msRequestFullscreen(); }

视频显示和总时长处理 视频什么时候可以显示？ video.oncanplay = function(){ // 视频显示 video.style.display=“block”; } 怎么拿到视频的总时长？ var total = video.duration // 3680

问题：首先秒数，并且还有小数

格式化时分秒 var hour = Math.floor(total/3600); hour = hour<10? ‘0’+hour:hour

var minute = Math.floor(total600/60) minute=minute<10?"0"+minute:minute; var second=Math.floor(total`); second=second<10?"0"+second:second; var str = hour+':'+minute+':'+'second' $('.totalTime').html(str)

播放时，时间跟随变化，进度条跟随变化

视频播放的时候设置 时间跟随变化 ontimeupdate：时间发生变化会触发 在ontimeupdate事件函数中拿到当前的时间currentTime ，将当前时间格式化成时分秒 video.ontimeupdate = function(){ var current = video.currentTime var result = time(current) // 00:00:01 $(’.currentTime’).html(result) } 封装格式化时分秒的函数 function time(total){ var hour = Math.floor(total/3600); hour = hour<10? ‘0’+hour:hour

var minute = Math.floor(total600/60) minute=minute<10?"0"+minute:minute; var second=Math.floor(total`); second=second<10?"0"+second:second; return hour+':'+minute+':'+second }

让进度条跟随变化，其实就是视频播放的时候设置进度条的当前进度，实际进度条的进度=视频的当前播放进度 求：视频的当前播放进度 = 当前视频播放的时间/视频总时间 var percent = video.currentTime/video.duration 将进度转化为百分比 percent = percent *100+‘%’ 最终将得到的百分比设置给进度条的宽度 $(".elapse").css(“width”,percent);

实现视频的跳播和播放之后的设置