HTML列表标签怎么制作文章目录结构的嵌套列表

作者：袖梨 2026-09-05

在前端开发内容学习中，HTML列表标签怎么制作文章目录结构的嵌套列表是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

HTML目录必须语义正确：子ul/ol必须作为父li的直接子元素；多级编号用CSS counters实现；四层以上推荐details/summary或树形组件；链接路径统一用base href="/"管理。

用 HTML 列表做文章目录，关键不是“看起来像目录”，而是结构语义正确——浏览器、屏幕阅读器、SEO 和键盘导航都依赖这个结构。核心就一条：子列表必须完整写在父级 li 标签内部，否则层级就断了。

嵌套结构必须严格满足“ul/ol 在 li 里”

错误写法（常见）：把子 <ul> 写在父 </li> 之后、同级位置，或者塞进 <div> 里再放进去——这在 DOM 中是平级关系，不是父子关系。后果：JS 找不到父项、aria-expanded 失效、Tab 键跳不过去、读屏软件读作“两个独立列表”。

正确写法只有一种：子 <ul> 或 <ol> 必须是父 <li> 的直接子元素：

第一章
- 第一节
- 第二节
第二章
- 引言
- 核心方法

有序目录要显示 1.1、2.3.1？必须用 CSS counter

HTML 原生 <ol> 不支持跨层编号继承。哪怕你写三层 <ol type="1"><ol type="a"><ol type="i">，浏览器也只按当前层重置计数，不会自动拼出 “2.3.1”。

可靠方案是用 CSS 计数器：

给最外层 <ol class="toc"> 设置 counter-reset: sec
每层 <li> 触发 counter-increment: sec
用 ::before + counters(sec, ".") 生成带分隔符的编号

例如：

ol.toc { counter-reset: sec; }
ol.toc > li { counter-increment: sec; }
ol.toc > li::before { content: counters(sec, ".") ". "; }
ol.toc ol { counter-reset: sub; }
ol.toc ol > li { counter-increment: sub; }
ol.toc ol > li::before { content: counters(sec, ".") "." counters(sub, ".") " "; }