HTML 没有专门标记“无效内容”的标准属性或元素。所谓“无效”，通常指语义错误、结构违规、或被浏览器忽略的写法，而不是靠某个属性主动声明“这段是错的”。真要提示内容异常，得靠开发者自己用语义合理的方式传达意图，而不是依赖不存在的 invalid 或 error 属性。
为什么不能加 invalid 属性？
HTML 规范里压根没定义 invalid 这个全局属性。你硬写上去，浏览器既不会报错，也不会做任何特殊处理——它就当是个无意义的自定义属性，跟 data-xxx 一样被忽略。表单控件（如 input）的 validity 状态是 JS 运行时计算出来的，不是靠 HTML 属性静态标记的。
常见错误现象：
– 页面里写了 <div invalid>出错了</div>，但控制台没提示，CSS 也选不到；
– 以为加了这个属性就能触发原生校验样式或行为，结果毫无反应。
- HTML 属性必须是规范明确定义的，否则就是“作者自定义”，不具语义和交互能力
- 即使用了
aria-invalid="true"，它只影响可访问性（告诉读屏软件“这地方有问题”），不改变渲染或表单提交逻辑 - 想让内容视觉上“失效”，该用 CSS（比如
opacity: 0.5; pointer-events: none;），而不是幻想一个不存在的 HTML 属性
aria-invalid 是唯一接近的选项，但只服务辅助技术
aria-invalid 是 ARIA 规范里的属性，用于向屏幕阅读器传达控件当前状态是否有效。它不改变 DOM 结构、不触发浏览器校验、也不影响表单提交行为。
立即学习“前端免费学习笔记（深入）”；
使用场景：
– 表单字段后端校验失败，前端还没来得及清空输入，但需要立刻告知视障用户；
– 第三方组件内部状态异常，需透出可访问性信号。
- 取值只能是
"true"、"false"或"grammar"/"spelling"（极少用） - 必须配合
role或原生表单元素（如input、textarea）才有意义，单独用在div上效果极弱 - 它不会让浏览器自动标红边框——样式还得你自己写
[aria-invalid="true"] { border-color: #d32f2f; }
真正有效的“标记无效”方式：靠结构 + JS + 样式组合
浏览器判断内容是否“有效”，依据的是 HTML 结构合法性（比如嵌套规则）、元素上下文（如 tr 必须在 table 里），以及运行时 JS 的校验逻辑。没有一劳永逸的标记，只有分层应对：
- 结构错误（如
<p></p> <div>文本</div>）：浏览器会自动纠错（把div提到p外），你没法“标记”它，只能修复源码 - 表单字段校验失败：用
setCustomValidity()配合reportValidity()，再手动设aria-invalid和 CSS 类 - 动态插入的非法 HTML（如 JS 拼接字符串含未闭合标签）：用
DOMParser预检，或改用textContent而非innerHTML避免注入风险
示例（轻量校验反馈）：<input type="email" id="email">
document.getElementById("email").addEventListener("blur", () => {<br> if (!this.checkValidity()) {<br> this.setAttribute("aria-invalid", "true");<br> this.classList.add("invalid");<br> } else {<br> this.removeAttribute("aria-invalid");<br> this.classList.remove("invalid");<br> }<br>});
最容易被忽略的一点：所谓“无效内容”，90% 的情况其实是开发者混淆了「渲染异常」「语义错误」「业务逻辑错误」三类问题。浏览器只管前两类，第三类必须靠 JS 判断+人工标记，没有任何 HTML 属性能越俎代庖。
