HTML全局属性共27个，是MDN明确定义、浏览器统一支持且语义明确的一组属性；class与id虽同属全局属性，但用途、约束及影响范围截然不同，混淆易致DOM操作失败、样式失控、可访问性降级及SEO隐患。
HTML 全局属性不是“所有标签都能用”的模糊概念，而是 MDN 明确列出、浏览器统一支持、且语义和行为有明确定义的一组属性。而 class 和 id 虽然都算全局属性，但它们的用途、约束、影响范围完全不同——混淆二者常导致 DOM 操作失败、样式覆盖失控、可访问性降级，甚至 SEO 隐患。
哪些属性真正属于 HTML 全局属性
截至 2026 年 4 月，MDN 官方定义的全局属性共 27 个，包括：accesskey、autocapitalize、autocorrect、autofocus、class、contenteditable、dir、draggable、enterkeyhint、exportparts、hidden、id、inert、inputmode、is、itemid、itemprop、itemref、itemscope、itemtype、lang、nonce、part、popover、slot、spellcheck、tabindex、title、translate、virtualkeyboardpolicy。
注意：style 和 data-* 常被误认为全局属性，但严格来说：style 是所有元素都支持的“标准属性”，未列入全局属性列表；data-* 是“自定义数据属性”，属于一类特殊约定，不参与全局属性语义体系。
使用时需注意：
立即学习“前端免费学习笔记（深入）”；
-
tabindex只对可聚焦元素（如<button></button>、<a></a>、<input>）生效，给<div> 加 <code>tabindex="0"才能使其可 tab 进入，设为-1则仅支持 JS 聚焦 -
contenteditable设为true后，元素内容可编辑，但不会自动触发input或change事件，需监听blur或input（部分浏览器支持） -
hidden是布尔属性，写成hidden或hidden="hidden"效果一致，但不能写hidden="false"—— 浏览器只看是否存在，不解析值 - SPA 应用中组件重复挂载，多个
<div id="modal-root"> 被插入 DOM，<code>document.getElementById("modal-root")总是返回第一个 - 服务端渲染 + 客户端水合（hydration）时，模板里写了静态
id="header"，JS 又动态生成一个同名id，造成冲突 - 第三方脚本（如广告、统计 SDK）悄悄注入带
id的节点，覆盖了你原本的锚点或控制节点 - 用
data-id替代非必要场景下的id，比如列表项标识：<li data-id="1024"> - 需要 JS 精准操作单个元素时，优先用
querySelector配合更具体的选择器，例如：document.querySelector("main .user-profile[data-user-id='1024']") - 若必须用
id，在构建阶段通过 lint 工具（如eslint-plugin-jsx-a11y）检查重复 -
#header权重是 0,1,0,0；.header是 0,0,1,0；哪怕写十个.nav-link连写，也压不过一个#main-nav—— 这不是理论，是浏览器真实计算规则 - 过度使用
id选择器会让后续覆盖变得极其别扭，尤其引入第三方 UI 库（如 Bootstrap、Ant Design）时，它们基本不用id写样式，你的#sidebar很可能被库的.sidebar覆盖失败 -
class支持组合与状态表达，例如class="btn btn--disabled js-form-submit"，既描述视觉（btn--disabled），又标记行为（js-form-submit），id无法承载这种语义密度 - 用
document.getElementById("save-btn")获取单个高频操作按钮没问题，快且明确；但批量操作表单项，务必用document.querySelectorAll(".form-field")，而非给每个字段硬塞唯一id -
label的for属性必须指向id，这是可访问性刚需，不能用class替代；但同一组 radio 的name属性才是分组关键，id只用于绑定单个label - 锚点跳转（
<a href="#section2"></a>）依赖id，但现代 SPA 更推荐用scrollIntoView()+data-section控制，避免 URL 锚点干扰路由 -
aria-labelledby、aria-describedby等 ARIA 属性靠id引用目标，一旦重复，读屏器只会读第一个匹配项 - SEO 抓取工具可能将重复
id解释为结构混乱，降低页面可信度评分 - Chrome DevTools 的 Elements 面板里，右键“Reveal in Elements Panel”对重复
id总是定位到第一个，调试时你以为改了后一个，其实动的是前一个 -
class虽无唯一性约束，但命名随意（如class="red big"）会让团队协作成本陡增；应坚持语义化命名（class="error-message"）而非表现式命名（class="red-text"）
为什么 document.getElementById() 有时拿不到预期元素
根本原因只有一个：页面中存在重复的 id 值。HTML 规范强制要求 id 全局唯一，但浏览器不校验，只按“遇到第一个就返回”处理。
典型现象包括：
解决方式不是加 try-catch，而是主动规避：
class 和 id 在 CSS 和 JS 中的实际差异
class 和 id 不只是写法不同（. vs #），它们在真实工程中触发的是两套逻辑。
CSS 层面的关键事实：
JS 层面的实操建议：
最容易被忽略的隐性风险点
重复 id 不会报错，但会导致多个系统同时失灵：
