HTML5知识点
DAY01
一:表单
1.1表单新类型
email类型,url类型,tel类型,date类型,number类型,range类型
1.2表单新元素
datalist元素-类似于select元素
datalist元素-预定义数据内容(option)
使用<input>元素的list属性
progress元素-进度条
mater元素-刻度
min - 设置最小值
max - 设置最大值
value - 设置当前值
low - 设置低预警值
high - 设置高预警值
output元素-输出
1.3表单新属性
placeholder - 给出默认提示
autofocus - 自动获取焦点
multiple - 允许输入多个值,多个值之间使用”,”
form允许表单元素定义在表单外
1.4表单心验证
required验证是否为空
min和max验证最小和最大
pattern验证正则表达式是否匹配
minlength和maxlength
minlength并不是HTML5的新特性
maxlength不允许输入超过maxlength长度内容
1.5有效状态
valid-验证是否成功
true表示验证成功
valueMissing-验证是否为空(true)
patternMismatch验证类型是否匹配
typeMismatch验证类型是否匹配
rangeMismatch验证是否小于min
stepMismatch验证是否与step匹配
customError配合setCustomValidity()使用
1.6表单验证状态:
1.6.1 tooLong
作用:判断当前元素的长度是否正确
用法:配合maxlength属性使用
注意:
使用maxlength属性后,实际不可能出现长度大于maxlength的值
tooLong很难出现这种情况
扩展内容
代码的编写 - 逻辑的完整性
判断value值是否为空
tooLong状态
1.6.2 rangeUnderflow状态
如果输入内容小于min属性声明的值,那么这个状态就true
if(age.validity.rangeUnderflow){
}else{
alert(“通过”);
}
作用:判断当前元素值是否小于min值
用法:配合min属性使用
注意:并不能于max进行比较。
1.6.3 stepMismatch
作用:判断当前元素之是否与step设置相符
用法:配合step使用
注意:并不能与min或max属性比较
1.6.4 customError状态
用法:配合setCustomValidity()方法
如果使用该方法,该状态返回 true
1.6.5setCustomValidity()方法
作用:修改验证错误后的默认提示信息(设置自定义的错误提示内容)
问题:使用该方法设置错误信息。
当输入正确时,调用该方法将信息设置为空(“”)
不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)
一旦使用该方法修改默认错误提示信息后,及时输入正确,错误提示依旧存在,导致逻辑错误。
如何解决:
判断如果用户输入正确的话,将该方法设置提示内容修改为空。
问题
使用valid状态判断输入是否正确
一旦使用该方法,validityState对象所有状态都返回false
1.6.6 valid
作用:判断当前元素之是否正确
*注意
该状态返回true,表示验证成功
该状态返回false,表示验证失败
DAY02
一:音视频处理
1.1视频处理
目前用于替代flash技术最好的选择-html5
几乎所有的浏览器原生支持
性能更高
智能
如何实现视频处理—
<video> 元素处理视频
如果当前浏览器不支持<video>元素
在<video>元素内编写提示内容
属性
src引入视频文件的路径
autoplay自动播放视频