HTML属性值必须用双引号包裹，这是兼顾W3C规范、工具链兼容性与团队协作安全的唯一稳妥选择；单引号或无引号虽在极窄场景合法，但易引发Prettier自动修正、Webpack解析错误及CI校验失败。
HTML属性值必须用双引号吗
不是“必须”，但"是唯一能兼顾规范、工具链和协作安全的选择。HTML标准允许单引号'甚至无引号（仅限极窄场景），但现实工程中，用单引号会触发Prettier自动转双引号、Webpack插件报ParseError: Unexpected token、CI里HTMLHint失败——这些都不是理论风险，而是每天发生的构建中断。
常见错误现象：class='header main-nav'在旧版构建流程中被截断为class="header"，后续main-nav变成无效属性；data-id='123'被某些模板引擎静默忽略，导致JS读不到值。
- 所有带值的属性（
src、href、alt、title、data-*）一律用"包裹 - 空字符串也写成
alt=""，而非alt=或省略 - 哪怕属性值本身不含引号（如
class="card"），也别为了“省两个字符”换用单引号
单引号嵌套双引号时为什么容易出错
问题不在语法本身——title='He said "Hello!"'完全合法——而在于工具链和人眼识别。VS Code + Prettier默认配置会把这行自动改成title="He said "Hello!""，如果团队有人手动回退，Git Diff里就会出现大量无意义冲突；更麻烦的是，正则提取时若用/title\s*=\s*'([^']*)'/，遇到title='font-family:"Times New Roman"'会提前在第一个"处截断，根本拿不到完整值。
真实使用场景：内联onclick里传参、style里写CSS、data-* 存JSON字符串——这些地方天然需要引号嵌套，但用单引号开头反而增加转义负担。
立即学习“前端免费学习笔记（深入）”；
- 优先用双引号包裹整个属性值，内部双引号用
"实体或直接保留（现代浏览器都支持） - 避免手写
onclick='doSomething("a", "b")'这类混合结构，改用data-+ JS绑定 - 正则匹配时，不要依赖
'或"的简单配对，改用/title\s*=\s*(["']).*?\1/并确保gmi标志启用
HTMLHint和Prettier如何强制校验双引号
靠人工检查没用，必须进工具链。HTMLHint默认不启用attr-value-double-quotes规则，Prettier的htmlWhitespaceSensitivity设为"strict"时才会严格处理引号，两者不联动就形同虚设。
关键配置点：
- Prettier配置里加
"htmlQuotes": "double"（注意不是single） - HTMLHint配置中开启
{"rules": {"attr-value-double-quotes": true}} - Git Hooks里用
husky在pre-commit阶段跑npx htmlhint --config .htmlhintrc *.html，失败则阻断提交 - Webpack中若用
html-webpack-plugin，需确认minify选项没开启removeAttributeQuotes: true
DOMParser比正则提取属性值更可靠
当你需要从HTML字符串里取style或data-值时，别用正则硬刚。正则/style\s*=\s*(["']).*?\1/gi能应付大多数情况，但遇到style=font-size:12px（无引号）、<!-- style="xxx" -->（注释里混入）、或<div style="color:red; font-family:'Arial'">（结尾缺失<code>"）就直接失效。
DOMParser才是语义级解法，它走的是浏览器真实的HTML解析逻辑：
function extractStyleAttrs(html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
return Array.from(doc.body.querySelectorAll('[style]'))
.map(el => el.getAttribute('style'));
}它能容忍换行、多余空格、未闭合标签，甚至部分破损结构；但要注意，输入必须是完整HTML片段（含<body>或<div>包裹），纯属性字符串（如style="x"）会解析失败。
真正容易被忽略的点：DOMParser返回的是解析后的style对象（如el.style.color），不是原始字符串。如果业务需要保留原始引号格式或注释，那还是得回到正则——但此时应先用DOMParser做预校验，再针对已知干净结构用正则提取。
