web前端day02

01-元素显示模式

<!--元素显示模式：
    块元素：独占一行   div      宽、高、内外边距可以设置
    行内元素：一行可以存在多个  span   宽、高、内外边距不可以设置
    行内块元素：    
-->

    <div>我是一个盒子</div>
    <span>我是span</span>

    <ul>
        <li>我是li</li>
    </ul>

02-表格标签

 <table>
        <!-- 表头 rows  data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>

            </tr>


        </tfoot>


    </table>

03-表格标签属性

 <table border="10px" width="900px" height="400px" cellspacing="0">
        <!-- 表头 rows  data
        table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)
        caption；通过css更改
        thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）

        -->
        <caption>学生信息</caption>
        <thead height="200px" align="center" valign="middle">
            <tr height="400px" align="center" valign="center">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody height="600px" align="center" valign="middle">
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot height="600px" align="center" valign="middle">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>

            </tr>


        </tfoot>


    </table>

04-单元格合并

 <!-- td   跨行：rowspan
              跨列：colspan
    -->
    <table border="1px" width="800px" cellspacing="0">
        <!-- 表头 rows  data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="right">
                <td colspan="5">共计:4人</td>
            </tr>


        </tfoot>


    </table>

05-details

 <!-- details：详情标签         配合summary使用 -->
    <details>
        <summary>有志青年</summary>
        我们这里都是优秀的有志青年
    </details>

06-tabindex

 <!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数-->
    <input type="text">
    <a href="#">去百度</a>
    <div>我是第一个盒子</div>
    <div tabindex="0">我是第2个盒子</div>
    <div>我是第3个盒子</div>
    <div>我是第4个盒子</div>

07-表单的基本结构

ody>
    <!-- 表单：网页交互区，收集用户信息 
      action:将数据交给谁处理
      name：必有属性
      method：提交方式   ajax
    -->
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>提交</button>
    </form>

08-常见的表单元素

  <form action="#">
        <!-- 文本框    maxlength:最大长度-->
        用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />
        <!-- 密码 -->
        密码：<input type="password" name="pwd"><br />
        <!-- 单选框 -->
        <input type="radio" name="gender" value="nan">男
        <input type="radio" name="gender" value="nv">女<br />
        <!-- 多选框   label标签-->

        <input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
        <label><input type="checkbox" name="food">吃臭豆腐</label>
        <!-- checked默认选中 -->
        <input type="checkbox" name="food" checked>吃肥肉
        <!-- 隐藏域 -->
        <input type="hidden" name="hid" value="南德斯才能使调查">
        <!-- 确认按钮 -->
        <!-- <button type="submit"></button> -->
        <!--重置按钮 -->
        <input type="reset">

        <!-- 普通按钮 -->
        <input type="button">
        <!-- 文本域 -->
        <textarea cols="20" rows="10" maxlength="200
        ">

        </textarea><br />
        <!-- 下拉菜单 -->
        <select name="jiguan" id="">
            <option value="南京">南京</option>
            <!-- selected下拉菜单的默认选中 -->
            <option value="成都" selected>成都</option>
            <option value="西安">西安</option>

        </select>



        <input type="submit">



    </form>

09-html的全局属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- id身份证号，在一个页面中只能出现一次 -->
    <div id="one"></div>
    <!-- class   一类 可以出现多个-->
    <div class="pink" style="font-size: 40px;">我是哟个盒子</div>
    <div class="pink">我是哟个盒子</div>
    <div class="pink">我是哟个盒子</div>
    <div class="pink">我是哟个盒子</div>

    <!-- accesskey  设置快捷键 -->
    <form action="#">
        <input type="text" name="a" id="">
        <button accesskey="s">提交</button>
    </form>

    <!-- style -->
    <!-- data-*  自定义属性 -->
</body>

10-html5语义标签

<div class="head"></div>
    <div class="body">
        <div class="nav"></div>
    </div>
    <div class="footer"></div>

11-h5表单

  <form action="#">
        <input type="number">
        <input type="color">
        <input type="time">
        <button>tijaio</button>
    </form>

12-css体验

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css </title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>我是盒子1</div>
</body>

13-css的三种引入方式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部样式   推荐！！！！！ -->
    <link rel="stylesheet" href="./14-样式.css">
    <!-- 内部样式 -->
    <style>
        /* css基本结构
        选择器{
            属性名： 属性值；
            属性名： 属性值；
        }
        
        */
        .box1 {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1">我是盒子</div>
    <!-- 行内样式：不推荐 -->
    <div style="width: 300px; height: 300px; background-color: green;"></div>
    <div class="box2">我是box2</div>
</body>

14-样式

.box2 {
    width: 300px;
    height: 300px;
    background-color: blue;
}

15-基本选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 标签选择器  选中所有的p标签*/
        p {
            color: aqua;
        }

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

        /* 类选择器 */
        .box2 {
            color: blueviolet;
        }

        /* 通配符选择器
        *{
            
        }
        
        */
    </style>
</head>

<body>
    <p>我是一段文字</p>
    <div id="box1">我是盒子一</div>
    <div class="box2">我是盒子2</div>
    <div class="box2">我是盒子3</div>

    <p>我是一段文字</p>

</body>

16-包含选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器   选中亲生儿子*/
        .a>li {
            background-color: pink;
        }

        /* 后代选择器 找到后代所有要找的元素*/
        .a li {
            color: blueviolet;
        }
    </style>
</head>

<body>

    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>

</body>

17-字体的样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        div {
            cursor: pointer;

            /* 字体大小 */
            /* font-size: 40px; */
            /* 字体粗细 */
            /* font-weight: bold; */
            /* font-weight: 900; */
            /* 100-900 400===normal  800===bold  100-900越来越粗           font-weight: 400;*/
            /* 字体是否倾斜 */
            /* font-style: italic/normal; */
            /* font-family: "微软雅黑"; */

            /* italic 900可省略，字体大小，font-family必须存在 */
            font: italic 900 70px "微软雅黑"

        }
    </style>
</head>

<body>
    <div>
        我是图图小淘气，面对世界很好奇
    </div>
</body>

18-复合选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            color: pink;
        }

        p {
            color: pink;
        }

        span {
            color: pink;
        } */
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>wisjiajsskmx</div>
    <p>cndklcdsmc</p>
    <span>jnckdsmc</span>
    <ul>
        <li>吃饱穿暖CNBCCDC</li>
    </ul>
