HTML三大列表结构：无序、有序与描述列表详解-代码聚汇网

HTML三大列表结构：无序、有序与描述列表详解

WebSorceress·2026-08-11·阅读 23 GEO检测（免费）

HTML列表无序列表有序列表

|难度：普通|阅读约 22 分钟

1. 前端页面中的三大基础列表结构

在网页开发中，列表是最基础也是最常用的元素之一。HTML提供了三种主要的列表标签：<ul>、<ol>和<dl>，它们分别对应无序列表、有序列表和描述列表。这三种列表看似简单，但在实际开发中，选择正确的列表类型对语义化、可访问性和样式控制都至关重要。

我见过太多新手开发者习惯性地只用<ul>解决所有列表需求，这其实是一种不良实践。就像木匠工具箱里有锤子、螺丝刀和扳手，每种工具都有其特定用途。理解这三种列表的区别和适用场景，是前端开发的基本功。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 无序列表`<ul>`：自由排列的通用选择

2.1 基本特性与适用场景

无序列表<ul>(Unordered List)是最常用的列表类型，它表示一组没有特定顺序的项目集合。每个列表项用<li>(List Item)标签包裹：

html复制<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

无序列表的典型使用场景包括：

导航菜单项
商品特征列表
文章中的要点罗列
任何不需要特定顺序的项目集合

在视觉呈现上，浏览器默认会给<ul>的每个<li>前添加实心圆点作为项目符号。但通过CSS的list-style-type属性，我们可以轻松改变这种样式：

css复制ul {
  list-style-type: square; /* 方形 */
  /* 其他可选值：disc(默认实心圆)、circle(空心圆)、none(无标记) */
}

2.2 实际开发中的进阶用法

在实际项目中，我经常遇到需要多层嵌套列表的情况。HTML完全支持这种结构：

html复制<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西兰花</li>
    </ul>
  </li>
</ul>

注意：虽然技术上可以实现无限嵌套，但从用户体验角度考虑，建议嵌套层级不要超过3层。过深的嵌套会让用户难以跟踪当前所处位置。

另一个常见需求是自定义项目符号。除了使用list-style-type，我们还可以用::before伪元素实现更灵活的设计：

css复制ul.custom-bullets li::before {
  content: "→ "; /* 任何字符或图标 */
  color: #ff5722;
  margin-right: 8px;
}

3. 有序列表`<ol>`：顺序至关重要的场景

3.1 基本特性与适用场景

有序列表<ol>(Ordered List)用于表示有明确顺序的项目集合。与<ul>类似，它也使用<li>作为列表项，但浏览器会自动为每一项添加序号：

html复制<ol>
  <li>第一步：准备材料</li>
  <li>第二步：混合搅拌</li>
  <li>第三步：放入烤箱</li>
</ol>

有序列表的典型使用场景包括：

操作步骤说明
排行榜或评分列表
需要按特定顺序处理的任何项目
法律条款或合同中的编号段落

默认情况下，<ol>使用阿拉伯数字(1, 2, 3...)作为序号，但通过type属性可以改变编号样式：

html复制<ol type="A"> <!-- A, B, C... -->
<ol type="a"> <!-- a, b, c... -->
<ol type="I"> <!-- 罗马数字 I, II, III... -->
<ol type="i"> <!-- 小写罗马数字 i, ii, iii... -->

3.2 控制编号行为的进阶技巧

在实际开发中，有序列表的编号行为有时需要更精细的控制。HTML5引入了几个有用的属性：

html复制<ol start="4"> <!-- 从4开始编号 -->
  <li>第四步</li>
  <li>第五步</li>
</ol>

<ol reversed> <!-- 倒序编号 -->
  <li>第三步</li>
  <li>第二步</li>
  <li>第一步</li>
</ol>

<li value="10"> <!-- 手动设置当前项编号 -->

对于复杂的文档结构，CSS计数器提供了更强大的编号控制能力：

css复制body {
  counter-reset: section; /* 初始化计数器 */
}

h2::before {
  counter-increment: section; /* 递增计数器 */
  content: "Section " counter(section) ": "; /* 使用计数器 */
}

4. 描述列表`<dl>`：术语与定义的完美搭档

4.1 基本结构与语义价值

描述列表<dl>(Description List)是三种列表中最少被使用但语义价值最高的。它由一组术语(<dt>)和对应的描述(<dd>)组成：

html复制<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页表现</dd>
</dl>

描述列表的典型使用场景包括：

术语表或词典条目
元数据展示(属性-值对)
问答对(FAQ)
任何需要成对展示的信息

与<ul>和<ol>不同，<dl>的每个术语(<dt>)可以对应多个描述(<dd>)，反之亦然：

html复制<dl>
  <dt>咖啡</dt>
  <dd>黑色热饮</dd>
  <dd>含咖啡因</dd>
  
  <dt>牛奶</dt>
  <dt>奶制品</dt>
  <dd>白色液体</dd>
