直接用 <details> + <summary> 实现可折叠特性展示区，语义清晰、无障碍友好、现代浏览器全支持；无需JS手写toggle逻辑，原生支持键盘操作、焦点管理与ARIA状态同步。
直接用 <details> + <summary> 就能做出可折叠的特性展示区，不需要 JS，语义清晰、无障碍友好、现代浏览器全支持。
为什么不用 div + JS 模拟展开收起
手写 toggle 逻辑容易漏掉键盘支持（比如回车/空格触发）、焦点管理（展开后焦点没落到内容首元素）、读屏器状态同步（ARIA expanded 和 hidden 属性要手动维护）。而 <details> 原生就处理了这些：按空格或回车可切换、自动管理 aria-expanded、焦点在 <summary> 上、屏幕阅读器会播报“已折叠/已展开”。
- IE 完全不支持
<details>，但 IE 市场份额已趋近于零，多数项目可忽略 - 若需兼容旧环境，可用 details-polyfill，但注意它依赖 JS 启动，初始 HTML 不会渲染内容
- 不要给
<summary>加tabindex—— 它默认可聚焦，加了反而可能破坏原生行为
如何控制默认展开和样式重置
<details> 默认关闭，加 open 属性即默认展开；CSS 上需重置浏览器默认的三角图标和列表样式，否则在不同浏览器中显示不一致。
- 必须把
<summary>作为<details>的第一个子元素，否则语义断裂，部分读屏器无法识别 - 清除默认箭头：
summary::marker { content: "" }或summary { list-style: none } - 避免用
display: block覆盖<summary>的原生 display（它是list-item），改用display: flex或display: grid更安全 - 内容区默认有上下 margin，可用
details > *:not(summary) { margin-top: 0 }统一归零
特性项怎么组织才利于 SEO 和维护
每个特性应是独立语义单元，推荐用 <section> 包裹一组相关特性，内部用 <details> 分条展开；避免把所有特性塞进一个 <details> 里 —— 那样失去“逐条查看”的意义，也影响大纲层级。
立即学习“前端免费学习笔记（深入）”；
- 每个
<details>内部的<summary>必须是短标题（如“双模降噪”“IP68 防水”），不宜带段落或按钮 - 详细说明用
<p>、<ul>或<figure>（配图时），别用<div>套一堆无语义标签 - 如果特性含代码片段，用
<pre><code>，别用<blockquote>或<p>模拟 - 不要为了“视觉统一”把所有
<summary>设成相同宽度 —— 文字长度差异大时会导致右侧留白难看，用flex: 0 0 auto更自然
真正容易被忽略的是响应式下的交互反馈：小屏点击区域变小，<summary> 默认 padding 不足，建议加 padding: 12px 16px 并设 min-height: 48px 保证触控友好；另外，别在 <details> 上写 height: 0; overflow: hidden 动画 —— 原生行为不支持 CSS 过渡，强行加会破坏可访问性。
