列表与表格

这是什么：<ul> / <ol> / <table> = 三个整理数据的标签，分别管并列项、有先后顺序的步骤和行列数据。

为什么用：把数据排得整整齐齐，靠的就是列表和表格——不用它们，一堆条目挤成一段，谁也读不明白。

如何用：先从无序列表 <ul> 加 <li> 开始，页面里点「▶ 运行」看圆点列表长什么样。

无序列表：<ul>

unordered list，圆点列表——并列关系用它：

<ul>
  <li>HTML：网页骨架</li>
  <li>CSS：网页皮肤</li>
  <li>JavaScript：网页灵魂</li>
</ul>

li = list item（列表项），几项就写几个 <li>。

有序列表：<ol>

ordered list，数字列表——有先后步骤的用它：

<ol>
  <li>买 Frog</li>
  <li>喂 Frog</li>
  <li>撸 Frog</li>
</ol>

表格：<table>

三兄弟配合：

• <table> 表格
• <tr> = table row，一行
• <th> = table header，表头单元格（自动加粗居中）
• <td> = table data，普通单元格

<table border='1'>
  <tr>
    <th>语言</th>
    <th>定位</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>结构</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>样式</td>
  </tr>
</table>

❓ 常见问题

Q1：在 <ul> 里直接写文字不套 <li>，页面会怎样？

· HTML
· CSS
我的前端学习清单 ←—— 跑到列表外面，没有圆点

原因：ul 是"只收 li 成员"的容器，裸文字塞进去属于非法结构，浏览器解析时会把这段字挪出列表，变成没有圆点的普通文字。 修复三步：① 找到 ul 里的裸文字；② 有标签意义的搬到 ul 外面（如标题用 h 标签），是列表项的包上 <li>；③ 刷新确认每个成员都有圆点。 举一反三：容器标签都有"指定成员"，ul 只收 li，table 只收行相关标签，别乱塞。

Q2：<li> 忘写闭合标签会怎样？

原因：浏览器遇到下一个 <li> 会好心帮你补上上一个的 </li>，页面可能看着正常——但最后一项会把后面不属于列表的内容也裹进去，结构悄悄变形。 修复三步：① F12 → Elements 面板展开列表；② 看 li 之间是不是互相嵌套了；③ 给每个 li 补上 </li>。 举一反三："看着正常"不等于写对了，闭合标签一个都别省。

Q3：表头用 <td> 而不用 <th>，有区别吗？

原因：<th> 自带加粗居中是小事，重要的是语义——它告诉浏览器和读屏软件"这是这一列/行的标题"。全用 td 的表格，机器分不清哪行是表头，数据关系就丢了。 修复三步：① 找到表格第一行；② 把表头单元格换成 <th>；③ 刷新看加粗居中效果是否白送回来了。 举一反三：语义对了，样式经常是白送的——选标签先问语义。

Q4：表格某行少写一个 <td>，浏览器会报错吗？

原因：不报错，也不帮你补——那一行就真的少一格，整张表像被咬了一口，错位难看。表格是"每行格数一样多"的纪律部队。 修复三步：① 数一数表头有几列；② 检查每个 tr 的单元格数是否一致；③ 没数据的格子也要写 <td></td> 占位。 举一反三：表格错位不用查 CSS，先数格子。

⚠️ 新手翻车现场

翻车一：ul 里塞裸文字

<ul>
  我的前端学习清单
  <li>HTML</li>
  <li>CSS</li>
</ul>

翻车现象：

我的前端学习清单 ←—— 出现在列表上方，光秃秃没圆点
· HTML
· CSS

逐行分析：第 2 行是裸文字，而 ul 的合法成员只有 <li>；浏览器把它当非法内容挪出了列表容器，于是它成了没有圆点的普通文字。想当标题就该用 h 标签写在 ul 外面。正确写法：

<h3>我的前端学习清单</h3>
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

翻车二：表格行少一格

<table border='1'>
  <tr><th>语言</th><th>定位</th></tr>
  <tr><td>HTML</td></tr>
  <tr><td>CSS</td><td>样式</td></tr>
