17370845950

HTML5属性值必须加引号，仅当满足严格条件（纯ASCII字母数字及特定符号、非空、无空格等）才可省略；但为安全与可维护性，一律加引号是唯一稳妥做法。

HTML5 中属性值**必须加引号**，除非满足极少数严格条件；但为安全、可维护和避免意外错误，一律加引号是唯一稳妥做法。

哪些情况可以不加引号？

HTML5 规范允许省略引号，仅当属性值满足全部以下条件：

• 只包含 ASCII 字母（a–z, A–Z）、数字（0–9）、短横线（-）、下划线（_）、冒号（:）、点号（.）
• 不为空字符串
• 不包含空格、等号（=）、双引号（"）、单引号（'）、小于号（）、大于号（>）、反引号（`）

例如 语法合法，但 中的 checked 是布尔属性，不带值，不属于“属性值省略引号”的讨论范畴。

class 和 id 属性为什么必须加引号？

因为它们极易含空格或特殊字符——哪怕你当前写的是 class=header，一旦后续改成 class=header main-nav，不加引号就会被解析为两个属性：class="header" 和 main-nav=""，直接破坏样式和 JS 选择器。

常见错误示例：

浏览器实际解析为：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'] 对不上 的解析结果

  最麻烦的不是语法错误，而是它“有时候能跑”，掩盖了结构脆弱性。

  引号不是装饰，是 HTML 解析器分隔属性边界的关键标记。哪怕写 看起来干净，只要其中任意一环加入空格、等号或引号，整个标签就失效——而这种变化往往发生在多人协作或模板复用时，很难立刻发现。