多级列表需用或在内嵌套实现，禁止直接子元素嵌套；须闭合每个，用css控制缩进、符号类型及语义可访问性。
用 <ul></ul> 和 <ol></ol> 嵌套实现多级列表
HTML 本身不提供“多级列表”专用标签，所有层级都靠 <ul></ul> 或 <ol></ol> 在 <li> 内部再次嵌套来实现。浏览器会自动缩进、加序号或项目符号，但样式细节（比如缩进量、符号类型）得靠 CSS 控制。
常见错误是把 <ul></ul> 直接放在 <ul></ul> 外层（没包在 <li> 里），这会导致 HTML 结构非法，解析后层级丢失或渲染错乱。
- 必须保证每个嵌套的
<ul></ul>或<ol></ol>都位于某个<li>元素内部 - 可以混用
<ul></ul>和<ol></ol>，比如外层编号、内层圆点，没有限制 - 嵌套深度没有硬性上限，但超过 4–5 层易影响可读性和屏幕阅读器体验
避免 <li> 闭合遗漏导致的层级错位
手写嵌套时最容易漏掉 ，尤其在多层 <ol></ol> 里。一旦某个 <li> 没闭合，后续所有嵌套都会被浏览器“自动修正”，结果常是：最后一级内容跑到最外层、序号重置、缩进消失。
例如下面这段有问题的代码：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<ol>
<li>第一项
<ul>
<li>子项一
</li>
<li>子项二 <!-- 缺少 </li> -->
</li>
</ul>
</li>
<li>第二项 <!-- 这个 <li> 实际被当成上一级的延续 -->
</li>
</ol>
修复方式很简单：每写一个 <li> 就立刻补上 ，或者用编辑器开启标签自动闭合和配对高亮。
用 CSS 控制嵌套层级的视觉表现
默认缩进由浏览器 UA 样式决定，各浏览器不一致，且无法精确控制。要统一外观，必须显式设置 margin-left 或 padding-left，并注意 list-style-position 对符号对齐的影响。
- 用
margin-inline-start（推荐）替代margin-left，支持 RTL 文本方向 - 为不同层级设置不同
list-style-type，比如：ol { list-style-type: decimal; }，ol ol { list-style-type: lower-alpha; } - 若需自定义符号（如 ▸、»），改用
list-style: none+::marker伪元素，但注意 Safari 对::marker的支持仍有限
语义与可访问性不能只靠缩进
纯靠 CSS 缩进无法传达层级关系给屏幕阅读器。必须确保 HTML 结构正确 —— 每层嵌套都真实存在于 DOM 中，且 <li> 是唯一合法的父容器。
容易被忽略的一点：不要用 <div> 包着 <code><ul></ul> 来“模拟”嵌套，这会切断语义链。同样，也不要为了省事把多级内容压成单层 <li> 再用 <br> 换行 —— 这样对键盘导航和语音朗读完全不可用。
复杂层级如果还涉及交互（如展开/收起），就得额外加 ARIA 属性（aria-expanded、aria-controls），但那是另一层问题了。
