1. 表格

1.1 表格的相关标签

①表格由 <table> 标签来定义。

②每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

③边框属性通过 <table> 标签中的 border 属性进行设置，其中，border=”0”表示无边框，border=”1”默认就是带边框。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

④表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

⑤表格的标题使用 <caption> 标签进行定义。

⑥单元格边距通过 <table> 标签中的 cellpadding 属性进行设置，其中，cellpadding=”0”表示无边距，cellpadding=”10”就是带上了单元格边距。

⑦单元格间距通过 <table> 标签中的 cellspacing 属性进行设置，其中，cellspacing=”0”表示无间距，cellspacing=”10”就是带上了单元格间距。

1.2 长表格

可以将一个表格分成三个部分：

  • 头部 thead
  • 主体 tbody
  • 底部 tfoot

示例：

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
<table>
    <thead>
        <tr>
            <td>日期</td>
            <td>新增确诊病例</td>
            <td>新增无症状感染者</td>
            <td>合计</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2022.3.15</td>
            <td>60</td>
            <td>40</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2022.3.16</td>
            <td>20</td>
            <td>10</td>
            <td>30</td>
        </tr>
        <tr>
            <td>2022.3.17</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>合计</td>
            <td>130</td>
        </tr>
    </tfoot>
</table>

日期 新增确诊病例 新增无症状感染者 合计
2022.3.15 60 40 100
2022.3.16 20 10 30
2022.3.17 0 0 0
合计 130

2. 表单

2.1 表单标签

表单主要用于收集网页上浏览者的相关信息，其标签为：<form>…</form>，其基本语法格式如下：

1
2
<form action="url" method="get" enctype="mime">
</form>

action中的内容指定处理提交表单的格式，它可以是一个URL地址或者一个电子邮件地址。method中的内容指明提交表单的HTTP方法。enctype中的内容指明用来把表单提交给服务器时的互联网媒体形式。

数据要提交到服务器中，必须要为元素指定一个name属性值，自定义。

value 为按钮上显示的文字

简单示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
<body>
	<form>
		下面是用户登录信息
		<br/>
		用户名称
		<input type="text" name="user"/>
		<br/>
		用户密码
		<input type="password" name="password"/>
		<br/>
		<input type="submit" value="登录"/>
	</form>
</body>
</html>
HTML简单学习
下面是用户登录信息
用户名称
用户密码

2.2 文字字段

2.2.1 单行文本输入框（text）

文本框是一种让访问者自己输入内容的表单对象，通常用来填写单个字或者简单的回答，代码格式如下：

1
<input type="text" name="..." size="..." maxlength="..." value="...">

其中，type=”text”定义单行文本输入框。

name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。

size属性定义文本框的宽度，单位是单个字符宽度。

maxlength属性定义最多输入的字符数。

2.2.2 多行文本输入框（textarea）

多行文本输入框主要用于输入较长的文本信息，代码格式如下：

1
2
<textarea name="..." cols="..." rows="..." wrap="...">
</textarea>

其中，name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。

cols属性定义多行文本框的宽度；rows属性定义多行文本框的高度。

wrap属性定义输入内容大于文本域时的显示方式。

2.2.3 密码域（password）

密码输入是一种特殊的文本域，主要用于输入一些保密信息。当网页浏览者输入文本时，显示的是黑点或者其他符号，这样就增加了输入文本的安全性。代码格式如下

1
<input type="password" name="..." size="..." maxlength="..."/>

其中，type=”password”定义密码框。name属性定义密码框的名称，要保证唯一性。

size属性定义密码框的宽度。maxlength属性定义最多输入的密码字符数。

2.2.4 单选按钮（radio）

单选按钮主要是让网页浏览者在一组选项里选择一个。代码格式如下：

1
<input type="radio" name="..." value="..."/>

其中，type=”radio”定义单选按钮。

name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选选项都必须使用同一个名称。

value属性定义单选按钮的名称，在同一组中，它们的值必须是不同的。

2.2.5 复选框（checkbox）

