HTML全局属性是MDN明确定义的27个属性，如id、class、lang等；style和data-*虽通用但不属于全局属性；id需全局唯一，class操作应避免空格问题；contenteditable需配合tabindex="0"才可聚焦；hidden为布尔属性，tabindex正数会破坏可访问性。
HTML 全局属性不是“所有标签都能加”的模糊概念，而是 MDN 明确定义的 27 个、浏览器统一实现、语义和行为可预期的属性集合。style 和 data-* 虽然能写在任意元素上，但严格来说不属于全局属性。
哪些属性真正算全局属性（截至 2026 年）
MDN 官方当前列出的全局属性共 27 个，包括：id、class、accesskey、autocapitalize、autocorrect、autofocus、contenteditable、dir、draggable、enterkeyhint、exportparts、hidden、inert、inputmode、is、itemid、itemprop、itemref、itemscope、itemtype、lang、nonce、part、popover、slot、spellcheck、tabindex、title、translate、virtualkeyboardpolicy。
其中高频稳定可用的核心属性其实就几个：id、class、lang、dir、title、hidden、tabindex、contenteditable、draggable、spellcheck。
注意：style 是所有元素都支持的标准属性，但不在全局属性列表中；data-* 是自定义数据约定，不参与全局语义体系。
立即学习“前端免费学习笔记（深入）”；
为什么 id 和 class 最容易出问题
id 必须全局唯一，否则 document.getElementById("x") 只返回第一个匹配节点——这不是 bug，是规范行为。常见踩坑点：
- SPA 组件重复挂载时生成相同
id - SSR 水合阶段服务端与客户端
id冲突 - 第三方脚本注入同名节点，覆盖原有逻辑
-
class中含空格不规范，如class="btn primary"（两个空格）会被解析为["btn", "", "primary"]，导致classList.contains("primary")返回false - 用
className += " active"直接拼接，易引入多余空格或重复类名；应优先用classList.add("active")
contenteditable 不是加了就能编辑
设 contenteditable="true" 后，内容虽可编辑，但默认不可聚焦——键盘进不去，光标点不进去。必须同时加 tabindex="0" 才能进入 tab 流并接受焦点。
另外要注意：
- 合法值只有
true、false和空字符串（等价于true）；contenteditable="plaintext-only"或contenteditable="on"是无效值，浏览器忽略 - 它不会自动触发
input或change事件，需监听blur或部分浏览器支持的input - 子元素若带
user-select: none或pointer-events: none，会阻断光标定位，需一并清理 - 推荐组合写法：
<div contenteditable="true" tabindex="0" spellcheck="false">
hidden 和 tabindex 的行为陷阱
hidden 是布尔属性，写成 hidden 或 hidden="hidden" 效果一致；但 hidden="false" 是无效写法——浏览器只判断是否存在，不解析值。
tabindex 的数值不是“越大越优先”：
-
tabindex="0"：加入自然 tab 流，可被键盘聚焦 -
tabindex="-1"：仅支持 JS 主动聚焦（el.focus()），不参与 tab 流 - 正数（如
tabindex="1"）会破坏可访问性顺序，不建议使用 -
tabindex对原本不可聚焦的元素（如<div>）才需要显式设置；对<button>、<a href>等原生可聚焦元素，加了反而可能干扰默认行为
真正难处理的，往往不是属性会不会用，而是多个全局属性叠加时的隐含冲突——比如 hidden 元素上再设 tabindex="0"，它既不可见又可聚焦，屏幕阅读器可能报错，键盘用户却卡在空白处。这种组合在真实项目里比想象中更常出现。
