data-* 是 html5 自定义属性机制，非独立标签，须挂载于语义元素上，支持 js dataset api 读取及爬虫识别，命名需小写短横线、值为字符串，适用于轻量元数据，不替代 json-ld 等结构化数据方案。
data-* 属性不是标签，是 HTML5 自定义属性机制
很多人搜“data 标签”，但 HTML 里根本没有叫 data 的独立标签。真正能实现机器可读数据标注的，是 data-* 这类自定义属性——它们必须挂载在已有语义元素（如 <div>、<code><span></span>、<li>）上才合法。
浏览器会原样保留这些属性，JavaScript 可通过 dataset API 读取，爬虫或结构化数据工具（如 Google Rich Results Test）也能识别并提取。
常见错误现象：
– 写成 <data value="123"></data>：无效，该标签语义是“供脚本使用的通用数据块”，不支持自定义属性，也不被主流解析器当作结构化数据源；
– 在 <script></script> 或 <meta> 里硬塞 data-：无效，这些标签不支持自定义属性；
– 属性名含大写字母或特殊符号（如 data-userID）：会被自动转为驼峰（userID → userId），但建议全程用短横线小写（data-user-id）避免歧义。
怎么加 data-* 才让 JS 和爬虫都认得
关键在于位置和命名规范。必须加在承载内容的宿主元素上，且值应为字符串（数字/布尔也会被转成字符串）。
-
data-后只能跟小写字母、数字、短横线（-），不能以数字开头（data-1id❌） - 多个单词用短横线分隔，JS 中自动转为驼峰访问（
data-product-sku→element.dataset.productSku） - 值中不要嵌套 HTML 或引号冲突（用单引号包裹属性值可避免双引号内容出错）
- 如果数值需参与计算，JS 读取后手动转类型：
parseInt(el.dataset.count, 10)，别依赖自动转换
示例：
<article data-article-id="42" data-published="true" data-score="4.7"><h2>HTML data 属性实战</h2> </article>
JS 获取：document.querySelector('article').dataset.articleId // "42"，注意返回的是字符串。
data-* 和 JSON-LD、microdata 比起来差在哪
data-* 是最轻量的机器可读方案，但有明确边界：它只服务于“当前元素上下文内的简单元数据”，不适合表达复杂关系（如作者、发布日期、嵌套产品规格）。
使用场景判断：
- 需要 JS 动态控制行为（如按钮点击加载对应 ID 的弹窗）→ 用
data-id完全够用 - 要让 Google 显示富摘要（评分、价格、食谱步骤）→ 必须用
JSON-LD或microdata，data-*不会被收录进结构化数据报告 - 同一页面多个同类元素需批量注入不同参数（如商品列表）→
data-*清晰直接；若还要对外暴露 schema.org 类型，则补 JSON-LD 更稳妥
性能影响几乎为零，但滥用会导致 HTML 膨胀（比如每个 <tr> 都塞 5 个 <code>data-）。优先把真正需要程序读取的字段加上，非必要不堆砌。
容易被忽略的兼容性与调试陷阱
看似简单，但几个细节不注意就会读不到值：
- 属性名拼错或大小写混用（
data-user-id≠data-userId） - 元素尚未渲染完成就执行 JS 读取（尤其 SPA 中，需等 DOM 挂载后再查
dataset） - 服务端渲染时，某些框架（如 Vue SSR）默认不序列化
data-*到 HTML，需显式配置或改用v-bind绑定 - Chrome DevTools 的 Elements 面板里能看到
data-属性，但 Network → Response 中若没出现，说明服务端根本没输出——检查模板逻辑
验证是否生效，最直接的方法是打开控制台，选中元素后输入：$0.dataset，看对象里有没有预期字段。没有？先回去检查拼写和渲染时机。
