在模板中动态生成 HTML 元素时，若需将 Perl 模板变量（如 [% field %]）安全注入到 HTML 属性（如 name）中，必须用英文双引号包裹变量表达式，否则解析失败导致属性值为空。
在模板中动态生成 html 元素时，若需将 perl 模板变量（如 `[% field %]`）安全注入到 html 属性（如 `name`）中，必须用英文双引号包裹变量表达式，否则解析失败导致属性值为空。
在使用 Template Toolkit（TT）等服务端模板引擎渲染 HTML 时，一个常见误区是忽略 HTML 属性值的语法规范。例如，以下写法看似合理，实则存在严重问题：
<dd name=[% field %] class="float-right">[% order.$field %]</dd>
该写法中，name=[% field %] 缺少引号包围，导致浏览器将 [% field %] 视为未加引号的裸属性值——当 field 解析为 updatedt 时，实际输出为：
<dd name=updatedt class="float-right">2024-03-15 10:22:30</dd>
虽然部分浏览器可能“宽容”地解析该标签，但根据 HTML 标准，未加引号的属性值仅允许包含字母、数字、_、-、. 和 :，且不能以数字开头。一旦 field 值含空格、特殊字符或以数字开头（如 "1st_attempt"），HTML 将解析失败，name 属性甚至不会被识别，后续 JavaScript 选择器（如 $('[name="updatedt"]')）自然无法匹配。
✅ 正确写法必须显式添加双引号（推荐）或单引号：
立即学习“前端免费学习笔记（深入）”；
<dd name="[% field %]" class="float-right">[% order.$field %]</dd>
渲染后得到符合标准的 HTML：
<dd name="updatedt" class="float-right">2024-03-15 10:22:30</dd>
此时，前端 JavaScript 才能可靠操作：
// ✅ 正确：双引号匹配，选择器生效
let dt_formatted = convertDateFormat("[% order.updatedt %]");
$("[name='updatedt']").text(dt_formatted); // 注意：dd 元素用 .text() 而非 .val()
// ⚠️ 补充说明：.val() 仅适用于 <input>、<select>、<textarea> 等表单控件；
// 对于 <dd> 这类普通内容容器，应使用 .text() 或 .html()? 关键注意事项：
- 永远为 HTML 属性值添加引号（" 或 '），这是 HTML 规范强制要求，而非可选优化；
- 在 TT 模板中，[% field %] 是内联变量插值，其输出内容必须处于合法属性上下文中；
- 若 field 值本身含双引号（极少见），应改用单引号包裹：name='[% field %]'，或启用 TT 的 HTML 转义过滤器（如 | html）确保安全；
- 使用 name 属性时需注意语义：
- 并非表单元素，name 属性对其无原生功能，仅作为自定义标识符供 JS 选择——更语义化的替代方案是使用 data-* 属性，例如 data-field="updatedt"，既符合标准又避免歧义。
总结：模板变量注入 HTML 属性 ≠ 字符串拼接，而是 HTML 结构构建。加引号不是“修复 bug”，而是遵循规范的起点。一行引号之差，决定 DOM 可访问性与代码健壮性。
