Html5 1.6 audio/video/details元素的使用

最新推荐文章于 2025-03-03 00:16:54 发布

原创最新推荐文章于 2025-03-03 00:16:54 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

Html Note 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨HTML5中的表单控件与多媒体元素，包括input、details、summary、output、progress、meter等控件的使用，以及audio、video、source、embed和object多媒体元素的特性与应用。

一、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" oninput="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>

二、效果展示