data标签仅适用于“展示文本与结构化值不可分割”的原子级映射，如处理中；其他场景应使用data-*属性。
data 标签确实能把用户看到的文本和机器可读的值绑在一起，但它不是万能的数据容器，用错场景反而会让数据难提取、难维护。
什么时候该用 data 标签，而不是 data-* 属性
核心判断就一条：这段文字本身是否「既是展示内容，又是结构化数据单元」？
- 适合用
data：<data value="PENDING">处理中</data>——“处理中”是用户读的词，"PENDING"是后端状态码，两者不可分割 - 不适合用
data：<div data-order-id="12345">订单#12345</div>——这里“订单#12345”是展示文案，但 ID 是附属元信息，应走data-order-id -
data不能嵌套 HTML，也不能加其他属性（比如data-action），写了也无效 - 日期类优先用
<time></time>，它原生支持datetime，语义更准、解析更稳
data 的 value 属性必须是带引号的纯字符串
浏览器对 value 的解析非常严格，写错就等于没写。
- ✅ 正确：
<data value="SKU-2026-X7">旗舰版 X7</data> - ❌ 错误：
<data value="SKU-2026-X7">旗舰版 X7</data>（没引号，可能被当成属性名或运算表达式） - ❌ 错误：
<data value=" 2026-05-01 ">今天</data>（前后空格会保留在值里，后端解析可能失败） - ❌ 错误：
<data value="SKU-" x7>旗舰版 X7</data>（双引号未转义，HTML 解析中断） - 数值必须手动转字符串：
value="42"可以，value=42是无效 HTML
JavaScript 读取 data 值时不能用 dataset
data 标签不参与 dataset 映射，它的 value 不会自动变成 element.dataset.value。
- 正确方式：
el.getAttribute('value')或el.value（部分浏览器支持，但非标准） - 错误写法：
el.dataset.value→ 返回undefined - 如果页面里混用了
data-*和data，别指望统一用dataset处理 - 批量读取时注意：用
document.querySelectorAll('data')，不是[data]（后者是属性选择器，匹配的是带data-属性的元素）
真正容易被忽略的是语义边界：data 只适用于「一词一码」这种原子级映射；一旦涉及多个字段、需要交互响应、或数据要参与 DOM 操作逻辑，data-* 才是更实际的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
