【HTML+CSS】h5视频、音频、新增表单

视频标签

video

• src 视频的路径
  • 支持mp4、webm、ogg格式
• controls 控件
• autoplay 自动播放 在谷歌浏览器中只有配合静音属性才能自动播放
• muted 静音
• loop 循环播放
• poster 封面 视频没有加载完成时候展示的画面

<video src="./img/mov_bbb.mp4" controls autoplay muted loop></video>
  <video src="./img/mov_bbb.mp4" controls poster="./img/img001.jpg"></video>

音频标签

audio

• src 音频的路径
  • 支持mp3 wav ogg格式
• controls 控件
• autoplay 自动播放 谷歌浏览器不支持
• muted 静音
• loop 循环播放

<audio src="./img/熊.ogg" controls autoplay muted loop></audio>

H5新增的表单

input

• type="email” 邮箱type="number”数字输入框

• type="url”路径

• type="color” 取色type="range”滑块 必须设置name属性

• type="search”搜索

• type="tel”电话 pc端没有效果

• type="time”时间type="date”日期

• type="week”周

• type="month"月

• type="datetime-local” 选择本地时间

• autofocus 自动获取焦点

• required 必须填写

<form action="">
    邮箱<input type="email" name="" id=""><br>
    数字输入框<input type="number" name="" id=""><br>
    路径<input type="url" name="" id=""><br>
    取色<input type="color" name="" id=""><br>
    滑块<input type="range" name="range" id=""><br>
    搜索<input type="search" name="" id=""><br>
    电话<input type="tel" name="" id=""><br>
    时间<input type="time" name="" id=""><br>
    日期<input type="date" name="" id=""><br>
    周<input type="week" name="" id=""><br>
    月<input type="month" name="" id=""><br>
    选择本地时间<input type="datetime-local" name="" id="">
    <button type="submit">提交</button>
</form>
<form action="">
    自动获取焦点<input type="text" autofocus>
    必须填写 <input type="text" required>
    <button type="submit">提交</button>
</form>