<data>标签仅用于绑定纯文本展示内容与结构化机器值，value属性必需且须规范（无空格、无未转义引号），不可嵌套HTML或data-*属性，JavaScript须用getAttribute('value')读取，适用SKU、状态码等单值语义场景。
<data> 标签不是万能数据容器，它只干一件事：把一段纯文本展示内容和它背后那个结构化、可解析的机器值绑死。用错场景或写法不规范，值就取不到、爬虫也忽略。
value 属性必须存在且不能有空格或引号
value 是 <data> 唯一必需属性，HTML 解析器对它零容忍——漏掉、为空、带前后空格、含未转义双引号，都会导致值失效或截断。
- ❌ 错误：
<data>苹果</data>（没value） - ❌ 错误：
<data value="">苹果</data>（空字符串） - ❌ 错误：
<data value=" 1001 ">苹果</data>（空格会被保留，后端可能比对失败） - ❌ 错误：
<data value="SKU-2026-"X7">旗舰版 X7</data>（双引号未转义，HTML 解析中断） - ✅ 正确：
<data value="SKU-2026-X7">旗舰版 X7</data>
别在 <data> 里嵌套 HTML 或混用 data-*
<data> 只接受短语内容（phrasing content），不能放 <strong>、<span> 等标签；它也不支持任何自定义属性，data-action 这类写法浏览器直接无视。
- ❌ 错误：
<data value="1001"><em>无线鼠标</em></data>（textContent会包含<em>文本，但语义已破坏） - ❌ 错误：
<data value="1001" data-category="peripheral">无线鼠标</data>（data-category不生效） - ✅ 正确：需要强调样式？用 CSS 控制
<data>的外观；需要额外元信息？换到宿主元素上加data-*，比如<li data-category="peripheral"><data value="1001">无线鼠标</data></li>
JavaScript 读取必须用 getAttribute('value')，不是 dataset
<data> 的 value 不进 element.dataset，这是最容易踩的坑。想拿到值，只能走传统 DOM 属性读取路径，而且建议手动 trim() 防空格干扰。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
el.dataset.value→undefined - ✅ 正确：
el.getAttribute('value')?.trim() - 批量读取示例：
document.querySelectorAll('data').forEach(d => console.log(d.textContent, d.getAttribute('value')?.trim())) - 如果后续要参与数值计算（如价格排序），记得手动转换：
parseFloat(d.getAttribute('value'))
什么时候该用 <data>，而不是 time 或 data-*
选错标签，语义就垮了。搜索引擎、辅助技术、结构化数据工具都依赖准确的语义标记。
- 日期时间？→ 用
<time datetime="2026-05-02">今天</time>，不是<data value="2026-05-02">今天</data> - 整块卡片要带 ID、价格、库存等多字段？→ 用
<div data-product-id="1001" data-price="19.99">...</div>，别硬塞进<data> - 真正适合
<data>的场景：状态文本配状态码（<data value="in_stock">有货</data>）、商品名配 SKU（<data value="PRD-2026-001">圣女果</data>）、单位名称配代码（<data value="kg">千克</data>）
最常被忽略的一点：<data> 的价值不在前端运行时，而在它提供的语义锚点——SEO 工具靠它提取结构化数据，屏幕阅读器靠它辅助理解，自动化脚本靠它稳定抓取。写的时候多花三秒校验 value 是否干净、是否真有必要，比后期调试半天取不到值划算得多。
