h5新增标签和表单元素

本文介绍了HTML5中新增的video、audio、datalist、progress标签以及表单的新增元素,如邮箱、域名、数字、时间和颜色输入类型。video标签用于视频播放,支持自动播放、循环等功能。audio标签类似,但不支持height/width/poster属性。datalist标签为输入框提供预定义选项。progress标签用于展示任务完成度。表单新增元素增强了数据验证能力,如邮箱和域名输入类型能自动校验格式。
摘要由CSDN通过智能技术生成

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>

如何给输入框绑定待选列表:

  1. 新增一个input输入框
  2. 新增一个datalist列表
  3. 在input输入框中新增一个list属性,并赋予属性值
  4. 在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">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值