「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」
p24-列表-使用场景
列表使用场景：在网页中按照行展示关联性的内容，如：新闻列表，排行榜，账单等
特点：按照行的方式，整齐显示内容
列表分类：
- 无序列表
- 有序列表
- 自定义列表
p25-列表-无序和有序
无序列表：
场景：在网页中表示一组无顺序之分的列表，如：新闻列表
标签组成：
- ul
- li
显示特点：
列表的每一项前默认显示圆点标识
注意点：
- ul标签只允许包含li标签
- li标签可以包含任意内容
<ul>水果列表
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>
cmd+右箭头：移动到行末
cmd+左箭头：移动到行头
有序列表：
场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成：
显示特点：列表的每一项前默认显示序号标识
注意点：
- ol标签中只允许包含li标签
- li标签可以包含任意内容
- 会自动加1./2./3.等序号
<ol>成绩排行榜
<li>第一名：100分</li>
<li>第二名：80分</li>
<li>第三名：60分</li>
</ol>
p26-列表-自定义
列表最下方自定义列表
场景：在网页底部导航中通常会使用自定义列表实现
标签组成：
显示特点：
注意点：
- dl标签只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
<dl>
<dt>第一组</dt>
<dd>1.1账户管理</dd>
<dd>1.2购物指南</dd>
<dt>第二组</dt>
<dd>2.1售后服务</dd>
<dd>2.2xxx</dd>
</dl>
表格
表格基本标签
表格相关属性
表格标题和表头单元格标签
表格的结构标签（了解）
合并单元格
p27-表格-使用
场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：
注意点：
标签嵌套关系：table>tr>td
逐行填充单元格。从上到下，从左到右
<table>
<tr>
<td>cell1-1</td>
<td>cell1-2</td>
</tr>
<tr>
<td>cell2-1</td>
<td>cell2-2</td>
</tr>
<tr>
<td>cell3-1</td>
<td>cell3-2</td>
</tr>
</table>
格子，要加属性
表格table相关属性：
场景：设置表格基本展示效果
常见相关属性：
注意点：实际开发时针对样式效果推荐使用css设置
vscode不提示width和height，因为一般不在table里提示。
<table border="2" width="200" height="100">
<tr>
<td>cell1-1</td>
<td>cell1-2</td>
</tr>
<tr>
<td>cell2-1</td>
<td>cell2-2</td>
</tr>
<tr>
<td>cell3-1</td>
<td>cell3-2</td>
</tr>
</table>
p28-表格-表格标题和表头单
场景：在表格中整体表示整体大标题和一系列小标题
其它标签：
注意点：
- caption标签书写在table标签内部
- th标签书写在tr标签内部，用于替换td标签
- th内容加粗居中，caption内容居中不加粗
<table border="2" width="200" height="100">
<caption>表格大标题，居中</caption>
<tr>
<th>表头1-1</th>
<th>表头1-2</th>
</tr>
<tr>
<td>cell2-1</td>
<td>cell2-2</td>
</tr>
<tr>
<td>cell3-1</td>
<td>cell3-2</td>
</tr>
</table>
P29表格-结构标签（了解）
场景：让表格内容结构分组，突出表格的不同部分（头部，主体，底部），使语义更加清晰
结构标签：
注意点：
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略
<table border="2" width="200" height="100">
<caption>表格大标题，居中</caption>
<thead>
<tr>
<th>表头1-1</th>
<th>表头1-2</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell2-1</td>
<td>cell2-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结-cell3-1</td>
<td>总结cell3-2</td>
</tr>
</tfoot>
</table>
vscode快捷键：
tab向右缩进，shift+tab向左缩进
视觉上没有差，但浏览器解析效率提高了
P30表格-合并单元格
合并：多变1
场景：将水平或垂直的多个单元格合并成一个单元格
跨行或跨列
上下合并，只保留最上一行单元根内容 ，删除其余单元格的内容
左右合并，只保留最左边，删除其余单元的内容
给保留的单元格设置：跨行合并rowspan，跨列合并colspan
注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（即跨thead，tbody，tfoot）
<table border="2" width="300" height="100">
<caption>表格大标题,居中</caption>
<thead>
<tr>
<th>表头1-1</th>
<th colspan="2">表头1-2</th>
<!-- <th>表头1-3</th> -->
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">cell2-1</td>
<td >cell2-2</td>
<td>cell2-3</td>
</tr>
<tr>
<!-- <td>cell3-1</td> -->
<td >cell3-2</td>
<td>cell3-3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结cellf4-1</td>
<td>总结cell4-2</td>
<td>总结cell4-3</td>
</tr>
</tfoot>
</table>
在tbody多增加一行，不然无法合并，记得一定要删除/注释掉被合并的部分。不然会显示错误
如：不注释掉 cell3-1，会多出一列出来。
P31-表单标签-应用场景
场景：登陆，注册，搜索
分类：
- input系列标签
- button按钮标签
- select下拉菜单标签
- textarea文本域标签
- label标签
