html基础

最新推荐文章于 2024-07-25 11:52:08 发布

清风挽心ii

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量102

点赞数

分类专栏：学习总结文章标签： html

本文链接：https://blog.csdn.net/Liuxin2448/article/details/115186282

版权

学习总结专栏收录该内容

69 篇文章 0 订阅

订阅专栏

html基础

音频元素
在这里插入图片描述

表单元素
在这里插入图片描述

在这里插入图片描述

嵌入元素

<title>嵌入元素</title>
    <script>
        function ff(){
            //document.getElementById("pg").value可以获取或者设置当前进度条的显示值
            var len=document.getElementById("pg").value;
            if(len<100){
                document.getElementById("pg").value+=10;
                setTimeout("ff()",1000);
            }
        }
        function cc(){
            setTimeout("ff()",1000);//隔1s后执行一次ff函数
        }
    </script>
</head>
<body>
    <h3>progress显示进度</h3>
    <p>
        progress元素可以显示一个进度条，一般通过JS控制内部的值。IE9以及更低版本不支持此元素
    </p>
    <progress id="pg" value="0" max="100"></progress>
    <input type="button" value="开始" onclick="cc()"/>

    <h3>meter显示范围里的值</h3>
    <p>
        meter元素显示某个范围内的值。其下的属性包含：min和max表示范围边界，
        low表示小于它的值过低，high表示大于它的值过高，optimum表示最佳值，但不出现效果。
        IE浏览器不支持此元素
    </p>
    <meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
</body>

表单数据验证

<title>表单数据验证</title>
</head>
<body>
    <h3>表单数据验证</h3>
    <p>
        HTML5对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持
    的成熟度还不同。在大部分情况下，可能还是要借助jQuery等前端库来实现丰富的验证功能和显
    示效果。

    常见的三种验证:
        1、必须填写一个值 &lt;input type="text" required&gt;
        2、针对数值型输入限定在某一个范围内&lt;input type="number" min="10" max="100"&gt;
        3、使用正则表达式
    </p>
    <form>
        <!--针对字符串类型定义允许输入的最大字符数-->
        <input type="text" maxlength="5"/>
        <!--要求输入数据非空，否则提交时报错-->
        <input name="username" required placeholder="用户姓名"/>
        <input name="age" type="number" min="16" max="24"/>
        <!--数据验证是在form提交时执行，如果验证成功则继续提交；如果验证失败则报错，并拒绝提交-->
        <input type="submit" value="测试样例"/>
    </form>
    <form>
        <!--正则式校验-->
        <input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">
        <input type="submit" value="测试样例"/>
    </form>

    <h3>禁止表单验证</h3>
    <form action="http://li.cc" novalidate>
        <input name="username" required placeholder="用户姓名"/>
        <input type="submit" value="测试样例"/>
    </form>
</body>

<h3>视频元素</h3>
    <p>
        主流视频支持的格式为：.avi、.flv、.mp4、.mkv、.ogg、.webm<br/>
        - 主流的音频编解码器：AAC、MPEG-3、Ogg Voribs
        - 视频编解码器：H.264、VP8、Ogg Theora
        <strong>video 视频元素</strong>
            以往的视频播放，需要借助Flash插件才可以实现。但Flash插件的不稳定性经常让
        浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是HTML5的video元素。
        <ol>
            <li>src视频资源的 URL</li>
            <li>width视频宽度</li>
            <li>height视频高度</li>
            <li>autoplay设置后，表示立刻开始播放视频</li>
            <li>preload设置后，表示预先载入视频</li>
            <li>controls设置后，表示显示播放控件</li>
            <li>loop设置后，表示反复播放视频</li>
            <li>muted设置后，表示视频处于静音状态</li>
            <li>poster指定视频数据载入时显示的图片</li>
        </ol>
    </p>
    <video src="video/sihouzi.mp4" width="800" height="600" poster="img.png" autoplay controls loop muted></video>
    <hr/>
    <h4>兼容多个浏览器</h4>
    <p>
        通过source元素引入多种格式的视频，让更多的浏览器保持兼容
    </p>
    <video width="800" height="600" controls poster="img.png">
        <source src="test.webm">
        <source src="test.mp4">
        <source src="test.ogg">
        <object>这里引入 flash 播放器实现 IE9 以下，但没必要了</object>
    </video>
</body>

清风挽心ii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础

html基础audio 音频元素<body> <h3>audio 音频元素</h3> <p> audio元素用于嵌入音频内容，而音频元素的属性和视频元素类似。音频的支持度和视频类似，使用source元素引入多种格式兼容即可。主流的音频格式有：.mp3、 .m4a、 .ogg、 .wav <ul> <li>src视频资源的URL
复制链接

扫一扫