静态模板是html工程化起点，需通过构建时合并片段、严格语义化标签、规范meta位置与值、分离样式逻辑来保障可维护性、调试性、复用性及兼容性。
静态模板不是终点，而是工程化起点。单纯复制粘贴 header.html 或靠 include 拼凑页面，很快会遇到路径错乱、样式污染、构建失效、调试断点消失等问题——这不是“写得快”，是“改得慢”。真正落地的 HTML 工程化，核心在于让 HTML 可维护、可调试、可复用，且不牺牲浏览器兼容性与加载性能。
HTML 文件怎么拆？别用 div 堆砌，用语义化 + 构建时合并
很多人想模块化，第一反应是把页头、导航、侧边栏各存一个 header.html、nav.html，再用服务器端 include 或前端 JS 动态 fetch 加载。这条路在本地开发阶段就容易崩：路径相对位置一变，404 到处飞；JS 加载后 DOM 才渲染，SEO 和首屏时间直接受损；更别说 SSR 场景下服务端和客户端渲染结果不一致。
- 正确做法是：用构建工具（如 Webpack +
html-webpack-plugin+posthtml-include）在编译阶段就把片段合并进最终 HTML，输出仍是单个纯净index.html - 片段文件用
.html后缀，但内容必须是纯片段，不带、标签，例如src/partials/header.html只写<header class="site-header">...</header> - 避免在片段里写内联样式或
<script></script>，所有样式走 CSS 模块，逻辑抽到独立 JS 文件，否则构建时无法提取、压缩、Tree-shaking
lang、charset、viewport 这三个 meta 不只是“标配”，是构建链路的触发器
很多同学把 <meta charset="UTF-8"> 往 里一塞就完事，但实际它会影响构建工具对 HTML 的解析行为。比如某些插件要求 <meta charset> 必须出现在前 1024 字节内，否则读取失败；lang="zh-CN" 不只是给屏幕阅读器看的，Webpack 的 html-webpack-plugin 会根据它生成对应 hreflang 标签；而 <meta name="viewport"> 缺失时，PostCSS 的响应式单位转换（如 rem 转 px）可能误判设备宽度。
-
<meta charset="UTF-8">必须放在最前面，紧随<title></title>之后，不能被注释或空行隔开 -
lang值要精确匹配目标地区，zh和zh-CN在部分 CDN 缓存策略中会被视为不同资源 - 如果项目要支持 PWA，
viewport必须包含width=device-width, initial-scale=1，否则 Service Worker 注册时可能因 UA 判定失败而跳过
语义化标签不是“换汤不换药”，它决定构建产物的结构可信度
把 <div class="main"></div> 改成 <main></main> 看似只是语法糖，但在工程化流程中，它直接影响多个环节：自动化可访问性检测（如 axe-core）会报错；SEO 抓取工具识别主体内容区域更准确；Webpack 的 HtmlWebpackPlugin 可基于 <main></main> 自动注入懒加载脚本占位符；甚至某些 CI/CD 流水线会校验是否至少存在一个 <main></main>，缺失则阻断发布。
-
<main></main>在整个文档中只能出现一次，且不应嵌套在<article></article>或<section></section>内部——否则构建时生成的结构图谱会混乱 -
<nav></nav>必须包裹导航链接，不能只包文字或图标；若用 JS 动态生成菜单，需在 DOM ready 后手动补上role="navigation"，否则构建产物的 a11y 分析直接失败 - 不要用
<section></section>替代<div> 来“凑语义”——它需要有明确的主题和标题（<code><h2></h2>或更高阶），否则会被 Lighthouse 当作无效结构扣分HTML 工程化的难处不在“怎么写”，而在“怎么让写出来的 HTML 被构建工具、测试工具、部署流程真正信任”。一个没加
lang的页面，可能在本地跑得好好的，上线后却被搜索引擎降权；一段用template+slot封装的 Web Component，在未启用custom-elements-builtin的旧版 Edge 里直接空白。这些坑不靠试错，靠在写第一行 HTML 之前，就想清楚它接下来要经过哪些工具链。
