静态html项目无原生子模块合并部署能力，需依赖工具链和人工约定；用beautifulsoup合并时须只取body.children、跳过重复head、手动处理style/script；fetch动态加载需本地服务器且domparser解析；版本锁靠git而非html注释；模块化后css/js仍全局冲突，需命名空间或css modules。
静态 HTML 项目没有“子模块合并部署”这种原生能力，所谓合并和版本锁，全靠外部工具链和人工约定来兜底——不明确这点，后续所有操作都会踩坑。
用 BeautifulSoup 合并多个 HTML 文件时必须丢弃重复结构
直接拼接 str 或用 open().read() 连接文件，必然导致多个 、、 嵌套错乱，浏览器解析失败或脚本不执行。
- 只取每个文件的
soup.body.children，不用soup.body（否则会把标签本身也塞进去） - 第一个文件的
保留；其余文件的全部跳过；内联<style></style>和<script></script>需手动提取、去重、追加到主 - 打开文件时显式指定
encoding='utf-8'和errors='replace'，避免中文变问号或读取中断 - 别用
str(soup.body)输出——它自带换行缩进，改用''.join(str(c) for c in soup.body.children)
fetch() 动态加载 HTML 片段必须绕开 file:// 协议限制
本地双击打开 HTML 文件时，fetch('header.html') 会直接报 CORS 错误，不是代码写错了，是浏览器策略禁止的。
- 开发阶段必须起本地服务器：比如
npx http-server或python3 -m http.server 8000 -
fetch()返回的是字符串，需用DOMParser解析：new DOMParser().parseFromString(html, 'text/html') - 动态插入的
<script></script>默认不执行；若需运行，得遍历新节点中所有script标签，创建新标签并插入document.head，但要注意作用域隔离风险 - 多个
fetch()无序执行，想保序就得用Promise.all([fetch('a.html'), fetch('b.html')])或链式.then()
HTML 项目“版本锁”实际就是 Git 提交 + 构建产物快照
在 index.html 里写个 <meta name="version" content="v1.2.3"> 没有任何工程意义——Git 才管版本，构建产物才决定发布内容。
- 所有 HTML、CSS、JS 必须纳入 Git 仓库，
dist/目录不提交（除非你真需要存档某次构建结果） - 部署前执行构建命令（如
npm run build），确保生成的dist/index.html是当前 commit 对应的确定产物 - 若需锁定依赖版本，靠
package-lock.json或yarn.lock，不是靠 HTML 文件里的注释 - 上线后回滚？不是改
index.html里的 version 字段，而是 checkout 上一个 Git tag，再重新构建部署
真正容易被忽略的是：HTML 模块化合并之后，CSS class 名和 JS 变量名依然全局可见。哪怕你把 header、footer 拆成独立文件，.btn 冲突了照样互相覆盖——命名空间、CSS Modules、构建期 scope 处理，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
