h5:ie9以下需要适配
1:什么是h5:对html的第五次修改;
2:新增语义化标签:(主要是针对搜索引擎,没有顺序)
header:头部标签
nav:导航标签
artical:内容标签
section:块级标签
aside:侧边栏标签
footer:尾部标签
3:注意:
1:在ie9中需要将这些元素转换为块级元素;
2;一般用于移动端开发时再用这些标签;
3:新增多媒体标签:
1:音频:autio:
1:支持的格式有限;
1:ogg(普遍)
2:mp3(普遍)
3:wav
2:常见的属性:
1:autoplay:资源就绪后直接播放(google浏览器把该属性禁用了)
2:controls:向用户显示播放控件,比如播放按钮
3:loop:循环模式
3:不同浏览器支持不同的格式:我们准备多个格式
<audio controls>
<source src="xueluo.mp3" type="audio/mpeg">
<source src="xueluo.mp3" type="audio/ogg">
</audio>
2:视频:video
1:支持的格式:
1:ogg
2:mpeg4
3:webM
2:常见的属性:
1:autoplay(谷歌默认禁止掉了)
解决办法:
给视频添加静音属性muted
2:muted(静音播放)
3:controls(显示播放控件)
4:loop:循环模式
5:preload:预加载,如果有autoplay就忽略该属性
6:paster:imgurl:加载等待画面的图片
3:不同浏览器支持不同的格式
<video controls>
<source src="mi.mp4" type="video/ogg">
<source src="mi.mp4" type="video/mp4">
浏览器不支持video标签,播放视频
</video>
3:h5新增表单:
重点:
number:数字
tel:手机号码
search:可以清除文本框内容
了解:
email:输入类型必须为邮箱类型
url:url类型
date:日期
time:时间
month:月
week:周
color:颜色
4:h5新增表单属性:
1:requied,该表单拥有该属性为必填
<input requied/>
2:placeholder:提示文本(类似于hint)(重点)
<input placeholder="请填写手机号码"/>
3:autofocus:自动聚焦属性
<input autofocus/>
4:autocomplete:(on/off)
<input autocomplete="on/off"/>
浏览器基于之前输入的值进行提示
5:multiple:可以多选文件提交(重点)
<input multiple type="file"/>
可以选择多个文件进行提交