标签通过 value 属性绑定机器可读值与用户可见文本，适用于独立语义单元（如商品名与编号、状态描述与状态码），不支持嵌套HTML，JavaScript需用 getAttribute('value') 读取。
用 <data></data> 标签就能把机器可读的值和用户看到的文本绑在一起，核心是靠 value 属性存数据、标签内容做展示，浏览器照常显示文字，程序却能精准提取背后那个结构化值。
data 标签的基本写法
它是个双标签，必须带 value 属性，属性值是给机器看的（比如数字、ISO日期、编码），标签中间的文字是给人看的（比如“苹果”“2024年7月15日”）。
-
<data value="1001">无线鼠标</data>—— 用户看到“无线鼠标”，脚本拿到的是字符串"1001" -
<data value="2026-05-02">今天</data>—— 人类友好，机器能直接参与日期计算 - 不支持嵌套其他 HTML 标签，只放纯文本或简单内联元素（如
<em></em>）
什么时候该用 data，而不是 data-* 属性
<data></data> 适合独立语义单元：一段文字本身就有明确对应的数据值，比如商品名与编号、单位名称与代码、状态描述与状态码。
- 用
<data></data>：<data value="PENDING">处理中</data>（状态文本 + 状态码） - 别用
<data></data>：给整个卡片加 ID 或价格——该用data-product-id="1001"这类自定义属性 - 日期时间优先选
<time></time>，它原生支持datetime属性，语义更准
JavaScript 怎么读取和使用 value 值
通过 getAttribute('value') 或 dataset（注意：<data></data> 不进 dataset，只能用前者）获取值，再配合展示文本做逻辑处理。
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('data'); console.log(el.textContent, el.getAttribute('value'));- 批量读取：
document.querySelectorAll('data').forEach(d => { console.log(d.textContent, d.value); }); - 可用于动态渲染（如点击“圣女果”自动填入编号到表单）、SEO 结构化输出、辅助技术识别
实际页面中怎么组织更清晰
它常出现在列表、表格、状态栏等需要“一目了然+后台可解析”的场景，搭配 CSS 可增强可读性，但不要依赖样式改变语义。
- 商品列表：
<ul> <data value="21053">圣女果</data><data value="21054">牛肉番茄</data> </ul> - 订单状态：
<p>当前状态：<data value="SHIPPED">已发货</data></p> - 避免滥用：不是所有文本都需要机器值；没 value 就不该用
<data></data>，否则违反规范
