HTML布尔属性（如disabled、checked、readonly）存在即true、不存在即false；禁止写disabled="false"等伪空值，否则破坏语义、干扰JS判断与无障碍支持。
HTML 中的空属性（如 disabled、checked、readonly）本身不带等号和值，是合法且常用的布尔属性；但如果你在模板生成、服务端渲染或自动化编辑中意外写出了 disabled="" 或 checked="false" 这类“伪空属性”，它们不仅语义错误，还可能干扰 JS 行为或破坏表单逻辑——这类问题不能靠浏览器自动修正，必须主动清理。
哪些属性属于“空属性”？别乱加引号和等号
HTML 规范明确定义了布尔属性（boolean attributes）：它们的存在即表示 true，不存在即 false。浏览器只认以下这些原生属性的无值写法：
-
async、autofocus、autoplay -
checked、controls、default -
defer、disabled、hidden -
ismap、loop、multiple -
muted、novalidate、open -
readonly、required、reversed -
scoped、seamless、selected
常见错误包括：disabled="disabled"（冗余）、checked=""（合法但不推荐）、required="false"（语义完全错误，等价于 required 被激活）。
用正则快速批量清理空属性值（命令行 / VS Code）
如果你只是想在静态 HTML 文件中一次性修复，最轻量的方式是用正则替换。注意：不要全局无差别删 =""，只处理明确属于布尔属性的位置。
VS Code 中打开「替换」面板（Ctrl+H），启用正则模式（.* 按钮），填入：
/(async|autofocus|autoplay|checked|controls|default|defer|disabled|hidden|ismap|loop|multiple|muted|novalidate|open|readonly|required|reversed|scoped|seamless|selected)\s*=\s*["']?["']?/gi
替换为：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
说明：
- 这个正则只匹配已知布尔属性名后紧跟
=和可选引号的组合 - 它会把
disabled=""→disabled，required="true"→required，checked="anything"→checked - 不会误伤
class=""、id=""等非布尔属性
用 JavaScript 动态清理 DOM 中的非法空属性
如果 HTML 是运行时动态生成的（比如 Vue/React 渲染后、或富文本编辑器输出），需要在插入前或加载后做 DOM 层面的校验。直接遍历并重设属性更可靠，比 innerHTML 正则更安全：
function cleanBooleanAttrs(el) {
const booleanAttrs = new Set([
'async', 'autofocus', 'autoplay', 'checked', 'controls',
'default', 'defer', 'disabled', 'hidden', 'ismap', 'loop',
'multiple', 'muted', 'novalidate', 'open', 'readonly',
'required', 'reversed', 'scoped', 'seamless', 'selected'
]);
<p>el.querySelectorAll('*').forEach(node => {
for (const attr of node.attributes) {
if (booleanAttrs.has(attr.name)) {
// 存在即 true，移除值，保留属性本身
node.removeAttribute(attr.name);
node.setAttribute(attr.name, '');
}
}
});
}</p>
调用方式：cleanBooleanAttrs(document.body)。注意：该函数会将所有目标属性重置为无值形式（checked=""），这是浏览器兼容性最好的写法；若你坚持“存在即 true”的原始语义，可改为 node.removeAttribute(attr.name); node.setAttribute(attr.name, '') → node.setAttribute(attr.name, '') 可省略，直接 node.setAttribute(attr.name, '') 即可。
为什么不能依赖浏览器自动纠正？
浏览器对 required="false" 这类写法的处理并不统一：
- Chrome 和 Firefox 会忽略
required="false"的值，仍按required处理（即字段必填） - Safari 在某些版本中会将其解析为字符串
"false"，导致el.required === true但el.getAttribute('required') === 'false'，JS 判断容易出错 - 服务端渲染（如 Next.js SSR）或预渲染工具（如 prerender-spa-plugin）不会执行 JS 修复逻辑，错误属性会原样输出到 HTML
真正麻烦的不是显示异常，而是表单验证、自动化测试、无障碍读屏（AT）工具对属性语义的严格依赖——一个 aria-disabled="false" 和 disabled="false" 都不是标准属性，但前者会被读屏软件当作真禁用处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
