3 种 HTML 列表及其使用方法

0 Shares

核心要点

HTML列表在网页上组织和呈现数据至关重要。主要有三种类型：有序列表、无序列表和描述列表。
有序列表采用数字或其他符号对项目进行排序。 type 属性允许自定义，而 start 和 reversed 属性可以调整起始位置和顺序。
无序列表将没有特定顺序的相关项目归类在一起。可以通过 CSS 自定义项目符号的样式。

HTML列表是网页上用于呈现相关信息的基本结构元素。无论您是想创建菜单、整理促销商品，还是尝试以更清晰的方式呈现复杂数据，列表都能帮助您实现目标。

HTML列表主要分为三种类型，每种类型在网页开发中都有其独特的用途。

1. 有序列表

HTML有序列表允许您按照特定的顺序排列相关项目。要创建有序列表，需要使用 <ol> 标签。

<ol> 标签用于分组和包含 <li> 标签。每个列表项（<li> 标签）都包含列表中的一个具体项目。

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
</ol>

这段代码的渲染效果如下：

需要注意的是，有序列表的默认排序方式是数字，但您可以使用 type 属性来更改它。 type 属性使您可以选择使用字母（大写或小写）、数字或罗马数字（大写或小写）来对列表进行排序。

<ol type="a">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
</ol>

将 type 属性添加到 <ol> 标签后，渲染效果会更新为：

除了 type 属性外，还有两个属性可以与 <ol> 标签一起使用：start 和 reversed。

start 属性允许您使用整数值从任意位置开始排序。例如，如果您向 <ol> 标签添加 start="3"，并且没有指定类型，列表将从数字 3 开始排序。如果指定 type="a" 或 type="I"，则分别从 c 或 III 开始排序。

<ol type="I" start="3">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
</ol>

以上代码的渲染效果如下：

reversed 属性可以反转列表的顺序。它接受一个布尔值，默认为 false。

<ol reversed="true">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
</ol>

这段代码在浏览器中的输出如下：

2. 无序列表

无序列表用于对顺序不重要的相关项目进行分组。默认情况下，浏览器使用项目符号标记每个项目。

要创建无序列表，您需要使用 <ul> 标签作为父元素，并使用 <li> 标签定义每个列表项：

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
</ul>

这段代码渲染效果如下：

无序列表的默认项目符号样式是实心圆点。过去，可以使用 type 属性来设置无序列表的项目符号样式，但现在该属性已被弃用。推荐使用 CSS 的 list-style-type 属性来设置无序列表的样式。

<style>
ul { list-style-type: square; }
</style>

上面的代码将视图更新为如下所示：

CSS 的 list-style-type 属性允许您使用各种不同的项目符号样式，包括空心圆圈、自定义图像、图标或符号。通过更改列表项布局的 CSS，甚至可以使用无序列表来创建导航栏。

嵌套列表

嵌套列表是属于另一个列表的列表元素。可以使用有序列表和/或无序列表的组合来创建嵌套列表。这些结构可以表示更复杂的层次结构。

<h3>意面鸡肉做法</h3>
<ol>
  <li>煮意面。</li>
  <li>
    为鸡胸肉调味。
    <ul>
      <li>盐和胡椒</li>
      <li>红辣椒粉</li>
      <li>蒜粉</li>
      <li>意大利香草</li>
    </ul>
  </li>
  <li>用中高火加热锅中的橄榄油。</li>
  <li>将鸡胸肉放入锅中煎 5 分钟。</li>
  <li>将鲜奶油和帕尔马奶酪加入空锅中。</li>
  <li>将意面和切好的鸡肉加入奶油酱中。</li>
</ol>

这段代码呈现的效果如下：

3. 描述列表

描述列表元素用于创建术语及其相关描述信息的列表。

<dl> 标签用于创建描述列表，并且应该与 <dt>（描述术语）和 <dd>（描述详情）元素一起使用。

<h3>热门笔记本电脑</h3>
<dl>
  <dt>MacBook Pro</dt>
  <dd>
    提供长达 22 小时的电池续航时间，
    具有先进的摄像头和带 Touch ID 的妙控键盘。
  </dd>
  <dt>MSI GS76 Stealth</dt>
  <dd>
    一款强大的游戏笔记本电脑，具有强大的图形性能和自定义按键。
  </dd>
</dl>

以上代码的渲染效果如下：

使用恰当的 HTML 列表组织您的内容

您在网页开发项目中选择使用的 HTML 列表应取决于您想要向用户呈现的内容。例如，如果要创建一个按顺序排列的列表，例如准备餐点或完成任务的步骤，那么有序列表是您的最佳选择。

但是，如果要对不需要按顺序排列的相关信息进行分组（例如，清单），则无序列表将是更合适的选择。此外，如果您想创建词汇表或常见问题列表，那么描述列表将是一个更好的选择。