<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section {
display: block;
background-color: burlywood;
min-height: 100px;
border: 1px solid rgb(240, 171, 24);
margin-bottom: 10px;
}
video {
height: 100px;
}
</style>
</head>
<body>
<!-- 1. html5 音频标签 -->
<section>
<audio controls>
<!-- 适配不同浏览器写法 -->
<source src="../media/test.mp3" type="audio/mpeg">
<source src="../media/test.ogg" type="audio/ogg">
您的浏览器不支持 audio 播放
<!--
autoplay
loop
controls
-->
</audio>
</section>
<!-- 2. html5 视频标签 -->
<section>
<video autoplay muted loop> <!-- autoplay loop -->
<!-- 适配不同浏览器写法 -->
<source src="../media/test.mp4" type="video/mp4">
<source src="../media/test.ogg" type="video/ogg">
您的浏览器不支持 audio 播放
<!--
autoplay
controls
width px
height px
loop
preload auto/none 有了 autoplay 就忽略该属性
src
poster
muted
-->
</video>
</section>
<!-- 3. html5 input -->
<section>
<form action="">
<ul>
<li>邮箱: <input type="email"></li>
<li>网址: <input type="url"></li>
<li>日期: <input type="date"></li>
<li>时间: <input type="time"></li>
<li>月份: <input type="month"></li>
<li>星期: <input type="week"></li>
<li>数字: <input type="number"></li>
<li>电话: <input type="tel"></li>
<li>搜索: <input type="search"></li>
<li>颜色: <input type="color"></li>
<li>文件: <input type="file" multiple></li>
<li><input type="submit" value="提交"></li>
</ul>
<!-- input 属性
required 不能为空
placeholder 提示文本
autofocus 自动聚焦
autocomplete on/off 输入时历史记录提示 必须有 name 属性
multiple 文件多选 -->
</form>
</section>
</body>
</html>