HTML 零基础入门
列表与表格
用列表表达一组项目，用表格表达真正的行列数据。
- 难度
- 入门
- 预计时间
- 40 分钟
- 最近验证
- 2026/9/21
这一节要完成什么
为主页加入学习任务清单和每周进度表，并让表头与数据建立关系。
先理解：为什么要学它
列表和表格解决两类问题：列表强调顺序或归组，表格让读者交叉比较行列。不要为了排版使用表格，也不要用连续段落冒充清单。
跟着做
<h2>接下来的任务</h2>
<ol>
<li>完成 HTML 课程</li>
<li>检查页面结构</li>
<li>开始学习 CSS</li>
</ol>
<table>
<caption>
本周学习进度
</caption>
<thead>
<tr>
<th scope="col">日期</th>
<th scope="col">主题</th>
<th scope="col">用时</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">周一</th>
<td>文档结构</td>
<td>35 分钟</td>
</tr>
<tr>
<th scope="row">周二</th>
<td>链接与图片</td>
<td>50 分钟</td>
</tr>
</tbody>
</table>- 把有先后顺序的任务放进
ol；如果顺序无关，改用ul。每个项目都是li。 - 先数表头的 3 列，再确认每一数据行也有 3 个单元格。
- 保留 caption，它说明整张表比较什么。
- 加入今天的一行记录，日期单元格使用
th scope="row"。
关键代码怎么读
ol表示顺序重要，ul表示同组但无固定次序。tr是行，th是表头，td是数据。scope指出表头管一列还是一行，朗读器才能说出对应标题。
常见错误：看到什么，检查什么
| 现象 | 检查方法 |
|---|---|
| 用 table 排两栏页面 | 那是视觉布局，之后用 CSS；table 只放可比较的数据。 |
| 某行少一个 td | 逐行数单元格，列数与表头保持一致。 |
| 没有 caption | 读者看见数字却不知道比较对象。 |
自己完成一次
添加无序列表“学习资源”，再给进度表增加“是否完成”列和今天的一行数据。
完成后再看参考答案
资源顺序无关，用 ul。表头和每一行都变成 4 个单元格，新列表头使用 th scope="col"。
完成检查
- 我的页面出现了本节要求的新内容
- 我能不用看答案解释关键标签或属性
- 我主动制造并修复了至少一个错误