<data> 标签仅用于将纯文本展示内容与严格规范的机器值一对一绑定，适用于“人看一个样、机器用一个码”的独立语义单元，如行政区划名+ISO编码、人类友好日期+ISO字符串；不适用于JS逻辑控制或嵌套HTML；value属性须手写严格、引号转义、无空格；JavaScript必须用getAttribute('value')读取，不可用dataset；它是静态语义锚点，不参与DOM更新、响应式或状态同步。
<data> 标签不是万能数据容器，它只做一件事：把一段纯文本展示内容，和它背后那个严格规范的机器值，一对一绑死。用错地方或写法松散，值就取不到、解析失败、后端校验报错。
什么时候该用 <data>，而不是 data-* 属性
你得先确认场景是不是“人看一个样、机器用一个码”的独立语义单元：
- ✅ 适合：
<data value="CN-310000">上海市</data>（行政区划名 + ISO 编码） - ✅ 适合：
<data value="2026-08-04">今天</data>（人类友好日期 + 可排序 ISO 字符串） - ❌ 不适合：给按钮加
data-action="submit"—— 这是 JS 控制逻辑，该用data-action自定义属性挂载在<button>上 - ❌ 不适合：在
<data>里嵌套<span>或 HTML 标签 —— 它只接受纯文本内容，否则语义失效
value 属性必须手写严格，不能靠 JS 补救
浏览器不会帮你 trim、转义或容错。写错就等于没写：
- 空格不能有：
value=" ABC-2026 "→ 前后空格保留，后端比对"ABC-2026"失败 - 引号必须转义：
value="SKU-"X7"→ HTML 解析中断，后续 DOM 错位 - 必须加引号且为字符串：
value="SKU-2026-X7"✅，value=SKU-2026-X7❌（非法 HTML，部分浏览器拒收） - 数值要自己转：
Number(el.getAttribute('value'))，别指望自动类型转换
JavaScript 读取必须用 getAttribute('value')，别碰 dataset
<data> 和 data-* 是两套机制，dataset 对它完全不可见：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
el.getAttribute('value')或el.value（后者非标准，兼容性差） - ❌ 错误：
el.dataset.value→ 永远返回undefined - 记得清洗：
el.getAttribute('value')?.trim()，防止空格干扰后续 JSON.parse 或 Number() - 高频使用建议封装：
function getDataValue(el) { return el?.getAttribute?.('value')?.trim() || ''; }
它不参与 DOM 更新、不触发监听、不支持响应式
<data> 是静态语义锚点，不是状态载体：
- 改它的
value属性（比如el.setAttribute('value', 'new-id')）不会触发任何回调 - 它不和 Vue 的
v-bind:data-value或 React 的data-value={id}绑定逻辑挂钩，只是渲染出静态 HTML - 如果页面需要动态更新并同步机器值，应该用
data-*属性 + 自定义元素生命周期（attributeChangedCallback），或者交由框架状态管理 - 爬虫或结构化数据工具（如 Google Rich Results Test）只有配合
itemprop等 Microdata 才能识别其语义，单独<data>不足以被提取为富结果
真正容易被忽略的是：它不解决“状态同步”问题，只解决“文本与编码对齐”这一个点。一旦你开始想“点击后更新这个 value”或“根据用户输入重算这个值”，你就已经该换方案了。
