HTML: HTML 属性

属性为 HTML标签提供了额外的配置信息，从而使元素的行为和外观更加丰富

1. 什么是属性

HTML 属性（attribute）是写在开始标签中的特殊关键字，用来对标签进行更细致的配置。属性以 属性名="属性值" 的形式写在开始标签中，一个标签可以同时拥有多个属性，彼此之间用空格分隔。

▶ 示例

<!-- 单个属性 -->
<a href="https://example.com">这是一个链接</a>

<!-- 多个属性，用空格分隔 -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="A sample photo" width="800" height="600">

<!-- 属性值建议使用双引号包裹，但单引号也可以 -->
<p title='一段提示文字'>带提示的段落</p>

在上面的例子中，href、src、alt、width、height、title 都是属性名，引号内的内容则是具体的属性值。属性名一律小写，属性值建议使用双引号包裹。

2. 常用全局属性

全局属性（Global Attributes）是可以在任何 HTML 标签上使用的属性。以下是几个最常用的全局属性：

(1) id — 唯一标识

id 属性为元素指定一个唯一的标识符。在同一个页面中，每个 id 只能使用一次。它常用于锚点跳转、CSS 选择器和 JavaScript 操作。

▶ 示例

<h1 id="page-title">欢迎来到我的网站</h1>
<!-- 通过 #page-title 可以跳转到这个标题位置 -->
<a href="#page-title">跳转到标题</a>

(2) class — 类名

class 属性可以为元素指定一个或多个类名。与 id 不同，同一个类名可以在多个元素上重复使用，是 CSS 样式化和 JavaScript 选择的主要手段。

▶ 示例

<!-- 多个元素可以使用相同 class -->
<p class="highlight">这段文字会高亮显示</p>
<p class="highlight">这段文字也会高亮显示</p>

<!-- 一个元素可以有多个 class，用空格分隔 -->
<div class="box bordered rounded">这是一个带边框的圆角盒子</div>

(3) style — 内联样式

style 属性允许直接在标签中编写 CSS 样式。虽然不推荐大量使用（推荐将样式写在独立 CSS 文件中），但它在快速测试或动态覆盖样式时非常方便。

▶ 示例

<p style="color: red; font-size: 18px;">这是一段红色大字</p>
<div style="background: #f0f0f0; padding: 10px; border-radius: 5px;">
  这是一个带背景色的圆角盒子
</div>

(4) title — 提示文字

title 属性为元素提供额外的提示信息。当用户将鼠标悬停在该元素上时，浏览器会显示一个工具提示（tooltip）。

▶ 示例

<p title="这是一段提示文字">把鼠标放在这段文字上看看会发生什么</p>
<abbr title="HyperText Markup Language">HTML</abbr>

(5) 全局属性总结

3. 布尔属性

布尔属性（Boolean Attributes）是一类特殊的属性——它们不需要属性值，只要出现就表示"开/为真"。常见的布尔属性有 disabled、checked、readonly、required。

▶ 示例

<!-- 禁用状态的输入框 -->
<input type="text" disabled>

<!-- 预选中的复选框 -->
<input type="checkbox" checked> 同意条款

<!-- 只读输入框 -->
<input type="text" value="只读内容" readonly>

<!-- 必填字段 -->
<input type="email" required>

布尔属性也可以写成 属性名="属性名" 的形式，例如 disabled="disabled"，这两种写法效果完全一样。推荐使用简洁的写法（只写属性名）。

4. 自定义数据属性data-*

HTML5 引入了一个非常灵活的特性：自定义数据属性（custom data attributes）。你可以在任何 HTML 标签上创建自己的属性，只要属性名以 data- 开头。它的作用是在 HTML 标签中存储额外的数据，供 JavaScript 和 CSS 使用。

比如你有一个商品列表，想在每个商品上保存它的价格和库存数量——这些数据不需要显示在页面上，但 JavaScript 需要读取它们来做交互逻辑。

▶ 示例

<ul>
  <li data-product-id="101" data-price="29.9" data-stock="50">T恤 - ¥29.9</li>
  <li data-product-id="102" data-price="99.9" data-stock="20">背包 - ¥99.9</li>
  <li data-product-id="103" data-price="199" data-stock="0">耳机 - ¥199（已售罄）</li>
</ul>

<script>
// 通过 dataset 访问 data-* 数据
const items = document.querySelectorAll('li');
for (let item of items) {
  console.log(item.dataset.productId);  // "101", "102", "103"
  console.log(item.dataset.price);      // "29.9", "99.9", "199"
}
</script>

这个例子中，data-product-id、data-price、data-stock 都是我们自己定义的属性。它们不会影响页面的显示，但 JavaScript 可以轻松读取。点击"试一试"运行后，打开浏览器开发者工具（F12）的 Console 面板，就能看到读取到的数据。

命名规则：HTML 中用 data-user-name（连字符），JavaScript 中对应 dataset.userName（驼峰命名）。连字符后的首字母会自动转换为大写。

▶ 示例

<div data-user-name="张三" data-user-age="20">用户信息</div>

<script>
// 读取 data-user-name → dataset.userName（驼峰）
const div = document.querySelector('div');
console.log(div.dataset.userName);  // "张三"
console.log(div.dataset.userAge);   // "20"
</script>

❓ 常见问题

📖 小节

• 属性以 属性名="属性值" 的形式写在开始标签中，多个属性用空格分隔。
• 全局属性可用于任何标签：id（唯一标识）、class（可重复类名）、style（内联样式）、title（提示文字）。
• 布尔属性无需赋值，出现即表示开启：disabled、checked、readonly、required。
• 自定义数据属性 data-* 可在标签中存储额外数据，JavaScript 通过 dataset API 读取。

📝 作业

1. 属性综合练习：创建一个包含以下元素的页面：
   • 一个带 id、class、style 属性的段落；
   • 一个带 title 属性的链接（鼠标悬停可看到提示）；
   • 一个带 disabled 属性的输入框（灰色的、不可点击）。
2. *data- 练习：**创建一个商品卡片列表，每个卡片使用 data-* 属性存储商品名称、价格和库存。然后用 JavaScript 在浏览器控制台中通过 document.querySelectorAll 和 dataset 读取这些数据。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们