<!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>