1. video
作用:播放视频
video常用标签属性:
src:告诉video标签需要播放的视频地址
autoplay:视频自动播放
controls:在浏览器中出现对视频播放的控制条
loop:视频循环播放
muted:静音播放
width/height:设置视频的宽和高
poster:用于告诉video标签视频没有播放之前的占位图片
格式:
<video src=""></video>
<!-- 第二种格式 -->
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
2. audio标签
作用:播放音频
格式:
<audio src=""></audio>
<!-- 第二种格式 -->
<audio>
<source src="" type="">
</audio>
注意:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
3.datalist标签
作用:给输入框绑定待定待选项
格式:
<input type="text" list="xxx">
<datalist id="xxx">
<option>待选项内容</option>
</datalist>
如何给输入框绑定待选列表:
- 新增一个input输入框
- 新增一个datalist列表
- 在input输入框中新增一个list属性,并赋予属性值
- 在datalist增加属性id,把input的属性值付给datalist的id属性值
4. progress标签
作用:表示任务完成度,常用于进度条
格式:
<!-- value 定义已经完成的工作量,如果max值为1,该值必须是介于0~1之间的小数。 -->
<progress value="60" max="100"></progress>
5. 表单新增元素
- 邮箱
作用:可以自动校验输入的内容是否符合邮箱的格式
<input type="email">
- 域名
作用:可以自动校验输入的内容是否是URL地址
<input type="url">
- 数字
作用:输入框中只能填入数字
<input type="number">
- 时间
作用:可以通过日历来选择时间
<input type="date">
- 颜色
作用:可以通过取色板来选择颜色
<input type="color">