html可用与组合实现语义化可折叠定义列表，作标题控件，承载术语与解释，支持多组独立展开、默认展开（open属性）、现代浏览器原生支持，且语义优于/。

HTML 本身没有内置的“折叠面板”功能，但可以用 <dl></dl>（定义列表）配合 HTML5 的 <details></details> 和 <summary></summary> 标签，实现语义清晰、可折叠的定义列表结构。

用

+

构建可折叠定义列表

<details></details> 是原生支持展开/收起的语义化标签，<summary></summary> 作为其第一子元素，自动成为折叠控件。把 <dl></dl> 放在 <details></details> 内部，就能让整组术语与解释具备折叠能力：

<details><summary>常见前端术语</summary><dl>
<dt>DOM</dt>
    <dd>文档对象模型，浏览器解析 HTML 后生成的树状结构</dd>
    <dt>BOM</dt>
    <dd>浏览器对象模型，提供操作浏览器窗口的接口</dd>
  </dl></details>

支持多个独立折叠项（手风琴效果）

每个 <details></details> 默认独立控制，无需 JS 就能实现多组可切换的定义列表：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 重复使用 <details></details> 包裹各自的 <dl></dl>
• 所有 <details></details> 默认收起；点击任一 <summary></summary> 只展开对应内容，不影响其他项
• 如需默认展开，给 <details></details> 添加 open 属性：<details open></details>

样式微调与兼容性注意

<details></details> 在现代浏览器中支持良好（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），IE 完全不支持。如需兼容 IE，需搭配 JS polyfill 或降级为 JS 驱动的折叠逻辑。

常用样式调整方式：

• 隐藏默认箭头（部分浏览器）：summary::marker { content: "" }
• 自定义展开图标：用 background-image 或伪元素添加 + / − 图标
• 控制 <dl></dl> 内边距/行高，提升可读性，例如 dl { margin-top: 0.5em; }

为什么不用

或

？

<dl></dl> 是唯一语义上表示「术语–定义」关系的标签，比用 <ul></ul> 套 <div> 更利于无障碍访问（屏幕阅读器能正确识别术语与解释的关联），也更利于 SEO 和代码可维护性。折叠只是交互增强，不应牺牲语义结构。</div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！