HTML 无序列表 <ul>

Begindev 编辑部 March 25, 2026

无序列表允许你展示一组相关的项目，而不需要强调任何特定的顺序或次序。

本章节将深入探讨 <ul> 标签及其属性，以及如何有效地使用它在 HTML 文档中创建清晰、有条理的列表。

1. 理解 `<ul>` 标签

HTML 中的 <ul> 标签代表 "Unordered List"（无序列表）。

它是一个容器元素，用于将一组项目分组，通常默认显示为圆点（Bullet points）。列表中的每个项目都由 <li>（List Item，列表项）标签表示。<ul> 标签表明这些项目的顺序并不重要。

1.1 基本结构

无序列表的基本结构如下：

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

这段代码将渲染出一个包含三个圆点的列表，内容分别是“项目 1”、“项目 2”和“项目 3”。

2. 嵌套无序列表

你可以将无序列表相互嵌套，以创建层级结构。这对于表示大列表中的子类别或相关项目非常有用。

<ul>
  <li>主要项目 1</li>
  <li>
    主要项目 2
    <ul>
      <li>子项目 1</li>
      <li>子项目 2</li>
    </ul>
  </li>
  <li>主要项目 3</li>
</ul>

在这个例子中，“主要项目 2”包含了一个嵌套的无序列表，里面有“子项目 1”和“子项目 2”。浏览器通常会用不同的圆点样式（如空心圆或方块）来渲染嵌套列表，以在视觉上区分层级。

3. `type` 属性（已废弃）

在旧版本的 HTML 中，<ul> 标签有一个 type 属性，允许你指定圆点的样式（例如 disc 实心圆, circle 空心圆, square 方块）。

然而，这个属性在 HTML5 中已废弃（Deprecated），现在推荐使用 CSS 来设置列表样式。虽然你可能会在旧代码中看到它，但在新项目中请避免使用。

4. 使用 CSS 设置无序列表样式

相比已废弃的 type 属性，CSS 提供了对无序列表外观更强大的控制力。你可以使用 CSS 改变圆点样式、完全移除圆点，甚至使用自定义图片作为圆点。

4.1 改变圆点样式

CSS 中的 list-style-type 属性允许你改变圆点的样式。以下是一些常用值：

disc：实心圆（默认值）。
circle：空心圆。
square：实心方块。
none：移除圆点。

示例

<ul style="list-style-type: circle;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这段代码将渲染一个带有空心圆点的无序列表。

4.2 移除圆点

要从无序列表中移除圆点，将 list-style-type 属性设置为 none。这通常在你想要自定义列表项样式（例如制作导航栏）时使用。

<ul style="list-style-type: none;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这段代码将渲染一个没有任何圆点的无序列表。

4.3 使用自定义图片作为圆点

CSS 中的 list-style-image 属性允许你使用自定义图片作为圆点。你需要使用 url() 函数指定图片的 URL。

<ul style="list-style-image: url('bullet.png');">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这段代码将渲染一个无序列表，每个项目前都使用 "bullet.png" 图片作为标记。请确保图片易于访问且尺寸合适，以获得最佳视觉效果。

4.4 控制列表项间距

CSS 属性如 margin（外边距）和 padding（内边距）可用于控制列表项周围的间距。这有助于提高列表的可读性和美观度。

<ul style="margin-left: 20px; padding-left: 0;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

这段代码为整个列表添加了左外边距，并移除了默认的左内边距，从而可以更精细地控制列表的缩进。

5. 实战示例与演示

让我们看一些在 HTML 中使用无序列表的实际例子。

5.1 示例 1：简单的导航菜单

无序列表常用于创建导航菜单。通过移除圆点并用 CSS 设置列表项样式，你可以创建一个整洁、专业的菜单。

<ul style="list-style-type: none; padding: 0; margin: 0;">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系方式</a></li>
</ul>

在这个例子中，<ul> 标签包含了一组链接（<a>标签）。list-style-type: none 移除了圆点，padding: 0和 margin: 0 重置了默认间距。通常你还会添加更多 CSS 来美化链接。

5.2 示例 2：功能列表

无序列表也非常适合用来展示产品的功能或优势列表。

<ul>
  <li>简单易用</li>
  <li>高度可定制</li>
  <li>响应式设计</li>
  <li>卓越的支持</li>
</ul>

这段代码将渲染一个带圆点的功能列表。你可以用 CSS 进一步美化它以匹配你网站的设计。

5.3 示例 3：待办事项列表

无序列表可以用来创建一个简单的待办事项列表。

<ul>
  <li><s>去超市购物</s></li>
  <li>付账单</li>
  <li>遛狗</li>
  <li>完成项目报告</li>
</ul>

在这个例子中，<s> 标签被用来给“去超市购物”添加删除线，表示该项目已完成。

1. 理解 <ul> 标签