在 HTML 中，前缀为 data- 的元素属性被称为 自定义数据属性（Custom Data Attributes）。这些属性用于存储与元素相关的私有数据，供 JavaScript 使用，而不会影响页面的样式或行为。
主要特点
自定义数据存储：
- 自定义数据属性允许开发者在 HTML 元素上存储额外的信息，这些信息不会影响 HTML 的标准行为或样式。
不影响页面表现：
data- 属性不会被浏览器默认处理或渲染，它们只用于存储数据并可通过 JavaScript 访问。
灵活性：
- 自定义数据属性名称是自由定义的，只需以
data- 为前缀，并且后面跟着自定义的名称。例如，data-user-id 和 data-info 都是合法的自定义数据属性。
语法
<element data-attribute-name="value">
...
</element>
示例
<div id="myElement" data-user-id="12345" data-role="admin">
User Info
</div>
访问自定义数据属性
使用 JavaScript 访问：
const element = document.getElementById('myElement');
// 获取自定义数据属性
const userId = element.getAttribute('data-user-id');
const role = element.getAttribute('data-role');
console.log(userId); // 输出: 12345
console.log(role); // 输出: admin
// 使用 dataset 访问
const data = element.dataset;
console.log(data.userId); // 输出: 12345
console.log(data.role); // 输出: admin
注意：
dataset 属性是一个对象，包含了所有以 data- 开头的属性，以驼峰命名的形式作为键（例如，data-user-id 会被访问为 dataset.userId）。- 属性名称中只允许使用字母、数字、
- 和 _。在 JavaScript 中访问时，连字符（-）会被转换为驼峰命名法（例如，data-user-id 变成 dataset.userId）。
使用场景
- 存储动态数据：如用户信息、状态标识等。
- 实现交互：通过将数据附加到元素上，可以在事件处理程序中使用这些数据来控制行为或更新 UI。
- 避免在 HTML 中硬编码数据：在不修改 DOM 结构的情况下存储和访问附加数据。