</dl>

4.2 实际应用中的灵活布局

虽然描述列表的默认样式比较朴素(术语和描述各自独立一行)，但通过CSS可以创建各种实用的布局。例如，创建水平排列的元数据显示：

css复制dl.horizontal {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
}

dt {
  grid-column: 1;
  font-weight: bold;
}

dd {
  grid-column: 2;
  margin: 0;
}

在响应式设计中，描述列表尤其有用。我们可以根据屏幕尺寸调整布局：

css复制@media (max-width: 600px) {
  dl.horizontal {
    grid-template-columns: 1fr;
  }
  
  dt, dd {
    grid-column: auto;
  }
}

5. 三种列表的对比与选择指南

5.1 语义差异对比表

特性	`<ul>`	`<ol>`	`<dl>`
语义	无序项目集合	有序项目集合	术语-描述对
子元素	`<li>`	`<li>`	`<dt>`和`<dd>`
默认样式	项目符号(圆点)	数字编号	术语和描述分行显示
顺序重要性	不重要	重要	取决于具体内容
典型场景	导航菜单、特征列表	步骤说明、排行榜	术语表、元数据展示

5.2 选择列表类型的决策流程

在实际项目中，我使用以下决策流程来选择最合适的列表类型：

内容是否有明确的顺序要求？
- 是 → 使用<ol>
- 否 → 进入下一步
内容是否是术语/定义或属性/值对？
- 是 → 使用<dl>
- 否 → 使用<ul>
是否需要自定义编号系统？
- 是 → 考虑<ol>配合CSS计数器
- 否 → 保持简单选择

提示：当不确定时，优先考虑语义而非样式。样式可以通过CSS调整，而不正确的语义会影响可访问性和SEO。

5.3 常见误用与纠正

在代码审查中，我经常发现以下列表误用情况：

误用1：用<ul>实现步骤流程

html复制<!-- 不推荐 -->
<ul>
  <li>1. 第一步</li>
  <li>2. 第二步</li>
</ul>

<!-- 推荐 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

误用2：用多个<p>标签模拟描述列表

html复制<!-- 不推荐 -->
<p><strong>HTML:</strong> 超文本标记语言...</p>
<p><strong>CSS:</strong> 层叠样式表...</p>

<!-- 推荐 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言...</dd>
  <dt>CSS</dt>
  <dd>层叠样式表...</dd>
</dl>

误用3：滥用<dl>实现非成对内容

html复制<!-- 不推荐 -->
<dl>
  <dt>苹果</dt>
  <dt>香蕉</dt>
  <dd>水果</dd>
</dl>

<!-- 推荐 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

6. 无障碍访问与SEO考量

6.1 屏幕阅读器中的表现差异

不同的列表类型在屏幕阅读器中的表现各不相同：

<ul>和<ol>：屏幕阅读器通常会先播报列表包含的项目数量（如"列表，3个项目"），然后依次朗读每个项目
<dl>：屏幕阅读器会明确区分术语(<dt>)和描述(<dd>)，通常会先读术语，稍作停顿后再读描述

为了增强无障碍体验，可以：

为复杂列表添加aria-label或aria-labelledby属性：

html复制<ol aria-label="蛋糕制作步骤">
  <li>...</li>
</ol>

避免仅依赖视觉提示（如颜色或位置）来传达信息

6.2 对搜索引擎的影响

虽然列表类型本身对SEO的影响相对较小，但正确的语义使用有助于搜索引擎理解内容结构：

搜索引擎会识别<ol>中的顺序关系，可能将步骤内容视为更重要的信息
<dl>中的术语(<dt>)可能被视为关键词，有助于建立内容的知识图谱
过度嵌套的列表（特别是<ul>）可能被搜索引擎视为内容组织不良的信号

7. 现代前端框架中的列表实践

7.1 React/Vue中的动态列表

在现代前端框架中，我们经常需要渲染动态列表。以React为例：

jsx复制// 无序列表
function FeatureList({ features }) {
  return (
    <ul>
      {features.map((feature, index) => (
        <li key={index}>{feature}</li>
      ))}
    </ul>
  );
}

// 描述列表
function Glossary({ terms }) {
  return (
    <dl>
      {terms.map((term) => (
        <>
          <dt key={`dt-${term.id}`}>{term.name}</dt>
          <dd key={`dd-${term.id}`}>{term.definition}</dd>
        </>
      ))}
    </dl>
  );
}

重要：在React中渲染列表时，必须为每个列表项提供稳定的key属性，这有助于框架高效更新DOM。

7.2 样式化组件的列表设计

使用CSS-in-JS库如styled-components时，我们可以创建可复用的列表组件：

jsx复制const StyledList = styled.ul`
  list-style: none;
  padding: 0;
  
  li {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    
    &:hover {
      background-color: #f5f5f5;
    }
  }
`;

