HTML5知识点

HTML5

Posted by lisbeth on March 28, 2019

HTML5知识点

DAY01

一:表单

1.1表单新类型

email类型,url类型,tel类型,date类型,number类型,range类型

1.2表单新元素

datalist元素-类似于select元素

 datalist元素-预定义数据内容(option)
 
 使用<input>元素的list属性

progress元素-进度条

  max-设置最大值
 
  value-设置当前进度

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值是否为空

value==””   value==null

tooLong状态

1.6.2 rangeUnderflow状态

如果输入内容小于min属性声明的值,那么这个状态就true

if(age.validity.rangeUnderflow){

  alert(“年龄不符合要求”);

}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自动播放视频