跳到主要内容

HTML 列表

在 HTML 中，列表（List） 是用于组织内容的常用结构。你可以使用列表来展示项目集合、步骤说明、导航菜单等内容。

HTML 支持三种主要类型的列表：

  1. 无序列表（Unordered List）
  2. 有序列表（Ordered List）
  3. 自定义列表（Description List）

无序列表​

无序列表使用 <ul> 标签定义，每个列表项使用 <li> 标签。

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

在浏览器中，<ul> 列表通常以圆点（●）进行标记，但你可以通过 CSS 更改标记样式。

显示效果：

  • 咖啡
  • 茶
  • 牛奶

有序列表​

有序列表使用 <ol> 标签定义，每个列表项也使用 <li> 标签。

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

显示效果：

  1. 咖啡
  2. 茶
  3. 牛奶

这类列表的项目默认会以数字顺序编号（1、2、3...）。你可以通过 type 属性更改编号的样式，例如：

<ol type="A">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

type 属性支持以下值：

  • 1：默认数字（1、2、3...）
  • A：大写英文字母（A、B、C...）
  • a：小写英文字母（a、b、c...）
  • I：大写罗马数字（I、II、III...）
  • i：小写罗马数字（i、ii、iii...）

嵌套列表​

你可以在列表项内嵌套另一个列表，实现多级结构。例如：

<ul>
  <li>饮品
    <ul>
      <li>咖啡</li>
      <li>茶</li>
    </ul>
  </li>
  <li>食物</li>
</ul>

这样可以清晰地表达父子级关系。

显示效果：

  • 饮品
    • 咖啡
    • 茶
  • 食物

自定义列表（描述列表）​

描述列表使用 <dl> 定义，包含若干个 <dt>（定义项）和 <dd>（定义描述）。

<dl>
  <dt>HTML</dt>
  <dd>一种用于创建网页的标记语言。</dd>
  <dt>CSS</dt>
  <dd>一种用于网页样式设计的语言。</dd>
</dl>

这种列表通常用于术语解释或 FAQ 页面。

显示效果：

HTML
一种用于创建网页的标记语言。
CSS
一种用于网页样式设计的语言。

使用 CSS 控制列表样式​

你可以通过 CSS 控制列表的外观，例如删除圆点或更改缩进：

<style>
ul {
  list-style-type: square;
  padding-left: 20px;
}

ol {
  list-style-type: upper-roman;
}
</style>

list-style-type 可用于设置列表符号的样式：

  • disc（默认圆点）
  • circle（空心圆）
  • square（实心方块）
  • none（无标记）

小结​

HTML 列表是组织页面内容的重要工具。你可以使用无序列表表示没有顺序的项目，用有序列表表示需要排序的内容，而自定义列表则适合做定义说明。在实际开发中，结合 CSS 样式，你可以让列表在视觉上更美观，逻辑上更清晰。掌握这三种列表的用法，将对你编写结构清晰、易读性强的网页大有帮助。