布尔属性只需存在即生效，不写等号和值；如checked、disabled、required等，存在为true，缺失为false，写成checked="true"或disabled="false"属错误用法。
布尔属性不写等号和值才真正生效
HTML5 规范明确要求：布尔属性（如 checked、disabled、required、readonly、open）只要存在，就代表 true；不出现，就是 false。写成 checked="true" 或 disabled="false" 是无效甚至错误的——浏览器会忽略值，但语义上已违背规范。
常见错误现象包括：
-
required=""看似“空值”，实际仍被当作true（因属性存在） -
checked="0"或disabled="disabled"属于冗余旧写法，现代 HTML5 不推荐 -
autocomplete="off"不是布尔属性，不能简写；它属于枚举属性，必须带值
哪些属性是布尔属性，哪些不是
不能靠感觉判断。必须查规范或 MDN，否则容易把非布尔属性也“简写”。例如：
- ✅ 是布尔属性：
checked、disabled、required、readonly、open、hidden、multiple、novalidate - ❌ 不是布尔属性：
autocomplete、draggable、contenteditable、spellcheck—— 它们虽接受布尔语义值（"true"/"false"），但必须显式赋值，且允许其他值（如autocomplete="email"）
一个快速验证法：打开 Chrome DevTools → Elements 面板 → 右键元素 → “Edit as HTML”，删掉某个属性后观察行为是否变化。如果删了就失效，那它大概率是布尔属性。
JavaScript 操作布尔属性要区分 content attribute 和 IDL attribute
DOM 中的属性操作容易踩坑。比如：
- 用
element.setAttribute('checked', '')能让复选框视觉上选中，但element.checked仍为false（因为没同步 IDL 属性） - 正确做法是直接赋值 IDL 属性：
element.checked = true，而不是操作 HTML 字符串 - 动态插入的
<input type="checkbox" checked>元素，若未挂载到 DOM 就调用.setAttribute()，可能不触发渲染更新
简单记：HTML 写 checked 控制初始状态；JS 改 .checked 控制运行时状态。
服务端模板或校验工具对布尔属性更敏感
本地浏览器宽容，但某些环境会严格校验。比如：
- HTML 验证器（validator.w3.org）会警告
checked="true"为“非标准值” - Next.js / Astro 的 SSR 渲染若输出
disabled="false"，会导致 hydration mismatch 错误 - 部分 CMS 或低代码平台在解析模板时，把空字符串
required=""当作未设置，跳过校验逻辑
最稳妥的写法永远是：只写属性名，不加等号、不加引号、不加值 —— required，disabled，open。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
