本文介绍了HTML中的表格标签使用，包括主体表格、表头格式、合并单元格，以及列表（无序、有序和自定义）和表单控件（如input、label、select和textarea）的基础知识，适合初学者快速上手。
目录
一、前言
对于教程二，主要学习了文字标签、图像标签和链接标签的使用，教程三主要针对表格、列表、表单标签的使用方法。
二、表格标签
1.主体表格
<!-- <table></table>是定义表格的标签 -->
<table>
<!-- <tr></tr>用来定义行，嵌套在table标签中 -->
<tr>
<!-- <td></td>用来定义表格中的单元格，必须嵌套在tr标签中 -->
<td>单元格内的文字</td>
</tr>
</table>2.表头表格
表头表格就是上面表格中的第一行，它和下面几行主要区别就是有加粗和居中显示。
3.表格标签的属性
cellpadding:文字距离左侧表格线的距离
cellspacing：表格两条线中的距离
4.合并单元格
就像excel中一样，html也有合并单元格这个功能，只不过需要特定的代码。
将上面的表格按照1~9编号，以跨列合并为例，colspan="2"表示合并2个单元格，起始位置就是第二列，其中第三列被合并了，所以就不需要了，删除。
上面图中具体代码实现为：
<!-- 为表格设置居中、边框、文字与表格相距5、表格与表格相距0、宽度（宽高设置一个会自动调节） -->
<table align="center" border="1" cellpadding="5" cellspacing="0" width="250">
<!-- 下图中的thead和tbody只是把表头和主体做一个分类，没什么特殊作用 -->
<thead>
<tr>
<!-- 将2和3按照列来合并，确定合并的起始点，删除多余的单元格 -->
<th>1</th>
<th colspan="2">2</th>
<!-- <th>3</th>删除这一个 -->
</tr>
</thead>
<tbody>
<!-- 将4和7按照行来合并，确定合并的起始点，删除多余的单元格 -->
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<!-- <td>7</td>删除这个多余的 -->
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>三、列表标签
1.无序列表（重点）
<ul>标签表示HTML中的无序列表，一般会以项目符号作为列表项<li>.
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>- 无序列表中列表项并列
-
<ul></ul>中只能嵌套<li></li>，在<ul></ul>标签中输入其他标签或者文字的做法不正确。
-
<li>与</li>之间相当于一个容器，可以容纳所有元素。
特点可以简单理解成<ul>只有<li>这一个儿子，假如p标签也行冒充儿子，那不行。对于<li>这个儿子来讲，他也会有儿子而且不限量，所以<ul>有一个儿子，无限个孙子。
2.有序列表
<ol type="A">
<li>列表项一</li>
<li>列表二</li>
<li>列表三</li>
</ol>-
<ol>标签中的type属性值为排序序列号，不添加type属性时，有序列表默认从1开始排序。
-
常用的type属性值分别为是1，a，A，i，I
-
<ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
-
<ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。
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>自定义列表就是<dt>创建的一个名词，剩下的<dd>用来描述和它相关的内容，具体关系如下图：
代码段：
<!-- 无序列表ul中间不能嵌套别的标签，li可以 -->
<ul>
<li>甄嬛</li>
<li>宜秀</li>
<li>年世兰</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>甄嬛</li>
<li>苹果</li>
<li>西瓜</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>雍正</dt>
<dd>甄嬛</dd>
<dd>宜秀</dd>
<dd>年世兰</dd>
</dl>四、表单标签
表单标签对于信息收集有着重要的作用，分为表单域、表单控件和提示信息三个部分，下图为常见用户注册收集信息的表单域。
一、表单域
表单域是一个包含完整表单元素的区域。
<form action="url地址" method="提交方式" name="表单域名称">
各种元素控件
</form>在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 指定接受并处理表单数据服务器程序的url地址 |
| method | get/post | 设置表单数据的提交方式，取值为get/post |
| name | 名称 | 指定表单的名称 |
二、表单控件（重点）
1.Input输入标签
在英文单词中，Input为输入的意思，在表单元素<input>标签用于收集用户信息。
在input标签中，包含一个type属性，根据不同的type属性值，输入字段有多种样式。
<input type="属性值 " />- <input />为单标签
- type属性设置不同用来指定不同的控件类型
type之外的属性：
| 属性 | 说明 | 作用 |
|---|---|---|
| type | 表单类型 | 用来指定不同的控件类型 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | name主要作用就是用于区别不同的表单。 |
| checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
| maxlength | 正整数 | 规定输入字段中字符最大长度 |
代码段：
<form>
<!-- text一个文本框 value是默认出现在文本框中的值 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="12">
<br>
<!-- password不显示密码的文本框 -->
密码： <input name="password" type="password" maxlength="16">
<br>
<!-- radio实现多选一 -->
<!-- name对于radio实现多选一必须都要求写上 checked为默认选中-->
性别：<input type="radio" name="sex" checked="checked" id="man"> <label for="man">男</label> <input type="radio" name="sex">女<br>
<!-- checkbox实现多选多 -->
爱好：
吃饭 <input type="checkbox" name="hobby">
睡觉<input type="checkbox" name="hobby">
打游戏<input type="checkbox" name="hobby"> <br>
<!-- submit把当前表单的数据提交到后台，reset恢复到初始界面 -->
<input type="submit" value="免费注册"><br>
<input type="reset" value="重置"><br>
<!-- button按钮实现与JS的交互，file实现上传文件 -->
<input type="button" value="发送短信验证码"><br>
<input type="file" value="上传文件"><br>
</form>2.lab标签
-
label 标签为 input 元素定义标注（标签）。
-
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢
-
第一种用法就是用label标签直接包含input表单， 适合单个表单选择
-
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
第一种
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
第二种
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">3.select下拉标签
在页面中，如果有多个选项让用户选择，并且想节约空间，<select>定义下拉列表就是个不错的选择。
<select>
<option>选项一</option>
<option>选项二</option>
........
</select><select>至少包含一对<option>，在<option>中定义select="selected"时，默认选中
出生地：
<select>
<option>北京</option>
<option>上海</option>
<!-- 默认选中广州 -->
<option selected="selected">广州</option>
</select><br>4.textarea文本域标签
<!-- cols="每行中的字符数" rows="显示的行数" -->
留言：
<textarea rows="5" cols="50">
文本内容
</textarea>textarea相当于放大版的输入标签
5.案例
实现一个简易的用户信息注册网站
如果想要全面了解可以看一下：零基础必看的Html5+Css3+移动端前端教程(一)
扫一扫
8055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
