直接复制粘贴HTML无法形成真正可用的模板，因为未剥离可变部分、未建立结构契约；真正的模板需明确固定内容与可替换占位符（如{{page_title}}），并按构建流程（静态/服务端/框架）约定插入机制与路径规则。
为什么直接复制粘贴 HTML 无法形成真正可用的模板
因为没剥离可变部分，也没建立结构契约。你复制的 index.html 里可能有硬编码的 <title>首页</title>、写死的 <img src="banner.jpg">、甚至内联样式和 JS 脚本——这些都不是“模板该有的样子”。真正的模板必须能被不同页面复用，而复用的前提是：哪些地方固定、哪些地方可替换、替换时用什么语法，都得提前约定好。
常见错误现象：
– 复制多个页面后手动改标题/正文，改漏一个导致上线错乱
– 把 header.html 和 footer.html 单独存着，但没在主文件中标记插入位置，构建时根本不会合并
– 用注释如 <!-- header --> 标记，但后续没配套工具解析，纯靠人眼找位置
- 必须先确认你的构建流程：是纯静态（用 Gulp/Webpack 插件处理），还是服务端渲染（如 Django/Jinja2），或是前端框架（如 Vue 的
<slot>）——不同环境，模块化方式完全不同 -
<head>里的<meta charset="UTF-8">和<title>必须保留，但内容要替换成占位符，比如<title>{{page_title}}</title> - 不要用自闭合
<body/>写法，HTML5 不认；空<body></body>是合法且安全的起点
如何提取并命名公共模块才不踩坑
不是所有重复代码都适合抽成模块。导航栏、页脚、面包屑、侧边栏可以，但每页都略有差异的轮播图或广告位，强行统一反而增加维护成本。
关键判断标准：这个区块是否在 90% 的页面中完全一致？如果是，就拆；如果每次都要微调 class 或文案，那就留作局部定制区，别硬塞进母版。
立即学习“前端免费学习笔记（深入）”；
- 模块文件名必须带语义，例如
header-main.html而不是top.html；避免用common.html这种模糊命名 - 在主模板里用明确注释标记插入点，如
<!-- include:header-main -->，而不是<!-- header -->—— 工具或人后期都能快速定位 - 如果用构建工具（如 Webpack + html-webpack-plugin），模块路径必须相对于入口 HTML，否则
include会找不到文件 - 注意嵌套层级：
header-main.html里不要再include其他模块，除非你明确支持多层展开，否则容易循环引用或路径错乱
占位符怎么写才不和真实内容冲突
用 {{xxx}} 最稳妥，它既不是 HTML 标签，也不在 JS 字符串中常见，且主流模板引擎（Jinja2、Handlebars、Nunjucks）都原生支持。千万别用 $xxx$ 或 [xxx] —— 容易和 CSS 变量、正则表达式、甚至用户输入内容撞车。
常见错误现象：
– 用户提交的评论里写了 {{user_name}}，结果被模板引擎误解析成变量
– 占位符没加空格，如 {{title}}文章，导致实际渲染时变成“首页文章”，中间没分隔
- 占位符前后加空格或换行，例如
<h1> {{page_title}} </h1>，降低误匹配概率 - 敏感字段（如
content）必须声明是否允许 HTML，若允许，需做 XSS 过滤；若只接受纯文本，就用{{content|safe}}（Jinja2）或显式转义 - 路径类占位符要带前缀，如
{{asset_path}}/css/app.css，而不是直接/css/app.css，方便部署到子路径时统一替换
本地开发时如何验证模板是否真能复用
不能只看单个页面渲染正常。真正验证模板有效性的唯一方式，是新建至少两个结构不同的页面（比如列表页 + 详情页），都继承同一套母版，并检查三件事：DOM 结构是否一致、CSS 选择器是否仍生效、JS 初始化逻辑是否还能正确获取元素。
最容易被忽略的地方：
– <script> 放在 </body> 前，但被抽出去的 footer.html 里也塞了脚本，结果加载顺序错乱
– 某个页面用了 <main>，另一个用了 <article>，但 CSS 里写了 main h1 { … }，导致后者样式丢失
- 用浏览器开发者工具的 Elements 面板，对比两个页面的最终 DOM，重点看
<head>内 meta、link、script 是否按预期注入 - 在控制台执行
document.querySelector('header')，确认返回的是你期望的模块节点，而不是空或 null - 把模板文件单独拖进浏览器打开（不走构建流程），看是否报错或显示原始占位符——说明没被正确处理，问题出在构建配置而非模板本身
