HTML 列表 || 表格 || 表单

---

正文开始

1. 列表

1.1 无序列表

布局排列整齐的不需要规定顺序的区域

标签	作用
ul	代表无序列表
li	列表条目

<ul>
	<li>文本内容</li>
	<li>文本内容</li>
	...
</ul>

例如：

需要注意的是，ul内只能放li标签，但li标签里可以放置其他标签。

1.2 有序列表

布局排列整齐的需要规定顺序的区域。

标签	作用
ol	代表有序列表
li	列表条目

<ol>
	<li>文本内容</li>
	<li>文本内容</li>
	...
</ol>

例如：

同无序列表一样，ol内只能放li标签，但li标签里可以放置其他标签。

1.3 定义列表

一个标题对应多个內容的区域

标签	作用
dl	代表定义列表
dt	列表标题
dd	列表描述

<dl>
	<dt>列表标题</dt>
	<dd>列表描述</dd>
	...
</dl>

例如：

其中，dl 内只能放 dt 、dd 标签，但 dt、dd 标签里可以放置其他标签。

2. 表格

2.1 表格基本标签

网页中的表格与 Excel 表格类似

标签	作用
table	表示表格
tr	表示表格的一行
th	表示表格表头內容，文本会加粗
td	表示表格內容
border	为表格添加边框线的属性

<table border="1">
	<tr>
		<th>表头內容</th>
		<td>表格內容</td>
		...
	</tr>
</table>

例如：

2.2 表格结构标签

使用表格结构标签将內容划分区域，让表格结构更清晰。将内容划分区域只是让其结构更清晰，并不会在视觉上产生变化。

标签	作用
thead	表格头部
tbody	主要內容
tfoot	表格底部

例如：

2.3 合并单元格

将多个单元格个合并成一个单元格。需要将指定区域最左最上的单元格添加属性，同时将这个区域内的其他单元格删除。属性的取值就是合并单元格的数量。

属性	作用
rowspan	跨行合并
colspan	跨列合并

例如：


需要注意的是，合并单元格只能在表格的同一结构中进行，不能跨结构合并单元格。

3. 表单

用来收集用户信息

<!-- 使用form标签将表单区域划分出来 -->
<form action="">
</form>

3.1 input 标签基本使用

input 标签用来收集用户信息

<input type=" ">

type 属性	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

例如：

input 标签有占位文本属性

<input type="..." placeholder="提示信息">

例如：

3.1.1 单选框 radio

使用单选框时，可以添加属性来控制

属性	作用
name	将空间分组，同组中只能选一个
checked	设置默认选项

例如：

3.1.2 上传文件 file

默认情况下，文件上传表单控件只能上传一个文件，我们可以使用multiple属性来实现上传多个文件。

<input type=“file” multiple>

3.1.3 多选框 checkbox

同单选框一样，多选框也有默认选择的功能，同样使用checked属性。

<input type=“checkbox” checked>

3.2 表单下拉菜单

可以将多个内容折叠节省空间。

标签	作用
select	代表下拉菜单整体
option	嵌套在 select 中，代表下拉菜单中的一项
selected	默认选项

例如：

3.3 表单文本域

用于多行输入文本的表单控件。

标签	作用
textarea	表单文本域

3.4 label 标签

在网页中，是某个标签的说明文本。

<!-- 可以将控件对应说明文本 -->
<input type="radio" id="控件id">
<label for="控件id">说明文本</label>

例如：

上述 label 标签将“男”和单选框想联系起来，可以实现点击“男”这一字进行选择。

上述代码可以简写成如下：

3.5 按钮 button

与用户交互。

<button type="">提示文本</button>

type 属性值	作用
submit	提交按钮，点击后可以提交数据到后台
reset	重置按钮，点击后将表单控件区域恢复默认值
button	普通按钮，默认没有功能，一般配合 JavaScript 使用

例如：

---

完