多级引用框不能用嵌套<blockquote>实现，应使用<ol>+CSS counter实现编号层级或<details>实现可折叠嵌套，且子元素必须严格位于父元素内部，DOM嵌套位置决定逻辑层级。
多级引用框不是用 嵌套出来的
很多人一上来就写 <blockquote><blockquote>...</blockquote></blockquote>，结果发现缩进没变、语义混乱、屏幕阅读器读成“引用里再引用”，其实这不是标准用法。<blockquote> 本身不支持层级语义，浏览器也不会自动加编号或视觉层级；它只是表示“这段内容引自别处”，嵌套两次等于“引用里又引了一次”，和目录结构完全无关。
真正需要多级引用框（比如文档中带编号的条款引用、法律条文逐级展开），得靠 <ol> + CSS counter，或者用 <details> 实现可折叠的视觉嵌套——前者保语义和编号，后者保交互和可访问性。
- 别用
<blockquote>模拟目录或编号列表，它不提供层级计数能力 -
<blockquote>可以包裹段落、列表甚至其他<blockquote>，但 DOM 层级 ≠ 逻辑层级 - 如果真要引用嵌套（如“甲引用乙，乙又引用丙”），应靠 cite 属性和
<footer>标注来源，而非靠嵌套深度表达关系
用 实现带 A.1、B.2.1 编号的多级引用结构
要让 HTML 输出类似“第二章 → 第二节 → 第三点”这种编号，必须用 <ol> 正确嵌套，并配合 CSS counter 控制格式。浏览器默认的 type="A" 或 type="1" 只作用于单层，子 <ol> 会重置计数——除非你手动接管。
关键点：子 <ol> 必须是父 <li> 的直接子元素，不能放在外面，也不能塞进 <div> 里隔开。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<li>条款一</li><ol><li>子条款</li></ol>—— 子<ol>脱离了父<li>，计数断掉 - 正确写法：
<li>条款一<ol><li>子条款</li></ol></li> - 编号连续靠 CSS：
ol { counter-reset: section; } li { counter-increment: section; } li::before { content: counters(section, ".") ". "; }
是最省事的可折叠多级引用容器
如果你只是想让用户点一下展开下级条款（比如“第3条”点开看到“3.1”“3.2”），<details> 是原生、无障碍、无需 JS 的解法。它不生成编号，但结构清晰、键盘 Tab 可进入、屏幕阅读器能识别父子关系。
注意：嵌套必须写在 <summary> 内部，不能并列放多个 <details>。
- ✅ 正确：
<details><summary>第三条</summary><details><summary>3.1 适用范围</summary><p>……</p></details></details> - ❌ 错误：
<details><summary>第三条</summary></details><details><summary>3.1</summary></details>—— 这是平级，不是嵌套 - 别加
open属性全局展开，用户可能只想看某一层；hover 展开需额外 JS，<details>原生只响应点击
路径错乱？加
多级引用结构常伴随跳转，比如从 /docs/chapter3.html 点链接跳去 /docs/appendix/a1.html。手写相对路径容易出错：../appendix/a1.html 移动文件后就 404。
解决办法是在 <head> 加一行：<base href="/docs/">。之后所有 href、src 都按根路径写，比如 href="appendix/a1.html"。
- 结尾斜杠不能少：
/docs/≠/docs，后者会导致路径解析异常 -
<base>影响整页所有相对 URL，包括<img src>、<script src> - 本地用
file://协议时<base>不生效，必须起本地 server（如npx serve）测试
<ol> 或 <details> 没卡在父 <li> 或 <summary> 里面，整个层级关系就失效了。验证方法永远只有一条：右键 → “检查”，看元素是否真在父标签内部。 
