HTML 学习二 - 列表、表格与表单

引言

HTML 学习一 - 基础: https://blog.yexca.net/archives/146
HTML 学习二 - 列表、表格与表单: https://blog.yexca.net/archives/150
HTML 学习三 - 网页布局: https://blog.yexca.net/archives/195

列表

列表分为无序、有序列表和定义列表

无序列表

unordered list -> list

1
2
3
4
5
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

效果如下

  • 第一项
  • 第二项
  • 第三项
### 有序列表

ordered list -> list

1
2
3
4
5
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

效果如下

  1. 第一项
  2. 第二项
  3. 第三项
### 定义列表

个人记忆: define list -> define title -> define describe

1
2
3
4
5
6
7
8
<dl>
    <dt>第一标题</dt>
    <dd>1.1 描述</dd>
    <dd>1.2 描述</dd>
    <dt>第二标题</dt>
    <dd>2.1 描述</dd>
    <dd>2.2 描述</dd>
</dl>

效果如下

第一标题
1.1 描述
1.2 描述
第二标题
2.1 描述
2.2 描述

dl 标签里只能包含 dt 和 dd 标签,而 dt 和 dd 标签里可以包含任何内容

表格

标签说明个人记忆
table定义表格
tr表格的行table row
th表头单元格table head
td内容单元格table data

以下结构标签可以省略,主要是面向浏览器

标签说明
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
<table>
    <thead>
    	<tr>
        	<th>\</th>
        	<th>x</th>
        	<th>y</th>
        	<th>total</th>
    	</tr>
    </thead>
    <tbody>
    	<tr>
    		<td>a</td>
    		<td>50</td>
    		<td>50</td>
    		<td>100</td>
    	</tr>
    	<tr>
    		<td>b</td>
    		<td>50</td>
    		<td>50</td>
    		<td>100</td>
    	</tr>
    </tbody>
    <tfoot>
    	<tr>
    		<td>total</td>
    		<td>100</td>
    		<td>100</td>
    		<td>100</td>
    	</tr>
    </tfoot>
</table>

效果如下

\xytotal
a5050100
b5050100
total100100100

单元格合并

表格合并分为跨行合并与跨列合并,合并后应该删除被合并的单元格

属性说明
rowspan跨行合并,值为合并的行数
colspan跨列合并,值为合并的列数

例如将以上表格第二行第二列与第三行第二列跨行合并,最后一行最后三列跨列合并

 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
<table>
    <thead>
    	<tr>
        	<th>\</th>
        	<th>x</th>
        	<th>y</th>
        	<th>total</th>
    	</tr>
    </thead>
    <tbody>
    	<tr>
    		<td>a</td>
            <!-- 此处增加跨行合并属性 -->
    		<td rowspan="2">50</td>
    		<td>50</td>
    		<td>100</td>
    	</tr>
    	<tr>
    		<td>b</td>
            <!-- 此内容可以删除,此处注释 -->
    		<!--<td>50</td>-->
    		<td>50</td>
    		<td>100</td>
    	</tr>
    </tbody>
    <tfoot>
    	<tr>
    		<td>total</td>
            <!-- 此处增加跨列合并属性 -->
    		<td colspan="3">100</td>
            <!-- 此内容可以删除,此处注释 -->
    		<!--<td>100</td>
    		<td>100</td>-->
    	</tr>
    </tfoot>
</table>

效果如下

\xytotal
a5050100
b50100
total100

如果使用了结构标签 (thead, tbody, tfoot) 则不能跨结构合并,例如以上表格第三行不能和最后一行合并

表单

form 标签

一张表单需要使用 form 标签确定表单的区域,以下所述标签需要放在 form 标签内

input 标签

多数表单使用 input 标签实现,根据 type 属性值的不同,实现不同功能

type 属性值说明
text文本框
password密码框
radio单选框
checkbox多选框
file上传文件

占位文本

占位文本即提示信息,文本框和密码框可以使用

1
<input type="text" placeholder="提示信息" />

效果如下

单选框 radio

属性作用
name控件名称
checked默认选中

以下代码实现选择性别

1
2
3
性别:
<input type="radio" name="gender" checked /><input type="radio" name="gender" />

效果如下

性别:

文件上传

默认情况下 file 类型只能上传一个文件,若要上传多个文件,可以添加 multiple 属性

1
<input type="file" multiple />

多选框 checkbox

又称复选框,默认选择可以使用属性 checked

1
2
3
4
<input type="checkbox" checked /> a
<input type="checkbox" /> b
<input type="checkbox" /> c
<input type="checkbox" /> d

下拉菜单

1
2
3
4
5
6
7
<select>
    <option>CN</option>
    <option>USA</option>
	<option>UK</option>
	<!-- selected 指定默认选中 -->
	<option selected>JP</option>
</select>

文本域

实现多行输入文本的表单控件,一般为个人简介

1
<textarea>提示信息</textarea>

label 标签

用于网页中某个标签的说明文本,还可以用于绑定文字和表单控件的关系,增大表单控件的点击范围

例如上述性别单选框只有选中圆圈才可选择单选框,而使用此标签后可以实现选择文字也可选中单选框

方法一

input 标签添加 id 属性,label 标签添加 for 属性,俩属性值相同

1
2
3
4
<input type="radio" name="gender" id="male"/>
	<label for="male"></label>
<input type="radio" name="gender" id="female"/>
	<label for="female"></label>

方法二

直接使用 label 标签包裹文字和表单控件

1
2
<label><input type="radio" name="gender" /></label>
<label><input type="radio" name="gender" /></label>

支持 label 标签增大点击范围的控件包括:文本框、密码框、上传文件、单选框、复选框、下拉菜单、文本域等

按钮

button 标签根据 type 属性值的不同,功能不同

type 属性值说明
submit默认功能,提交数据到后台
reset重置按钮,将表单控件恢复默认值
button普通按钮,需配合 JavaScript 使用
1
<button type="">按钮</button>