HTML5CSS3从入门到精通day01

最新推荐文章于 2024-10-08 11:32:20 发布

飞不起来的飞机耶耶耶

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量141

点赞数 5

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/m0_75016516/article/details/132239547

版权

1.H5新增标签

2.H5常用新属性

placeholder：占位符提示信息

autofocus ：自动获取焦点

multiple : 支持多文件上传

autocomplete: 当提交过表单内容之后规定某个表单控件的提示内容关闭和打开

required : 必填项

tabindex : 指定表单控件获取焦点的顺序

<form action="">
        <div>
            用户名： <input type="text" required placeholder="请输入用户名" name="user" autocomplete="off">
        </div>
        <div>
            密码： <input type="password" required name="pwd">
        </div>
        <div>
            手机号： <input type="tel"  name="tel">
        </div>
        <div>
            邮箱： <input type="email" name="email" >
        </div>
        <div>
            日期： <input type="date" name="date">
        </div>
        <div>
            文件： <input type="file" multiple name="file">
        </div>
        <div>
            <input type="submit">
        </div>
    </form>

3.input新增type类型

email:邮箱

tel：手机号

url：路径

number：数值

search：搜索（语义化）

range：滑块

time：时间

week：周

date：年月日

month：月

<form action="">
        <div>
            邮箱： <input type="email" >
        </div>
        <div>
            手机号： <input type="tel">
        </div>
        <div>
            路径： <input type="url">
        </div>
        <div>
            数字： <input type="number">
        </div>
        <div>
            搜索: <input type="search">
        </div>
        <div>
            滑块： <input type="range" max="" min="" value="">
        </div>
        <div>
            时间： <input type="time">
        </div>
        <div>
            周： <input type="week">
        </div>
        <div>   
            日期： <input type="date">
        </div>
        <div>
            月份： <input type="month">
        </div>
    </form>

4.data-自定属性

   <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
            width: 600px;
            height: 40px;
            border: 1px solid red;
            margin: 100px auto;
        }

        ul li {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-right: 1px solid skyblue;
            box-sizing: border-box;
            float: left;
        }

        ul li:last-child {
            border-right: 0px;
        }
    </style>
</head>

<body>
    <!-- 
        data- 自定义属性
        data-自定义的属性名
     -->
    <ul>
        <li data-index="肉类">肉类</li>
        <li data-index="蔬菜">蔬菜</li>
        <li data-index="水果">水果</li>
        <li data-index="熟食">熟食</li>
        <li data-index="花生豆">花生豆</li>
    </ul>
    <script>

        var lis = document.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                console.log(this.getAttribute('data-index'));
                console.log(this.dataset.index);
            }
        }

    </script>

05.音频

多媒体音频标签 audio

controls 是否显不默认播放控件

autoplay 自动播放(目前很多浏览器不支持自动播放)

loop 循环播放

    <button class="btn">点击播放</button>
    <audio controls autoplay class="audio"
        src="https://dl.stream.qqmusic.qq.com/C400000UA33L3tgRFz.m4a?guid=6661798375&vkey=BD4A035245602D0CE8BCE8CCBC58E6FA67D10AF95DE5DE23A6B877A0A08F44225870024BB6333803C28E8A3412C85FD9F9C4B810A1734C82&uin=2811698851&fromtag=120032"></audio>
    <script>
        var btn = document.getElementsByClassName("btn")[0];
        var audio = document.getElementsByClassName("audio")[0];
        var flag = true;
        btn.onclick = function(){
            if (flag) {
                audio.play();
                flag = false
            }else{
                audio.pause();
                flag = true;
            }
            
        }
    </script>

06.视频

video 视频

autoplay 自动播放（18年开始，谷歌浏览器不支持自动播放）

muted 静音播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

<iframe height=498 width=510 src='https://player.youku.com/embed/XNDMwMzY5MDg2MA=='
        frameborder=0 'allowfullscreen'></iframe>
    
    <iframe height=498 width=510 src='https://player.youku.com/embed/XNDMwMzY5MTYxMg=='
        frameborder=0 'allowfullscreen'></iframe>
    <video controls src="blob:https://y.qq.com/0059f5a9-5bfa-4dda-85b9-ad90f0fc1869"></video>
    
    <video controls
        src="https://dl.stream.qqmusic.qq.com/C400000ypvQg1JgF56.m4a?guid=4519055240&vkey=2B318352B2B4B51ACF1BCFC750DC6B2BAED99561184DACBB2CA7A24B2EB966AFEC302A7CDE64CE6D2B0E9DDAEA4ADAD0D80D0B736236242D&uin=2811698851&fromtag=120032"></video>