01_移动端-html5新特性

2021-10-01 21:34:35 阅读：142 来源： 互联网

标签：01 浏览器播放 color 100px 特性 height html5 audio

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

标签：01,浏览器,播放,color,100px,特性,height,html5,audio
来源： https://www.cnblogs.com/luwei0915/p/15360150.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

01_移动端-html5新特性