所有属性值必须用双引号包裹，否则含&、=、空格等字符时会被截断甚至引发xss；动态拼接时须先html转义再插入，禁用手动字符串拼接。
动态拼接时 src、class 等属性值不加引号会直接失效
浏览器解析 HTML 时，如果属性值不含空格但没加引号（如 src=logo.png），部分引擎会勉强接受；但一旦值里含 &、=、空格或引号，就会截断甚至注入脚本。比如后端拼出 <img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="解决动态拼接模板中属性格式错误的HTML代码质量防范">，而 url 是 https://a.com/pic.jpg?w=200&h=150，结果解析成 src=https://a.com/pic.jpg?w=200，后面全丢弃。
- 所有属性值必须用双引号包裹，这是 HTML5 规范强制要求，也是模板引擎（如 Jinja2、Handlebars）默认行为
- 服务端拼接字符串时，务必对变量做 HTML 转义后再插入属性——不要依赖前端“自动修复”
- 避免手写
" + url + "这类拼接，改用模板语法或安全的 HTML 构建函数（如 Python 的html.escape()）
模板变量渲染导致标签断裂的真实原因和规避方式
当模板输出未转义的 HTML 片段（如 {{ raw_html }}）插入到已有结构中，它可能意外闭合外层标签。典型例子：<div class="card">{{ content }}</div>，若 content 是 <p>hello</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 没问题；但如果是 <div class="footer">bye</div>，就变成 <div class="card">
<div class="footer">bye</div>——外层 <code>