</body>

19-属性选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aquamarine;
        }

        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: red;
        }

        input[type$="l"] {
            background-color: green;
        }

        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />

    <div id="aquamarine">1</div>
    <div>2</div>


</body>

20-首行缩进

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* text-indent: 32px; */
            font-size: 20px;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>
        戕害美的行径，在人类社会中从未消失过，只是从未像今天这样严峻：

        一方面，君主时代，艺术和审美，被君王和贵族垄断；今天虽已进入大众民主时代，但各种各样的“政治正确”导致“温和的暴政”，这是最令人绝望的审美专制主义。

        另一方面“网红审美”、“娘炮审美”、“土味审美”等恶俗的审美，从未像今天这般盛行；“美被恶制”，从未像今天这样严峻。艺术之美，似乎已然夕阳日落。

        但“美的丧失”只不过是一个结果，更重要的是回归她诞生的源泉，因为美的发展，从来不是1+2+3的线性叠加，由0到1的创造新事物，才是美的艺术。越古老的美，反而愈能历久弥新。因此，当下尤有必要回溯美的源泉——欧洲文艺复兴，重新发现艺术大师们创造的艺术之美。

        因此，有人说，未来只有两种纸质书不会消亡，第一种是全人类共同的经典，例如《圣经》等。另外一种，就是《欧洲文艺复兴大师》这样的艺术经典。

        ◎ 文艺复兴，不仅是美的胜利，更是反抗中世纪黑暗统治的认知觉醒
        说到文艺复兴，许多读者自然会想到“文艺复兴三杰”——达芬奇、拉斐尔、米开朗基罗。

        然而，三杰的成就虽然突出，却不能代表整个文艺复兴。除了复兴三杰，还有两位大师，对文艺复兴同样重要，却少为人知，一位是博斯，一位是卡拉瓦乔。

        《欧洲文艺复兴大师》推出五位艺术大师，时间上，博斯是文艺复兴早期代表，三杰代表的是文艺复兴盛期，卡拉瓦乔则是晚期巴洛克艺术的奠基人。这样的五个人，能够更好反映欧洲文艺复兴的全貌。
    </p>
</body>

作业：

代码：

<!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>
    <h2>青春不常在，抓紧谈恋爱</h2>
    <table><form action="#">
       <tr>
        <td>性别</td>
       <td><input type="radio" name="gender" value="nan" checked>男
       <input type="radio" name="gender" value="nv">女</td>
       </tr>
       <tr><td>生日</td>
       <td><select name="area" id="">
       <option value="--请选择年--">--请选择年--</option>
       <option value="2021">2021</option>
       <option value="2022">2022</option> 
       <option value="2023">2023</option>
       </select>
       <select name="area" id="">
        <option value="--请选择月--">--请选择月--</option>
        <option value="6">6</option>
        <option value="7">7</option> 
        <option value="8">8</option> 
        </select>
        <select name="area" id="">
        <option value="--请选择日--">--请选择日--</option>
        <option value="6">6</option>
        <option value="7">7</option> 
        <option value="8">8</option></td> 
        </select></tr>
        <tr><td>所在地区</td>
        <td><input type="text" name="text" value="北京思密达"></td></tr>
        <tr><td>婚姻状况</td>
        <td><input type="radio" name="" value="" checked>未婚
        <input type="radio" name="" value="">已婚
        <input type="radio" name="" value="">离婚</td></tr>
        <tr><td>学历</td>
        <td><input type="text" name="" value="幼儿园""></td></tr>
        <tr><td>喜欢的类型</td>
        <td><input type="checkbox" name="" id="" value=""><label>妩媚的</label>
        <input type="checkbox" name="" id="" value=""><label>可爱的</label>
        <input type="checkbox" name="" id="" value=""><label>小鲜肉</label>
        <input type="checkbox" name="" id="" value=""><label>老腊肉</label>
        <input type="checkbox" name="" id="" value=""><label>都喜欢</label></td></tr>
        <tr><td>自我介绍</td>
        <td><textarea cols="20" rows="2" maxlength="200" placeholder="自我介绍"></textarea></td></tr>
        <tr><td></td>
        <td><input type="submit" value="免费注册"></td></tr>
        <tr><td></td><td><input type="checkbox" name="" value="" checked><label>我同意注册条款和会员加入标准</label></td></tr>
        <tr><td></td><td><a href="./作业4.html">我是会员，立即登录</a></td></tr>
        <tr><td></td><td><h3>我承诺</h3></td></tr>
        <tr><td></td><td><ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul></td></tr>    
    </form></table>
</body>
</html>

结果：