所有带值的html属性必须统一用双引号包裹，这是防止解析错乱、工具链报错和协作中断的底线做法；html标准虽允许单引号或无引号，但工程实践中易致截断、转义失败及构建中断。
所有带值的 HTML 属性，只要不是布尔属性（如 disabled、required），都应统一用双引号包裹。这不是“可选风格”，而是防止解析错乱、工具链报错和协作中断的底线做法。
为什么双引号是实际工程中的唯一稳妥选择
HTML 标准虽允许单引号或无引号，但现实场景中极易出问题：
- 无引号时，属性值含空格（如
class=btn btn-lg）会被截断为class="btn"，后续btn-lg变成无效布尔属性 - 含
&、=、中文或单引号（如value=John's age）会直接导致解析失败或 DOM 构建异常 - Prettier 默认将单引号自动转为双引号；Webpack、Vite 等构建工具在解析无引号或单引号属性时可能抛
ParseError - CI 流程中 HTMLHint 若未启用
attr-value-double-quotes规则，会漏掉这类隐患，上线后 JS 读不到data-id或样式类丢失
双引号嵌套双引号怎么办
当属性值本身需包含双引号（如内联 style、JSON 字符串、代码示例），不能靠换用单引号来绕开——那只会把问题推给工具链和人眼识别。
- 在属性值内部直接使用双引号，浏览器完全支持（如
style="color: 'red'; font-family: 'Times New Roman'"） - 若需在文本内容中显示双引号（如
title或data-json），用"实体替代，例如：title="他说："你好""→title="他说："你好"" - 避免手写
onclick='doSomething("a", "b")'这类混合结构；改用data-*存参数，再由 JS 绑定事件
动态生成 HTML 时的安全写法
服务端（PHP/Node.js）或前端模板拼接 HTML，必须从源头控制引号结构：
- PHP 中统一用双引号包裹整个 HTML 字符串，用户输入变量用
htmlspecialchars($val, ENT_QUOTES)转义（同时处理单双引号） - JS 模板字符串用反引号
`，内部属性直接用双引号：`<div class="${cls}" data-id="${id}"></div>` - 绝对不要手动拼接引号：
'<div class="' + cls + '">' 容易因 <code>cls含引号而断裂；应改用element.setAttribute('class', cls)或$el.attr('data-id', id)检查与强制规范落地
仅靠人工检查不可靠，必须进工具链：
- HTMLHint 配置启用
attr-value-double-quotes规则 - Prettier 的
htmlWhitespaceSensitivity设为"strict"，并确保与 HTMLHint 协同生效 - 正则提取属性值时，别用简单匹配（如
title='([^']*)'），改用title\s*=\s*(["']).*?\1并启用gmi标志
- HTMLHint 配置启用
