判断HTML是否需重构而非迁移，关键看其承载的是“内容”还是“耦合逻辑”：混有硬编码路径、内联脚本、无语义类名、未分离行为逻辑或过时元信息的，属需解耦迁移；仅结构混乱但功能稳定者，优先清洗+语义化重构更安全。
直接重构老旧 HTML 代码前，先确认它是否真需要“重写”——多数情况下，你真正要做的不是重写，而是提取、清洗、映射和集成。
怎么判断一段HTML是不是该重构而不是迁移
关键看它承载的是“内容”还是“耦合逻辑”。如果 HTML 文件里混着大量硬编码路径、内联脚本、重复的布局 div、过时的 IE 条件注释，或依赖已下线的 CDN，那它大概率属于“需解耦迁移”；如果只是结构混乱但功能稳定（比如一个纯静态产品页），优先清洗 + 语义化重构更安全。
-
document.write、eval、onload="init()"这类脚本出现在 HTML 中，说明它实际是“运行时模板”，不能直接当静态内容迁 - 存在大量
class="left-box"、class="clear-fix"等无语义类名，是语义化重构的明确信号 -
href="javascript:void(0)"或onclick="jumpTo('page2.html')"表明行为逻辑未分离，强行迁移会导致交互失效 - 若页面中
<meta name="robots" content="noindex">被批量复制到新环境，SEO 会直接归零
用 BeautifulSoup 提取内容而非复制整页
盲目 cp index.html 到新项目根目录，90% 的问题出在路径和元信息上。你应该把 HTML 当作数据源，而不是部署单元。
- 用
BeautifulSoup(html, "html.parser")加载，避免正则匹配标签——<p>A <strong>B</strong></p>用re.sub会截断为A <strong>B - 只保留
<title>、<meta name="description">、<meta property="og:title">，删掉所有<script>和<style>块 - 把
src="./images/logo.png"统一转成src="/static/images/logo.png"，再用urllib.parse.urljoin标准化绝对路径 - 提取正文时，用
soup.find("div", class_="content").decode_contents()，而不是.get_text()——后者会丢掉内联<img>和链接
语义化重构时哪些标签不能乱换
不是所有 <div> 都该换成 <section>。HTML5 语义标签有明确职责边界，误用反而破坏可访问性。
立即学习“前端免费学习笔记（深入）”；
-
<header>只用于页面顶部或章节头部，不要给每个卡片都套一个 -
<nav>必须包裹一组导航链接，单独一个<a>不构成<nav> -
<main>每个页面只能有一个，且不能嵌套在<article>或<section>内 -
<aside>不等于“侧边栏 CSS 类”，它表示与主内容相关但可独立存在的内容（如引用、术语解释），不是布局容器 - 保留
<div>的场景：纯样式分组、JS 动态插入锚点、无明确语义的 wrapper（例如<div id="app">）
无缝集成到现代框架的三个实操要点
把老 HTML 塞进 React/Vue 项目不是靠 dangerouslySetInnerHTML 一招鲜，得兼顾加载、路径、生命周期。
- iframe 方案里，必须监听
load事件后再调用iframe.contentWindow.postMessage通信，否则contentWindow是 null - 若用组件方式嵌入，把老 HTML 的
<link rel="stylesheet">替换为import "./legacy.css"，否则 CSP 策略可能拦截 - 所有
<img src>和<a href>必须通过window.location.origin或配置的LEGACY_BASE_URL重写，否则跨域或 404 - 旧页面若有
window.onresize或setInterval，卸载组件时必须手动clearInterval和removeEventListener，否则内存泄漏
最常被跳过的动作是验证 meta 标签和相对路径映射——它们不出错不报警，但上线后 SEO 流量归零、图片批量 404，问题才浮出水面。
