表格

组成部分

  • thead(头部)
  • tbody(主体)
  • tfoot(底部)
  • th(表示头部的单元格)

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>
</head>
<body>
    <table border="1" width="50%" align="center">
        <thead>
            <!-- tr表示表格中的一行，有几个tr就有几行 -->
            <tr>
                <!-- td表示一个单元格，有几个td就有几个单元格 -->
                <th>日期</th>
                <th>名字</th>
                <th>输入</th>
                <th>输出</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2021</td>
                <td>王五</td>
                <td>学习</td>
                <!-- rowspan  纵向的合并单元格 -->
                <td rowspan = "2">时间</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>学习</td>
                <td>坚持</td>
                <td>刻苦</td>
                <td colspan = "2">智慧</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表单

定义：用于将本地的数据提交给远程的服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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>

    </style>
</head>
<body>
    <!-- from  属性
    action  表单要提交的服务器地址 -->
    <form action="bemo.html">
        <!-- 文本框
             注意：数据要提交到服务器中，必须要为元素指定一个name属性值 -->
             <!-- autocomplete="off" 关闭自动补全
                  readonly  将表单项设置为只读，数据会提交
                  disabled  将表单项设置为禁用，数据不会提交
                  autofocus  设置表单项自动获取焦点 -->
        <input type="text" name="username">
         <!--密码框  -->
         <input type="password"  name="password">

         <!-- 单选按钮
                 必须要指定一个value属性，value属性最终会作为用户的填写值
                 checked  可以将单选按钮设置为默认选中 -->
        <input type="radio" name="hello" value="a">
        <input type="radio" name="hello" value="b" checked>

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

        <!-- 下拉列表 -->
        <select name="haha" >
            <option value="i"></option>
            <option value="ii"></option>
            <option value="iii"></option>
        </select>

        <!-- 提交按钮 -->
        <input type="submit" value="注册">

        <!-- 重置按钮 -->
        <input type="reset">

        <!-- 普通的按钮 -->
        <input type="button" value="按钮">

    </form>
    
</body>
</html>