HTML无原生代码折叠功能，分编辑器源码折叠（依赖编辑器设置与标签闭合）和网页运行时折叠（推荐<details><summary>或max-height+JS动态计算）。
HTML 本身不提供代码折叠功能，所谓“HTML 做代码折叠”实际指两类完全不同的事：一是编辑器里对 HTML 源码做折叠（开发时用），二是网页中让用户看到可折叠的内容（运行时用）。混淆这两者是绝大多数人踩坑的起点。
编辑器里的 HTML 代码折叠怎么开
这是纯编辑器功能，和 HTML 语法无关。VS Code、Sublime Text、WebStorm 等都默认支持，但常因设置关闭或标签嵌套过浅被忽略。
- 确保
html语言模式已激活（右下角状态栏显示 “HTML”，不是 “Plain Text”） - 检查设置里
"editor.folding": true和"editor.foldingStrategy": "indent"或"syntax"—— 后者更准，能识别<div>、<script>等标签对 - 若某段没折叠标记，大概率是缩进不一致（混用了空格和 Tab）或标签未闭合（
<ul>缺</ul>） - 快捷键：
Ctrl + Shift + [（折叠）、Ctrl + Shift + ]（展开），光标必须在对应标签内部才生效
网页里实现用户可见的折叠面板
别写 display: none 切换——它没有动画、不平滑、语义差。现代方案只有两个靠谱路径：
- 用原生
<details><summary>：零 JS、键盘可用、屏幕阅读器友好，但不能加 height 过渡，样式定制受限（比如 Safari 不支持summary::marker） - 用
max-height+overflow: hidden+ JS 动态设高度：唯一能做出“滑动展开”效果的方式，但必须避免硬编码max-height: 500px—— 内容变长就截断
正确做法是 JS 中先设 max-height 为 element.scrollHeight，再触发 offsetHeight 强制重排，最后加 opacity: 1。顺序错一步，动画就卡住或闪现。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
为什么 max-height 动画总失效
常见错误不是写法不对，而是漏了关键约束：
-
max-height的终点值不能是auto，但也不能随便写个大数（比如9999px）—— 会导致动画时间固定，短内容也拖沓 - 必须同时声明
overflow: hidden，否则内容会撑出容器边界 - 过渡属性要显式写
transition: max-height 0.3s ease, opacity 0.3s ease，而不是transition: all，后者容易触发重排影响性能 - 不要给元素设
display: none—— 它会让scrollHeight返回 0，后续所有计算全错
表格行、搜索框、图片这些特殊场景
它们本质还是“内容容器 + 触发器”，但 DOM 结构和 CSS 布局有强耦合：
- 表格行折叠：必须用
nextElementSibling找到紧跟的<tr>，且该行需设display: table-row（不能用block），否则破坏表格渲染流 - 搜索框折叠：优先用
transform: scaleY()+visibility，比 height 更轻量，不占文档流空间 - 图片折叠：别直接操作
<img>的src，用父容器控制显隐；否则加载中断、宽高塌陷、SEO 友好性丢失
最易被忽略的是：所有 JS 控制的高度动画，都要考虑 padding、border、line-height 对 scrollHeight 的影响——它不包含 margin，但包含 padding，而某些字体渲染会让实际高度浮动 1–2px。
