HTML5中data-属性是传递额外数据的首选方案，原生支持、语义清晰；需遵循命名规范，通过dataset API读写更简洁，但值恒为字符串且不反映HTML源码变化。
HTML5中用data-属性传递额外数据最直接
浏览器原生支持、无需额外库、语义清晰，是绝大多数场景的首选。所有以 data- 开头的自定义属性都会被 HTML5 解析并保留在 DOM 中，可通过 JavaScript 的 dataset 或 getAttribute() 读取。
-
data-后只能跟字母、数字、连字符（-），不能有大写字母或下划线；例如data-user-id合法，data-userId和data_user_id会被忽略 - 带连字符的属性名在
dataset中自动转为驼峰：data-order-status→element.dataset.orderStatus - 值始终是字符串类型，需手动转换：
parseInt(el.dataset.count)、JSON.parse(el.dataset.config) - 避免存大量结构化数据（如长 JSON 字符串），影响可读性和调试效率
用dataset API读写比getAttribute/setAttribute更简洁
dataset 是专为 data- 属性设计的只读/可写对象，省去字符串拼接和类型判断，但要注意它不反映动态修改后的原始 HTML 字符串（仅更新 DOM 属性）。
const btn = document.querySelector('button');
btn.dataset.userId = '123';
btn.dataset.hasPermission = 'true';
btn.dataset.apiEndpoint = '/v2/users';
<p>// 等价于设置：
// <button data-user-id="123" data-has-permission="true" data-api-endpoint="/v2/users"></button></p>- 写入时会自动添加
data-前缀，且把驼峰转为连字符格式 - 删除用
delete btn.dataset.userId，对应移除data-user-id - 不支持直接赋值对象或数组：
btn.dataset.meta = { a: 1 }会变成"[object Object]"
不要用innerHTML或outerHTML传数据——破坏结构且不可靠
有人试图把 JSON 嵌进标签内容或注释里，比如 <div>
