列表
一般来说只有一列一列的进行使用，是一维的
列表分为三种列表形式
<!-- 列表标签 ul-li:无序列表， 必须用 <ul> 当 “容器”（代表 “无序列表”），每个条目用 <li> 包起来（代表 “列表项”），不能直接在 <ul> 里写文字。 ol-li：有序列表 用 <ol> 当容器（代表 “有序列表”），每个条目还是用 <li> 包起来。 dl-dd-dt:自定义列表，一般和css结合使用
1.无序列表
<ul>
<li>第一个li标签</li>
<li>第二个li标签</li>
<li>第三个li标签</li>
</ul>
<!-- 就像你随手写的 “购物清单”—— 买牛奶、买面包、买鸡蛋，谁先谁后不影响，只是单纯列出来。-->
<!--网页里会给每个条目前面加个 “小点点”（默认是实心圆，也能改成方块、空心圆），表示 “这些是同一类，但没先后顺序”。-->
2.有序列表
<ol type="a" start="2">
<li>python1</li>
<li>python2</li>
<li>python3</li>
</ol>
<!-- 就像 “菜谱步骤”“考试排名”—— 必须按顺序来，错一步就不行，或者名次有高低。-->
<!--网页里会给每个条目前面加 “数字”（默认是 1、2、3… 也能改成字母 A/B/C、罗马数字 Ⅰ/Ⅱ/Ⅲ），明确 “谁先谁后”。-->
3.自定义列表
<dl>
<dt>自定义列表</dt>
<dd>第一季</dd>
<dd>第二季</dd>
</dl>
<!-- <dl> 当容器（代表 “定义列表”），每个 “名词 / 标题” 用 <dt> 包（比如 “苹果”），-->
<!-- 每个 “解释” 用 <dd> 包（比如 “红色水果…”）；-->
<!-- 一个 <dt> 可以对应多个 <dd>（一个名词多个解释）。-->
表格
1.首先进行表格整体规划，表格的颜色，边框等
<!--
table标签：整个表格的"大容器"，所有表格内容都要放在里面
属性说明：
- border="1"：给表格加1像素宽的边框，让格子清晰可见（默认没边框）
- bordercolor="#333"：边框颜色设为深灰色（#333是颜色代码）
- cellspacing="0"：单元格之间的间隙设为0（默认有间隙，设0后格子紧凑）
- width="600"：表格总宽度设为600像素（适配大部分屏幕）
- align="center"：整个表格在页面中居中显示（默认靠左）
- bgcolor="#f5f5f5"：表格整体背景色设为浅灰色（#f5f5f5），避免纯白刺眼
-->
<table border="1" bordercolor="#333" cellspacing="0" width="600" align="center" bgcolor="#f5f5f5">
2.表头部分
<!--
thead标签：表格的"表头部分"，专门放列标题（比如Excel表格最上面的标题行）
作用：区分表格的"标题区"和"数据区"，让结构更清晰
-->
<thead>
<!-- tr标签：表格的"一行"，不管是表头还是数据，每一行都要用tr包起来 -->
<tr>
<!--
th标签：表头的"单元格"，默认文字加粗+居中（区别于普通数据单元格）
colspan="3"：列合并属性，表示这个单元格占3列的宽度
场景：原本一行3个单元格，现在用1个标题占满整行（比如"学生成绩表"标题）
-->
<th colspan="3" bgcolor="#e0e0e0">学生成绩表</th>
</tr>
<!-- 第二行表头：具体列的标题 -->
<tr>
<th width="100">学号</th> <!-- 表头单元格：学号列，宽度100像素 -->
<th width="100">姓名</th> <!-- 表头单元格：姓名列 -->
<th width="400">各科成绩</th> <!-- 表头单元格：成绩列，占剩余宽度 -->
</tr>
</thead>
3.表中间内容部分
<tbody>
<!-- 第一行数据：学生1 -->
<tr>
<td align="center">2024001</td> <!-- td标签：普通数据单元格，文字居中 -->
<td align="center">张三</td>
<!--
rowspan="2"：行合并属性，表示这个单元格占2行的高度
场景：张三的"各科成绩"单元格，同时对应"语文"和"数学"两行数据
-->
<td bgcolor="#ffffff">语文：95分</td> <!-- 背景色设为白色，突出数据 -->
</tr>
<!-- 第二行数据：延续张三的成绩（学号、姓名被合并，不用重复写） -->
<tr>
<td align="center">2024001</td>
<td align="center">张三</td>
<td bgcolor="#ffffff">数学：92分</td>
</tr>
<!-- 第三行数据：学生2 -->
<tr>
<td align="center">2024002</td>
<td align="center">李四</td>
<td bgcolor="#ffffff">语文：88分<br>数学：85分</td> <!-- <br>换行，一行显示两门成绩 -->
</tr>
</tbody>
3.表尾部部分
<!--
tfoot标签：表格的"页脚部分"，放总结性信息（比如合计、平均值）
注意：哪怕代码写在tbody前面，浏览器也会自动把它渲染到表格最底部
-->
<tfoot>
<tr>
<!-- 列合并：占3列宽度，和表头标题对齐 -->
<td colspan="3" align="right" bgcolor="#e0e0e0">
统计：共2名学生 | 平均成绩：90分
</td>
</tr>
</tfoot>
</table>