HTML 属性

这一课你将能做到

1. 正确使用 id、class、style、title、hidden、contenteditable、tabindex、lang、dir、translate 等全局属性
2. 用 data-* 自定义属性存储私有数据，并通过 JS 的 dataset API 安全读写
3. 理解 ARIA 的角色（role）与状态属性，知道何时该用、何时不该用

为什么要学

属性是 HTML 元素的「配置项」。id 和 class 决定 CSS 和 JS 怎么找到你；data-* 让元素携带业务数据；tabindex 决定键盘导航顺序；hidden 和 contenteditable 控制可见性与可编辑性。用错属性，CSS 选择器失效、JS 取不到数据、键盘用户走不出弹窗、屏幕阅读器读错内容。

人话：属性就像给元素贴标签、挂钥匙、装开关——贴错了，后面所有操作都找不到门。

先建立图像

属性的四大类别：

标识定位：id（唯一）/ class（复用）/ style（内联样式）
交互行为：tabindex / contenteditable / draggable / hidden
数据携带：data-* / title / lang / dir / translate
无障碍增强：role / aria-* 系列

核心原则：属性是元素的元数据，不是内容的替代品。能用语义标签表达的，不用属性硬凑。

跟着做

步骤 1：id 与 class

新建 attrs.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性演示</title>
    <style>
        .card { border: 1px solid #ddd; padding: 16px; margin: 8px; }
        .highlight { background-color: #fff3cd; }
        #special-card { border-color: #007bff; }
    </style>
</head>
<body>
    <!-- id 唯一，全页只能有一个 special-card -->
    <div id="special-card" class="card highlight">
        <h2>特殊卡片</h2>
        <p>id 唯一，class 可多个。</p>
    </div>

    <div class="card">
        <h2>普通卡片</h2>
        <p>只有 class，没有 id。</p>
    </div>
</body>
</html>

• id：全页唯一，JS getElementById 用，CSS #id 优先级最高。一个元素只能有一个 id。
• class：可多个，空格分隔，JS getElementsByClassName / querySelectorAll 用，CSS .class 可复用。

步骤 2：data-* 自定义属性

<!-- 携带业务数据，不显示在页面 -->
<div class="product"
     data-id="1001"
     data-price="299.00"
     data-category="electronics"
     data-stock="15">
    <h3>无线耳机</h3>
    <p>价格：¥299</p>
    <button onclick="addToCart(this)">加入购物车</button>
</div>

<script>
function addToCart(btn) {
    const product = btn.closest('.product');
    // dataset 自动把 data-* 转成 camelCase
    const id = product.dataset.id;           // "1001"
    const price = parseFloat(product.dataset.price);  // 299.00
    const category = product.dataset.category;        // "electronics"
    const stock = parseInt(product.dataset.stock);    // 15

    console.log(`加入购物车：${id}，价格 ${price}，分类 ${category}，库存 ${stock}`);
}
</script>