跳到主要内容

HTML 无序列表

HTML无序列表（Unordered List）是一种用于展示无特定顺序的项目列表的方式。它通常用于列出项目、要点或选项，并且每个项目前会有一个默认的符号（如圆点）。无序列表是网页设计中非常常见的元素，能够帮助用户快速浏览和理解内容。

无序列表的基本语法​

HTML无序列表使用 <ul> 标签来定义，列表中的每个项目则使用 <li> 标签来表示。<ul> 是 "unordered list" 的缩写，而 <li> 是 "list item" 的缩写。

以下是一个简单的无序列表示例：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

输出结果：​

  • 苹果
  • 香蕉
  • 橙子

在这个例子中，<ul> 标签包裹了三个 <li> 标签，每个 <li> 标签代表一个列表项。浏览器会自动在每个列表项前添加一个圆点符号。

无序列表的样式​

默认情况下，无序列表的项目符号是圆点（•），但你可以通过CSS来改变它的样式。以下是一些常见的列表样式：

  • list-style-type: disc;（默认，圆点）
  • list-style-type: circle;（空心圆）
  • list-style-type: square;（方块）
  • list-style-type: none;（无符号）

例如，如果你想将列表符号改为方块，可以这样写：

<ul style="list-style-type: square;">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

输出结果：​

▪ 苹果
▪ 香蕉
▪ 橙子

提示

如果你不想显示任何符号，可以使用 list-style-type: none;，然后通过CSS自定义样式来添加其他符号或图标。

嵌套无序列表​

无序列表可以嵌套使用，以创建更复杂的层次结构。例如，你可以在一个列表项中再嵌套一个无序列表：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>菠菜</li>
      <li>土豆</li>
    </ul>
  </li>
</ul>

输出结果：​

  • 水果
    • 苹果
    • 香蕉
    • 橙子
  • 蔬菜
    • 胡萝卜
    • 菠菜
    • 土豆
备注

嵌套列表的符号样式可能会因浏览器而异，通常外层列表使用圆点，内层列表使用空心圆或方块。

实际应用场景​

无序列表在网页设计中非常常见，以下是一些典型的应用场景：

  1. 导航菜单：无序列表常用于创建导航菜单。通过CSS样式，可以将列表项水平排列并添加交互效果。
  2. 项目列表：在展示产品特性、功能列表或任务清单时，无序列表可以帮助用户快速浏览。
  3. 步骤说明：虽然有序列表更适合步骤说明，但在某些情况下，无序列表也可以用于展示无特定顺序的步骤。

示例：导航菜单​

<ul style="list-style-type: none; padding: 0;">
  <li style="display: inline; margin-right: 10px;"><a href="#home">首页</a></li>
  <li style="display: inline; margin-right: 10px;"><a href="#about">关于我们</a></li>
  <li style="display: inline; margin-right: 10px;"><a href="#services">服务</a></li>
  <li style="display: inline; margin-right: 10px;"><a href="#contact">联系我们</a></li>
</ul>

输出结果：​

首页 | 关于我们 | 服务 | 联系我们

警告

在实际开发中，建议将样式写在CSS文件中，而不是直接内联在HTML中，以便更好地维护和复用代码。

总结​

HTML无序列表是一种简单但功能强大的工具，能够帮助你组织和展示无特定顺序的内容。通过 <ul> 和 <li> 标签，你可以轻松创建列表，并通过CSS自定义其样式。无论是用于导航菜单、项目列表还是其他场景，无序列表都是网页设计中不可或缺的一部分。

附加资源与练习​

  • 练习：尝试创建一个嵌套无序列表，展示你最喜欢的食物分类及其具体食物。
  • 进一步学习：了解如何通过CSS将无序列表转换为水平导航菜单。
  • 参考文档：MDN Web Docs - HTML 无序列表
提示

如果你对CSS感兴趣，可以尝试使用 flexbox 或 grid 布局来进一步美化你的无序列表。