全局属性

讲解

全局属性是可以写在任何 HTML 元素上的属性。最常用的是 id 和 class：id 在整个页面里必须唯一，用于锚点跳转（#comments）、label 的 for 关联、以及 JS/CSS 精确定位某一个元素；class 可以重复、一个元素可以写多个（空格分隔），是 CSS 和 JS 批量选中同类元素的主要方式。命名规范是社区共识：小写字母加连字符（kebab-case），如 site-header、article-card，按用途而非外观命名。

第二组与展示和提示相关：style 直接写行内样式，优先级最高但难以维护，只适合临时调试或由 JS 动态设置；title 提供悬停提示，不要指望它承载关键信息——触屏没有悬停，读屏软件也不保证念它；hidden 直接隐藏元素（语义上表示「当前不相关」），比手写 display: none 更直观。lang 和 dir 标注语言与文字方向，中英混排页面可以给个别段落单独标 lang="en"，阿拉伯语页面则需要 dir="rtl"。

第三组偏交互：tabindex="0" 让原本不可聚焦的元素进入 Tab 键顺序（自定义组件才需要，正文元素不要乱加，tabindex 大于 0 更是公认反模式）；contenteditable 让元素内容可直接编辑（富文本编辑器的基础）；spellcheck 控制拼写检查；draggable 标记可拖拽。最后是 data-* 自定义属性：data-product-id="42" 把业务数据挂在元素上，JS 通过 element.dataset.productId 读取，是 HTML 与 JS 之间传数据的标准通道，比把数据塞进 class 或 id 干净得多。

示例

<!-- id 唯一，class 可复用、可叠加 -->
<article id="post-42" class="card featured">
  <h2 class="card-title">语义化指南</h2>
  <p lang="en">Semantic HTML matters.</p>
  <span class="badge" title="本文约 5 分钟读完">速读</span>
</article>

<!-- hidden：当前不显示 -->
<p id="shipping-tip" hidden>满 99 元包邮</p>

<!-- data-*：给 JS 预留的数据通道 -->
<button class="buy-btn" data-product-id="42" data-price="199">加入购物车</button>

<!-- contenteditable：可编辑区域 -->
<div class="editor" contenteditable="true" spellcheck="true">在这里输入内容……</div>

JS 读取 data-* 的方式（了解即可）：

const btn = document.querySelector('.buy-btn');
console.log(btn.dataset.productId); // '42'
console.log(btn.dataset.price); // '199'

常见坑

• id 重复：一个页面两个 id="header"，锚点跳转和 label 关联都只命中第一个，JS 选择器也只会拿到第一个。id 必须全页唯一。
• class 当数据存储用：class="price-199" 这种把数据编进类名的做法脆弱又难解析，数据请放 data-*。
• tabindex 乱用正数：tabindex="5" 会打乱整个页面的 Tab 顺序，键盘用户直接迷路。自定义组件只用 0（可聚焦）和 -1（仅脚本聚焦）。
• title 承载关键信息：手机上无法悬停、读屏不保证朗读，title 只能放锦上添花的补充说明。

小结

id 唯一、class 复用，命名见名知意；hidden 隐藏、title 补充、lang/dir 标语言；tabindex 谨慎、data-* 是 HTML 与 JS 的标准数据通道。下一章学习字符实体与注释这两个「写法层面」的知识。