1.IE8及以下不支持H5标签,解决办法:
1 <!--[if lte ie 8]> 2 <script src="html5shiv.min.js"></script> 3 <![endif]-->
引入写好的外部js文件,兼容低版本IE浏览器,代码只有IE识别,对其他浏览器来说只是注释
2.新增的表单操作
<form></form>表单域 <fieldset></fieldset>逻辑组合一组表单 <legend></legend>表单标题 <datalist></datalist>数据列表,一般设置ID,与input中list属性对应起来 <option></option>数据 <keygen/>保证数据传输的安全
input标签type类型:
- range滑动条:value可以更改初始位置,范围可用min、max控制
- number数字:可以设置步长step,例如step=2,输出的值将为0,2,4,6.....
- meter度量器
- progress进度条
属性:
- autocomplete设置自动完成,on开启,off关闭,添加到本地缓存中
- required指定为必填
- multiple设置为多选
- novelidate关闭表单验证
- pattern=“”自定义正则验证
- 度量器里low、high,对于低于的值和高于的值会警告提醒
自定义表单验证不通过时的提醒文字:
- 指定input添加oninvalid事件,表单验证不通过时触发
- setCustomValidity("");内传入自定义文字,大功告成!
3.多媒体:
不再像以前那样,必须依赖第三方或者插件,现在有了自己的音频和视频标签
音频:
<audio></audio>在src属性内传入地址,支持ogg、mp3、war三种格式,兼容浏览器写法:
1 <audio> 2 <source scr="music/song.ogg"/> 3 <source scr="music/song.mp3"/> 4 <source scr="music/song.war"/> 5 您的浏览器无法打开 <!--IE8不识别该标签--> 6 </audio>
视频:
<video></video>使用方法和<audio>一样,识别mp4、ogg、webm三种格式,兼容写法:
1 <video> 2 <source scr="video/movie.ogg"/> 3 <source scr="video/movie.mp4"/> 4 <source scr="video/movie.webm"/> 5 您的浏览器无法打开 <!--IE8不识别该标签--> 6 </video>
<video>标签是行内块属性(display:inline-block)所以可以设置宽高,音频和视频标签共有属性有:controls显示控制台 autoplay loop循环播放 src