<summary>标签必须嵌套在<details>内才有效，作为其首个子元素定义可折叠标题，点击触发展开/收起；单独使用无效，且需注意Safari兼容性及手风琴等复杂交互应改用ARIA方案。
summary 标签必须嵌套在 details 里才能生效
<summary> 不是独立可用的标签，它只在 <details> 内部起作用，用来定义可折叠区域的标题行。浏览器会自动为 <details> 添加展开/收起逻辑，而 <summary> 就是那个能被点击、带小三角箭头的触发器。
常见错误是单独写 <summary>点我展开</summary>，这样完全没效果——它会被当成普通内联元素渲染，无交互、无样式、不联动。
-
<details>是块级容器，支持open属性（默认收起，加open则初始展开） -
<summary>必须是<details>的第一个子元素，否则部分浏览器可能忽略或报错 - 一个
<details>只能有一个<summary>；多写第二个会被当作普通内容，失去标题功能
summary 里的内容可以是任意 HTML，但慎用交互元素
虽然规范允许在 <summary> 中写 <span>、<strong>、甚至 <button>，但要注意：点击 <summary> 整体都会触发展开/收起，如果里面嵌了 <button> 或 <a>，容易造成事件冲突或误操作。
推荐做法是保持简洁，用纯文本或轻量级内联标签。需要图标或状态提示时，优先用 CSS 伪元素（如 ::before）控制，而不是塞进 HTML。
立即学习“前端免费学习笔记（深入）”；
<details> <summary><strong>配置说明</strong>（点击展开）</summary> <p>这里放详细内容……</p> </details>
details + summary 在 Safari 和旧版 Edge 中有兼容性坑
Chrome / Firefox / 新版 Edge 支持良好，但 Safari（尤其 iOS 15.4 之前）对 <summary> 的点击热区处理较窄，有时需精确点在文字上才响应；旧版 Edge（EdgeHTML）根本不支持，会直接降级为静态内容。
如果目标用户包含大量 iOS 老版本或需兼容 IE，不要依赖原生行为，应改用 JS 模拟（例如监听 click、切换 aria-expanded 和 class），并补全 ARIA 属性：
- 给
<summary>加role="button"和aria-expanded="false" - 手动控制
<details>内容的display或hidden状态 - 确保键盘可访问：支持
Enter和Space触发展开
不要用 details/summary 替代手风琴组件做复杂交互
多个 <details> 并列时，浏览器默认各自独立开关，无法实现“单开一栏、其余自动关闭”的手风琴效果。强行用 JS 监听所有 toggle 事件再手动 close 其他项，会破坏原生语义和可访问性。
若业务明确需要手风琴，更稳妥的做法是：
- 用
<section>+<h3>+<div>结构，配合 JS 控制aria-expanded和hidden - 复用成熟的 ARIA Authoring Practices 模式（如 W3C Accordion 示例）
- 避免为了“语义化”硬套
<details>，反而让屏幕阅读器困惑
原生 <details> 的价值在于简单、免 JS、开箱即用——用在 FAQ 条目、调试信息折叠、表单高级选项这类场景刚好；一上来就塞进动态表单、嵌套列表或实时搜索结果，很快就会卡住。
