本文详细介绍了HTML中的表格、列表和表单的基本用法，包括表格标签、属性、单元格合并，列表的不同类型及其语法，以及表单控件的使用，如input、label、textarea和select，帮助读者掌握HTML网页构建的基础。
HTML中表格、列表和表单的基本用法
1.表格的用法
表格不是用来布局的，而是用来显示表格式的数据，使得数据的显示具有可读性。
下面是搜狐财经页面中table的用法：
1.1 表格标签用法
表格主要是用来显示特殊数据的，一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签。另外单元格标签中可以容纳其他的所有的元素，如图片，链接等。
| 标签名称 | 用法 |
|---|---|
| table | 表格标签，就是一个四方的盒子 |
| tr | 定义表格中的行，必须嵌套在table中 |
| td | 用于定义表格中的单元格，必须嵌套在行标签中 |
| th | 表头单元格ytd用法相同（一般表头单元格位于表格的第一行或者第一列，并且文本加粗居中） |
| caption | 表格标题，通常这个标签会被居中显示且显示于表格之上，该标签必须紧跟在table标签之后。 |
1.2 表格属性用法
| 属性 | 用法 |
|---|---|
| width | 设置表格宽度 |
| height | 设置表格高度 |
| cellspacing | 定义表格单元格之间的空间 |
| cellpadding | 表示单元格边框与单元格内容之间的距离 |
| border | 表示围绕表格的边框的宽度 |
| align | 表示表格在页面中的位置 |
表格属性中我们要重点关注的是cellspacing和cellpadding。并且在实际的开发过程中，通常将border，cellspacing和cellpadding设置为0。
下面用一张图来解释上述属性在表格中的具体含义：
下面用一个案例来展示上述表格标签和表格属性的用法。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="0">
<caption>湖人队主要球员</caption>
<tr>
<th>姓名</th>
<th>位置</th>
<th>能力</th>
</tr>
<tr>
<td>詹姆斯</td>
<td>小前锋</td>
<td>99</td>
</tr>
<tr>
<td>戴维斯</td>
<td>大前锋</td>
<td>97</td>
</tr>
</table>
</body>
</html>
显示效果如下（这里只是单纯的html显示效果）：
1.3 合并单元格
1.合并单元格有两种形式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
2.合并单元格的顺序，先上后下，先左后右
3.单元格合并的三个步骤
- 先确定是跨行还是跨列
- 根据合并原则找到目标的单元格，写上合并方式和要合并的单元格数量
- 删除多余的单元格
现在根据上面提供的图片我们进行单元格的合并案例。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="240" align="center" cellspacing="0">
<caption> 个人简介 </caption>
<tr>
<td>詹姆斯</td>
<td>男</td>
<td>18</td>
<!-- 目标单元格 先上后下 -->
<td rowspan="2">照片</td>
</tr>
<tr>
<td>身高 203</td>
<td>湖人队</td>
<td>已婚</td>
<!-- <td>照片</td> 这个单元格是多余的 -->
</tr>
<tr>
<td>总冠军年份</td>
<!-- 第二个单元格是目标单元格 -->
<td colspan="3">2012，2013，2016</td>
</tr>
<tr>
<td>mvp年份</td>
<td colspan="3">2009,2010,2012,2013</td>
</tr>
</table>
</body>
</html>
网页效果：
此外表格划分结构也需要我们了解一下，对于比较复杂的表格，结构比较复杂，在开发时我们需要将其分成三部分：题头（thead）,正文（tbody）和脚注（tfoot）。这样可以帮助我们更好的划分表格结构。
2.列表的用法
前面我们知道表格一般用于数据的展示，而列表主要用于页面的布局，以后学习了css后，可以与其配合实现页面中的布局。
2.1 无序列表
这是以后我们在开发中用得最多得列表形式。
基本语法如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
2.2 有序列表
使用情形少，了解即可。
基本语法如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
2.3 自定义列表
基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
下面用一个案例介绍上述三种列表的使用和网页中得效果。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>1. 无序列表</h2>
湖人队球员：
<ul>
<li>詹姆斯</li>
<li>戴维斯</li>
<li>考辛斯</li>
<li>裤子吗</li>
</ul>
<h2>2. 有序列表 </h2>
近几年mvp获得者：
<ol>
<li>字母哥</li>
<li>哈登</li>
<li>威斯布鲁克</li>
<li>库里</li>
</ol>
<h2>3. 自定义列表 </h2>
球队成员：
<dl>
<dt>湖人队</dt>
<dd>詹姆斯</dd>
<dd>戴维斯</dd>
<dd>考辛斯</dd>
<dd>裤子吗</dd>
<dt>快船队</dt>
<dd>伦纳德</dd>
<dd>乔治</dd>
<dd>威廉姆斯</dd>
<dd>哈雷尔</dd>
</dl>
</body>
</html>
显示效果如下：
列表在网页中的具体用法需要配合css使用，主要是用来实现网页中的布局。特别是无序列表，以后会大量用到该结构。
3.表单的用法
表单目的是为了收集用户的信息，跟用户进行交互时收集用户资料，也需要表单。一个完整的表单通常由表单空间，提示信息和表单域3个部分构成。
3.1 input控件
语法：
<input type="属性值" value="你好">
input控件常用属性如下：
| 属性 | 说明 | 用法 |
|---|---|---|
| type | 表单类型 | text：单行文本输入框；password：密码输入框；radio:单选按钮；checkbox：复选框；button：普通按钮；submit：提交按钮；reset：重置按钮；image：图像形式提交按钮；file：文件域 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | name主要作用是区别不同的表单 |
| checked | 默认选中 | 在表示单选或者复选表单时，表示默认选中指定项 |
上述name属性在我们后续用到ajax和后台时，是必须要用到的。后台可以通过这个name属性找到这个表单，然后进行后续的操作。
现在通过如下代码实现上述所有控件，属性用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- type text 是一个文本框 -->
用户名： <input type="text" value="请输入用户名" name="username" /> <br />
<!-- type password 是一个密码框 -->
密码： <input type="password" value="请输入密码" name="pwd" /> <br />
<!-- type radio 是一个单选框 -->
性别：
男 <input type="radio" name="sex" />
女 <input type="radio" name="sex" checked="checked" />
<!-- type checkbox 是一个复选框 -->
爱好:
lol <input type="checkbox" name="hobby" checked="checked" />
nba <input type="checkbox" name="hobby" />
中国新说唱 <input type="checkbox" name="hobby" />
前端 <input type="checkbox" name="hobby" /> <br />
<!-- 普通按钮需要些value值 -->
<input type="button" value="获取短信验证码" />
<input type="submit" value="提交所填" />
<input type="reset" value="重置所填" />
<!-- 图片提交按钮 里面必须包含 src 属性 -->
<input type="image" src="url" /> <br />
上传文件:
<!-- 文件域 上传文件用的-->
<input type="file" />
</body>
</html>
显示效果：
3.2 label控件
label标签主要的目的是为了提高用户体验。用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点，而不是只能通过点击文本框获得焦点。
用法1：直接包括input表单，适合单个表单选择
<label> 用户名： <input type="radio" name="usename"
value="请输入用户名"> </label>
用法2：for属性规定label与哪个表单元素绑定
<label for="nba">湖人队</label>
<input type="radio" name="nba" id="nba">
3.3 textarea控件（文本域）
通过文本域可以创建多行文本输入框，上面提到的input表单只能显示一行。
input多用于用户名，昵称，密码等场景；textarea文本域多用于留言板，有多行文字输入的场景。
语法：
<textarea >
文本内容
</textarea>
3.4 select控件（下拉列表）
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
用法：
<select>
<option selected ="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
select至少包含一对option，selected表示当前项为默认选中项。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
籍贯：
<!-- 省份选择的 selected="selected" 表示默认选中 北京 -->
<select>
<option>--请选择省份--</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>上海</option>
<option>山东</option>
</select>
<!-- 城市选择 -->
<select>
<option>--请选择城市--</option>
<option>海淀区</option>
<option>昌平区</option>
<option>通州区</option>
<option>雄安区</option>
</select>
</body>
</html>
显示效果（下拉的效果大家可以自己复制上述代码去自行尝试）：
最后来讲一下什么叫做form表单域
我们在网页中收集到的表单信息需要通过form表单域传递给服务器。form标签被用来定义表单域，以实现用户信息的收集和传递。每一个表单都应该有自己的表单域。
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
用法代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="post" name="user">
用户名: <input type="text" name="username" /> <br />
密码: <input type="password" name="pwd" /><br />
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>
显示效果：
注意之前提高的input控件中的提交（subbit）和重置（reset）表单一般是配合form表单一起使用的，每个表单都需要有自己的表单域，这样就避免在操作过程中混淆网页中的其他的表单。
扫一扫
1539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
