应使用 <dl> 构建术语表主体，<details> 仅作外层整体折叠容器；每个术语用 <dt>，定义用 <dd>，避免为每个术语单独包裹 <details>。
<details> 本身不适用于术语表；它适合单条可展开的说明，不是结构化术语列表。真要做术语表，该用 <dl> + <dt> + <dd>，再用 <details> 套在外面实现整体折叠——但别反着来。
为什么不能直接用 <details> 做术语表
常见错误是把每个术语都包一层 <details>：<details><summary>API</summary><p>应用程序编程接口...</p></details>。这会导致几个问题：
- 语义错乱：
<details>表达的是“补充细节”，不是“术语定义”；屏幕阅读器会读作“可展开的细节”，而非“术语：API” - SEO 损失：搜索引擎无法识别这是术语-定义关系，
<dl>才是标准语义标记 - 样式失控：多个
<details>并列时，margin、padding和焦点管理容易打架，尤其在键盘导航下 - 无法批量控制：你想默认展开所有术语？得给每个
<details>加open属性，而不是统一操作一个容器
正确组合：用 <dl> 做主体，<details> 做外层开关
术语表本质是“一组术语及其解释”，<dl> 是唯一语义正确的容器。若想支持“一键收起全部”，只需把整个 <dl> 包进一个 <details>：
<details>
<summary>点击查看全部术语</summary>
<dl>
<dt>API</dt>
<dd>应用程序编程接口，用于不同软件模块之间交换数据和调用功能。</dd>
<dt>DOM</dt>
<dd>文档对象模型，浏览器将 HTML 解析成的树状 JavaScript 对象结构。</dd>
</dl>
</details>
这样既保留了术语表的语义结构，又提供了整体折叠能力。注意：<summary> 必须是 <details> 的**第一个且唯一直接子元素**，<dl> 要紧接其后，中间不能插 <p> 或其他标签。
立即学习“前端免费学习笔记（深入）”；
样式修复：避免 <dd> 塌陷和图标错位
浏览器默认对 <dd> 设了 margin-inline-start（通常 40px），但很多 CSS 重置（如 Normalize.css）会清掉它，导致术语和解释挤在一起。修复只需一行：
dd { margin-inline-start: 1.5em; }
同时，自定义 <summary> 图标时，别用 list-style: none 粗暴清除原生 marker——它会影响可访问性。推荐用伪元素精准替换：
summary::marker { content: "▸ "; }
details[open] > summary::marker { content: "▼ "; }
关键点：
- 不要写
summary { display: block; }—— 它本就是display: list-item，改了可能让::marker失效 - 别给
<summary>加pointer-events: none，否则点击无反应 - 若需禁用某处折叠，不要加
disabled（<details>不支持该属性），而是移除<summary>或用 JS 阻止toggle事件
兼容性兜底：Firefox/Chrome/Safari 都支持，IE 不行
截至 2026 年，<details> 在 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+ 中已稳定支持。但 IE 完全不识别，降级方案很简单：不加 <details>，只留 <dl>，视觉上就是常开展开状态——术语表本来也不该依赖折叠才可读。真正要警惕的是旧版 Android WebView（尤其 4.4 及更早），那里 <details> 可能渲染异常或完全不响应，建议用 Modernizr.details 检测后决定是否包裹。
最易被忽略的一点：当 <dl> 内部有多个 <dd>（比如一个术语分两段解释），必须确保它们连续紧跟在同一个 <dt> 后面，中间不能插入其他标签——否则语义断裂，部分读屏器会误判为下一个术语的开始。
