HTML5属性值必须加引号，仅当满足严格条件（纯ASCII字母数字及特定符号、非空、无空格等）才可省略；但为安全与可维护性，一律加引号是唯一稳妥做法。
HTML5 中属性值**必须加引号**，除非满足极少数严格条件；但为安全、可维护和避免意外错误，一律加引号是唯一稳妥做法。
哪些情况可以不加引号？
HTML5 规范允许省略引号，仅当属性值满足全部以下条件：
- 只包含 ASCII 字母（a–z, A–Z）、数字（0–9）、短横线（
-）、下划线（_）、冒号（:）、点号（.） - 不为空字符串
- 不包含空格、等号（
=）、双引号（"）、单引号（'）、小于号（<）、大于号（>）、反引号（`）
例如 <input type=text> 语法合法，但 <input type=checkbox checked> 中的 checked 是布尔属性，不带值，不属于“属性值省略引号”的讨论范畴。
class 和 id 属性为什么必须加引号？
因为它们极易含空格或特殊字符——哪怕你当前写的是 class=header，一旦后续改成 class=header main-nav，不加引号就会被解析为两个属性：class="header" 和 main-nav=""，直接破坏样式和 JS 选择器。
立即学习“前端免费学习笔记（深入）”；
常见错误示例：
<div class=card shadow-lg>
浏览器实际解析为：class="card"，而 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']对不上<div class=nav>的解析结果
最麻烦的不是语法错误，而是它“有时候能跑”，掩盖了结构脆弱性。
引号不是装饰，是 HTML 解析器分隔属性边界的关键标记。哪怕写 <img src=logo.png alt=logo> 看起来干净，只要其中任意一环加入空格、等号或引号，整个标签就失效——而这种变化往往发生在多人协作或模板复用时，很难立刻发现。
