列表

社团页面可能要列出需要携带的物品，也可能要说明报名步骤。这两种内容都包含多个项目，但顺序的重要性不同。HTML 用列表明确表达这种关系，不需要手工在每行文字前输入圆点或数字。

无序列表：项目之间没有先后要求

ul 表示无序列表（unordered list），里面每一项使用 li（list item）。例如携带物品的顺序通常不影响含义：

<ul>
  <li>一本书</li>
  <li>水杯</li>
  <li>笔记本</li>
</ul>

浏览器默认给项目显示圆点和缩进。圆点不是写在 li 正文中的字符，而是列表的默认展示。想增加一项，就再加一对 li。不要直接把三个 p 当作 ul 的项目。

有序列表：顺序是内容的一部分

ol 表示有序列表（ordered list），仍然使用 li 作为项目。报名步骤有先后，应使用 ol：

<ol>
  <li>阅读活动说明</li>
  <li>填写报名信息</li>
  <li>到场领取座位卡</li>
</ol>

插入一个新 li 后，浏览器会自动调整编号。不要把“1.”也写进项目文字，否则可能出现重复编号。需要延续上一段编号时，可以使用 ol 的 start 属性，例如 start="4" 从 4 开始；普通列表不需要设置它。

嵌套列表要放进对应的项目中

如果“书籍”下面还要列出两种类型，可以在它的 li 内放入一个子 ul，然后再结束外层 li。这样子项目明确属于“书籍”，而不是整个列表的另一个并列项。注意按照第一章的规则关闭内层标签。

还有一种 dl 描述列表，使用 dt 标记名称或术语，dd 标记对应描述，例如“时间—周六十点”“地点—阅读中心”。它不使用 li，适合名称与说明成对出现的内容。

在 Lab 中比较物品清单和报名步骤，然后插入、删除一个 li，观察编号自动更新。第二个示例还提供描述列表，让你比较“步骤”与“名称及说明”的不同组织方式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <h1>Bring these items</h1>
  <ul>
    <li>Books
      <ul>
        <li>A novel</li>
        <li>A poetry collection</li>
      </ul>
    </li>
    <li>A water bottle</li>
  </ul>
</body>
</html>