只有同时满足严格条件的属性值可不加引号：仅含ascii字母、数字、下划线、短横线、冒号、点，非空，无空格/等号/引号/小于号/反引号，且非style或on*类属性；但强烈建议始终加双引号以避免解析错误、工具报错及协作问题。
HTML 属性值在大多数情况下必须加引号，但存在有限的免引号场景；不加引号不是“可选”，而是“仅当满足严格条件时才合法”。
哪些属性值可以不加引号？
只有同时满足以下全部条件时，value 才能省略引号：
- 值只包含 ASCII 字母（a–z, A–Z）、数字（0–9）、下划线（
_）、短横线（-）、冒号（:）、点（.） - 值不为空（即不能是
class=或id=） - 值不包含空格、等号、双引号、单引号、小于号（
）、大于号（<code>>）、反引号（`） - 该属性本身不是
style、on*事件处理器等对解析敏感的属性
例如：<div class="header" id="my-section" data-id="123"> 是合法的；但 <code><div class="main" header>（含空格）或 <code><input value="John's" age>（含单引号）会直接解析失败或截断。
为什么建议始终加引号？
不加引号看似省事，但实际埋下多个隐患：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- HTML 解析器对“无引号值”的容错行为因浏览器/版本而异，比如
<a href="/path?k=v&w=x"></a>可能被错误截断为k=v（&被当作属性分隔符） - 模板引擎（如 Jinja2、EJS）或构建工具（如 Vite、Webpack）在处理未引号属性时可能报错或静默替换失败
- 自动化工具（Prettier、HTMLHint）默认要求引号，禁用规则会增加团队协作成本
- 可读性下降：无法一眼区分属性名和属性值，尤其在嵌套或动态生成 HTML 时（如
<button onclick="doSomething(1,"></button>几乎必然出错）
class 和 data-* 属性的常见误写
这两类属性最容易“侥幸”不加引号，也最容易翻车：
-
class=card featured→ 合法但危险：若后续插入空格或变量（如class=card {{ modifier }}），模板一渲染就崩 -
data-id=abc-123→ 合法；但data-user-id=john@example.com中的@不在白名单内，必须写成data-user-id="john@example.com" -
data-json={"a":1}→ 绝对非法：大括号、冒号、引号全违规，必须转义并包裹：data-json='{"a":1}'或data-json="{"a":1}"
现代开发中怎么写才稳妥？
统一使用双引号（"）是最小认知负担的选择：
- 与 JavaScript 字符串引号习惯一致，减少切换成本
- 避免在属性值里频繁转义单引号（如
title="Don't click"比title='Don't click'直观） - 主流框架（React/Vue/Svelte）JSX/模板语法默认输出双引号，保持一致性
- 唯一例外：服务端模板中若变量本身含双引号（如 PHP 的
$title = 'He said "Hi"';），则改用单引号包裹属性：title='= $title ?>'
真正需要纠结“要不要引号”的时候，往往说明你已经在边缘试探解析器的容忍极限——直接加上，比查规范快得多。
