HTML可用<details>与<dl>组合实现语义化可折叠定义列表，<summary>作标题控件，<dl>承载术语与解释，支持多组独立展开、默认展开（open属性）、现代浏览器原生支持，且语义优于<ul>/<ol>。
HTML 本身没有内置的“折叠面板”功能，但可以用 <dl>（定义列表）配合 HTML5 的 <details> 和 <summary> 标签，实现语义清晰、可折叠的定义列表结构。
用 <details> + <dl> 构建可折叠定义列表
<details> 是原生支持展开/收起的语义化标签，<summary> 作为其第一子元素，自动成为折叠控件。把 <dl> 放在 <details> 内部，就能让整组术语与解释具备折叠能力：
<details>
<summary>常见前端术语</summary>
<dl>
<dt>DOM</dt>
<dd>文档对象模型，浏览器解析 HTML 后生成的树状结构</dd>
<dt>BOM</dt>
<dd>浏览器对象模型，提供操作浏览器窗口的接口</dd>
</dl>
</details>
支持多个独立折叠项（手风琴效果）
每个 <details> 默认独立控制，无需 JS 就能实现多组可切换的定义列表：
- 重复使用
<details>包裹各自的<dl> - 所有
<details>默认收起；点击任一<summary>只展开对应内容，不影响其他项 - 如需默认展开，给
<details>添加open属性：<details open>
样式微调与兼容性注意
<details> 在现代浏览器中支持良好（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），IE 完全不支持。如需兼容 IE，需搭配 JS polyfill 或降级为 JS 驱动的折叠逻辑。
立即学习“前端免费学习笔记（深入）”；
常用样式调整方式：
- 隐藏默认箭头（部分浏览器）：
summary::marker { content: "" } - 自定义展开图标：用
background-image或伪元素添加 + / − 图标 - 控制
<dl>内边距/行高，提升可读性，例如dl { margin-top: 0.5em; }
为什么不用 <ul> 或 <ol>？
<dl> 是唯一语义上表示「术语–定义」关系的标签，比用 <ul> 套 <div> 更利于无障碍访问（屏幕阅读器能正确识别术语与解释的关联），也更利于 SEO 和代码可维护性。折叠只是交互增强，不应牺牲语义结构。
