超文本标记语言/列表

在 HTML 中，有三种类型的列表，每种类型都适合不同类型的信息。使用 <ul> 和 </ul> 标签创建的 *无序列表* 用于没有顺序或顺序不重要的元素（通常用项目符号显示）。使用 <ol> 和 </ol> 标签创建的 *有序列表* 通常用数字显示，用于顺序重要的元素，例如执行的一系列步骤。最后，还有使用 <dl> 和 </dl> 标签创建的定义列表。

有序列表

有序列表提供一个项目列表，每个项目前面都有一个从 1 开始的递增数字。

HTML 示例

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>

示例渲染

第一项
第二项
第三项

无序列表

无序列表显示一个项目列表，每个项目前面都有一个项目符号。

HTML 示例

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

示例渲染

第一项
第二项
第三项

定义列表

定义列表显示一个粗体术语列表，然后在新行上显示定义，并在前面加上一个制表符（默认情况下）。

HTML 示例

  <dl>
    <dt>Term 1</dt>
    <dd>Definition of Term 1</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

示例渲染

术语 1: 术语 1 的定义
术语 2: 术语 2 的定义

如果两个术语具有相同的定义，则可以像这样将其分组

  <dl>
    <dt>Cascading Style Sheets</dt>
    <dt>CSS</dt>
    <dd>Definition of Cascading Style Sheets (aka CSS)</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

示例渲染

层叠样式表
CSS: 层叠样式表（也称为 CSS）的定义
术语 2: 术语 2 的定义

如果术语有两个替代定义，请为每个定义使用单独的 dd 元素，例如

  <dl>
    <dt>Mouse</dt>
    <dd>Small mammal</dd>
    <dd>Input device for a computer</dd>
  </dl>

示例渲染

鼠标: 小型哺乳动物; 计算机的输入设备

较长的定义可以通过在 dd 元素中嵌套 p 元素来分成段落。

  <dl>
    <dt>Term 2</dt>
    <dd>
      <p>First paragraph of the definition.</p>
      <p>Second paragraph of the definition.</p>
    </dd>
  </dl>

示例渲染

术语 2

定义的第一段。

定义的第二段。

嵌套列表

列表可以嵌套。一个例子

<ul>
  <li>Lists     
    <ul>
      <li>Numbered Lists</li>
      <li>Unnumbered Lists</li>
    </ul>
  </li>
</ul>

示例渲染

列表
- 编号列表
- 未编号列表

嵌套时，嵌套的列表元素应在父 *列表项* 元素内。

*不正确嵌套* 的一个示例

<ul>
  <li>Lists</li>
  <ul>
    <li>Numbered Lists</li>
    <li>Unnumbered Lists</li>
  </ul>
</ul>

*不正确嵌套* 的另一个示例，其中有两个连续的 UL 元素

<ul>
   <li>
      Outer list item
      <ul>
        <ul>
          <li>
            Inner list item within two consecutive UL elements
          </li>
        </ul>
      </ul>
   </li>
</ul>

关于格式的说明

上面对三种列表类型中每种类型的描述都指的是 Web 浏览器对相应 HTML 代码的默认渲染。但是，通过使用 CSS，您可以更改列表的格式。例如，使用 CSS，您可以使列表水平排列而不是垂直排列。

示例

使用列表标记煎饼食谱的示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pancakes</title>
  </head>
  <body>
    <h1>A Recipe for Pancakes</h1>
    <p>From <a href="https://wikibooks.cn/wiki/Cookbook:Pancake">Wikibooks Cookbook</a>.</p>
    <p>These pancakes make a good breakfast for a family.
       They go well with real maple syrup.
       They are healthy too (as long as you don't over-do the syrup!)
       since whole wheat flour contributes to your fiber intake.
    </p>
    <h2>Ingredients</h2>
    <ul>
      <li>1 cup whole wheat flour</li>
      <li>1 tablespoon common granulated sugar</li>
      <li>2 teaspoons baking powder</li>
      <li>1/4 teaspoon salt</li>
      <li>1 egg</li>
      <li>1 cup milk</li>
      <li>2 tablespoons oil</li>
      <li>additional oil for frying</li>
    </ul>
    <h2>Procedure</h2>
    <ol>
      <li>Oil a frying pan.</li>
      <li>Mix the dry ingredients in one bowl.</li>
      <li>In another bowl, scramble the egg, then add the other wet ingredients.
          This includes the 2 tablespoons of oil.</li>
      <li>Mix the dry and wet ingredients together,
          well enough to eliminate dry spots but no more.</li>
      <li>Heat the frying pan to medium temperature.
          The pan is hot enough when a drop of water dances around
          rather than simply boiling away.</li>
      <li>Pour a pancake, about 4 inches in diameter using about a 1/4 cup of batter.</li>
      <li>The pancake will bubble. When the bubbling settles down and
          the edges are slightly dry, flip the pancake.</li>
      <li>When the pancake looks done, remove it and start another one.</li>
    </ol>
    <h2>Toppings</h2>
    <p>Traditionally, pancakes are topped with butter and maple syrup.
       Other toppings can include strawberries, applesauce, cinnamon, or sugar.
    </p>
 </body>
</html>