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 解析器分隔属性边界的关键标记。哪怕写
看起来干净，只要其中任意一环加入空格、等号或引号，整个标签就失效——而这种变化往往发生在多人协作或模板复用时，很难立刻发现。相关文章
html5怎么出现圆_html5用border-radius设50%或SVG画圆形【绘制】
HTML如何添加网格背景_CSS样式设计指南【技巧】
html4的font标签被html5删了吗_文字样式怎么改【解答】
HTML5怎么取消圆点_HTML5用list-style:none取消ul/ol列表圆点【取消】
html5 before怎么用_html5用::before伪元素在元素前加装饰或内容【使用】
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
