标签仅用于将纯文本与其标准格式值配对,需配合itemscope/itemprop才能被结构化数据工具识别;value必须加引号且为iso格式字符串,js须用getattribute('value')读取并trim(),不支持嵌套或data-*属性。

<data></data> 标签不是用来“储存数据”的通用容器,它只做一件事:把一段纯文本和它背后的标准格式值配对。用错场景,机器读不到,JS 也难取值。
什么时候该用 <data></data>,而不是 data-* 属性
核心看语义是否“展示即数据”——用户看到的文本本身就有唯一、规范的机器可读对应值,且这个值不参与交互逻辑或计算。
- ✅ 适合:
<data value="PENDING">处理中</data>(状态描述 + 状态码)、<data value="SKU-2026-X7">旗舰版 X7</data>(商品名 + 编码) - ❌ 不适合:给按钮加
data-action="delete"、存价格供 JS 计算——该用data-price="299.99"挂在<button></button>上 - ⚠️ 注意:
<data></data>必须配合itemscope/itemprop才能被 Google Rich Results Test 等工具识别为结构化数据;单独用只是语义标注,无 SEO 效果
value 属性必须是带引号的纯字符串
HTML 解析器会把没引号的 value=2026-07-23 当作数学表达式计算,结果变成 "2012"(2026 − 7 − 23),完全失真。
- ✅ 正确:
<data value="2026-07-23">今天</data> - ❌ 错误:
<data value="2026-07-23">今天</data>(无引号)、<data value="2026/07/23">今天</data>(非 ISO 格式) - ⚠️ 空格和引号要手动清理:写成
value=" 2026-07-23 "会导致 JS 读到带空格的字符串,后续JSON.parse或Date构造失败
JS 读取 <data></data> 的 value 不能用 dataset
<data></data> 的 value 不映射到 element.dataset,这是和 data-* 的根本区别。硬用 el.dataset.value 一定返回 undefined。
- ✅ 正确读法:
el.getAttribute('value')或el.value(后者部分浏览器支持,但非标准) - ✅ 建议封装:
function getDataValue(el) { return el?.getAttribute?.('value')?.trim() || ''; } - ⚠️ 别漏
trim():HTML 中手误多打空格,JS 里不清洗,后续new Date(value)直接报Invalid Date
<data></data> 不支持嵌套,也不能混用 data-*
它只接受纯文本内容,连 <strong></strong> 都不允许;而且所有 data-* 属性挂上去都无效,浏览器忽略,爬虫无视。
- ✅ 正确:
<data value="2026-07-23">今日发货</data> - ❌ 错误:
<data value="2026-07-23" data-track-id="home-page">今日发货</data>(data-track-id白写) - ❌ 错误:
<data value="2026-07-23">今日发货<em>(限时)</em></data>(含 HTML 标签,解析失败) - ⚠️ 替代方案:需要强调或样式控制,把
<data></data>放进<span></span>或<div> 里,样式和行为由外层承载 <p>真正起作用的从来不是单个 <code><data></data>标签,而是它和itemprop、itemtype组成的三件套;脱离 schema.org 上下文,它只是个语义干净的文本配对标记,不是 JS 数据仓库。











