所有HTML元素都支持全局属性，但仅普通容器、语义结构标签和表单/交互元素能稳定生效；contenteditable需配合tabindex="0"才符合可访问性要求；data-*属性读取须遵循驼峰命名规则且值恒为字符串。
哪些 HTML 标签能用全局属性？答案很直接
所有 HTML 元素都支持全局属性——但“支持”不等于“生效”。比如 hidden 写在 <script> 上，浏览器会静默忽略；contenteditable 加在 <meta> 上完全无效。真正能稳定起作用的，只看三类：普通容器（<div>、<span>）、语义结构标签（<header>、<main>、<section>）、表单/交互元素（<button>、<input>、<a>）。其他如 <html>、<body> 也支持，但部分属性（如 tabindex）对它们无实际意义。
contenteditable 和 tabindex 必须成对出现，否则等于没写
给 <p> 或 <div> 加 contenteditable="true" 后，用户依然点不进去、Tab 不进去、输不了中文——根本原因就是缺 tabindex="0"。这不是可选项，是 WCAG 2.1 强制要求的可访问性底线。
-
contenteditable的合法值只有"true"、"false"和空字符串；"plaintext-only"或"on"属于无效值，浏览器直接忽略 -
tabindex="-1"只允许 JS 聚焦（el.focus()），不进自然 tab 流，适合弹窗打开后手动聚焦 -
tabindex="0"是最安全的选择：按 DOM 顺序加入 tab 流，屏幕阅读器也能正确识别 - 子元素若带
user-select: none或pointer-events: none，会阻断光标定位，必须一并清理
data-* 属性命名和读取有硬性规则，大小写/连字符错一点就拿不到值
HTML 中写 data-user-id="123"，JS 里必须用 dataset.userId 访问——连字符自动转驼峰、首字母小写。写成 dataset.userid 或 dataset.Userid 都返回 undefined。
- 属性名不能以数字开头：
data-1st-place无法用dataset.1stPlace读取（变量名非法），只能用dataset["1st-place"] - 冒号、空格、大写字母会被浏览器静默丢弃：
data-user:name存不进 DOM，data-userId不被标准化识别 - 值始终是字符串：
data-count="0"取出来是"0"，需手动转类型：Number(el.dataset.count) - 动态设置推荐用
el.dataset.foo = "bar"，而非el.setAttribute("data-foo", "bar")（后者不触发 dataset 更新）
id 和 class 看似通用，但重复或空格问题会直接破坏逻辑
id 必须全局唯一，document.getElementById("x") 遇到重复时只返回第一个匹配项——这不是 bug，是规范行为。SPA 组件重复挂载、SSR 水合失败、第三方脚本注入同名节点，都会触发这个问题。
立即学习“前端免费学习笔记（深入）”；
-
class支持多值，但空格敏感：class="btn primary"和class="btn primary"（两个空格）会被解析为三个类名：["btn", "", "primary"]，导致classList.contains("primary")返回false - 改类名优先用
classList.add()/classList.toggle()，别拼字符串：el.className += " active"容易引入多余空格或重复 - 性能上差异明显：
document.getElementById("x")是 O(1) 哈希查找；document.querySelector(".x")要走 CSS 选择器引擎，上千节点时延迟可感知 - 非必要场景下，用
data-id替代id做列表项标识，规避唯一性风险
真正跨浏览器、跨场景稳定的全局属性其实就那几个：id、class、data-* 、title、lang、dir、style、tabindex。其他像 inert、popover、virtualkeyboardpolicy 要么支持度有限，要么语义约束强，别当成“写了就有效”的通用开关。
