HTML基础：列表标签的3种形式以及嵌套列表

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端程序媛。

g.zh后台回复“前端工具”可免费获取开发工具，持续更新

今天聊聊列表标签。列表标签，在网页设计中可以帮助将信息以结构化的方式呈现给用户，提高信息的可读性和易理解性。用途如下2个菜单小场景：

ok，那接下来我们来学习吧。

列表标签的 3 种形式

HTML 中常用的列表标签有 3 种。

1、无序列表（Unordered List）：用 <ul> 标签表示，其中每个列表项使用 <li> 标签表示，列表项前面通常有一个特殊符号（如圆点、实心方块）作为标记。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

用于呈现项目之间没有特定顺序或优先级关系的内容。

常用于创建菜单、项目清单等，后续呢，我们可以通过 CSS 样式来改变标记的样式，如改变标记的形状、颜色等，使其更符合设计需求。

2、有序列表（Ordered List）：用 <ol> 标签表示，其中每个列表项同样使用 <li> 标签表示，列表项前面会有自动编号（数字、字母、罗马数字等）。

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

用于呈现有序内容，通常以数字、字母或其他符号形式显示。

适用于排列顺序重要的项目，如步骤、排名等，可以自动编号并且支持通过 CSS 样式进行定制。

3、定义列表（Definition List）：用 <dl> 标签表示，其中每个术语使用 <dt> 标签表示，对应的描述使用 <dd> 标签表示。

<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
  <dt>术语3</dt>
  <dd>描述3</dd>
</dl>

这个标签没有前 2 者常用。它用于呈现术语与其定义之间的关系。

常用于创建词汇表、术语表、定义清单等，通过术语和对应的描述清晰地展示内容之间的关联关系，提供更详细的解释和说明。

可嵌套的列表实例

但也有很多场景下，不是单一的一个列表，而是一个级联的列表。而通过列表标签嵌套分层展示信息，组织复杂多级内容，从而提升提高可读性，提升用户体验的作用。

那一起来看个案例吧。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物清单</title>
  </head>
  <body>
    <h2>购物清单</h2>

    <ul>
      <li>
        生鲜食材
        <ul>
          <li>
            蔬菜
            <ul>
              <li>青菜</li>
              <li>番茄</li>
              <li>黄瓜</li>
            </ul>
          </li>
          <li>
            水果
            <ul>
              <li>苹果</li>
              <li>香蕉</li>
              <li>橙子</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        主食
        <ul>
          <li>
            米面粮油
            <ul>
              <li>大米</li>
              <li>面粉</li>
              <li>食用油</li>
            </ul>
          </li>
          <li>
            面包糕点
            <ul>
              <li>面包</li>
              <li>蛋糕</li>
              <li>饼干</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        饮料
        <ul>
          <li>碳酸饮料</li>
          <li>果汁</li>
          <li>茶饮</li>
        </ul>
      </li>
    </ul>
  </body>
</html>