html标签（表格，列表，表单）

表格标签

主要作用：用来显示，展示数据。
基本语法：

<table>
	<tr>
		<td>单元格内的文字</td>
	</tr>
</table>

1.table是用于定义表格的标签。
2.tr标签用来定义表格中的行，必须嵌套在table标签中。
3.td用于定义表格中的单元格，必须嵌套在tr标签中。
4.字母td指表格数据（table data），即数据单元格的内容。

表头单元格th
th是table head的缩写

<tr>
	<th>姓名</th>
	...
</tr>

会加粗，居中！常用于表格中第一行。

表格属性
实际开发不常用，常用CSS
align： left，center，right -规定表格相对周围元素的对齐方式。
border ：1或“” -规定表格单元格是否拥有边框，默认为“”，表示为没有边框。
cellpadding ：像素值 -规定单元边沿与其内容之间的空白，默认1像素。
celllspacing ：像素值 -单元格与单元格之间的空白，默认2像素。
width ：像素值或者百分比 -规定表格的宽度。
这些属性要写到table标签里面去！！！！

表格结构标签
使用场景可能因为表格很长，为了更好的表示表格的语义，将表格分为表格头部和表格主体两大部分（thead和tbody）
这俩标签都是包含在table标签之中。

合并单元格
1.方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
2.目标单元格
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
3.步骤：
确定跨行还是跨列
找到目标单元格
写上合并方式
删除多余单元格

<tr>
	<td></td>
	<td colspan="2"></td>
	
</tr>
<tr>
	<td rowspan="2"></td>
	<td></td>
	<td></td>
	</tr>
<tr>
	
	<td></td>
	<td></td>
</tr>

三行三列，合并了第一行2，3列，二三行第一列。

列表标签

列表用来布局。
特点：整齐，整洁，有序。
1.无序列表ul

<ul>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	...
</ul>

1⃣️无序列表的各个列表项之间没有顺序级别之分，是并列的
2⃣️ul中只能嵌套li，直接在ul中输入其他标签或者文字是不被允许的
3⃣️li中可以容纳所有元素
4⃣️无序列表会带有自己的属性，但在实际使用时，会用CSS来设置

2.有序列表ol
用li定义列表项

<ol>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	...
</ol>

1⃣️ol中只能嵌套li
2⃣️li可以放任何元素
3⃣️有序列表会带有自己的属性，实际使用时，用CSS设置。

3.自定义列表dl dt dd
使用场景：常用于对术语或名次=词进行解释，定义列表的列表项前没有任何项目符号。

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
</dl>

1⃣️dl只能包含dt dd
2⃣️dt和dd没有个数限制，经常是一个dt多个dd

表单标签

表单：收集用户信息。
组成：表单于，表单控件（表单元素），提示信息

表单域form
表单域是包含表单元素的区域
form标签会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>

action：url地址-指定接收并处理表单数据的服务器程序的url地址。
method：get/post-设置表单数据的提交方式，其取值为get或post。
name：名称-指定表单的名称，以区分同一个页面中的多个表单域。

表单控件

1. input输入表单元素
   input标签：收集用户信息

<input type="属性值" />

type的属性值
button:可点击按钮
checkbox：复选框
file：输入字段和“浏览”按钮，供文件上传
hidden：隐藏的输入字段
image：图像形式的提交按钮
password：密码字段，该字段的字符被掩码
radio：单选按钮
reset：重置按钮
submit：提交按钮
text：单行的输入字段，默认宽度20字符。
value：规定input元素的值
checked：规定input元素首次加载时应当被选中
maxlength：规定输入中的字符的最大长度

<form action="xxx.php" method="get">
	用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/>
	密码：<input type="password" name="password"/>
	单选按钮和复选框可以设置checkd属性，当页面一打开的时候就可以默认选中这个按钮。
	要实现多选一，name必须保持一致！
	性别：男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女" checked="checked"/>
	爱好：吃饭<input type="checkbox" value="吃饭"/> 睡觉<input type="checkbox" name="睡觉"/>
	**加粗样式**<input type="submit" value="提交，按钮里面的文字可以在这里更改" />
	<input type="reset" value="重置，按钮里面的文字可以在这里更改" />
	普通按钮，后期搭配js使用
	<input type="button" value="xxx,可改" />
	上传头像:<input type="file"/>
</form>

name和value是每个表单元素都有的属性值，主要给后台人员使用。
name表单元素的名字，要求单选按钮和复选框按钮要有相同的name值

label标签
label为input元素定义标注
标签用于绑定一个表单元素，当点击label标签内的文件时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
for与id属性一致！

2. select下拉表单元素
   使用场景：页面中，多个选项供用户选择，节约空间就可选用

<form>
	<select>
		<option>选项1</option>
		<option>选项2</option>
		<option>选项3</option>
		...
	</select>
</form>

select中至少包含一对option
在option中定义selected="selected"时，当前项极为默认选中项

3. textarea文本域元素
   使用场景：当用户输入内容较多的情况下
   textarea：定义多行文本输入

cols="每行中的字符数" rows="显示的行数" 实际开发中不会使用，都是用CSS来改变大小
<form>
	<textarea rows="3" cols="20">
		文本内容
	</textarea>
</form>