复选框主要是让网页浏览者在一组选项里同时选择多个选项（也即多选框），每个复选框都是一个独立的元素，都必须有一个唯一的名称。代码格式如下：

1
<input type="checkbox" name="..." value="..."/>

其中，type=”checkbox”定义复选框。

name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称。

value属性定义复选框的值。

2.2.6 下拉菜单

使用 select + option 可以创建单选或多选下拉菜单。具体实例如下：

1
2
3
4
5
6
<select>
    <option>列表1</option>
    <option>列表2</option>
    <option>列表3</option>
    <option>列表4</option>
</select>

2.2.7 列表框

列表框主要用于在有限的空间里设置多个选项，即可用作单选，也可用作多选。代码格式如下：

1
2
3
<select name="..." size="..." multiple>
<option value="..." selected>...</option>
</select>

其中，size属性定义下拉选择框的行数。name属性定义下拉选择框的名称。

multiple属性表示可以多选，如果不设置本属性，那么只能单选。

value属性定义选择项的值。selected属性表示默认已经选择本选项。具体实例如下：

1
2
3
4
5
6
7
8
9
10
<form>
    请选择您感兴趣的电影类型：<br/>
    <select name="movie" size="3" multiple>
        <option value="Book1" selected>浪漫喜剧</option>
        <option value="Book2">恐怖片</option>
        <option value="Book3">科幻片</option>
        <option value="Book4">动话片</option>
        <option value="Book5">黑帮片</option>
    </select>
</form>
请选择您感兴趣的电影类型：

2.2.8 普通按钮（button）

普通按钮用来控制其他定义了处理脚本的处理工作。代码格式如下：

1
<input type="button" name="..." value="..." onclick="...">

其中，type=”button”定义普通按钮。name属性定义普通按钮的名称。value属性定义按钮的显示文字。

onclick属性表示单击行为，也可以是其他的事件，通过指定脚本函数来定义按钮的行为。

具体实例如下：

1
2
3
4
5
6
7
<form>
    点击下面的按钮，把文本框1中的内容复制到文本框2中：<br/>
    文本框1：<input type="text" id="field1" value="学习HTML的技巧"/><br/>
    文本框2：<input type="text" id="field2"/><br/>
    <input type="button" name="..." value="点击我"onclick="document.getElementById('field2').value=document.getElementById('field1').value"/>
</form>

点击下面的按钮，把文本框1中的内容复制到文本框2中：
文本框1：
文本框2：

2.2.9 提交按钮（submit）

提交按钮用来将输入的信息提交到服务器。代码格式如下：

1
<input type="submit" name="..." value="..."/>

其中，type=”submit”定义提交按钮。name属性定义提交按钮的名称。

value属性定义按钮的显示文字。通过提交按钮可以将表单里的信息提交给表单里action所指向的文件。

具体实例如下：

1
2
3
4
5
6
7
8
9
<form action="https://jayfan.icu" method="get">
    请输入你的姓名：
    <input type="text" name="name"/><br/>
    请输入你的电话：
    <input type="text" name="telephone"/><br/>
    请输入你的身份证号：
    <input type="text" name="IDCard"/><br/>
    <input type="submit" value="提交"/>
</form>
请输入你的姓名：
请输入你的电话：
请输入你的身份证号：

在以上三个文本框中输入相应的内容，之后点击“提交”按钮，即可实现将表单中的数据发送到这个博客网站。

2.2.10 重置按钮（reset）

重置按钮用来重置表单中输入的信息。代码格式如下：

1
<input type="reset" name="..." value="..."/>

其中，type=”reset”定义重置按钮。name属性定义重置按钮的名称。value属性定义按钮的显示文字。

具体实例如下：

1
2
3
4
5
6
7
8
<form>
    请输入用户名称：
    <input type="text" name="name"/><br/>
    请输入用户密码：
    <input type="password" name="password"/><br/>
    <input type="submit" value="登录"/>
    <input type="reset" value="重置"/>
</form>
请输入用户名称：
请输入用户密码：

在两个文本框中输入相应的内容，点击“重置”按钮即可清空两个文本框中的所有内容。