真正能跨所有元素稳定生效的全局属性只有 id、class、data-*、title、lang、dir、style、tabindex（需显式设为 tabindex="0"）；其余所谓“全局”属性或受限于标签类型，或依赖特定条件才能生效。
真正能跨所有元素稳定生效的全局属性，只有 id、class、data-*、title、lang、dir、style、tabindex（需显式设为 tabindex="0"）这几个；其他标着“全局”的属性，要么在特定标签上无效，要么依赖额外条件才能起作用。
哪些全局属性真正在所有元素上生效
很多人误以为所有 W3C 文档里列在“Global attributes”下的属性都能随便用——实际不是。比如 contenteditable 在 <script> 或 <meta> 上完全没效果；hidden 放进 <head> 里，浏览器会静默忽略，既不报错也不渲染隐藏。
真正稳定、可预测、跨标签通用的核心属性就那么几个：
-
id：唯一标识，支持锚点跳转、document.getElementById()快速查找 -
class：多值空格分隔，CSS 和 JS 共用的样式/行为分组机制 -
data-*：自定义数据载体，命名转驼峰有陷阱（如data-user-id→dataset.userId） -
title：鼠标悬停提示，对可访问性有基础支撑 -
lang和dir：语言与文本方向，影响排版、语音朗读、搜索引擎识别 -
style：内联样式，优先级高但难维护，慎用于动态逻辑 -
tabindex：仅当显式写成tabindex="0"才让非表单元素获得键盘焦点
id 和 class 在 DOM 操作中的性能与行为差异
id 是浏览器内部哈希索引，document.getElementById("x") 是 O(1) 查找；而 class 依赖 CSS 选择器引擎，document.querySelector(".x") 或 document.getElementsByClassName("x") 都要遍历匹配，尤其在深层嵌套或节点量大时会有感知延迟。
立即学习“前端免费学习笔记（深入）”；
一个页面中 id 值重复，getElementById 只返回第一个匹配项，HTML 验证器会警告，但 JS 不报错。
class 支持多值，但空格敏感：class="btn primary" 和 class="btn primary"（两个空格）会被解析为三个类名：["btn", "", "primary"]，导致 classList.contains("primary") 返回 false。
用 classList 操作比直接改 className 更安全，例如 el.classList.add("active") 不会覆盖已有类，而 el.className += " active" 容易引入多余空格或重复。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
data-* 属性读写时的命名与类型陷阱
HTML 中写 data-user-id="123"，JS 里访问的是 dataset.userId（连字符变驼峰，首字母小写），不是 dataset.userid 或 dataset.Userid。大小写不匹配就拿不到值。
如果属性名含数字开头，比如 data-1st-place，JS 中无法通过 dataset.1stPlace 访问（变量名非法），得用 dataset["1st-place"]。
data- 后只能跟 ASCII 字母、数字、连字符（-）、点（.）、下划线（_），不能有冒号（:）或空格，data-user:name 是无效的，会被浏览器静默忽略。
值始终是字符串，哪怕写 data-count="0"，取出来也是 "0"，需要手动转类型：Number(el.dataset.count) 或 parseInt(el.dataset.count, 10)。
hidden 与 display: none 的行为区别
hidden 是布尔属性，写成 hidden 或 hidden="" 即生效，等价于 display: none —— 元素不显示、不参与布局、内外边距也不占空间。
但 HTML5 新增了 hidden="until-found"，此时语义变为 “内容暂不展示，但保留布局位置”，对应 CSS 的 content-visibility: hidden，适合配合懒加载或搜索高亮场景。
关键区别在于：用 JS 控制 el.hidden = true 会触发重排（reflow），而 el.style.display = "none" 同样触发；但 hidden 是语义化隐藏，对屏幕阅读器更友好，且无需担心样式层叠干扰。
注意：hidden 对 <head> 内元素无效，且不能和 aria-hidden="true" 混用——后者只影响辅助技术，不影响视觉渲染。
