列表/表格/表单

一、列表（list）

　　1.1 HTML中的list有三种：

  • 有序列表（ol > li）
  • 无序列表（ul > li）
    • 定义列表（dl > dt > dd） 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list列表</title>
</head>
<body>
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <dl>
        <dt>
            <dd>结构</dd>
            <dd>表现</dd>
            <dd>行为</dd>
        </dt>
    </dl>
</body>
</html>

二、表格（table） 

2.1 普通表格

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

　　2.2 长表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长表格</title>
</head>
<body>
    <!-- 
        长表格，分为三部分：
            头部：thead
            主体：tbody
            底部：tfoot
     -->
     <table border="1" width="50%" align="center">
         <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
         </thead>
         <tbody>
            <tr>
                <td>0001</td>
                <td>小花</td>
                <td>女</td>
                <td>22</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>小一</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>小二</td>
                <td>女</td>
                <td>20</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>小三</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>0005</td>
                <td>桦桦</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td>0006</td>
                <td>马晓旭</td>
                <td>男</td>
                <td>21</td>
            </tr>
            <tr>
                <td>0007</td>
                <td>王明文</td>
                <td>男</td>
                <td>24</td>
            </tr>
            <tr>
                <td>0008</td>
                <td>小一</td>
                <td>女</td>
                <td>19</td>
            </tr>
         </tbody>
         <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>总人数</td>
                <td>8</td>
            </tr>
         </tfoot>
     </table>
</body>
</html>

2.3 一些属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长表格</title>
    <style>
        table{
            width: 50%;
            border: 1px solid red;
            margin: 0 auto;

            /* border-spacing: 指定边框之间的距离，一般指定为0 */
            /* border-spacing: 10px; */

            /* border-collapse: 设置边框的合并 */
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid red;

            height: 100px;

            /* 垂直水平居中 */
            vertical-align: middle;
            text-align: center;
        }

        /* 
            表格中如果没有tbody，直接使用tr，
            浏览器会自动创建一个tbody，并且将所有得tr放入其中
            所以tr不是table的直接子元素
            table > tr:nth-child(odd): 不能获取
            tbody > tr:nth-child(odd): 获取
         */
         tbody > tr:nth-child(odd){
            background-color: #bfa;
        }

        .box1{
           width: 300px;
           height: 400px;
           background-color: orange; 

           /* 将元素设置为单元格 td */
           display: table-cell;
           vertical-align: middle;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>0001</td>
            <td>小花</td>
            <td>女</td>
            <td>22</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>小一</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>0003</td>
            <td>小二</td>
            <td>女</td>
            <td>20</td>
        </tr>
        <tr>
            <td>0004</td>
            <td>小三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>0005</td>
            <td>桦桦</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>0006</td>
            <td>马晓旭</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr>
            <td>0007</td>
            <td>王明文</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>0008</td>
            <td>小一</td>
            <td>女</td>
            <td>19</td>
        </tr>    
    </table>
</body>
</html>

三、表单（form）

3.1 作用

- 现实生活中，表单用于提交数据

- 在网页中也可以使用表单，用于将本地的数据来提交给远程的服务器

- 使用form标签来创建一个表单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- 
        form的属性
            action：表单要提交的服务器地址/接口
            method：提交的方式
                - get：从服务器获取数据（一对键值对需要用"?"连接）
                - post：向服务器提交数据
                区别：
                ① get在传输过程中，数据被放在请求的URL中，不安全
                  post的操作用户不可见，放在Request body中
                ② get的输送数据较小，主要受URL长度所限
                  post传输数量较大，一般默认不受限制
                ③ get请求的参数会被浏览器缓存
            
        一般，input标签中要有name属性，数据传输时可以通过name属性
        的键值对将数据提交给服务器
     -->
    <form action="05z-index层级.html">
        <!-- 
            autocomplete="off" 关闭自动补全
            readonly：将表单项设置为只读，数据会提交
            disable：将表单设置为禁用，数据不会提交
            autofocus：设置表单自动获取聚焦
         -->
        文本框：<input type="text" name="username" autocomplete="off" placeholder="请输入文字">
        <br><br>

        密码框：<input type="password" name="pwd" autofocus>
        <br><br>

        <!-- 
            单选按钮：
                - 选择框，必须制定一个value属性，value属性最终会作为用户填写的值参数给服务器
                - checked 默认选中
         -->
        男<input type="radio" name="gender" value="male" checked>
        女<input type="radio" name="gender" value="female">
        <br><br>

        多选框<input type="checkbox" name="test" value="1">
        <input type="checkbox" name="test" value="2">
        <input type="checkbox" name="test" value="3">
        <br><br>

        <!-- 下拉列表 -->
        <select name="cityList">
            <option value="BeiJing">北京</option>
            <option value="DaLian" selected>大连</option>
            <option value="KunMing">昆明</option>
        </select>
        <br><br>

        <input type="submit">
        <input type="reset">
        <input type="button" value="按钮">
        <br><br>

        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>
</body>
</html>

 

posted @ 2020-11-03 21:52  娜豆  阅读(104)  评论(0)  编辑  收藏  举报