无效HTML属性指浏览器忽略、规范废弃或与标签不兼容的属性，如div上用align、img中border无值、role="button"的span缺tabindex和事件监听。
哪些 HTML 属性算“无效”？先别急着删
无效属性不等于“没用的属性”，而是指：浏览器忽略、规范已废弃、或与当前标签不兼容的属性。比如 align 用在 <div> 上（HTML5 已弃用），<code>border 出现在 <img alt="HTML无效属性清理怎么自动化？构建工具配置技巧" > 里却没设值，或 role="button" 套在没 tabindex 也没事件监听的 <span></span> 上。直接 grep 删除 align= 或 border= 很危险——有些老项目里它被 JS 动态读取（el.getAttribute('align')），删了会触发 Cannot read property 'align' of null。
vscode-html-validate 是最稳的静态检查入口
它能精准标出 no-unknown-attributes、attr-value-not-empty、aria-allowed-attr 这类问题，且不执行 JS，不会误伤运行时依赖。关键配置要加这三条：
-
"no-unknown-attributes": "error"—— 拦住<div data-legacy=""> 这类无定义的自定义属性（除非你明确加了 <code>data-*白名单） -
"attr-value-not-empty": ["error", {"allowEmpty": ["alt", "title"]} ]—— 允许alt=""，但拦住href=""或src="" -
"aria-required-attr": "error"—— 抓住role="dialog"却没写aria-modal或aria-labelledby的情况
注意：它只扫描 .html 和 .hbs 等后缀文件，若你用的是 .vue 或 .tsx 中的内联模板，得配 html-validate 的插件版或改用构建时集成。
构建时自动清理：html5-clear 比正则更可控
html5-clear 不是暴力删，而是基于 HTML AST 解析后按规则裁剪，支持保留白名单属性（如 id、class、data-testid），还能跳过特定注释块（<!-- html5-clear: skip -->）。常用命令：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
npx html5-clear -f src/index.html -o dist/index.html --ruleset=basic --remove-unused-id
几个易踩坑点：
-
--remove-unused-id依赖静态分析，若 ID 被document.getElementById('foo')字符串拼接调用（getElementById(prefix + 'foo')），它会误判为未使用 - 默认不处理内联
style，加--remove-inline-style才删，但可能干掉关键布局样式（比如style="display:none"是 JS 切换状态用的） - 它不识别构建工具注入的变量（如 Vite 的
），清理前确保 HTML 已完成预编译
真正要删属性时，别信“一键净化”工具
像 markup-de-crapulator 或某些在线清洗网站，会无差别删 data-、aria-、甚至 id，导致测试定位器（data-testid）、可访问性链路（aria-controls）、或 E2E 脚本全挂。安全做法是分两步：
- 第一步：用
vscode-html-validate输出 JSON 报告，提取所有被标记为no-unknown-attributes的属性名和位置 - 第二步：写一行
sed或 Node.js 脚本，只删确认无 JS 引用的属性，例如：sed -i 's/ align=["'\"'"][^"'\"'"]*["'\"'"]//g' index.html（注意引号转义）
复杂点在于：有些属性看似无效，其实是为 CSS 属性选择器服务的（如 input[data-validated] + .error），删前必须全局搜该属性是否出现在 CSS 文件里——这点所有自动化工具都做不到，只能人工交叉验证。
