html代码质量迁移本质是语义与结构重构，而非格式美化；需将div id="header"改为、相对路径转根路径、内联脚本提取为json script，并谨慎配置html minifier以避免hydration失败和seo问题。
HTML 代码质量迁移不是格式重排，而是语义与结构的重构
直接用 Prettier 或 HTML Tidy “美化”旧 HTML 文件，只会让问题更隐蔽。真正影响长期可维护性的，是标签语义错用、属性滥用、嵌套混乱和路径硬编码——这些在压缩后反而更难排查。
迁移时优先处理三类高风险结构：
<div id="header"> → 必须改为 <code><header></header>，否则 CSS 和辅助技术无法识别语义层级-
<img src="images/logo.png">→ 所有相对路径必须转为根路径或环境变量占位符（如/static/images/logo.png），否则构建产物部署到子路径时 404 -
<script>var config = {...}</script>→ 内联脚本中的 JSON 数据必须提取为<script type="application/json" id="app-config"></script>，避免 JS 解析失败或 CSP 拦截
HTML Minifier 配置升级后最常踩的坑：collapseWhitespace 和 removeOptionalTags
升级到 html-minifier@4.0.0 后，collapseWhitespace: true 默认不启用，但一旦开启，会把 <p>Hello<br>World</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 压成 <p>HelloWorld</p>——<br> 被当作空白吞掉，视觉断行消失。
removeOptionalTags: true 更危险：它会删掉 、
