善用那些随处可用的属性，并把你自己的数据存进 HTML 里。
在 Kodokon 中打开本课有些属性在任何元素上都能用：这就是全局属性。你已经在用 id 和 class；再往你的工具箱里加上 hidden（隐藏元素）、lang（标明某段文字的语言）、title（悬停时的提示框）和 tabindex（键盘焦点顺序）。
<p lang="en" title="Original quote">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
We use cookies.
</div>需要给某个元素附上你自己的数据？千万别自创一个凭空的属性：HTML 正是为此保留了 data-* 属性。你可以自定义连字符后面的名字，使用小写的 kebab-case。典型场景：一个产品标识符、一个界面状态、一个组件配置。
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML for pros</h2>
</article>在 JavaScript 一侧，这些属性通过 dataset 属性来读取。注意自动转换：HTML 的 kebab-case 在 JavaScript 里变成 camelCase。所以 data-product-id 要用 dataset.productId 来读取。这些值始终是字符串，哪怕是 "true" 或 "42"。
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";