HTML <ul> 标签（建议收藏）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，信息的组织与呈现方式直接影响用户体验。无论是导航菜单、项目列表，还是任务清单，开发者都需要一种简洁高效的方式将内容结构化。此时，HTML

标签便成为了一个不可或缺的工具。它以无序列表的形式，帮助开发者轻松创建可读性高的内容区块。本文将从基础到进阶，结合实例与代码，带您全面理解这一标签的用法与技巧。

---

一、

标签的基础语法与核心概念

1.1 什么是

标签？

标签是 HTML 中用于定义无序列表（Unordered List）的元素。与有序列表（
）不同，无序列表不会为每个列表项添加数字或字母编号，而是通过默认的圆点符号（bullet point）或自定义符号来表示层级关系。

形象比喻：可以将

看作是一本图书的目录页。目录中的每个章节标题用圆点或方块符号标记，帮助读者快速定位内容，而无需依赖严格的顺序编号。

基础语法结构

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

• <ul> 是容器标签，包裹所有列表项。
• <li> 是列表项（List Item）的标签，每个列表项必须位于 <ul> 内部。

1.2 默认样式与浏览器渲染

浏览器默认会为每个 <li> 元素添加：

• 左侧的圆点符号（bullet point）；
• 适当的缩进（通常为 40px）；
• 垂直间距（margin 或 padding）。

示例效果：
无序列表默认样式示意图
（注：此处仅为文字描述，实际代码运行时会呈现圆点列表）

---

二、

标签的进阶用法

2.1 自定义列表符号：使用 type 属性

通过 <ul> 的 type 属性，可以快速修改列表项的符号样式。支持的值包括：

• disc：默认的实心圆点（圆形符号）；
• square：实心方块；
• circle：空心圆圈；
• none：隐藏符号。

代码示例

<ul type="square">  
  <li>方块符号列表项 1</li>  
  <li>方块符号列表项 2</li>  
</ul>  

<ul type="circle">  
  <li>空心圆符号列表项 1</li>  
  <li>空心圆符号列表项 2</li>  
</ul>  

2.2 嵌套列表：构建多级结构

通过将 <ul> 标签嵌套在 <li> 内部，可以创建层级分明的多级列表。例如：

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

效果：

• 水果
  • 苹果
  • 香蕉
  • 橙子
• 蔬菜
  • 胡萝卜
  • 菠菜

2.3 结合 CSS 实现个性化样式

虽然 type 属性能快速调整符号，但通过 CSS 可以实现更灵活的定制。例如：

/* 隐藏默认符号 */  
ul {  
  list-style-type: none;  
  padding-left: 0; /* 移除默认缩进 */  
}  

/* 添加自定义符号（如图标） */  
li::before {  
  content: "▸"; /* 使用三角符号 */  
  color: #4CAF50;  
  margin-right: 8px;  
}  

---

三、

标签在实际开发中的应用案例

3.1 案例 1：导航菜单的实现

无序列表是构建导航栏的常见方式。例如：

<nav>  
  <ul class="nav-menu">  
    <li><a href="/">首页</a></li>  
    <li><a href="/products">产品</a></li>  
    <li><a href="/about">关于我们</a></li>  
  </ul>  
</nav>  

配合 CSS 可以将其水平排列：

.nav-menu {  
  list-style: none;  
  display: flex;  
  gap: 20px;  
  padding: 0;  
}  

3.2 案例 2：任务清单与交互效果

结合 JavaScript，可以动态添加或移除列表项。例如：

<ul id="task-list">  
  <li>学习 HTML <ul> 标签</li>  
  <li>练习代码示例</li>  
</ul>  

<button onclick="addTask()">添加任务</button>  

<script>  
function addTask() {  
  const input = prompt("请输入新任务：");  
  if (input) {  
    const li = document.createElement("li");  
    li.textContent = input;  
    document.getElementById("task-list").appendChild(li);  
  }  
}  
</script>  

---

四、常见问题与最佳实践

4.1 问题 1：列表项未显示符号

原因：可能被 CSS 的 list-style-type: none 或 padding-left: 0 覆盖。
解决方案：检查父级容器的样式，或显式重置样式：

li {  
  list-style-type: disc !important;  
  padding-left: 40px;  
}  

4.2 问题 2：嵌套列表层级过多导致可读性差

建议：

• 使用 CSS 控制缩进：padding-left: 20px 每级递增；
• 通过颜色或背景色区分层级。

4.3 最佳实践总结

1. 语义化优先：避免滥用 <ul> 表示非列表内容（如布局）；
2. 可访问性：为导航列表添加 aria-label 属性；
3. 性能优化：避免过度嵌套，影响渲染效率。

---

五、与

标签的对比与选择

5.1 核心区别

特性	标签	标签
标识符号	无序（圆点、方块等）	有序（数字、字母等）
适用场景	分类、导航、任务清单	步骤指南、排名、时间线

5.2 实际选择建议

• 选择
  的场景：当列表项的顺序不重要，或仅需分类展示时；
  • 选择
    的场景：当内容需要按顺序执行或展示优先级时。

  ---

  六、总结与展望

  通过本文，我们系统学习了 HTML

  标签 的基础语法、高级用法及实际应用。从默认样式到 CSS 定制，从静态列表到动态交互，
  标签的灵活性使其成为网页开发中的“万能容器”。

  对于初学者，建议通过以下步骤巩固知识：

  1. 复现本文中的代码示例；
  2. 尝试将列表与 CSS Flexbox/Grid 结合；
  3. 使用 JavaScript 实现列表项的动态增删功能。

  未来，随着 CSS 自定义属性（Custom Properties）和框架（如 React、Vue）的普及，

  标签的用法将更加多样化。掌握其核心逻辑后，开发者可以更自信地应对复杂项目中的列表需求。

  ---

  希望本文能成为您掌握 HTML

  标签 的坚实起点！