HTML 属性：语法、class、id、data-* 与布尔属性

什么是 HTML 属性

属性为元素补充信息。它写在开始标签里，由名称、等号和带引号的值组成：name="value"。一个元素可以有任意多个属性，彼此用空格分隔。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href 告诉链接要去哪里，src 和 alt 描述图片，type、placeholder 和 required 配置输入框。每种元素都有自己的一组属性，还有少数属性（下面的全局属性）适用于所有元素。

语法规则

<input type="text" name="city" value="Paris" disabled>

• 名称、等号、带引号的值。 惯例是用双引号；单引号也可以（想在值里放双引号时就这样写：title='Say "hi"'）。
• 名称不区分大小写。 CLASS 和 class 是同一个属性。值则区分大小写：class="Box" 和 class="box" 是两个不同的类。
• 没有空格时引号可以省略，但还是要加上。 class=big box 会给元素设置类 big，再加上第二个毫无意义的属性 box。
• 顺序无关紧要。 <img alt="" src="a.png"> 和 <img src="a.png" alt=""> 完全相同。
• 同一个元素上每个名称只能出现一次。 如果某个属性出现两次，浏览器会保留第一个，悄悄丢掉第二个。

布尔属性

有些属性只有开和关两种状态。对于这类属性，只要存在就表示 true，值会被忽略。disabled、checked、required、readonly、hidden、multiple、autofocus 和 open 都是这样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

第三个按钮虽然值写的是 false，却仍然是禁用的，因为浏览器只检查这个属性在不在。要关闭布尔属性，就把它删掉。在 JavaScript 中，button.disabled = false 做的正是这件事。

class 属性

class 给元素起一个或多个名字，CSS 和 JavaScript 用它们来找到元素。多个元素可以共用一个类，一个元素也可以有多个类，用空格分隔：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

每多一个类，就会叠加一组样式规则。在 CSS 中用点号选择类（.card）；在 JavaScript 中，用 element.classList.add('featured') 和 classList.remove 修改类。类是设置样式的常规方式：你的 CSS 大多会以类为目标。

id 属性

id 给元素起一个在页面上唯一的名字。当你恰好需要一个元素时使用它：链接的跳转目标、<label for>，或者 document.getElementById。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

点击标签会让输入框获得焦点，因为 for="email" 指向了 id="email"。链接会滚动到 #pricing，因为 href 中的片段与这个 id 相匹配。

id 不能包含空格。最好以字母开头，方便在 CSS 中使用：不转义的话，#2col 不是合法的 CSS 选择器。

全局属性

以下属性适用于任何元素：

lang 属性有单独的页面，因为它会影响屏幕阅读器、翻译和搜索。

data-* 属性

需要在元素上存放自己的值时，给名称加上 data- 前缀。前缀后面可以接任何名字，JavaScript 通过 element.dataset 读取这些值，名称中的连字符会转换成驼峰命名：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id 变成了 dataset.productId。读到的值始终是字符串，所以做算术运算之前要先用 Number() 转换。CSS 也可以根据它们来选择元素：[data-price="4.50"]。

常见错误

• 把 class 写两次。 <div class="a" class="b"> 只保留 a。把两个类写在同一个属性里：class="a b"。
• 重复使用同一个 id。 两个元素使用相同的 id 会让 #links、标签和 getElementById 出问题，后者只返回第一个元素。会重复出现的东西请用类。
• disabled="false" 或 checked="false"。 属性仍然存在，所以它依然是开启的。应该把它删掉。
• 含空格的值不加引号。 alt=My photo 会把 alt 设为 My。每个值都要加引号。
• 不加 data- 就自创属性。 <div price="4"> 是不合法的 HTML，还可能和将来的标准属性冲突。请用 data-price。