本文全面解析 HTML 中无序列表 <ul> 与有序列表 <ol> 的语义区别、正确的 DOM 结构、浏览器默认渲染机制、CSS 自定义技巧、可访问性实践、响应式与打印适配，以及开发中常见的坑与解决方案。通过丰富的代码示例与实用速查表，帮助前端开发者深入理解并规范使用列表元素。

在 HTML 的世界里，<ul> 和 <ol> 是最简单也最容易被低估的元素。许多开发者只把它们当作“加点圆点或数字的容器”，却忽略了它们所承载的结构语义、可访问性价值以及严格的嵌套规则。  

本文将带你重新认识这两个基础元素，从语义本质 → 正确结构 → 渲染机制 → 样式控制 → 可访问性 → 实战技巧六个维度，系统梳理无序列表与有序列表的正确用法，帮助你写出更健壮、更专业的前端代码。

一、语义：它们表达“关系”，而不是“样式”

核心原则：语义由 HTML 元素本身决定，而非视觉表现。

即使你用 CSS 将 <ol> 的编号改为圆点，它在语义层面依然是“有序列表”，屏幕阅读器依然会按顺序朗读。

二、DOM 结构：严格遵循嵌套规则

标准结构

<ul>  <li>苹果</li>  <li>香蕉</li></ul><ol>  <li>第一步：打开冰箱</li>  <li>第二步：放入大象</li></ol>

多级列表（嵌套）

<ol>  <li>    前端基础    <ul>      <li>HTML</li>      <li>CSS</li>    </ul>  </li>  <li>    框架    <ul>      <li>React</li>      <li>Vue</li>    </ul>  </li></ol>

错误嵌套示例

<!-- 错误：ul 不能直接嵌套在 ul 下 --><ul>  <ul>    <li>错误写法</li>  </ul></ul><!-- 错误：列表的直接子元素必须是 li --><ul>  <div>这不是合法的列表项</div></ul>

核心规则

• <ul> 和 <ol> 的 直接子元素只能是 <li>。

• 嵌套列表必须放在 <li> 内部。

三、<li>：列表的“原子单元”

<li> 是列表的最小组成单位，每个条目都应用 <li> 包裹。这样做的好处包括：

• 语义明确：屏幕阅读器可准确识别“列表项”。

• 样式可控：便于通过 CSS 统一控制间距、标记等。

• 交互友好：便于 JavaScript 进行增删改查操作。

常见错误：用 <div> + 换行模拟列表，或用 <br> 手动分行，都会导致语义丢失、可访问性受损。

四、编号与符号：HTML 属性与 CSS 的分工

浏览器默认渲染

HTML 属性（仅 <ol>有效）

<!-- 从指定数字开始 --><ol start="3">  <li>第三项</li>  <li>第四项</li></ol>

<!-- 倒序 --><ol reversed>  <li>第三项</li>  <li>第二项</li>  <li>第一项</li></ol>

<!-- 指定某一项的值 --><ol>  <li value="10">第十项</li>  <li>第十一项</li></ol>

CSS 控制（推荐方式）

/* 修改标记样式 */ul {  list-style-type: square;}ol {  list-style-type: upper-roman;}

/* 完全自定义标记（使用伪元素） */ul.custom {  list-style: none;  padding-left: 0;}
ul.custom li {  padding-left: 1.5em;  position: relative;}
ul.custom li::before {  content: "✓";  position: absolute;  left: 0;  color: green;}

/* 现代 CSS 增强：使用 ::marker 控制标记样式 */li::marker {  color: red;  font-size: 1.2em;}

提示：::marker 仅支持部分样式（如 color、font-size、content），但比伪元素方案更简洁。

五、布局与对齐：处理缩进与间距

浏览器默认会给列表添加左内边距（padding-left），以容纳标记符号。开发中常用以下方式调整：

/* 恢复列表无缩进，但保留标记 */ul, ol {  padding-left: 1.2em;  /* 保留合适空间 */}

/* 完全移除缩进并自定义标记位置 */ul.clean {  list-style: none;  padding-left: 0;}ul.clean li {  padding-left: 1.2em;  position: relative;}

响应式适配：在小屏幕下，可适当减小左内边距，保证内容完整显示。

六、可访问性（A11Y）：为所有人设计

屏幕阅读器（如 NVDA、VoiceOver、TalkBack）对列表的朗读方式如下：

• <ul>：朗读为“列表，共 n 项”，每个 <li> 前提示“列表项”。

• <ol>：朗读为“有序列表，共 n 项”，并播报当前序号。

最佳实践

1. 语义优先：真正有顺序的内容使用 <ol>，不要为了样式改用 <ul>。

2. 保持结构完整：列表项内容尽量保持语义单一，避免在 <li> 中嵌套过深的复杂布局。

3. 提供替代信息：若使用 list-style: none，应通过文本或伪元素保留序号/层级信息。

4. 辅助属性（可选）：在复杂列表中可使用 role="list"、aria-label 增强语义。

<ol aria-label="蛋糕制作步骤">  <li>准备材料</li>  <li>混合搅拌</li></ol>

七、响应式与打印：额外考量

响应式列表

• 在移动端，可将横向列表改为纵向，通过媒体查询调整 flex 或 grid 布局。

• 注意标记与文本的间距，避免符号与文字重叠。

打印样式

默认情况下，浏览器打印时会保留列表标记。但若你使用 list-style: none 并自定义了伪元素，打印时伪元素可能无法正常显示。

建议在打印样式中恢复标记：

@media print {  ul, ol {    list-style-type: inherit;  /* 恢复默认标记 */  }  .custom-list {    list-style-type: disc;  /* 强制使用圆点 */  }}

八、常见坑与解决方案（速查表）

总结

<ul> 与 <ol> 是 HTML 中语义明确、结构严谨的基础元素。正确使用它们，不仅能让代码更规范、更易维护，还能显著提升网站的可访问性与用户体验。

三个核心原则：

1. 语义优先：有序用 <ol>，无序用 <ul>。

2. 结构正确：<ul> / <ol> 下只放 <li>，嵌套列表放 <li> 内部。

3. 样式分离：用 CSS 控制视觉，保留 HTML 语义。

进阶技巧：

• 利用 ::marker 精细控制标记样式。

• 响应式与打印样式不可忽视。

• 为屏幕阅读器补充 aria-label 增强语义。

掌握这些原则与技巧，你将不再把列表当作简单的“样式工具”，而是真正理解其作为 信息结构组件 的价值，写出更专业、更健壮的前端代码。

阅读原文：原文链接