今日知识点
一、表格标签
1.1表格的作用：可以更加清晰的展示数据，增强可读性。
1.2表格标签的基本语法：
<table></table>定义表格标签
<tr></tr> 标签用于定义表格中的行（table row），要嵌套在<table></table>标签中
<td></td>标签用于定义行中的单元格（table data）, 必须嵌套在<tr></tr>标签中
<th></th>标签定义行中的内容是否是表头内容，表头的内容会加粗并且居中对齐
1.3表格标签中的常用属性：
align 规定表格的相对于周围元素的水平对齐方式
属性值：left、center、right
border 固定表格的是否拥有边框，默认是没有的
属性值：1 代表有边框
width 固规定表格的宽度
属性值：像素值
height 规定表格的高度
属性值：像素值
cellpadding 控制单元格内容和单元格边框之间的距离（一般会设置为0）
属性值：像素值，默认是1像素
cellspacing：控制单元格和单元格之间的距离（一般会设置为0）
属性值：像素值，默认是2像素
1.4表格的结构标签
表格标签中，用<thead></thead>来确定表头区域、用<tbody></tbody>来确定表格的主体区域，这样能让表格的结构更加清晰，也方便后期使用JS来获取表格中的内容。
二、合并单元格
2.1合并单元格的步骤
1、找到目标单元格
2、确定是跨行还是跨列合并
跨行合并 rowspan=“被合并单元格的个数”, 合并单元格的个数最少是2
跨列合并 colspan=“被合并单元格的个数”，合并单元格的个数最少是2
3、将被和合并的单元格删除掉
三、列表标签
3.1无序列表
注意点：
1、无序列表的各个列表项之间是没有级别之分
2、<ul></ul>标签中只能嵌套<li></li>标签，不允许嵌套其他的标签
3、<li></li>相当于一个盒子或者容器，可以容纳所有的元素
4、无序列表有自己本身的样式 后期可以通过CSS处理掉。
3.2有序列表
注意点：
1、有序列表的各个列表项之间是有级别之分，会有数字标识
2、<ol></ol>标签中只能嵌套<li></li>标签，不允许嵌套其他的标签
3、<li></li>相当于一个盒子或者容器，可以容纳所有的元素
4、有序列表有自己本身的样式 后期可以通过CSS处理掉
3.3自定义列表
注意点：
1.<dl></dl>标签用于定义一个自定义列表
2.<dt></dt>标签定义项目/名字
3. <dd></dd>标签来定义对项目的解释/描述
4. 一般情况下一个<dl></dl>标签中只能放一个<dt></dt>，但是可以有多个<dd></dd>
四、表单标签
4.1为什么需要表单：为了收集用户信息，就会用到表单标签。
4.2表单域
表单域是一个包含表单元素的区域，在HTML中，使用<form></form>标签来定义表单域，在表单域中的信息会发送给服务器
常用的属性：
action
属性值：url地址，用于指定接受并处理表单内容的服务器地址。
method
属性值：get/post，用于指定表单数据传递的方式，取值为get/post
name
属性值：名称，用于区分同一个页面中的不同的表单
4.3表单控件：在表单域中可以定义多种表单元素，可以让用户输入相关的内容。
4.3.1input表单元素：input中的type属性使用：
text 定义单行输入文本框，输入文本内容
password 定义密码输入框，输入的内容加密显示
button 定义按钮，一般会和js联合使用
file 定义文件提交按钮
radio 定义单选按钮（一组radio标签要有相同的name值）
checkbox 定义复选框（一组checkbox标签要有相同的name值）
submit 定义提交按钮，提交按钮会将表单的数据提交给服务器
reset 定义重置按钮，清空表单元素中的所有数据
4.3.2input表单元素的其他属性
name和value 是每个表单元素都有的属性值，主要是发送数据的时候给后台人员使用
name可以设置表单元素的名字，要求相同的单选按钮或者复选框要有相同的name值
value规定input表单元素的值，可以修改按钮的内容，也可以给文本输入框设置默认文本
checked 可以在页面重新加载的时候默认选中某个表单元素，一般只针对单选按钮和复选框
maxlength 规定输入框中的最大字符数，一般都会写正整数
4.3.3label标签的使用
label标签用于绑定一个表单元素，当点击该标签内的文本时，浏览器会将焦点自动聚焦到对应的表单元素上，可以增加用户体验。
label标签中的for属性的属性值要和绑定的表单元素的id属性值保持一致
4.3.4select表单元素
在页面中，如果有多个选项让用户去选择，还可以节约页面的空间，就能使用select标签定义下拉列表
select标签定义下拉列表
option标签定义列表中的选项，一个select标签至少应该有一个option标签
如果要默认选中某个选项，就给option标签添加selected属性值，属性值为selected
4.3.5textarea表单元素
textarea文本域标签，一般用在评论区或者用户输入内容较多的时候（留言版）
cols 控制文本域中的文字应该显示多少列
rows 控制文本域中的文字应该显示多少行
实际开发过程中一般不会使用cols 和 rows来控制文本域的大小，会使用width 和 height来进行控制。
|
