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