【前言】
今天来总结一下有关html的三个表的相关知识。
【内容】
1.表格、列表、表单分别是用来做什么的？
如图：
2.表格
定义：用来显示、展示表格式数据，可以让数据显示的非常的规整，可读性非常好。
语法如下：
<table>
<tr>
<td>单元格内的文字</td>
......
</tr>
</table>
说明：
共包含三对HTML标签，分别是table、tr、td，是创建表格的基本标签，缺一不可。
table：用于定义一个表格标签。
tr：用于定义表格中的行，必须嵌套在table标签中。
td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
（1）表格属性
（2）表头单元格标签th
作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中。
语法：只需要表头标签<th></th>替代相应的单元格标签<td></td>即可。
th与td：都是一个单元格，不同的是，th会让自己里面的文字居中并且加粗。
（3）表头标题caption
定义表格标题，通常这个标题会被居中并且显示于表格之上。
语法如下：
<table>
<caption>我是表格标题</caption>
</table>
说明：
caption标签必须紧随table标签之后，并且这个标签只存在表格里面才有意义。
（4）合并单元格
两种形式：
跨行合并与跨列合并
跨行合并：rowspan="合并单元格的人数"
跨列合并：colspan="合并单元格的人数"
合并单元格顺序：
按照先上后下、先左后右的顺序。
合并单元格三步曲：
1）先确定是跨行还是跨列合并。
2）根据先上后下、先左后右的原则找到目标单元格，然后写上合并方式和要合并的单元格数量。
例如：<td colspan="3"></td>
3）删除多余的单元格。
（5）表格划分结构
对于比较复杂的表格，表格的结构也就相对复杂了，所以又将表格分割成三个部分：题头、正文和脚注。分别用thead、tbody、tfoot来标注，这样更好的划分了表格的结构。
说明：
<thead></thead>：用于定义表格的头部，用来放标题之类的东西，并且<thead>内部必须拥有<tr>标签。
<tbody></tbody>：用于定义表格的主体，放数据本体。
<tfoot></tfoot>：放表格的脚注之类。
这3对标签都要放在<table></table>标签中。
（6）表格小结
|
标签名 |
定义 |
说明 |
|
<table></table> |
表格标签 |
四方的盒子 |
|
<tr></tr> |
表格行标签 |
行标签要在table标签内才有意义 |
|
<td></td> |
单元格标签 |
容器级元素，可以放任何东西 |
|
<th></th> |
表头单元格标签 |
一个单元格，大病里面的文字会居中且加粗 |
|
<caption></caption> |
表格标题标签 |
表格的标题，跟着表格一起走，和表格居中对齐 |
|
clospan与rowspan |
合并属性 |
用来合并单元格的 |
说明：
表格中没有列元素，列的个数取决于行的单元格个数。
3.列表
容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。
作用：列表是用来布局的，因为非常整齐和*。
特点：列表最大的特点就是整齐、整洁、有序，和表格类似，但列表可组合*度更高。
（1）列表分类
无序列表、有序列表、自定义列表
（2）无序列表
各个列表项之间没有顺序级别之分，是并列的。语法如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
</ul>
说明：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li></li>之间相当于一个容器，可以容纳所有元素。
（3）有序列表
有排列顺序的列表，其各个列表项按照一定的顺序排列定义。语法如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
......
</ol>
（4）自定义列表
常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
......
</dl>
（5）列表小结
|
标签名 |
定义 |
说明 |
|
<ul></ul> |
无序标签 |
里面只能包含li，没有顺序，布局中最常用的列表 |
|
<ol></ol> |
有序标签 |
里面只能包含li，有顺序，使用情况较少 |
|
<dl></dl> |
自定义列表 |
里面有2个兄弟。dt和dd |
4.表单
目的：为了收集用户信息。
在HTML中，一个完整的表单通常由表单控件（表单元素）、提示信息和表单域3个部分构成。
（1）表单标签input（输入）
语法如下：
<input type="属性值" value="你好">
例如：
<body>
用户名：<input type="text" />
</body>
说明：
<input />标签是单标签
type属性设置不同的属性值来指定不同的控件类型
除了type属性，还有一些其它的属性：
1)type属性
这个属性通过改变值，可以决定你属于哪种input表单。
例如：type="text" 就表示文本框可以做用户名、昵称等。
例如：type="password" 就表示密码框，用户输入的内容是不可见的。
2)name属性
表单的名字，后台可以通过这个name属性找到这个表单。页面中表单很多，name主要左右就是用于区别不同的表单。
例如1：
用户名：<input type="text" name="username" />
例如2：（如果type为radio类型的）
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
说明：
radio为一组时，必须给他们命名相同的名字name，这样可以多个选其中的一个。
3)value属性
默认的文本值。有些表单向刚打开页面就默认显示几个文字，就可以通过这个value来设置。
比如：
用户名：<input type="text" name="username" value="请输入用户名" />
4)checked属性
默认选中状态，经常用于单选按钮和复选按钮。
例如：（表示默认选中了男这个单选按钮）
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女
（2）label标签
目标：主要是为了提高用户体验，为用户提高最优秀的服务。
定义：label标签为input元素定义标注。
作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。
如何绑定元素？
（1）用label标签直接包括input表单。
例如：
<label>用户名：<input type="text" name="username" value="请输入用户名"></label>
（2）用for属性规定label与哪个表单元素绑定。
例如：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
小结：
当我们鼠标点击label标签里面的文字时，光标就会定位到指定的表单里面。
（3）textarea文本域
作用：通过textarea控件可以轻松地创建多行文本输入框。
语法如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
文本框和文本域的区别：
（4）select下拉列表
目的：如果有多个选项让用户选择，为了节省空间，我们可以使用select控件定义下拉列表。
语法如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
……
</select>
说明：
<select>中至少包含一对option。
（5）form表单域
目的：在html中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中所有的内容都会被提交给服务器。
语法如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
|
属性 |
属性值 |
作用 |
|
action |
url地址 |
用于指定接收并处理表单数据的服务器程序的url地址 |
|
method |
get/post |
用于设置表单数据的提交方式，其取值为get或post |
|
name |
名称 |
用于指定表单的名称，以区分同一个页面中的多个表单 |
【感受】
HTML相关知识就先总结到这里，总结的再多不用也是白费，只有用的多了，熟悉了，才能真正掌握html语言，才能在项目中灵活运用。