全局属性里出镜率最高的是 class 与 id：前者是样式与选择器的挂钩，后者是全页唯一的标识。title 提供悬浮提示，lang 声明内容语言，tabindex 控制键盘焦点顺序，hidden 直接隐藏元素（等同于 display:none 的语义版）。data-* 是自定义数据的官方通道，JS 里用 dataset 读取，比往标签上乱塞属性规范得多。
需要特别区分的是几对容易混淆的属性：hidden 与 CSS display:none 效果相同但语义不同；tabindex 大于 0 会打乱默认焦点顺序，除非有强需求否则别写；id 用于锚点与唯一标识，class 用于样式分组，拿 id 写样式虽然权重大但复用性差。contenteditable、draggable、spellcheck 也属于全局属性，各自开启一整块交互能力。
<style> .box { border: 1px dashed #e78a3e; border-radius: 8px; padding: 10px; } </style> <div class="box" id="intro" title="鼠标悬浮看到的提示文字" lang="zh-CN" data-role="card" data-sort="3"> 这个元素演示了多个全局属性的组合用法。 </div> <p tabindex="0">这段文字可以用 Tab 聚焦，按回车也不会有事。</p> <p hidden>默认不可见，需 JS 移除 hidden 属性后显示。</p>