const StyledDescriptionList = styled.dl`
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  
  dt {
    font-weight: bold;
    text-align: right;
  }
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    
    dt {
      text-align: left;
    }
  }
`;

8. 性能优化与最佳实践

8.1 大型列表的渲染优化

当需要渲染包含数百项的列表时，直接渲染所有DOM元素会导致性能问题。解决方案包括：

虚拟滚动：只渲染可视区域内的列表项

jsx复制import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List height={400} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);

分页加载：分批加载和渲染数据
使用content-visibility: auto：让浏览器跳过屏幕外内容的渲染

8.2 可维护性建议

为复杂列表创建专门的组件，而不是直接在页面模板中编写列表HTML

将列表数据与表现分离，使用数据结构如：

javascript复制// 而不是混合在JSX中
const steps = [
  { id: 1, text: "准备材料" },
  { id: 2, text: "混合搅拌" }
];

为列表项添加一致的间距和排版规则，避免逐个设置样式

9. 实际案例解析

9.1 电商网站的产品特征列表

html复制<!-- 使用无序列表展示产品特征 -->
<ul class="product-features">
  <li>100%纯棉材质</li>
  <li>机洗不变形</li>
  <li>多种颜色可选</li>
</ul>

<style>
  .product-features {
    list-style: none;
    padding: 0;
  }
  
  .product-features li::before {
    content: "✓";
    color: #4CAF50;
    margin-right: 8px;
  }
</style>

9.2 烹饪应用的步骤指导

html复制<!-- 使用有序列表展示烹饪步骤 -->
<ol class="cooking-steps">
  <li>将烤箱预热至180°C</li>
  <li>混合面粉、糖和鸡蛋</li>
  <li>倒入模具，烘烤30分钟</li>
</ol>

<style>
  .cooking-steps {
    counter-reset: step-counter;
    padding-left: 2rem;
  }
  
  .cooking-steps li {
    counter-increment: step-counter;
    margin-bottom: 1rem;
    position: relative;
  }
  
  .cooking-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: -2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #FF5722;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
  }
</style>

9.3 技术文档的API参数说明

html复制<!-- 使用描述列表展示API参数 -->
<dl class="api-params">
  <dt>userId</dt>
  <dd>string, 必需。用户的唯一标识符</dd>
  
  <dt>pageSize</dt>
  <dd>number, 可选。每页返回的项目数，默认10</dd>
</dl>

<style>
  .api-params {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
  }
  
  .api-params dt {
    font-family: monospace;
    color: #d63384;
  }
  
  .api-params dd {
    margin: 0;
    color: #6c757d;
  }
</style>

10. 测试与调试技巧

10.1 验证列表语义的正确性

禁用CSS测试：临时禁用页面CSS，检查列表内容是否仍然清晰可辨
屏幕阅读器测试：使用NVDA或VoiceOver验证列表的朗读效果
HTML验证器：使用W3C验证服务检查列表结构的正确性

10.2 常见问题排查

问题1：列表标记不显示

检查是否意外设置了list-style: none或list-style-type: none
验证父元素是否有overflow: hidden裁剪了标记位置

问题2：编号顺序错误

检查是否有<li>元素设置了value属性干扰了自动编号
验证嵌套<ol>是否使用了start属性导致混乱

问题3：描述列表布局错位

检查<dt>和<dd>的对应关系是否正确
验证CSS Grid或Flexbox布局是否有错误的列定义

11. 未来发展趋势

虽然HTML列表是相当稳定的特性，但Web组件和Shadow DOM的发展为列表带来了新的可能性：

可复用的列表组件：封装样式和行为，同时保持语义化标记

javascript复制class CustomList extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        ul { /* 样式 */ }
      </style>
      <ul part="list">
        <slot></slot>
      </ul>
    `;
  }
}
customElements.define('custom-list', CustomList);

与新兴CSS特性的结合：如subgrid可以更好地控制嵌套列表的布局
无障碍增强：ARIA角色的进一步整合，如role="listbox"等

12. 个人经验分享

在多年的前端开发中，我总结了以下关于列表使用的实用建议：

语义优先原则：即使设计稿看起来像普通文本，如果内容本质是列表，就应该使用合适的列表标签

样式重置技巧：在全局CSS中重置列表基础样式，避免浏览器默认样式不一致：

css复制ul, ol {
  padding-left: 1.5em;
  margin: 1em 0;
}

li {
  line-height: 1.6;
}

键盘导航优化：确保列表项可以通过Tab键聚焦，并添加适当的:focus样式
打印样式调整：为打印媒体添加特定样式，避免列表在打印时被分页切断：
```
css复制@media print {
  ul, ol {
    page-break-inside: avoid;
  }
}
```
国际化考虑：对于多语言网站，注意某些语言的列表编号差异（如希伯来语从右向左编号）

记住，选择合适的列表类型不仅关乎视觉效果，更关乎内容的结构和意义。良好的列表使用习惯会让你的代码更易维护，内容更易访问，最终为用户提供更好的体验。