压缩html还原需用语法解析器（如beautify、beautifulsoup），禁用正则替换；vs code格式化失效先查后缀、语言模式和"html.format.enable":true；在线工具须跳过script/style内容；pre标签需占位符处理并加white-space:pre-wrap。
压缩后的 HTML 能直接还原成可读的缩进结构，但不是所有工具都靠谱——关键看它用的是语法解析器（如 js-beautify、cheerio 或 BeautifulSoup），还是简单正则替换。后者会把 <script>console.log("<div>")</script> 里的引号也当标签处理，直接崩掉。
VS Code 按 Shift + Alt + F 没反应？先确认这三件事
快捷键失效不是格式化功能坏了，而是编辑器根本没识别成 HTML 文档：
-
文件后缀必须是.html或.htm，否则语言服务不加载 - 右键编辑区空白处，菜单里要有“格式化文档”；没有就按
Ctrl + Shift + P输入Change Language Mode，手动选HTML - 打开
settings.json，确认有"html.format.enable": true，缺了这句等于关着开关
在线工具还原 HTML，为什么 <script></script> 和 <style></style> 里的代码全乱了？
很多在线工具默认对所有文本做统一缩进，包括 <script></script> 内部的 JS 代码——结果 if (a d) 被当成 HTML 标签拆开缩进，语法直接报废。
实操建议：
- 优先选支持“保留 script/style 原始内容”的工具，比如 beautifier.io，它默认跳过
<script></script>和<style></style>内部 - 如果必须用 freeformatter.com 这类，粘贴后先勾选
Don't format content inside <script> and <style> tags</script>（如有） - 还原后务必检查
<script></script>是否还能执行：复制一段到浏览器控制台跑一下typeof xxx看有没有 SyntaxError
用 tidy 或 Prettier 批量处理时，<pre class="brush:php;toolbar:false;"></pre> 里的缩进全没了
<pre class="brush:php;toolbar:false;"></pre> 本身保留空格和换行，但格式化工具常把它当普通标签一并重排，导致里面原本对齐的 JSON 或代码块塌成一行。
解决办法分两步：
- 还原前先把
<pre class="brush:php;toolbar:false;"></pre>暂时替换成自定义占位符，比如<!-- PRE_START -->...<!-- PRE_END -->，格式化完再换回来 - 还原后给
<pre class="brush:php;toolbar:false;"></pre>加 CSS：white-space: pre-wrap，否则浏览器默认样式会让缩进视觉丢失（字体变小 + margin 压缩） - 别依赖
html.format.indentInnerHtml控制<pre class="brush:php;toolbar:false;"></pre>缩进——它只影响标签层级，不影响<pre class="brush:php;toolbar:false;"></pre>内容本身
真正容易被忽略的点是：格式化只是还原结构，不修复语义错误。比如压缩 HTML 里漏了 ，工具会强行闭合，但位置可能错；<img src="a.jpg"> 缺引号，有些工具会补，有些直接跳过。还原后一定得用浏览器 DevTools 的 Elements 面板看 DOM 树是否嵌套正确，而不是只盯源码缩进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
