html全局属性是控制行为、可访问性和数据流的底层开关；截至2026年4月，mdn明确定义约20个真正全局属性，如class、id、data-等，而on类属性不属于html规范全局属性。
HTML全局属性不是“锦上添花”的装饰，而是控制行为、可访问性和数据流的底层开关——用错一个，比如漏掉 tabindex="0" 就会让 contenteditable 彻底失焦；写错 lang 值可能让屏幕阅读器读成日语；data- 属性名含大写字母或特殊符号，JavaScript 里就取不到。
哪些属性真能用在所有标签上？
截至 2026 年 4 月，MDN 明确列为全局属性的有：class、id、style、title、lang、dir、hidden、contenteditable、tabindex、spellcheck、data-*、inert、popover 等约 20 个。注意：
-
on*类（如onclick）不是 HTML 规范定义的全局属性，而是 DOM 接口暴露的事件处理器 -
xml:lang和xml:base已被弃用，仅因兼容性保留 -
inert在 Chrome 122+、Firefox 125+ 才稳定支持，旧版需降级逻辑 -
virtualkeyboardpolicy目前 Safari 不支持，慎用于核心交互
contenteditable + tabindex 是硬绑定关系
contenteditable 看似开个开关就行，但实际项目里 80% 的失效都源于没配对 tabindex：
- 只写
contenteditable="true"→ 元素不可键盘聚焦，WCAG 2.1 2.1.1 失败 - 加了
tabindex="0"后，才真正进入 tab 流，支持el.focus()编程聚焦 - 误设
tabindex="1"或更高正数 → 会打断自然阅读顺序，对屏幕阅读器用户不友好 - 推荐写法：
<div contenteditable="true" tabindex="0" spellcheck="false">文本区</div>，其中spellcheck="false"可避免拼写下划线干扰 UI
data-* 属性命名和读取的坑
data- 是最常被滥用的全局属性之一，问题集中在命名和 JS 访问环节：
- 命名必须全小写，且只含字母、数字、连字符（
-）；data-userID或data-user_id都无效 - HTML 中写
data-product-id="1001"，JS 中必须用el.dataset.productId（自动转驼峰），不能写el.dataset["product-id"] - 值为空字符串时，
dataset仍会返回该键；但若属性根本不存在，访问结果为undefined - 不要用
data-存大量结构化数据（如 JSON 字符串），应改用JSON.parse(el.getAttribute('data-config'))显式解析
title 属性不是 tooltip 替代品
title 是唯一零成本、原生支持无障碍的提示机制，但它能力极窄：
- 移动端（尤其 iOS Safari）基本不触发悬停，不能当作主要交互手段
- 内容超过约 120 字符会被截断，且不支持换行、图标、富文本
- 若元素设置了
pointer-events: none，title完全失效——浏览器收不到事件 - 真正关键的是可访问性链路：
title天然被屏幕阅读器读出；而自定义 tooltip 必须手动加aria-describedby指向提示元素，否则盲人用户完全感知不到
最容易被忽略的其实是组合约束：比如 contenteditable 元素里嵌套 img 标签，若图片自带 user-select: none，光标就无法定位到图片前后；又比如 inert 和 hidden 同时存在时，inert 会阻止所有交互，但 hidden 仅影响渲染——两者语义不叠加，而是各自生效。这些细节不写进代码注释，过三个月自己都得重读 MDN。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
