HTML: HTML 属性
最后更新：2026-10-13
属性为 HTML标签提供了额外的配置信息，从而使元素的行为和外观更加丰富
1. 什么是属性
HTML 属性（attribute）是写在开始标签中的特殊关键字，用来对标签进行更细致的配置。属性以 属性名="属性值" 的形式写在开始标签中，一个标签可以同时拥有多个属性，彼此之间用空格分隔。
▶ 示例
▶ 试一试在上面的例子中，href、src、alt、width、height、title 都是属性名，引号内的内容则是具体的属性值。属性名一律小写，属性值建议使用双引号包裹。
2. 常用全局属性
全局属性（Global Attributes）是可以在任何 HTML 标签上使用的属性。以下是几个最常用的全局属性：
(1) id — 唯一标识
id 属性为元素指定一个唯一的标识符。在同一个页面中，每个 id 只能使用一次。它常用于锚点跳转、CSS 选择器和 JavaScript 操作。
▶ 示例
▶ 试一试(2) class — 类名
class 属性可以为元素指定一个或多个类名。与 id 不同，同一个类名可以在多个元素上重复使用，是 CSS 样式化和 JavaScript 选择的主要手段。
▶ 示例
▶ 试一试(3) style — 内联样式
style 属性允许直接在标签中编写 CSS 样式。虽然不推荐大量使用（推荐将样式写在独立 CSS 文件中），但它在快速测试或动态覆盖样式时非常方便。
▶ 示例
▶ 试一试(4) title — 提示文字
title 属性为元素提供额外的提示信息。当用户将鼠标悬停在该元素上时，浏览器会显示一个工具提示（tooltip）。
▶ 示例
▶ 试一试(5) 全局属性总结
| 属性 | 作用 | 唯一性 | 使用频率 |
|---|---|---|---|
id |
唯一标识元素，用于锚点、CSS、JS | 页面唯一 | ⭐⭐⭐⭐⭐ |
class |
为元素指定类名，用于 CSS / JS | 可重复 | ⭐⭐⭐⭐⭐ |
style |
在标签内直接编写 CSS 样式 | — | ⭐⭐⭐ |
title |
鼠标悬停时显示提示文字 | — | ⭐⭐ |
lang |
声明元素内容的语言 | — | ⭐⭐ |
dir |
指定文本方向（ltr / rtl） | — | ⭐ |
3. 布尔属性
布尔属性（Boolean Attributes）是一类特殊的属性——它们不需要属性值，只要出现就表示"开/为真"。常见的布尔属性有 disabled、checked、readonly、required。
▶ 示例
▶ 试一试布尔属性也可以写成 属性名="属性名" 的形式，例如 disabled="disabled"，这两种写法效果完全一样。推荐使用简洁的写法（只写属性名）。
4. 自定义数据属性data-*
HTML5 引入了一个非常灵活的特性：自定义数据属性（custom data attributes）。你可以在任何 HTML 标签上创建自己的属性，只要属性名以 data- 开头。它的作用是在 HTML 标签中存储额外的数据，供 JavaScript 和 CSS 使用。
比如你有一个商品列表，想在每个商品上保存它的价格和库存数量——这些数据不需要显示在页面上，但 JavaScript 需要读取它们来做交互逻辑。
▶ 示例
▶ 试一试这个例子中，data-product-id、data-price、data-stock 都是我们自己定义的属性。它们不会影响页面的显示，但 JavaScript 可以轻松读取。点击"试一试"运行后，打开浏览器开发者工具（F12）的 Console 面板，就能看到读取到的数据。
命名规则：HTML 中用 data-user-name（连字符），JavaScript 中对应 dataset.userName（驼峰命名）。连字符后的首字母会自动转换为大写。
▶ 示例
▶ 试一试data-* 属性在前端开发中非常常见，例如保存用户 ID、排序状态、按钮类型、图表配置等。它比在 JavaScript 中维护一个独立的数据对象更直观，因为数据和对应的 HTML 结构"在一起"。到后续 JavaScript 章节中，你会大量用到这个特性。
data-* 属性应该只用来存储与页面展示相关的数据，而不是用来替代数据库或后端存储。敏感信息（如密码、密钥）绝对不能放在 data-* 中——因为任何人都可以通过查看网页源代码看到它。
❓ 常见问题
"value"）。单引号（'value'）在HTML5中也合法，但双引号是行业惯例，更容易阅读和维护。只有在特殊情况下才用单引号：当属性值本身包含双引号时（如 title='He said "Hello"'）。不加引号虽然在某些情况下浏览器能容错处理，但容易导致解析错误，绝对不推荐。id和class有什么区别？什么时候用哪个？id是"身份证号"，一个页面中只能有一个元素使用某个id值，具有唯一性；class是"班级名"，多个元素可以共享同一个class，具有复用性。实际开发中，90%的情况用class——因为样式复用是常态，而需要唯一标识的场景很少。id的优先级比class高（CSS选择器权重不同），但不要为了提高优先级而滥用id。记住：id用于JavaScript精确查找，class用于CSS批量样式。disabled、checked）不需要赋值？false，想关闭就直接删除属性。例如：<input disabled> 表示禁用，去掉disabled就启用。不要写成 disabled="true" 或 disabled="false"——前者虽然能工作但冗余，后者不会禁用输入框（这是常见误区）。📖 小节
- 属性以
属性名="属性值"的形式写在开始标签中，多个属性用空格分隔。 - 全局属性可用于任何标签：
id（唯一标识）、class（可重复类名）、style（内联样式）、title（提示文字）。 - 布尔属性无需赋值，出现即表示开启：
disabled、checked、readonly、required。 - 自定义数据属性
data-*可在标签中存储额外数据，JavaScript 通过datasetAPI 读取。
📝 作业
- 属性综合练习：创建一个包含以下元素的页面：
- 一个带
id、class、style属性的段落； - 一个带
title属性的链接（鼠标悬停可看到提示）； - 一个带
disabled属性的输入框（灰色的、不可点击）。
- 一个带
- *data- 练习：**创建一个商品卡片列表，每个卡片使用
data-*属性存储商品名称、价格和库存。然后用 JavaScript 在浏览器控制台中通过document.querySelectorAll和dataset读取这些数据。
