列表是网页内容组织的核心元素之一，通过合理的列表标签使用，可以让信息呈现更清晰、更具可读性。本文将详细讲解HTML中的三种列表标签及其应用场景。

一、无序列表 <ul>：排列无顺序的内容

无序列表适用于并列关系的条目，如导航菜单、功能清单等。基础语法：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
  • 1.
  • 2.
  • 3.
  • 4.

示例：

<ul>
  <li>首页</li>
  <li>产品中心</li>
  <li>关于我们</li>
</ul>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

效果：

  • 首页
  • 产品中心
  • 关于我们

特性：

  • 默认显示为实心圆点(可通过CSS修改为其他符号)。
二、有序列表 <ol>：强调顺序的列表

有序列表适用于步骤、排名、教程等需要明确顺序的内容。基础语法：

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>
  • 1.
  • 2.
  • 3.
  • 4.

示例：

<ol>
  <li>注册账号</li>
  <li>填写个人信息</li>
  <li>完成邮箱验证</li>
</ol>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

效果：

  1. 注册账号
  2. 填写个人信息
  3. 完成邮箱验证

属性扩展：

  • start="3"：从第3个序号开始。
  • type="A"：显示大写字母序号(A/B/C)。
三、定义列表 <dl>：键值对形式的内容

定义列表适合术语解释、参数说明等场景，由 <dt>(术语)和 <dd>(描述)组成。基础语法：

<dl>
  <dt>术语1</dt>
  <dd>描述内容1</dd>
  <dt>术语2</dt>
  <dd>描述内容2</dd>
</dl>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

示例：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于美化页面样式。</dd>
</dl>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

效果：
HTML
 超文本标记语言，用于构建网页结构。
CSS
 层叠样式表，用于美化页面样式。

四、嵌套列表与实战技巧

1. 列表嵌套：实现多级结构(如目录树)

<ul>
  <li>前端技术
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

2. CSS美化：通过样式增强视觉效果

ul.custom-list {
  list-style: none;       /* 移除默认符号 */
  padding-left: 20px;     /* 缩进 */
}
ul.custom-list li::before {
  content: "▶";           /* 自定义符号 */
  color: #ff6b6b;
  margin-right: 8px;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.