1. 新增的语义标签
代码:
显示效果:
2. 新增的表单控件
代码:
显示效果:
3. 新增的表单属性
1.
placeholder
提示信息
2.autocomplete
是否保存用户输入值(取消提示信息)
3.autofocus
指定表单获取输入焦点
4.required
表示此项必填,不可为空
5.pattern
正则验证
6.formaction
在submit里定义提交地址
7.formmethod
选择数据提交方式 get/post
8.novalidate
提交后重新加载当前页面
9.formnovalidate
它会覆盖form元素的novalidate属性,如果使用,则提交表单时按钮不会执行验证过程
代码:
显示效果:
checkValidity()方法
显示验证方法,每个表单元素都可以调用该方法(包括form),它会返回一个布尔值,表示是否通过验证,默认情况下,表单的验证发生在表单提交时,如果使用checkValidity()方法,可以在需要的任何地方验证表单
setGustomValidity()方法
自定义错误提示信息的方法
当默认的提示错误满足不了需求时,可以通过该方法自定义错误提示
代码:
显示效果:
4. 音频和视频
音频audio视频video
属性
1.controls
显示或隐藏用户控制界面
2.autoplay
媒体是否自动播放,用于背景音乐
3.loop
媒体是否循环播放
以上三种没有属性值
1.currentTime
开始到播放现在所用的时间
2.duration
媒体总时间(只读)
代码:
显示效果:
3.volume
0.0-1.0的音量相对值
4.muted
是否静音
5.paused
媒体是否暂停(只读)
6.ended
媒体是否播放完毕
7.error
媒体发生错误的时候,返回错误代码(只读)
8. currentSrc
以字符串的形式返回媒体地址(只读)
方法
play()
媒体播放
pause()
媒体暂停
load()
重新加载媒体
media事件
onended
当媒介已达到结尾时运行的脚本(可发送类似"谢谢观看"之类的信息)
当音乐结束后触发的事件
代码:
显示效果:
ontimeupdate
当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本
随着音乐播放而不断触发的方法
代码:
显示效果: