HTML中实现内容折叠最简单的方法是使用<details>和<summary>标签，无需JavaScript即可原生支持展开/收起，语义清晰、键盘可访问且屏幕阅读器友好；若需平滑动画，则用max-height配合transition，避免使用不可过渡的display属性。
HTML 本身不提供“代码折叠”能力，所谓“HTML 做代码折叠”，实际是指在 HTML 页面中实现内容的展开/收起交互——不是编辑器里的语法折叠，而是运行时用户可见的折叠面板。 直接用 <details> + <summary> 就能跑通 90% 的简单需求，不需要写 JS；但若要控制动画、兼容旧浏览器、或嵌套复杂结构，就得自己搭逻辑。
用 <details> 和 <summary> 快速实现原生折叠
这是 HTML5 原生支持的语义化方案，开箱即用，键盘可访问，屏幕阅读器友好，且默认带三角指示符和基础过渡。
- 把要折叠的内容包进
<details>，标题行必须是它的第一个子元素且为<summary> - 加
open属性可默认展开：<details open><summary>配置项</summary><pre>...</pre></details> - 浏览器对
max-height或display不做动画，所以原生折叠没有滑动效果，只有显隐切换 - CSS 中可用
details[open] > summary控制展开态样式，summary::marker可隐藏/替换三角图标
用 max-height + transition 实现平滑滑动效果
当需要视觉上“滑出”“收起”的动画时，不能依赖 display: none（它无法过渡），而要用 max-height 配合溢出控制。
- 初始状态设
max-height: 0; overflow: hidden;，展开时设为一个足够大的值（如max-height: 500px） - 必须配
transition: max-height 0.3s ease-in-out;，否则无动画 - 内容高度不确定时，避免用
height: auto（不能过渡），改用预估的max-height上限值，否则动画会卡顿或失效 - JS 切换时推荐用
element.classList.toggle('open')，再由 CSS 控制状态，比内联 style 更易维护
为什么不用 display 或 visibility 做折叠动画
这是新手最常踩的坑：直接写 display: none → block 或 visibility: hidden → visible 看似简单，但会导致两个问题：
立即学习“前端免费学习笔记（深入）”；
-
display属性不可过渡，浏览器会立刻切换，没有中间帧 -
visibility虽可过渡，但元素仍占布局空间，折叠后页面留白，体验割裂 - 若内容含图片或字体加载中，
max-height方案可能因高度估算不准导致动画提前结束——此时应监听load事件后重设高度，或改用transform: scaleY()+overflow: hidden
在 Markdown 渲染页里插入折叠块要注意什么
很多静态博客（Hexo、Hugo、VuePress）支持在 Markdown 中混写 HTML，但需注意解析器是否剥离或转义 <details> 标签。
- 确保 Markdown 解析器未启用
sanitize模式，否则<details>会被过滤掉 - 不要把
<pre><code>块直接塞进<summary>—— 有些解析器会提前闭合标签，导致结构错乱 - 稳妥写法是：先写
<details><summary>点我看源码</summary>，换行后再写<pre><code class="js">... - 若部署到 GitHub Pages，确认 Jekyll 版本 ≥ 3.7（旧版默认禁用自定义 HTML）
真正难的不是写出能折叠的代码，而是判断该不该折叠、折叠多深、以及折叠后是否还保有语义和可访问性。比如把整个 API 参数表塞进一个 <details>，对屏幕阅读器用户反而更难定位字段——这时候分组 + 锚点跳转，可能比全量折叠更有效。
