html本身不解析{标题}等占位符，因其仅为普通文本；需js手动替换或引入mustache.js等模板库并配置分隔符才能生效。
HTML 本身没有模板占位符机制——写进去的 {标题} 或 {{name}} 就是纯文本，浏览器照单全收、原样显示，不会做任何替换。
为什么直接写 {标题} 在 HTML 里不生效
HTML 是静态标记语言，不带运行时逻辑。它不认识 {标题}，也不理解 {{user.name}}；这些只是字符序列，和写 xyz 没区别。常见错误现象就是页面上真出现了 {标题} 四个字，而不是你期望的内容。
根本原因在于：缺少执行替换的上下文。要么没加载 JS 脚本，要么没调用替换函数，要么模板引擎压根没初始化。注意：<template></template> 标签或 data-* 属性本身也不自动解析占位符，它们只是容器或存储位置，不是执行器。
前端手动替换 {标题} 的安全做法
最轻量方式是用 String.prototype.replace() 配合 innerHTML，但必须注意作用域和副作用：
- 一定要加
g标志，否则只替换第一个匹配项：.replace(/{标题}/g, title) - 避免操作
document.body.innerHTML—— 会清空已绑定的事件监听器、销毁表单状态、打断 React/Vue 组件生命周期 - 限定范围，例如只处理某个
<div id="content"> 内部：<code>document.getElementById("content").innerHTML = ... - 如果内容含用户输入或富文本，需先做 HTML 实体转义，否则有 XSS 风险
- 后端优先用其原生语法（如 Jinja2 的
{{ user.name }}），不要自创[[name]]等格式——后端没配规则时反而更易出错 - 若必须让前端“放过”某些占位符，改成 Vue 不识别的格式，比如
__USER_NAME__，再在后端做严格字符串替换 - 严格隔离挂载区域：Vue 实例只挂载
#app，那后端渲染的静态区块就别包进#app，否则 Vue 会尝试编译里面所有花括号 - Node.js + EJS 中，
res.render('page', { title: '首页' })传入的对象字段名，必须和模板里写的变量名完全一致，不支持嵌套自动解构
混用后端与前端模板时怎么避坑
当后端（如 Jinja2、EJS、Thymeleaf）和前端（Vue/React）共存时，占位符语法冲突是高频故障点：
真正容易被忽略的是：占位符是否被某一方“提前消费”。比如后端吐出 {{title}}，但前端框架又把它当指令编译了，结果报错或留空——这不是模板写错了，而是执行顺序和边界没划清。
