标签必须嵌套在内才有效，作为其首个子元素定义可折叠标题，点击触发展开/收起；单独使用无效，且需注意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>，反而让屏幕阅读器困惑
原生 ::before 的价值在于简单、免 JS、开箱即用——用在 FAQ 条目、调试信息折叠、表单高级选项这类场景刚好；一上来就塞进动态表单、嵌套列表或实时搜索结果，很快就会卡住。
<details> <summary><strong>配置说明</strong>（点击展开）</summary> <p>这里放详细内容……</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </details>