</table>

翻车现象：

语言 | 定位
HTML          ←—— 这行只有一格，右边空了一块
CSS  | 样式

逐行分析：第 3 行只写了 1 个 <td>，而表头行有 2 列；浏览器不报错也不补位，这行就缺一格。表格的纪律是每行单元格数等于列数，空数据也要 <td></td> 占位。正确写法：

<tr><td>HTML</td><td>结构</td></tr>

翻车三：步骤用了无序列表

<h3>泡蛙粮三步曲</h3>
<ul>
  <li>倒热水</li>
  <li>放蛙粮</li>
  <li>搅匀</li>
</ul>

翻车现象：

泡蛙粮三步曲
· 倒热水
· 放蛙粮
· 搅匀    ←—— 没有序号，读者不知道先做哪步

逐行分析：第 2 行选错了容器——步骤有严格的先后顺序，语义是"有序"，应该用 <ol>；圆点清单表达不了"第一步"。正确写法：

<h3>泡蛙粮三步曲</h3>
<ol>
  <li>倒热水</li>
  <li>放蛙粮</li>
  <li>搅匀</li>
</ol>

📦 完整小示例

列表 + 表格一起上，做一张暑假计划页，存成 plan.html：

<h1>呱小吉的暑假计划</h1>
<h2>每日三件事（顺序不能乱）</h2>
<ol>
  <li>早起捉虫</li>
  <li>上午写代码</li>
  <li>傍晚荷叶吹风</li>
</ol>
<h2>想读的书（不分先后）</h2>
<ul>
  <li>《HTML 入门》</li>
  <li>《CSS 皮肤学》</li>
</ul>
<h2>进度表</h2>
<table border='1'>
  <tr><th>事项</th><th>状态</th></tr>
  <tr><td>捉虫</td><td>进行中</td></tr>
  <tr><td>写代码</td><td>还没开始</td></tr>
</table>

人工校验：ol/ul 与各自 li 开闭配对；table 内三个 tr 每行恰好 2 个单元格，第一行 th 表头、后两行 td 数据；嵌套无交叉。

运行后在浏览器会看到：

大标题「呱小吉的暑假计划」；
「每日三件事」下面是 1. 2. 3. 的数字列表；
「想读的书」下面是圆点列表；
「进度表」下面是一张带边框的小表格：
第一行「事项/状态」加粗居中，下面两行是各事项的进度。

逐段中文精讲

• 第 1 行：<h1> 页面大标题。
• 第 2~7 行：<h2> 板块标题加 <ol> 数字列表——三件事有先后，浏览器自动编号，以后加一项序号还自动顺延。
• 第 8~12 行：<ul> 圆点列表——两本书不分先后，语义是并列。
• 第 13~18 行：表格三兄弟配合：<tr> 开一行，第 15 行 <th> 写表头（白送加粗居中），第 16~17 行 <td> 填数据；每行单元格数严格一致。

跑通后做个小实验：把 <ol> 改成 <ul> 再刷新——1. 2. 3. 变成了圆点。序号还是圆点，反映的正是"有没有顺序"的语义差别。

🎯 什么时候用它

• 步骤类内容：菜谱、安装教程、活动流程——先后顺序有意义，用 ol。
• 清单类内容：购物车、功能列表、标签集合——并列无序，用 ul。
• 数据报表：价格表、课程表、参数对比——行列结构的数据交给 table，表头用 th 保住语义。

📝 本章小结

• ul 圆点表并列，ol 数字表顺序，成员一律用 li。
• table 里 tr 开行、th 表头、td 数据；每行格数必须一致，空位也要 <td></td> 占住。
• th 的加粗居中是白送的，但它真正的价值是"标题"语义。
• 记忆锚点：ul 像购物清单（想到啥写啥），ol 像菜谱步骤（一步不能乱），table 像棋盘（每行格数一样多）。

小练习

用表格做一个你自己的「技能清单」：三列（技能/熟练度/备注）、至少三行数据。

下一章：表单，让网页能和用户对话 🐸