HTML 无序列表-代码号

HTML 无序列表（Unordered List）是网页开发中的基础元素，用于组织无需特定顺序排列的相关项目。这种列表形式在网页设计中应用广泛，常用于展示导航菜单、功能、分组信息等内容。

无序列表的基本概念

在 HTML 中，无序列表通过 <ul> 标签创建，每个列表项使用 <li>（列表项）标签定义。浏览器默认以项目符号形式呈现无序列表内容。

基本语法结构

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

基础示例

<ul>
  <li>前端技术</li>
  <li>后端开发</li>
  <li>数据库管理</li>
</ul>

输出效果：
•前端技术
•后端开发
•数据库管理

使用 CSS 定义列表标记样式

虽然浏览器默认以实心圆点作为项目符号，但开发者可以通过 CSS 的 list-style-type 属性自定义标记样式。常用的属性值包括：

属性值	描述说明
disc	默认值，实心圆形项目符号
circle	空心圆形项目符号
square	实心方形项目符号
none	不显示任何项目符号

1. 实心圆形（disc，默认样式）

<ul style="list-style-type: disc;">
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
</ul>

输出效果：
•HTML5
•CSS3
•JavaScript
2. 空心圆形（circle）

<ul style="list-style-type: square;">
  <li>项目规划</li>
  <li>代码实现</li>
  <li>测试部署</li>
</ul>

输出效果：
◦ 网页结构
◦ 样式设计
◦ 交互功能
3. 实心方形（square）

<ul style="list-style-type: square;">
  <li>项目规划</li>
  <li>代码实现</li>
  <li>测试部署</li>
</ul>

输出效果：
■ 项目规划
■ 代码实现
■ 测试部署
4. 无项目符号（none）

<ul style="list-style-type: none;">
  <li>需求分析</li>
  <li>界面设计</li>
  <li>功能开发</li>
</ul>

输出效果：(无项目符号)
需求分析
界面设计
功能开发
注意： HTML5 已不再支持 <ul> 标签的 type 属性，建议使用 CSS 的 list-style-type 属性进行样式定义。

嵌套无序列表

HTML 支持无序列表的嵌套结构，允许在列表项内创建子列表，这种特性对于展示层次化数据很有帮助。

嵌套列表示例

<ul>
  <li>前端技术栈
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>开发工具
    <ul>
      <li>代码编辑器</li>
      <li>版本控制</li>
      <li>调试工具</li>
    </ul>
  </li>
</ul>

输出效果：
•前端技术栈
◦ HTML
◦ CSS
◦ JavaScript
•开发工具
◦ 代码编辑器
◦ 版本控制
◦ 调试工具
虽然可以创建多级嵌套列表，但建议控制嵌套层级确保内容的可读性。

水平排列的无序列表（导航菜单）

通过 CSS 样式设置，可以将无序列表转换为水平排列的导航菜单，这是现代网页设计中常见的应用场景。

水平导航菜单示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .horizontal-menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: #f8f9fa;
      overflow: hidden;
    }
    .horizontal-menu li {
      float: left;
    }
    .horizontal-menu li a {
      display: block;
      color: #333;
      text-align: center;
      padding: 16px 20px;
      text-decoration: none;
    }
    .horizontal-menu li a:hover {
      background-color: #e9ecef;
    }
  </style>
</head>
<body>
  <ul class="horizontal-menu">
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务项目</a></li>
    <li><a href="#projects">案例展示</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系方式</a></li>
  </ul>
</body>
</html>

使用无序列表构建导航系统
无序列表在网站导航系统中应用广泛，因其语义化特性而受到开发者青睐。
简单内联导航示例

<ul style="list-style-type: none; padding: 0;">
  <li style="display: inline; margin-right: 20px;"><a href="#home">首页</a></li>
  <li style="display: inline; margin-right: 20px;"><a href="#products">产品介绍</a></li>
  <li style="display: inline; margin-right: 20px;"><a href="#support">技术支持</a></li>
</ul>

可访问性与语义化考量

无序列表不仅提供视觉上的内容组织，还为屏幕阅读器等辅助技术提供了语义信息，帮助用户理解项目之间的关联性。

提升可访问性的建议：

对无需顺序排列的项目使用 <ul>，需要顺序排列时使用 <ol>
确保每个 <li> 元素包含有意义的文本内容
如包含链接，应使用描述性锚文本
避免过度嵌套，以免造成屏幕阅读器用户的困惑
样式设计技巧
除了修改项目符号类型，还可以通过其他 CSS 技术进一步提升无序列表的视觉效果：
自定义项目符号图标

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

.custom-list li::before {
  content: "•";
  color: #4a6ee0;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-right: 0.5em;
}

响应式设计
通过 Flexbox 或 Grid 布局技术，可以创建适应不同屏幕尺寸的响应式列表布局。(超纲后面再讲)
间距调整
通过调整 <ul> 元素的左内边距和 <li> 元素的外边距，可以优化列表的视觉层次和阅读体验。
课程实践建议
语义化选择：根据内容特性选择适当的列表类型，无序列表适用于无特定顺序的项目
样式控制：使用CSS而非HTML属性控制列表样式，确保代码的现代性和可维护性
适度嵌套：虽然支持多级嵌套，但应避免过度嵌套以保持内容的清晰度
可访问性：为包含链接的列表项提供描述性文本，并使用媒体查询确保导航菜单在不同设备上的可用性
HTML 无序列表（<ul>）是组织非顺序内容的有效工具，无论是创建简单的项目列表还是复杂的导航系统，都能提供良好的语义支持和视觉效果。通过合理运用 CSS 样式技术和嵌套结构，可以创建出既美观又符合标准的内容展示方案。

本文标签：

HTML 无序列表