正文

ul 是 HTML 中的无序列表标签，用于创建项目符号列表，通常配合 li 标签使用，比如：
  • 第一项
  • 第二项
浏览时会显示为带圆点的项目列表。

/0 浏览量
0829

深入理解 HTML 无序列表（ul）：从基础到高级应用

什么是无序列表？

无序列表是 HTML 中最常用的列表类型之一，它用圆点（默认样式）标记每一项内容。<ul> 标签代表 unordered list（无序列表），里面的每一项都用 <li>（list item）标签包裹。浏览器会自动给每一项前面加上项目符号，通常是实心圆点 ●。

基本结构

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

渲染效果如下：

  • 第一项
  • 第二项
  • 第三项

是不是很简单？但别小看这个基础标签，它背后有很多值得深挖的知识点。

无序列表的核心特性

1. 语义化优势

使用 <ul> 而不是简单地用 <div> 加文本，最重要的原因是 语义化。搜索引擎、屏幕阅读器等工具能明确知道这是一组相关的列表项，而不是零散的内容。

<!-- 不推荐：用 div 模拟列表 -->
<div class="list">
  <div>第一项</div>
  <div>第二项</div>
</div>

<!-- 推荐：语义清晰的无序列表 -->
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

2. 有序 vs 无序列表

HTML 提供了两种主要列表类型，选择哪种取决于你的需求：

特性 <ul> 无序列表 <ol> 有序列表
默认标记 圆点 ● 数字 1, 2, 3…
适用场景 内容无顺序要求 内容有先后顺序
示例 商品清单、导航菜单 步骤说明、排行榜 
<!-- 无序列表：购物清单 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<!-- 有序列表：食谱步骤 -->
<ol>
  <li>预热烤箱至 180°C</li>
  <li>混合干性材料</li>
  <li>加入湿性材料搅拌</li>
  <li>烘烤 25 分钟</li>
</ol>

3. 嵌套列表：多层结构

无序列表最强大的地方在于 可以无限嵌套，形成层级结构。这在网站导航、文档大纲、目录等场景中非常有用。

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西兰花</li>
      <li>菠菜</li>
    </ul>
  </li>
  <li>肉类
    <ul>
      <li>牛肉</li>
      <li>鸡肉</li>
      <li>猪肉</li>
    </ul>
  </li>
</ul>

渲染效果：

  • 水果
    • 苹果
    • 香蕉
    • 橙子
  • 蔬菜
    • 胡萝卜
    • 西兰花
    • 菠菜
  • 肉类
    • 牛肉
    • 鸡肉
    • 猪肉

4. 混合嵌套：ul 和 ol 可以混搭

你甚至可以在一个无序列表里嵌入有序列表，反之亦然：

<ul>
  <li>学习路线
    <ol>
      <li>HTML 基础</li>
      <li>CSS 样式</li>
      <li>JavaScript 编程</li>
    </ol>
  </li>
  <li>项目清单
    <ul>
      <li>个人博客</li>
      <li>待办事项应用</li>
      <li>天气查询工具</li>
    </ul>
  </li>
</ul>

自定义列表样式

默认情况下，浏览器会给 <ul> 加上圆点符号和缩进。但通过 CSS，你可以完全自定义这些样式。

1. 改变项目符号类型

使用 list-style-type 属性：

/* 空心圆点 */
ul.circle {
  list-style-type: circle;
}

/* 实心方块 */
ul.square {
  list-style-type: square;
}

/* 无符号 */
ul.no-style {
  list-style-type: none;
}

/* 罗马数字 */
ul.roman {
  list-style-type: upper-roman;
}

<ul class="circle">
  <li>第一个选项</li>
  <li>第二个选项</li>
</ul>

<ul class="square">
  <li>第一个选项</li>
  <li>第二个选项</li>
</ul>

<ul class="no-style">
  <li>第一个选项</li>
  <li>第二个选项</li>
</ul>

<ul class="roman">
  <li>第一个选项</li>
  <li>第二个选项</li>
</ul>

2. 移除默认样式并自定义

在实际项目中，经常需要移除默认的圆点，然后自己设计样式。这在制作导航菜单时特别常见：

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

.nav-menu {
  list-style: none; /* 移除默认圆点 */
  padding: 0; /* 移除默认左边距 */
  margin: 0; /* 移除默认外边距 */
  display: flex; /* 横向排列 */
  gap: 20px; /* 项之间间距 */
}

.nav-menu li a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.nav-menu li a:hover {
  background-color: #007bff;
  color: white;
}

渲染效果：

[首页] [产品] [关于] [联系]

3. 使用自定义图像作为标记

list-style-image 属性允许你用图片替换默认的圆点：

ul.custom-image {
  list-style-image: url('icon.png');
}

或者使用更现代的 background-image 方案（更灵活）：

ul.custom-bg {
  list-style: none;
  padding-left: 0;
}

ul.custom-bg li {
  padding-left: 25px;
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 10px;
}

实际应用案例

案例一：导航菜单

导航菜单是无序列表最经典的应用之一：

