HTML 无序列表

学习目标

掌握 HTML 无序列表的基本语法与语义用途
能够使用 CSS 自定义项目符号样式（圆点、方块、无符号等）
学会创建嵌套无序列表以表达层级结构
掌握将无序列表转换为水平导航菜单的实现方法
理解无序列表在网页布局中的典型应用场景

什么是无序列表

HTML 无序列表用于组织顺序无关的一组项目，如功能特性、分类标签、导航链接等。默认情况下，浏览器会以实心圆点（•）作为项目符号进行渲染。

核心特点

无顺序要求：项目之间没有先后之分
语义清晰：明确表示一组相关但无序的内容
高度可定制：可通过 CSS 控制符号样式、间距、方向等
支持嵌套：可构建多级分类结构

基本语法

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

<ul>：定义无序列表容器
<li>：定义列表中的每一项（List Item）

示例：前端技术栈

<h2>前端核心技术</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>React</li>
</ul>

自定义项目符号

虽然 HTML 早期版本支持 type 属性（如 type="square"），但在 HTML5 中已废弃。现代开发应使用 CSS 的 list-style-type 属性控制符号样式。

常见样式

样式值	效果	说明
`disc`	•	实心圆（默认）
`circle`	○	空心圆
`square`	■	实心方块
`none`	（无符号）	移除所有项目符号

方块符号

<ul style="list-style-type: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

圆形符号

<ul style="list-style-type: circle;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

无符号

常用于导航

<ul style="list-style-type: none;">
  <li>首页</li>
  <li>关于</li>
  <li>联系</li>
</ul>

嵌套无序列表

在 <li> 内部嵌套另一个 <ul>，可创建多级分类结构，适用于目录、产品分类、知识体系等场景。

示例：技术领域与子项

<h2>技术学习路径</h2>
<ul>
  <li>基础技能</li>
  <li>
    Web 开发
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>框架与库
    <ul>
      <li>React</li>
      <li>Vue.js</li>
    </ul>
  </li>
</ul>

水平无序列表

常用于导航栏

通过 CSS 将垂直列表转为水平排列，是实现网站导航菜单的标准做法。

方法一：使用 `float`

<style>
  ul {
    list-style-type: none;
    background-color: #1d6b0d;
    overflow: hidden; /* 清除浮动 */
  }
  li {
    float: left;
  }
  li a {
    display: block;
    color: white;
    padding: 0.5rem;
    text-decoration: none;
  }
</style>

<ul>
  <li><a href="#course">课程</a></li>
  <li><a href="#blog">博客</a></li>
  <li><a href="#content">内容</a></li>
</ul>

方法二：使用 `display: inline`

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline;
    margin-right: 20px;
  }
  li a {
    text-decoration: none;
    color: #000;
  }
</style>

<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#about">关于</a></li>
  <li><a href="#services">服务</a></li>
  <li><a href="#contact">联系</a></li>
</ul>

现代替代方案：推荐使用 flexbox 或 grid 布局实现更灵活、响应式的水平菜单。

应用场景

场景	说明
网站导航	顶部或侧边菜单，通常隐藏符号并水平排列
功能列表	产品特性、服务项目等无序信息展示
标签云	关键词或分类标签集合
目录结构	文档或知识库的章节与子章节
购物清单	待购商品列表（顺序不重要）

重点总结

无序列表使用 <ul> + <li> 构建，适用于无顺序要求的内容组
默认项目符号为实心圆，可通过 CSS 的 list-style-type 修改为 circle、square 或 none
不要使用已废弃的 HTML 属性（如 <ul type="square">），应全部交由 CSS 控制
嵌套列表可表达层级关系，但需注意深度控制
水平列表是导航菜单的基础实现方式，结合 CSS 可打造专业 UI

思考题

为什么在制作网站导航时通常要将 list-style-type 设置为 none？
使用 float 实现水平列表存在哪些潜在问题？如何用 Flexbox 改进？
在什么情况下你会选择无序列表而不是有序列表？请举出三个具体例子。