模板变量替换时HTML结构被意外破坏的常见现象是生成页面中<div>未闭合、<script>内嵌未转义双引号、JSON数据直接拼入data-属性导致截断；本质是将原始内容当纯文本塞入HTML上下文而未做上下文感知转义。
模板变量替换时 HTML 结构被意外破坏
常见现象是生成的页面里 <div> 没闭合、<script> 标签内嵌了未转义的双引号、或者 JSON 数据直接拼进 data- 属性导致属性截断。本质不是模板引擎问题，而是把原始内容当纯文本塞进 HTML 上下文，没做上下文感知的转义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用字符串拼接方式处理用户输入或动态数据，改用支持自动转义的模板引擎（如
Handlebars默认开启 HTML 转义，Mustache也是；而string.Template或手写str.replace()完全不处理） - 对必须保留 HTML 的字段（如富文本编辑器输出），显式使用
{{{html}}}（Handlebars）或{{&html}}（Mustache），但前提是确认来源可信 - 在 C# 的
TextTemplate类中，若需插入 HTML 片段，应额外封装一层HtmlEncode或WebUtility.HtmlEncode，不能依赖模板本身
生成后 HTML 语义缺失与可访问性失效
大模型生成的 HTML 常见问题：大量用 <div> 堆砌结构、<h1> 到 <h6> 跳级或缺失、<img> 缺 alt、表单控件无 label 关联、role 和 aria- 属性随意添加或遗漏。这些不会影响渲染，但会让屏幕阅读器失效、SEO 权重下降、Lighthouse 评分暴跌。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在提示词中明确约束：“使用语义化 HTML5 标签”、“每个
<img>必须含alt属性”、“导航用<nav>，页脚用<footer>”，比事后修复成本低得多 - 生成后必跑一次
axe-core或pa11yCLI 扫描，例如：npx pa11y --standard WCAG2AA index.html - 对 Bootstrap 类名滥用（如
col-12 col-md-6 col-lg-4套三层却没响应需求）保持警惕——类名膨胀会拖慢解析，也掩盖真实布局意图
ms-swift 微调模型输出 HTML 的稳定性控制
ms-swift 支持 LoRA 微调，但训练数据若混入非标准 HTML（比如带 PHP 注释、JSX 语法、Vue 模板语法），模型就会在生成时“自由发挥”，出现 <template> 标签、v-if 指令、甚至 {% if %} 这类 Jinja 语法。这不是 bug，是训练信号污染的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 微调前清洗数据：用正则过滤掉所有非 HTML5 标准标签（如
<view>、<slot>）、移除所有模板引擎指令（{{.*?}}、{%.*?%}）、只保留 W3C 验证通过的元素和属性 - 推理时加 system prompt 强约束：“你是一个 HTML5 生成器，只输出符合 WHATWG Living Standard 的纯 HTML，不包含任何 JS、CSS 内联代码，不引入外部 CDN，不使用自定义标签或指令”
- 部署时启用输出校验钩子：用
html-validateCLI 对每份生成结果做格式 + 语义双检，失败则拒绝写入文件系统，而非静默容忍
静态页面中 JavaScript 交互的边界管理
很多人误以为“静态页面 = 不该有 JS”，其实不然。但常见错误是把本该由后端处理的状态逻辑（如登录态判断、权限菜单渲染）硬塞进前端 JS，结果生成的 HTML 里一堆 if (user.role === 'admin')，既暴露敏感逻辑，又让页面首次渲染空白等待 JS 执行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- JS 只负责纯粹的 UI 交互：轮播图切换、折叠面板、表单校验、动画触发。所有依赖服务端状态的逻辑，应在生成阶段完成——比如用 C# 的
TextTemplate注入已计算好的菜单数组，而不是留个空容器靠 JS fetch - 避免在 HTML 模板里写
<script>fetch('/api/user').then(...)：静态页面没有运行时 API 环境，这类请求必然失败或跨域报错 - 如果真需要动态能力，用
data-属性声明行为契约，例如<button data-action="copy-to-clipboard" data-target="#email">，再由统一轻量 JS 库接管，而不是每个页面写独立逻辑
真正难的不是生成 HTML，而是让每次生成都守住语义底线、安全边界和交付一致性。模板变量怎么转义、提示词怎么写、校验工具怎么集成——这些细节不落地，再快的生成流程也会在上线前卡住。