<nav>
  <ul class="main-nav">
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/blog">博客</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

.main-nav {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 20px;
  background-color: #2c3e50;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  padding: 8px 12px;
  transition: all 0.3s ease;
}

.main-nav li a:hover {
  background-color: #3498db;
  border-radius: 4px;
}

案例二：侧边栏分类

<aside>
  <h3>文章分类</h3>
  <ul class="categories">
    <li><a href="#">JavaScript <span>(12)</span></a></li>
    <li><a href="#">CSS <span>(8)</span></a></li>
    <li><a href="#">HTML <span>(6)</span></a></li>
    <li><a href="#">React <span>(15)</span></a></li>
    <li><a href="#">Vue <span>(9)</span></a></li>
  </ul>
</aside>

.categories {
  list-style: none;
  padding: 0;
}

.categories li {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.categories li:last-child {
  border-bottom: none;
}

.categories li a {
  text-decoration: none;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.categories li a:hover {
  color: #007bff;
}

.categories li span {
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: #666;
}

案例三：任务清单

<ul class="todo-list">
  <li class="completed">
    <input type="checkbox" checked>
    <span>学习 HTML 基础</span>
  </li>
  <li>
    <input type="checkbox">
    <span>掌握 CSS 样式</span>
  </li>
  <li>
    <input type="checkbox">
    <span>完成第一个项目</span>
  </li>
</ul>

.todo-list {
  list-style: none;
  padding: 0;
  max-width: 400px;
}

.todo-list li {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
  margin-bottom: 8px;
  border-radius: 8px;
  transition: all 0.3s;
}

.todo-list li:hover {
  background-color: #f0f0f0;
  transform: translateX(5px);
}

.todo-list li input[type="checkbox"] {
  margin-right: 15px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.todo-list li.completed span {
  text-decoration: line-through;
  color: #999;
}

常见陷阱与最佳实践

1. 不要在 <li> 里直接放纯文本

虽然浏览器容错性很强，但标准的做法是把所有内容放在 <li> 标签内：

<!-- 错误做法 -->
<ul>
  这里是文字
  <li>第一项</li>
  <li>第二项</li>
</ul>

<!-- 正确做法 -->
<ul>
  <li>这里是文字</li>
  <li>第一项</li>
  <li>第二项</li>
</ul>

2. 嵌套列表要正确缩进

良好的代码缩进有助于阅读和维护：

<ul>
  <li>外层项目一
    <ul>
      <li>内层项目一</li>
      <li>内层项目二</li>
    </ul>
  </li>
  <li>外层项目二
    <ul>
      <li>内层项目三</li>
      <li>内层项目四</li>
    </ul>
  </li>
</ul>

3. 避免过度嵌套

虽然技术上可以无限嵌套，但超过 3-4 层会影响可读性和用户体验。如果内容确实需要更多层级，考虑使用手风琴（accordion）或树形结构来替代。

4. 移动端友好设计

确保列表在移动设备上也能良好显示：

ul.responsive {
  list-style: none;
  padding: 10px;
}

ul.responsive li {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

ul.responsive li:last-child {
  border-bottom: none;
}

/* 移动端优化 */
@media (max-width: 768px) {
  ul.responsive {
    padding: 5px;
  }
  
  ul.responsive li {
    padding: 12px;
    font-size: 14px;
  }
}

无障碍访问（Accessibility）

无序列表对辅助技术（如屏幕阅读器）有天然的支持。使用者可以通过按键快速导航到列表，并了解列表中的项目数量。

<!-- 良好的无障碍实践 -->
<nav>
  <h2>主要导航</h2>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

屏幕阅读器会告诉用户：”包含 3 个项目的无序列表，主要导航”。

与有序列表的配合使用

在实际项目中，无序列表和有序列表经常一起出现。比如在一个文档中，主要章节用有序列表，子项用无序列表：

<ol>
  <li>准备工作
    <ul>
      <li>安装 Node.js</li>
      <li>创建项目目录</li>
      <li>初始化 npm</li>
    </ul>
  </li>
  <li>开发阶段
    <ul>
      <li>设计页面结构</li>
      <li>编写样式</li>
      <li>添加交互功能</li>
    </ul>
  </li>
  <li>发布上线
    <ul>
      <li>测试兼容性</li>
      <li>部署到服务器</li>
      <li>配置域名</li>
    </ul>
  </li>
</ol>

总结

无序列表虽然看起来简单，但它在网页结构中扮演着重要角色：

  1. 语义清晰：帮助浏览器和搜索引擎理解内容结构
  2. 灵活定制：通过 CSS 可以实现各种视觉效果
  3. 嵌套支持：可以构建复杂的层级结构
  4. 无障碍友好：天然支持辅助技术
  5. 广泛适用：从导航菜单到任务清单，无处不在

掌握 <ul> 和 <li> 的使用，是每一个 Web 开发者必备的基础技能。从简单的列表到复杂的交互式菜单，无序列表都能胜任。记住：好的结构是好的设计的第一步！

-- 展开阅读全文 --