11.16笔记

1、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px" width="300px" height="200px" cellspacing="0">
        <caption>学生信息表</caption>
        <thead height="100px" aligh="right" valign="bottom">
            <tr bgcolor="pink">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
            </tr>
            <tr bgcolor="red">
                <td rowspan="2">张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
            </tr>
            <tr>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3"></td>
                <td>共计:四人</td>
            </tr>
        </tfoot>    
    </table>
</body>
</html>



2、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px">
        <caption>优秀学生信息表格</caption>       
        <thead>
            <tr>
                <th>年纪</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>迪丽热巴</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
             <td>古力娜扎</td>
             <td>120</td>
             <td>三年三班</td>
            </tr>
            <tr>
                <td>评语</td>
                <td colspan="3">你们很棒</td>
            </tr>
        </tbody>
    </table>
</body>
</html>


3、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="" frameborder="1" width="880px"></iframe>
    <iframe src="" frameborder="0"></iframe>
    <a href="" target="ee">我的表格</a>
    <iframe name="ee"></iframe>
</body>
</html>


4、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dialog>
        <form action="#">
            " 用户名:"
            <input type="text" value>
        </form>
    </dialog>
    <details open>
        <summary>
        关于文章
        </summary>
        关于文章的具体信息
    </details>
    <script>
              const dia = document.querySelector("dialog")
              dia.showModal()
              dia.close()
    </script>
</body>
</html>


5、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
             .test {
                 color:pink;
             }

             .test2{
                 background-color:pink;
             }
    </style>
</head>
<body>
    <!-- class -->
    <div class="test" title="我">cdcdc</div>
    <div class="test test2">cdcdc</div>
    <p class="test">cnkdlckd</p>
    <input type="test" name id>
    <div tabindex="1" contenteditable="True">参考机动车道</div>
    <a href="#">去百度</a>
    <div class="nav"></div>
    <div class="head">
        <div class="aside"></div>
    </div>
    <div class="foot"></div>
    <header> </header>
    <nav> </nav>
</body>
</html>


6、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        性别:
        <label>
            <input type="radio" name="sex" id="">
            男
        </label>
        <input type="radio" name="sex" id="nv">
        <label for="nv">女</label>   
    </form>
</body>
</html>


7、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        &nbsp空格
        &lt小于
        &gt大于
        &copy
    </p>
</body>
</html>


8、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        /* 写css样式 */
        /* 选择器{

        }*/
           div{
              width:300px;
              height:200px;
              background-color:aqua;
           }
    </style> -->
    <link rel="stylesheet"href="./09-test.css">
</head>
<body>
    <!-- <div style="width: 200px; height: 100px; background-color: pink;"></div> -->
    <div></div>
</body>
</html>


9、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*标签选择器*/
        div{
            width:200px;
            height:200px;
            background-color:pink;
        }

        /*类选择器*/
        .box1{
            background-color:aqua;
        }

        /*id选择器*/
        #box1 {
            color: aqua;
        }

        /*通配符选择器*/
        *{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">盒子1</div>
    <p id="box1">我是一段文字</p>
    <div>盒子2</div>
</body>
</html>


10、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 包含选择器 */
        .ul1>li {
            background-color:pink
        }

        /* 后代选择器 */
        .ul1 li {
            background-color:rgb(213,213,19);
        }
    </style>
</head>
<body>
    <ul class="ul1">
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <ul>
        <li>我是内层的</li>
    </ul>
    <li>104</li>
    <li>105</li>
    </ul>
</body>
</html>


11、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p,
    .box {
        color:pink;
    }
    </style>
</head>
<body>
    <p>我是一段文字</p>
    <div class="box">盒子</div>
</body>
</html>


12、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*input[type="url"]{
            background-color:aqua;
        }

        input[name]{
            background-color:blue;
        }*/
        input[type^="pa"] {
            background-color:aquamarine;
        }

        input[type$="l"] {
            background-color:rgb(22,26,25);
        }

        input[type*="a"] {
            background-color:rgb(240,127,255);
        }
    </style>
</head>
<body>
    <form action="#">
        <input type="password" name="pwd">
        <input type="text">
        <input type="url">
    </form>
</body>
</html>


13、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover+div {
            width:100px;
            height:100px;
            background-color:pink;
            color:pink;
        }

        a:focus {
            color:brown;
        }
    </style>
</head>
<body>
    <a href="#">去百度</a>
    <div></div>
</body>
</html>


14、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(4) {
            background-color:pink;
        }

        ul li:first-child {
            background-color:blue;
        }

        ul li:last-child {
            background-color:aquamarine;
        }

        ul li:nth-child(2n-1) {
            background-color:chartreuse;
        }

        ul li:nth-of-type(4) {
            background-color:aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <p>wos</p>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>110</li>
    </ul>
</body>
</html>


15、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li::before {
            content:"666";
        }

        ul li::after {
            content:"666";
        }

        p::selection {
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <p>fwefefwefef</p>
</body>
</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值