01_移动端-html5新特性

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

 

上一篇:【VsCode】如何使用VsCode中的代码片段快速输入常用代码(太实用了,有图,有示例)


下一篇:nginx的基本操作