标签不支持嵌套展开同步，多级大纲需js手动处理祖先展开；应为语义化标题而非操作提示；初始open状态需js设置并配合localstorage持久化；css定制需保留焦点样式。
details 标签本身不支持嵌套展开状态同步
直接用 <details></details> 做课程大纲，最常踩的坑是：子章节展开时，父章节不会自动打开。浏览器原生不维护层级关系，<details></details> 之间完全独立。这意味着「第2章 → 2.3节」展开后，「第2章」仍处于折叠态——用户得点两次才能看到内容。这不是 bug，是规范行为。
实操建议：
- 若只需单层大纲（如平铺所有小节），直接用
<details><summary>标题</summary>内容</details>
- 若需多级折叠（章→节→小节），必须用 JavaScript 手动监听
toggle 事件，向上遍历并展开所有祖先 <code><details></details> - 避免在
<summary></summary>里放<button></button>或<input>，会干扰默认展开逻辑
summary 标签里的内容会被读屏器当作标题朗读
这对可访问性是好事，但容易被忽略的是：如果 summary 文本写成「点击展开」这类无意义提示，视障用户就失去了结构信息。课程大纲里，<summary></summary> 应该是真实章节标题，比如
<summary>3.2 HTTP 状态码详解</summary><p>实操建议：</p>
- 不要在
<summary> 末尾加「▶」「▼」等图标——CSS 可以用 <code>::marker或list-style控制，语义更干净 - 需要图标时，用
aria-hidden="true"包裹，防止读屏器重复播报 - 避免把整个课程介绍塞进
<summary></summary>，长度超过 1 行会影响移动端点击热区
Chrome 和 Safari 对 open 属性的初始状态处理不一致
给 <details open></details> 写死属性，在 Chrome 中首次加载会显示展开；但在 Safari（尤其是 iOS）中，如果页面从缓存恢复或导航返回，open 属性可能被忽略，导致本该展开的章节意外收起。
实操建议：
- 不要依赖 HTML 属性控制初始展开态，改用 JS 在
DOMContentLoaded后显式设置element.open = true - 如果要记住用户上次操作，用
localStorage存每个<details></details>的 id 和 open 状态，加载时还原 - 避免用
open=""（空字符串），部分旧版 Edge 会误判为 false
用 CSS 覆盖默认箭头时，别破坏焦点样式
很多人用 summary::marker { content: "▸"; } 替换默认三角，但忘了 <summary></summary> 是可聚焦元素。键盘用户按 Tab 进入时，需要清晰的 outline，否则无法判断当前聚焦在哪一章。
实操建议：
- 保留
outline或改用box-shadow实现高对比度焦点环 - 用
summary:focus-visible { outline: 2px solid #0066cc; }更精准控制 - 不要用
appearance: none彻底移除所有默认样式，会导致某些 Linux 桌面环境失去折叠指示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
