data标签的value属性必须是带引号的字符串；不加引号会导致值被截断、误解析为数学表达式或丢失，数值也需转为字符串，空格需保留，双引号须转义。
data标签的value属性必须是带引号的字符串
HTML 解析器对 value 属性零容忍——不加引号、写成数字字面量、漏空格或含未转义引号，都会导致值被截断、计算或完全丢失。
常见错误现象：<data value="2024-07-15"></data> 被解析为数学表达式 2024 - 7 - 15 = 2002；<data value="SKU-2026-X7"></data> 因无引号，可能被截断为 SKU-2026（遇到连字符或特殊符号时）。
- ✅ 正确写法：
<data value="2024-07-15">2024年7月15日</data> - ✅ 数值也得转字符串：
<data value="42">四十二</data>，不能写value=42 - ❌ 空格不能省：
value=" SKU-2026-X7 "中前后空格会被保留，后端比对常失败 - ❌ 双引号未转义会中断解析：
<data value="SKU-" x7>X7</data>→ 实际只读到"SKU-"
value属性不进dataset，只能用getAttribute或.element.value读取
很多人误以为 data 标签的 value 和 data-* 自定义属性一样，能通过 element.dataset.value 访问。事实是：它完全不映射到 dataset，这是根本区别。
使用场景：你需要在 JS 中提取机器可读值做比价、筛选、上报等，但又不想破坏语义结构。
- ✅ 正确读法：
el.getAttribute('value')或el.value（两者等效，推荐前者更明确） - ❌ 错误读法：
el.dataset.value→ 返回undefined - ⚠️ 注意：
el.value是只读属性，不能赋值修改；如需动态更新，应替换整个data元素或用其他方案（如配合data-*）
value仅支持纯文本内容，不可嵌套HTML或data-*属性
<data></data> 的设计目标非常窄：绑定一段**纯文本展示内容**与一个**结构化机器值**。它不是容器，也不支持扩展。
容易踩的坑是把它当 span 用，或者试图混用自定义属性增强功能。
- ❌ 禁止嵌套：
<data value="SKU-123"><strong>旗舰版</strong> X7</data>→ HTML 解析报错或降级为普通文本 - ❌ 禁止加
data-：<data value="1001" data-action="click">苹果</data>→data-action被浏览器忽略 - ✅ 合法内容仅限 phrasing content：文字、
&、等实体，以及 <pre class="brush:php;toolbar:false;"><br></pre>（但不推荐） - ? 替代方案：若需富文本或交互，改用
<span data-value="..."></span>+ CSS 隐藏/显示逻辑
value适合什么场景？不适合什么场景？
它不是万能数据载体，只在「用户看到的和机器需要的恰好是一对一纯文本映射」时才值得用。
典型适用场景：商品 SKU、ISO 日期、行政区划编码、状态码（如 value="active"）、价格（value="299.99"）。
- ✅ 推荐用：
<data value="CN-110000">北京市</data>—— 便于地理服务 API 直接消费 - ✅ 推荐用：
<data value="2024-07-15">七月十五</data>—— 避免正则匹配歧义（比如“7月15日” vs “715元”） - ❌ 别用在价格单位混排处：
<data value="299.99">¥299.99</data>→ 单位符号可能干扰数值提取，不如拆成<span class="price-num" data-value="299.99">299.99</span><span class="price-unit">¥</span> - ❌ 别用在需要频繁 JS 更新的场景：每次改
value都要重写 DOM，不如直接操作data-price属性
真正难的是判断边界：当展示文本和机器值开始出现格式差异（比如带单位、带修饰词、多语言切换），<data></data> 就该让位给更灵活的方案。
