html中列表和表格的使用
列表
一般来说只有一列一列的进行使用，是一维的
列表分为三种列表形式
<!-- 列表标签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>