模板引擎编译后的HTML须先剥离动态语法再校验，否则W3C校验器会因服务端占位符误报错误；正确做法是校验渲染后的纯HTML输出，而非源模板文件。
模板引擎编译后的 HTML 不能直接用常规校验器判断质量——它往往混着服务端语法、动态占位符或未渲染的表达式，W3C 校验器会报一堆“非法标签”或“未知属性”，但这不是代码真有问题，而是你校验错了对象。
先剥离模板语法再校验 html-validate
直接把 .vue、.njk 或 .ejs 文件丢给校验器，90% 的报错来自 、{% if user %} 这类非 HTML 内容。正确做法是：先模拟渲染出纯 HTML 字符串，再校验。
- 对静态生成场景（如 Next.js build、Hugo 构建后），校验
out/**.html目录下的实际输出文件，而非源模板 - 对 SSR 场景（如 Express + EJS），写个最小化测试脚本，调用
res.render('template', { title: 'test' })捕获输出字符串，再喂给html-validate - 避免用正则粗暴替换模板语法（比如把
全替成空），可能误删合法 HTML 注释或内联 JS 字符串
html-validate 配置必须关掉宽松规则
默认配置对模板输出太宽容，比如允许 <div class="{{ status }}"> 这种明显无效的 class 值，但这类结构上线后可能触发 JS 错误或样式丢失。
<ul>
<li>禁用 <code>attr-bans 中的 class 放行规则，强制要求 class 属性值必须是静态字符串或符合预设白名单模式
attr-no-unsafe-char，拦截 onerror="alert(1)" 这类服务端未过滤的用户输入拼接attr-value-quoted 设为 "double"，防止 <img src="https://img.php.cn/upload/article/001/589/237/178501784054535.png" alt="模板引擎编译后的HTML代码质量检测"> 在模板变量插值后变成 <img src="https://img.php.cn/" alt="模板引擎编译后的HTML代码质量检测"> 导致解析断裂DOM 操作时机错误在编译后才暴露
模板里写 <script>document.getElementById('main').innerHTML = data;</script> 看似没问题，但编译后若 #main 被条件块包裹（如 {% if show %}<div id="main">...</div>{% endif %}），JS 就会报 Cannot read property 'innerHTML' of null。
立即学习“前端免费学习笔记（深入）”；
- 检查所有内联脚本是否包裹在
DOMContentLoaded或加了存在性判断：if (el) { el.innerHTML = ... } - 禁止模板中出现未加
defer或async的<script></script>标签，尤其当它们位于且依赖 body 元素时 - SSR 场景下，确认所有
window/document调用都套了if (typeof window !== 'undefined')，否则 Node.js 渲染阶段直接崩溃
语义缺失在编译后更难修复
模板里用 <div class="card-header"></div> 很方便，但编译后就是一堆无意义的 div，后期加无障碍支持或 SEO 优化时，得逆向改遍所有模板，成本远高于早期约束。
- 在模板层就约定语义标签：用
<header class="card-header"></header>替代<div class="card-header">，即使样式相同 <li>禁止 <code>class名含尺寸/颜色等样式描述词（如big-btn、red-link），这类命名在编译后无法通过 CSS 变量或主题切换解耦 - 对重复结构（如商品卡片），强制提取为子模板或组件，编译后才能保证 DOM 结构一致，否则人工维护极易漏改某一处
最难的不是让模板编译出合法 HTML，而是让它编译出“运行时不崩、语义不糊、改起来不疼”的 HTML——这需要在模板语法层就设好边界，而不是等编译完再补救。
