一、audio/video/details元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*input:hover用来设置鼠标悬浮输入框时样式*/ /*input:focus用来设置获取焦点时样式*/ /*button:hover用来设置鼠标悬浮按钮时样式*/ input:hover{ background: crimson; } input:focus{ background: gainsboro; } #button:hover{ color: cyan; } </style> </head> <body> <!-- accesskey设置alt+accesskey快捷键或者alt+shift+accesskey enctype="multipart/form-data"上传文件是的值必须为这个 formaction formnovalidate formctype formothod fortarget重写只适用于提交按钮--> <form action="" method="get" οninput="num.value=parseInt(num1.value)+parseInt(num2.value)"> <details open="open"><!--details配合summary使用,summary定义details标题,点击后展开details--> <summary>hello,welcome to html5</summary> <p><h4>加减法:</h4> <input type="text" size="10" name="num1" autofocus>+ <input type="text" size="10" name="num2">= <output name="num" for="num1 num2"></output> <br> <label for="user">用户:</label> <input type="text" name="user" value="" placeholder="请输入用户名" id="user"><br> <label for="email">邮箱:</label> <input type="email" id="email" placeholder="请输入邮箱"required="required" ><br> <label for="textarea">意见:</label> <textarea name="textarea" id="textarea" rows="5" cols="30" placeholder="请输入评价"></textarea><br> <!--max最大值,value默认值--> <label for="progress">进度1:</label><progress max="20" id="progress" value="5"></progress><br> <!--max最大值,min最小值,value默认值,optimum最佳值,当value的值低于或者等于low时,显示的颜色会不一样--> <label for="meter">进度2:</label><meter max="20" min="0" value="4" id="meter" optimum="13" high="15" low="5"></meter> <br> 加密:<keygen name="key"/><br><!--keygen标签在使用时可以在后面加/,且部分浏览器不支持--> <input type="submit" value="有验证提交"> <input type="submit"formnovalidate="formnovalidate" value="没有验证提交"></p> </details> </form> <!-- autoplay自动播放 controls用来设置视频操作控制 loop循环播放 poster用来设置视频加载前的画面 source元素可以设置多个播放源,解决浏览器的兼容性问题,不能与video的src属性同时使用 audio用来添加音频元素,使用与video相同 type定义嵌入内容类型 preload设置是否预先载入 --> <video controls="controls" autoplay="autoplay"><!--下面使用source后,video中不能在包含src属性,多个不同格式的播放源,可以解决浏览器的兼容性--> <source src="sp/video.mp4" type="video/mp4"> <source src="sp/video.webm"> </video> <audio src="sp/琴箫合奏.mp3" controls="controls" autoplay="autoplay">该浏览器不支持mp3格式</audio> <embed src="sp/flash作品.swf" type=""> <object data="sp/video.mp4" type="video/mp4"></object> </body> </html>
二、效果展示