Day01-HTML5 CSS3

前端拓海

已于 2023-12-02 15:14:01 修改

阅读量37

点赞数

文章标签： html5 css3 前端

于 2023-12-01 18:59:15 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134741979

版权

一.H5新增标签

<body>

    <header>用来定义网页的头部</header>
    <header>用来定义网页的头部</header>

    <nav>用来定义网页的导航栏</nav>
    <nav>
        用来定义网页的导航栏
        <ul>
            <li></li>
        </ul>
    </nav>
    <!-- 
    <header>
        <div class="logo"></div>
        <nav></nav>
    </header> -->

    <main>用来定义网页的主体内容</main>
    <main>用来定义网页的主体内容</main>

    <aside>用来定义网页的侧边栏</aside>
    <aside>用来定义网页的侧边栏</aside>

    <article>用来定义网页当中一段独立的文章</article>
    <article>用来定义网页当中一段独立的文章</article>

    <section>用来定义网页当中的一块区域</section>
    <section>用来定义网页当中的一块区域</section>

    <footer>用来定义网页当中的底部</footer>
    <footer>用来定义网页当中的底部</footer>
    <button class="btn">点击</button>
    <!-- 用来度量给定的范围内的数据 -->
    <!-- <meter value="10" min="0" max="10" low="3" optimum="10" high="10" class="hit-points"></meter> -->
    <p>最优91，值90<meter min="0" low="60" high="90" max="100" optimum="91" value="90" class="hit-points"></meter></p>
    
    <!-- 标签定义运行中的进度     -->
    <progress value="9" min="0" max="10"></progress>

    <script>

        var btn = document.getElementsByClassName("btn")[0];
        var hp = document.getElementsByClassName("hit-points")[0];
        btn.addEventListener("click", function () {
            if (hp.value == 0) {
                alert("升级！");
                hp.style.display = "none";
            } else {
                hp.value -= 10
            }
        })

    </script>

</body>

</html>

二.H5常用新属性

<body>

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

</body>

</html>

三.input新增type类型

<body>

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

</body>

</html>

四.data自定义属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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-自定义的属性名
     -->

    <!-- data-food-index -->
    <!-- data-index -->

    <ul>
        <!-- 
        <li data-index="0">肉类</li>
        <li data-index="1">蔬菜</li>
        <li data-index="2">水果</li>
        <li data-index="3">熟食</li>
        <li data-index="4">花生豆</li>
        -->
        <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>

</body>

</html>