HTML 列表：无序列表、有序列表与嵌套列表

HTML 列表：ul、ol 和 li

HTML 有两种主要的列表。<ul>（无序列表）显示圆点，<ol>（有序列表）显示数字。每一项都是一个 <li>（列表项）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

当顺序有意义时（步骤、排名、目录）用 <ol>，没有意义时用 <ul>。屏幕阅读器会把两者都读作列表并报出项数，比如“列表，3 项”，所以真正的列表要比手动输入“•”或“1.”开头的文字行更好。

列表只能直接包含 <li> 元素。其他任何内容，包括标题、段落和其他列表，都要放在 <li> 里面。

项目符号样式

在 <ul> 上设置 list-style-type 可以改变项目符号。::marker 伪元素可以单独为项目符号或编号本身设置样式，与文字分开：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

字符串值会把这段文字用作项目符号。"\2713 " 是一个对勾加一个空格：第一个空格只是用来结束 \2713 转义。::marker 只接受少数几个属性，主要是 color、font-size 和其他字体属性，不用额外的标记就能满足常见的“彩色圆点”需求。

有序列表：数字、字母和罗马数字

<ol> 有几个控制编号的属性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

在 HTML 中使用 type 没有问题，因为字母可能带有含义（“选择选项 B”）。如果只是视觉上的改变，CSS 的 list-style-type: upper-alpha 或 lower-roman 也能做到同样的效果。

嵌套列表

子列表放在它所属的 <li> 里面，写在该项的文字之后。浏览器会在每一层换一种项目符号：实心圆、空心圆，然后是方块。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

注意 </li> 的位置：“Frontend”这一项要到它的子列表之后才结束。如果在 <ul> 之前就结束它，子列表就会直接位于外层 <ul> 中，尽管看起来几乎一样，却是无效的。

有序列表的嵌套方式相同，每个子列表的编号都会从 1 重新开始。要得到 1.1、1.2 这样的编号，需要用到 CSS 计数器。

描述列表：dl、dt 和 dd

描述列表把术语和它们的描述配成对：术语表、订单详情、类似 FAQ 的问答。<dt> 是术语，<dd> 是描述：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

一个术语可以有多个 <dd>，多个 <dt> 也可以共用一个 <dd>。浏览器默认会缩进 <dd>；上面的 margin 规则去掉了这个缩进。对于有多列的数据，表格更合适。

没有项目符号的列表：菜单和横向列表

导航菜单就是由链接组成的列表。用 list-style: none 去掉项目符号，用 padding: 0 去掉缩进，再用 flexbox 把各项排成一行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

对屏幕阅读器来说，它仍然是一个列表（“导航，列表，3 项”）。有一个例外：在 Safari 中使用 VoiceOver 时，去掉项目符号后列表的语义可能会丢失。如果项数对你的用户很重要，就给 <ul> 加上 role="list"。

默认间距

浏览器会给列表设置 1em 的上下外边距，并用 padding-inline-start: 40px 缩进，项目符号就位于这段缩进中。这个内边距在起始一侧，所以在从右到左的语言中，项目符号和缩进会自动移到另一侧。去掉内边距后，项目符号会移到列表盒子之外，可能会被截掉；要么保留一些内边距，要么使用 list-style-position: inside。

常见错误

• <li> 没有父列表。 它必须位于 <ul>、<ol> 或 <menu> 之中。
• 嵌套列表放在了它的 <li> 之外。 把子列表放进它所属的项目里。
• 文字或其他标签直接放在 <ul> 中，比如 <ul><p>Note</p><li>...</li></ul>。把它们移到 <li> 中，或者移出列表。
• 用 • 和 <br> 手动输入项目符号或编号。 屏幕阅读器听到的是一个段落，而不是列表。
• 写了 list-style: none 却没有写 padding: 0，留下一段莫名其妙的 40 像素缩进。
• 只为了外观而使用 <ol>。 如果顺序无关紧要，就用 <ul> 再加样式。