HTML自定义数据属性通过data-*语法在元素上存储额外信息，如data-user-id="123"，JavaScript通过dataset以驼峰命名法访问，如dataset.userId，常用于存储状态、配置参数或关联ID，不影渲染且便于数据传递。
HTML自定义数据属性通过 data-* 语法实现，允许开发者在元素上存储额外信息，供JavaScript读取和使用。这些属性不会影响页面渲染，但能有效传递私有数据。
基本语法
自定义数据属性以 data- 开头，后接自定义名称。名称只能包含字母、数字、连字符（-）、点（.）、下划线（_）和中文等Unicode字符，不能包含大写字母。
例如：<div data-user-id="123" data-role="admin" data-user-name="张三">用户信息</div>
JavaScript访问方法
可以通过 dataset 属性读取或设置所有自定义数据属性。属性名会自动转换为驼峰命名法（camelCase）。
立即学习“前端免费学习笔记（深入）”；
- data-user-id → dataset.userId
- data-role → dataset.role
- data-user-name → dataset.userName
示例代码：
const element = document.querySelector('div');
console.log(element.dataset.userId); // 输出：123
console.log(element.dataset.role); // 输出：admin
element.dataset.status = 'active'; // 设置新属性
实际应用场景
自定义数据属性常用于以下情况：
- 存储元素状态：如 data-status="loading" 表示加载中
- 传递配置参数：如 data-delay="500" 控制动画延迟
- 关联数据ID：如 data-product-id="456" 关联商品信息
- 临时标记元素：便于JavaScript选择器定位
注意不要滥用，敏感或大量数据应通过其他方式处理。基本上就这些，用起来简单直接。
