04列表与表格
有一堆并列的东西要摆出来？用列表。 有数据要按行列对齐？用表格。 这一章把 ul / ol / dl 三兄弟和 table 全家一次性讲透。
一、无序列表：ul + li
「ul + li」是最常用的列表：并列、无先后的东西都归它管——
导航菜单、商品特点、标签云。<ul>（unordered list）只认识一种孩子：
<li>（list item）。
| 取值 | 符号长相 | 适用场景 |
|---|---|---|
| disc | 实心圆点（默认） | 最普通、最常用的无序列表 |
| circle | 空心圆 | 次级列表、柔和一点的分组 |
| square | 实心方块 | 需要稍微「庄重」一点的列表 |
| none | 无标记 | 导航菜单最爱，用 CSS 自定义图标 |
ul 的 list-style-type 从 circle 换成 square，看符号变化；换成 none 则消失- 默认圆点（disc）
- 第二项
- 空心圆 circle（CSS 指定）
- 第二项
- 实心方块 square
- 第二项
- 无标记 none（导航菜单最爱）
- 第二项
<ul> 里只能直接放 <li>，
直接塞文字或别的标签属于非法结构——浏览器虽然不报错，但语义全乱。二、有序列表：ol
顺序有意义就用 <ol>（ordered list）：排行榜、操作步骤、TOP 10。
它自带「编号系统」，不用自己敲 1. 2. 3.——增删条目时编号自动重排。
| 属性 | 取值 | 说明 |
|---|---|---|
start | 数字 | 从几开始编号，如 start="3" 从 3 数起 |
type | 1 / a / A / i / I | 编号样式：数字 / 小写字母 / 大写字母 / 小写罗马 / 大写罗马 |
reversed | 布尔属性 | 倒序编号（配合 start 效果更佳） |
li 的 value | 数字 | 把某项编号直接设为某值，后面的项接着它数 |
ol 的 start="3" 改成 start="1"，编号立刻从字母 A 重新开始- 默认数字编号
- 第二项
- type="A" + start="3"：从 C 开始
- 第二项是 D
- 三项倒着数：显示 iii
- 显示 ii
- 显示 i
- 正常的第一项
- value="9"：直接跳到 9
- 后面的项接着数：10
三、嵌套列表：两级导航菜单
li 里面可以再放一个 ul / ol，形成多级列表—— 电商分类、下拉菜单的多级结构就是这么长出来的。 记住嵌套位置：子列表必须包在某个 li 里面，不能和 li 平级。
<ul> 到「课程」下就是三级<ul><li>…</li><ul>…</ul></ul>
（子 ul 与 li 平级）。浏览器照样渲染，但结构树是错的，样式和 JS 遍历都会出幺蛾子。四、定义列表：dl + dt + dd
第三种列表专管「名词解释」：<dl>（definition list）里，
<dt>（term）是被解释的术语，<dd>（description）是解释本身。
一个词可以有多条解释，一个词也可以跟多个词共享段落。
<dd>，看它成对追加- HTML
- 超文本标记语言，负责网页的结构。
- CSS
- 层叠样式表，负责网页的外观。
- 前端三件套
- HTML + CSS + JavaScript。
- 一个管结构、一个管样式、一个管行为。
五、表格骨架：table / tr / th / td / caption
表格是「行优先」的世界：<table> 是整张表，
<tr>（table row）是一行，行里面装格子——
<th>（header）是表头格子，<td>（data）是数据格子，
<caption> 是表格标题。
| 元素 | 角色 | 记忆点 |
|---|---|---|
table | 表格容器 | 一切格子的大宅子 |
caption | 表格标题 | 默认显示在表格上方 |
tr | 一行 | table row，横向思维 |
th | 表头单元格 | 默认加粗且居中，不用写 CSS |
td | 数据单元格 | 默认常规字重、左对齐 |
| 学科 | 本周进度 | 状态 |
|---|---|---|
| HTML | 第 4 章 列表与表格 | 顺利 |
| CSS | 尚未开始 | 排队中 |
六、结构化分组：thead / tbody / tfoot
表一长，就该把行分组：<thead> 表头区、<tbody> 数据区、
<tfoot> 汇总区。好处是语义清晰，CSS/JS 可以整组操作
（比如滚动的长表里「只让 tbody 滚、表头钉住」）。
| 分组 | 全称 | 放什么 | 注意事项 |
|---|---|---|---|
thead | table header | 表头行（放 th） | 一个表格可有多个 |
tbody | table body | 主体数据行 | 没写浏览器会自动补一个 |
tfoot | table footer | 汇总行（合计） | 无论写在哪，渲染时都被搬到表格末尾 |
| 月份 | 营收（元） | 成本（元） |
|---|---|---|
| 6 月 | 12,000 | 7,200 |
| 7 月 | 15,800 | 8,900 |
| 合计 | 27,800 | 16,100 |
七、合并单元格：colspan 与 rowspan
课程表里「体育连堂两节」「午休占一整行」，靠的就是合并：
colspan 横着吞并几列，rowspan 竖着吞并几行。
写在被保留的那个格子上。
| 属性 | 取值 | 说明 |
|---|---|---|
colspan | 数字（默认 1） | 横跨几列：colspan="2" 一格占两格宽 |
rowspan | 数字（默认 1） | 纵跨几行：rowspan="2" 一格占两格高 |
colspan="2" 改成 1，右边立刻多出一个空格| 时间 | 周一 | 周三 | 周五 |
|---|---|---|---|
| 上午 1-2 节 | HTML 精讲（横跨两列） | CSS 基础 | |
| 下午（纵跨两行） | JavaScript | Vue | React |
| 自习 | 答疑 | 复盘 | |
八、本章小结
- 并列无序用 ul + li；顺序有意义用 ol（start / type / reversed / li value）。
- 改项目符号找 CSS 的
list-style-type，别用废弃的 type 属性。 - 嵌套列表：子列表必须包在 li 里，不能与 li 平级。
- 名词解释用 dl + dt + dd，一个 dt 可配多个 dd。
- 表格行优先：tr 是行，th 默认加粗居中，td 常规左对齐，caption 是标题。
- 长表用 thead / tbody / tfoot 分组，浏览器会自动补 tbody、纠正 tfoot 位置。
- colspan 横跨列、rowspan 纵跨行，关键是删掉被吞并的格子。