html5属性值必须加引号，仅当满足严格条件（纯ASCII字母数字及特定符号、非空、无空格等）才可省略；但为安全与可维护性，一律加引号是唯一稳妥做法。
html5 中属性值**必须加引号**，除非满足极少数严格条件；但为安全、可维护和避免意外错误，一律加引号是唯一稳妥做法。
哪些情况可以不加引号？
HTML5 规范允许省略引号，仅当属性值满足全部以下条件：
- 只包含 ASCII 字母（a–z, A–Z）、数字（0–9）、短横线（
-）、下划线（_）、冒号（:）、点号（.） - 不为空字符串
- 不包含空格、等号（
=）、双引号（"）、单引号（'）、小于号（）、大于号（>）、反引号（`）
例如 语法合法，但 中的 checked 是布尔属性，不带值，不属于“属性值省略引号”的讨论范畴。
class 和 id 属性为什么必须加引号？
因为它们极易含空格或特殊字符——哪怕你当前写的是 class=header，一旦后续改成 class=header main-nav，不加引号就会被解析为两个属性：class="tuc-19bc10f7-67058d-0 header tuc-19bc10f7-67058d-0" 和 main-nav=""，直接破坏样式和 js 选择器。
立即学习“前端免费学习笔记（深入）”；
常见错误示例：
浏览器实际解析为：class="tuc-19bc10f7-67058d-0 card tuc-19bc10f7-67058d-0"，而 shadow-lg 被当作一个无值的布尔属性，导致 css 类丢失。
引号用单引号还是双引号？
HTML5 不强制要求，但有实际约束：
- 若属性值内含双引号（如内联
onclick="alert("OK")"），外部必须用单引号，否则会提前截断
- 若属性值内含单引号（如
data-desc="John's book"），外部用双引号更安全
- JSX、vue 模板、某些构建工具（如 webpack + html-loader）默认只认双引号，单引号可能触发警告或解析失败
推荐统一使用双引号，与 json、大多数框架模板保持一致，降低协作和自动化处理成本。
不加引号在真实项目中会出什么问题？
看似省事，实则埋雷：
- HTML 压缩工具（如
html-minifier）可能因未加引号报错或静默损坏结构
- Linter 工具（如
eslint-plugin-html、htmllint）默认禁止无引号属性值
- 服务端渲染（SSR）时，模板引擎（如 EJS、Pug）拼接变量若漏转义，容易注入闭合引号，引发 xss
- XPath 或 Puppeteer 等自动化脚本依赖精确属性匹配，
//div[@class='nav'] 对不上
的解析结果
最麻烦的不是语法错误，而是它“有时候能跑”，掩盖了结构脆弱性。
引号不是装饰，是 HTML 解析器分隔属性边界的关键标记。哪怕写 