H5新增标签和属性

最新推荐文章于 2022-12-04 22:35:55 发布
一份蛋炒饭
最新推荐文章于 2022-12-04 22:35:55 发布
阅读量71
点赞数
分类专栏：学习文章标签： css
本文链接：https://blog.csdn.net/weixin_52019215/article/details/114906945
版权
学习专栏收录该内容
9 篇文章 0 订阅
订阅专栏

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

        .msk {
            position: relative;
            border: 1px solid red;
        }

        .msk::after {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, .5) url(../images/v2.png) no-repeat center;
            display: none;
        }
        video {
            width: 100%;
            vertical-align: middle;
        }

        .msk:hover::after {
            display: block;

        }
    </style>
</head>

<body>
    <h1 align="center"> H5新增标签及属性</h1>

    <h2>标签语义化</h2>
    <header></header>
    <nav></nav>
    <article>
        <section></section>
    </article>
    <aside></aside>
    <footer></footer>
    <h2>video and audio 属于inline-block </h2>
    <!-- 
               video  autoplay --刷新自动播放，谷歌不播放
                      controls --显示控件
                      muted    --静音播放
                      loop     --循环播放
                      poster   --加载时候显示图片
                      width    --可以在css中设置
                      height   --可以在css中设置-->
    <div class="msk">
        <video autoplay muted loop controls poster="media/mi9.jpg">
            <source src="./media/mi.mp4" type="video/MP4">
            <source src="./media/mi.webM" type="video/webM">
            <source src="./media/mi.Ogg" type="video/Ogg">
            您的浏览器不支持video标签，请升级浏览器
        </video>
    </div>

    <!-- preload="auto/none"   --规定当网页加载时，音频是否默认被加载以及如何被加载 -->
    <audio autoplay="autoplay" controls="controls" muted="muted" loop="loop" preload="auto">
        <source src="./media/music.mp3" type="audio/MP3">
        <source src="./media/music.ogg" type="audio/ogg">
        您的浏览器不支持audio标签，请升级浏览器
    </audio>

    <h2>H5 新增表单 及属性</h2>
    <!--    placeholder   提示文本
            required      必填
            autocomplete  去掉默认提示历史输入数据 需设置name属性
            autofocus     自动获取光标
            multiple      可多选文件  file
    -->
    <form action="">
        <h3>对input设置color是对输入内容颜色，input::placeholder设置color是对提示文本的颜色</h3>
        text <input type="text" placeholder="please input">
        <hr>
        radio <input type="radio" name="same" id=""> radio<input type="radio" name="same" id="" checked="checked">
        <hr>
        checkbox <input type="checkbox" name="" id="" checked="checked">
        <hr>
        file <input type="file" name="" id="" multiple>
        <hr>
        password <input type="password" name="" id="">
        <hr>
        <h3>autocomplete设置必须要有name</h3>
        search <input type="search" name="search" id="keywords" autofocus autocomplete="off">
        <hr>
        <h3>e是对数的底数lne 故是数字，可以在number input中输入</h3>
        number <input type="number" name="" id="">
        <hr>
        email <input type="email" name="" id="">
        <hr>
        date <input type="date" name="" id="">
        <hr>
        month <input type="month" name="" id="">
        <hr>
        week <input type="week" name="" id="">
        <hr>
        time <input type="time" name="" id="">
        <hr>
        color <input type="color" name="" id="">
        <hr>
        url <input type="url" name="" id="">
        <hr>
        tel <input type="tel" name="" id="">
        <hr>
        submit <input type="submit" value="SUBMIT">
        <hr>
        reset <input type="reset" value="RESIT">
        <hr>
    </form>

    <!-- <h2>属性选择器</h2>
    <p>E[att]  选择属性为att的标签</p>
    <p>E[att=val]  选择属性为att的标签</p>
    <p>E[att^=val]  选择属性值为val开头的标签</p>
    <p>E[att$=val]  选择属性值val结束的标签</p>
    <p>E[att*=val]  选择属性值含有val的标签</p> -->
    <style>
        /* 选择input中有属性value的元素 */
        input[value] {
            border: 1px solid cyan;
        }

        /* 选择所有页面中属性为value的元素 */
        [value] {
            color: lime;
        }

        /* 选择input元素中属性为type 且属性值为email的元素 */
        input[type=email] {
            background-color: #ccc;
        }

        /* 选择属性值以t开头的元素 */
        input[type^=t] {
            outline: none;
        }

        /* 选择以属性值e结尾的元素 */
        input[type$=e] {
            background-color: #456;
        }

        /* 选择属性值含有se的元素 */
        input[type*=se] {
            background-color: pink;
        }
    </style>

    <h2>结构伪类选择器</h2>
    <ul>
        <li>num1</li>
        <li>num2</li>
        <li>num3</li>
        <li>num4</li>
        <li>num5</li>
        <li>num6</li>
        <li>num7</li>
        <li>num8</li>
        <li>num9</li>
        <li>num10</li>
    </ul>
    <style>
        ul li:first-child {
            color: cyan;
        }

        ul li:last-child {
            color: lime;
        }

        ul li:nth-child(3) {
            color: red;
        }

        ul li:nth-child(2n + 1) {
            font-size: 20px;
        }

        ul li:nth-child(2n) {
            font-style: italic;
        }
    </style>
    <dl>
        <dt>num1dt</dt>
        <dd>num1dd</dd>
        <dd>num2dd</dd>
        <dd>num3dd</dd>
        <dd>num4dd</dd>
        <dd>num5dd</dd>
    </dl>

    <style>
        /* 父元素中第一个元素是dd可选择出来，如果不是则无效*/
        dl dd:nth-child(1) {
            color: lime;
        }

        /* 父元素中第一个dd元素 */
        dl dd:nth-of-type(1) {
            color: lime;
        }

        /* n从0开始，前三个，超出部分忽略 */
        /* 如果公式中有n 应该将其写在最前面 */
        dl dd:nth-of-type(-n + 3) {
            color: cyan;
        }
    </style>

    <h1>伪元素</h1>
    <!-- <p>伪元素是行内元素</p> -->
    <style>
        dl dd::after {
            content: '';
        }
    </style>

    <h1>盒子模型CSS3</h1>
    <div class="box3"></div>
    <p></p>
    <style>
        .box3 {
            width: 100px;
            height: 100px;
            background-color: #456;
            border: 10px solid red;
            padding: 20px;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: #456;
            border: 10px solid red;
            padding: 20px;
            /* padding and border不会增加盒子尺寸了 */
            box-sizing: border-box;
        }
    </style>

    <h1>图片模糊处理</h1>
    <img src="../images/bg22.png" alt="">
    <style>
        img {
            /* 图片模糊处理 */
            filter: blur(5px);
        }


        /* body {
            /* 全屏灰色，清明节专用 */
            /* filter: grayscale(100%); */
        /* } */
    </style> */

    <h1>calc函数</h1>
    <div class="calc">
        <div class="sonn"></div>
    </div>
    <style>
        .calc {
            width: 200px;
            height: 200px;
            background-color: #465;
        }
        .sonn {
            /* width 比父盒子小30px写法 */
            width: calc(100% - 30px);
            height: 50px;
            background-color: #789;
        }
    </style>


<h1>css3过度效果</h1>
<div class="leng"></div>
<style>
    .leng {
        width: 100px;
        height: 100px;
        background-color: #456;
        /* margin: auto; */
        /* float: right; */
        float: left;
        transition: all 3s ease 1s;
    }
    .leng:hover {
        width: 200px;
    }

    /* display属性不能添加过度效果 */
</style>
</body>

</html>