2023.11.14与2023.11.16笔记

2023.11.14笔记

 <a href="网址"></a>

    <a href="#gaige"></a>

    <id="gaige"></id>

    <div></div>

    <span></span>

   

    <video src="" controls autoplay muted width="400px"></video>

   

    <video>

        <source src="">

    </video>

    <audio src="" controls ></audio>

    <form action="#">

        用户名:<input type="text" name="username">

        密码:<input type="password" name="password">

        性别:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女">

        你在干嘛？ 吃饭<input type="checkbox" name="bobby" id="">

                  睡觉<input type="checkbox" name="bobby" >

        <input type="submit" name="" id="">

         <!--type="submit"即点击按钮-->

        <button>点击提交</button>

        <textarea name="" id="" cols="30" rows="10"></textarea>

        <select name="city" id="">

           <option value="南京">南京</option>

           <option value="西安">西安</option>

        </select>

    </form>

2023.11.16笔记

 <table border="1px"  width="300px" height="200px" cellspacing="0">

        <caption>学生信息表</caption>

        <thead height="100px" align="right" valign="bottom">

            <tr bgcolor="red">

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

                <th>民族</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td rowspan="2">张三</td>

                <th>男</th>

                <th>18</th>

                <th>汉</th>

            </tr>

            <tr>

               

                <th>男</th>

                <th>18</th>

                <th>汉</th>

            </tr>

            <tr>

                <td>张三</td>

                <th>男</th>

                <th>18</th>

                <th>汉</th>

            </tr>

        </tbody>

        <tfoot>

            <tr>

               

          <td colspan="4">

                共计四人</td>

            </tr>

        </tfoot>

    </table>

 

    <iframe src="https://www.taobao.com" frameborder="1" width="800px"></iframe>

    <iframe src="./练习.html" frameborder="0"></iframe>

    <a href="./练习.html" target="ee">我的表格</a>

    <iframe name="ee"></iframe>

    <dialog open>

        <form action="#">

            用户名:<input type="text" value="">

        </form>

    </dialog>

    <details>

    <summary>关于数据</summary>

    该数据请询问相关人员

    </details>

    <script>

        const dia=document.querySelector("dialog")

        dia.showModal()

        dia.close()

    </script>

    <style>

        .test{

            color:pink;

        }

        .test2{

            background-color: pink;

        }

    </style>

   

    <div class="text" title="我是图">aaa</div>

    <div class="text text2">aaa</div>

    <p class="text">aaa</p>

    <div tabindex="1" contenteditable="True">aaa</div>

   

    <header></header>

    <nav></nav>

    <form action="#">

        性别<label><input type="radio" name="sex" id="">男</label>

        <input type="radio" name="sex" id="nv"><label="nv">女</label>

    </form>

    <p>

        你&nbsp;是一个盒子

    </p>

    &lt;   此即<

    &gt;   此即>

    &copy;

2023.11.16 CSS学习笔记

<!--第一种引入方式-->

    <div style=""></div>

    <!--第二种引入方式-->

    <style>

        <div{

            width:400px;

            height:200px;

            background-color: aqua;

        }

    </style>

  <!--第三种引用方式：外链引入（写作业的时候用这种）-->

    <link rel="stylesheet" href="">

   

    <style>

        /* 标签选择器 */

        .div{

        }

    </style>

    <style>

        /* 类（class=box时）选择器  */

        .box{

        }

    </style>

    <style>

        /* id（id=box时）选择器 */

        #box{

        }

    </style>

    <style>

        /* 通配符选择器 */

        *{

        }

    </style>

<!-- 以上四种为基本选择器 -->

<stage>

    <!-- 包含选择器 -->

    .ul1>li{

    }

    <!-- 后代选择器 -->

</stage>

<!-- 复合选择器 -->

<style>

    p,

    .box{

    }

</style>

<!-- 属性选择器(以type举例) -->

<style>

    input[type="box"]{

        background-color: aqua;

    }

    input[type]{

        background-color: aqua;

    }

     input[type^="pa"]{/*即type属性中以pa开头的 */

    }

    input[type$="1"]{/*即type属性中以1结尾的 */

    }

        input[type*="1"]{/*即type属性中包含1的 */

       

        }

            </style>

<!-- 伪类选择器（主要用于确定链接的状态） -->

<styal>

    a:hover {

        width:100px;

        height:100px;

        color:pink;

    }

</styal>

<!-- 其他选择器 -->

<style>

     ul li:nth-child(4){ /*即在ul的li中第四个*/

    }

    ul li:nth-of-child(4){ /*即在ul的li中第四个(跳过li）*/

    }

    ul li:nth-child(2n-1){ /*即在ul的li中奇数个*/

       

    }

    ul li:first-child{ /*即在ul的li中首个*/

       

    }

    ul li:last-child{ /*即在ul的li中尾个*/

       

    }

</style>

<!-- 伪元素选择器 -->

<style>

    ul li::before{

        content:"666"; /*即在ul的li的前面加入666 */

    }

    ul li::after{

        content:"666"; /*即在ul的li的后面加入666 */

    }

    p::selection

</style>