结构良好的嵌套html列表核心是语义正确、层级清晰、可访问性强：子列表必须完整嵌套在li内，否则浏览器自动修复为并列列表，导致编号重置、父子关系丢失、屏幕阅读器无法识别；缩进应显式用padding-left控制，禁用text-indent；超三层嵌套须改用details/summary或tree角色等语义替代方案。
结构良好的嵌套HTML列表，核心是语义正确、层级清晰、可访问性强——不是靠CSS“看起来像”，而是靠HTML本身“就是那样”。关键不在怎么缩进，而在怎么嵌套。
必须把子列表完整写在li里面
子
- 或
- 必须作为某个
- 的直接子元素，不能和
- 平级，也不能塞进
、
或空行里。浏览器会自动“修复”非法结构，结果却是两个并列列表，编号重置、父子关系丢失、屏幕阅读器读不出嵌套。- ✅ 正确：
<li>一级项<ul><li>二级项</li></ul> </li> - ❌ 错误：
<li>一级项</li> <ul><li>二级项</li></ul>（子ul脱离li） - 验证方法：打开开发者工具，选中内层
- ，往上查父节点——必须是
- ，不能是
- 或
用CSS统一控制缩进，别依赖默认margin
浏览器默认给嵌套
- 加padding-left，但容易累加过度（三层就超120px），且被全局重置（如*{margin:0;padding:0}）后直接消失。推荐显式设置：
- 重置基础：
ul { margin: 0; padding-left: 1.5rem; } - 控制嵌套：
ul ul { padding-left: 1.5rem; }（保持缩进一致，不逐层加大） - 避免用
text-indent——它只动第一行，多行文本会错位 - 静态文档目录：用
<details><summary></summary></details>替代中间层，原生可折叠、键盘友好、无需JS - 交互菜单：用
role="tree"+aria-level+aria-expanded构建树形控件 - 纯展示内容：限制在3层以内；若业务真需更深结构（如权限树），服务端应做深度截断或扁平化处理
超过三层嵌套，优先考虑语义替代方案
第四层开始，屏幕阅读器基本无法识别层级，用户容易迷路。硬套
- 嵌套只会让无障碍支持失效。
编号类列表要用
- 并手动声明type
- 不会继承父层编号格式，A.下面不会自动变成A.1，而是从1重新开始。要实现A → 1 → a，必须每层都显式写：
<ol type="A"><li>A.<ol type="1"><li>1.<ol type="a"><li>a.</li></ol> </li></ol> </li></ol>- 超过三层编号不可靠（Safari对
type="i"可能回退为数字），建议用CSS counter实现1.1.1这类连续编号 - 不要省略
type属性——没写就按浏览器默认fallback，各平台表现不一致
- ，不能是
- ✅ 正确：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
