HTML规范定义的全局属性共27个，如id、class、tabindex等；style和data-*不属于全局属性；id必须全局唯一，class允许多值但需规范命名；contenteditable需配合tabindex="0"才能聚焦；tabindex正数会破坏可访问性。

哪些属性真能用在任意 HTML 元素上

不是“所有元素都支持的属性”就叫全局属性。MDN 当前（2026 年 4 月）明确定义的全局属性共 27 个，浏览器按规范统一实现，语义明确、行为可预期。像 style 和 data-* 虽然确实能写在任何标签里，但严格来说不属于 HTML 规范定义的“全局属性”——前者是通用样式接口，后者是自定义数据约定。

真正属于全局属性的包括：id、class、accesskey、contenteditable、tabindex、lang、title、hidden、spellcheck、draggable、translate、dir、autofocus、inert、popover 等。完整列表以 MDN 官方为准，不建议靠“试了没报错”来判断。

id 和 class 看似简单，但混用会直接破坏 JS 和样式逻辑

id 必须全局唯一，document.getElementById("x") 遇到重复 id 时只返回第一个匹配节点——这不是 bug，是规范行为。SPA 中组件重复挂载、SSR 水合时服务端与客户端 id 冲突、第三方脚本注入同名节点，都会触发这个问题。

class 则允许多值、可复用，但命名不当会导致样式泄漏或选择器误匹配。比如 class="btn btn-primary active" 是合理组合，而 class="header header--fixed header__logo" 就容易因层级混乱导致 CSS 优先级失控。

立即学习“前端免费学习笔记（深入）”；

• 非必要场景下，用 data-id 替代 id 做列表项标识，避免唯一性风险
• 需要 JS 精准操作单个元素时，优先用 data-* + querySelector，而非依赖 id
• class 名中避免使用数字开头（如 class="1col"），CSS 选择器无法识别

contenteditable 不是“加个属性就能编辑”

设 contenteditable="true" 后，元素内容可编辑，但默认不可聚焦——键盘进不去，光标点不进去，用户根本没法操作。必须同时加 tabindex="0" 才能进入 tab 流并接受焦点。

另外，contenteditable 的合法值只有 true、false 和空字符串（等价于 true）。写成 contenteditable="plaintext-only" 或 contenteditable="on" 属于无效值，浏览器忽略，行为退化为不可编辑。

• 推荐写法：<div contenteditable="true" tabindex="0" spellcheck="false">
• spellcheck="false" 可关闭拼写检查下划线，避免干扰 UI
• 嵌套子元素若带 user-select: none 或 pointer-events: none，会阻断光标定位，需一并清理

tabindex 的数值不是“越大越优先”

tabindex 控制的是焦点流顺序，不是“权重”。设 tabindex="5" 会让该元素在 tab 键遍历时排在所有 tabindex="0" 元素之前，但会打乱 DOM 自然顺序，对屏幕阅读器极不友好，还可能让键盘用户迷失路径。

实际项目中，95% 的场景只需两种取值：

• tabindex="0"：按 DOM 顺序加入 tab 流，最安全常用
• tabindex="-1"：仅支持 JS 主动调用 .focus()，不参与自然 tab，适合模态框首次打开时手动聚焦

别为了“视觉上想让它先被 focus”而滥用正数 tabindex，可访问性测试工具（如 axe）会直接标红警告。