<data>元素的value属性必须存在且非空，是唯一必需属性；禁止嵌套HTML；时间信息应使用<time>而非<data>；JavaScript中须用getAttribute('value')读取。
data 元素的 value 属性必须存在且不可为空
value 是 <data> 元素唯一必需的属性，它不是可选修饰，而是语义核心。如果省略或设为空字符串，该元素就失去了机器可读意义，浏览器虽不报错，但结构化数据提取工具（如 Google Rich Results Test）会忽略它。
常见错误现象包括：
- 写成
<data>苹果</data>（漏掉value） - 写成
<data value="">苹果</data>（空值） - 把数字当文本直接写进标签体却不提供规范格式，比如
<data value="5.99">五块九毛九</data>—— 这里value合法，但若后续做价格比较或排序，"5.99"比"五块九毛九"可靠得多
正确做法是始终提供明确、无歧义、便于程序解析的值：
- 编号类用纯数字或字母数字组合：
value="PRD-2024-001" - 价格类用小数点格式：
value="19.99" - 状态码用标准枚举：
value="in_stock"而非value="有货"
展示文本不能嵌套 HTML，否则破坏语义一致性
<data> 元素只接受短语内容（phrasing content），这意味着你不能在里面放 <span>、<strong>、<a> 等标签。一旦嵌套，textContent 会包含所有子节点文本，但 value 仍只对应原始设定值，两者逻辑脱节。
立即学习“前端免费学习笔记（深入）”；
例如这段写法是危险的：
<data value="1001">新品 <em>限量</em></data>
JavaScript 中 dataElement.textContent 返回的是 "新品 限量"（含空格），而视觉上“限量”可能被样式强调，但机器无法从中推断语义权重。更糟的是，若后续用 CSS 选择器匹配 data[title] 类属性做样式增强，这种混合结构会让定位变得不可靠。
建议做法：
- 保持标签体内为纯文本，需要强调时用外部包裹（如
<li><strong><data value="1001">新品</data></strong></li>） - 若真需多级语义，改用
data-*属性挂载在语义更强的容器上，比如<article data-product-id="1001" data-stock="in">
与 time 标签混用时，别用 data 替代 datetime 语义
日期时间类信息不是 <data> 的适用场景。HTML 规范明确建议：内容涉及时间，优先用 <time>，它的 datetime 属性专为此设计，支持时区、ISO 格式校验和辅助技术识别。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
错误示范：
<data value="2026-05-10">今天</data>
问题不止于语义偏差——value="2026-05-10" 缺少时间精度，也不声明是否为本地时间；而 <time datetime="2026-05-10">今天</time> 会被屏幕阅读器读作“2026年5月10日”，且搜索引擎能准确归入时间轴索引。
只有当你需要表达「非时间但需格式对齐」的信息时才考虑 <data>，比如：
- 产品批次号：
<data value="B202605A">五月A批</data> - 内部分类码：
<data value="CAT-FRUIT-02">浆果类</data> - 单位换算值：
<data value="250">250克</data>
JavaScript 读取时注意 dataset 和 getAttribute 的行为差异
<data> 的 value 不是 data-* 属性，因此它不会出现在 element.dataset 中。试图用 el.dataset.value 获取会返回 undefined。
正确读取方式只有一种：
- 用
el.getAttribute('value')—— 返回字符串，类型需自行转换 - 用
el.value—— 不推荐，因为HTMLDataElement.value是只读属性，但部分老文档误传为可写，实际修改无效
容易踩的坑：
- 混淆
<data value="42">四十二</data>和<span data-value="42">四十二</span>：前者必须用getAttribute('value')，后者才能用dataset.value - 在事件委托中监听
data元素点击后想批量取值，却忘了querySelectorAll('data')返回的是HTMLDataElement实例，不是通用HTMLElement，某些 polyfill 可能未覆盖其接口
最稳妥的读取模式：
document.querySelectorAll('data').forEach(el => {
const display = el.textContent.trim();
const machine = el.getAttribute('value');
if (machine == null) return; // 忽略没设 value 的
console.log({ display, machine });
});
真正麻烦的地方不在语法，而在于团队协作时容易把它当成 data-* 的简写——它不是。它是一个独立语义元素，value 是硬性契约，不是可选元数据。用错一次，机器就少一条可信赖的数据通路。
