<data>-机器可读数据

<data> 元素是 HTML5 中专门用于标记机器可读数据的标签。它通过 value 属性将内容与机器可读的格式关联起来，同时保持人类可读的文本展示。这种设计在需要同时处理数据展示和语义化的场景中非常实用。

<data> 的基本语法

<data> 标签的语法非常简单，包含一个必选的 value 属性，用于存储机器可读的值。例如：

<data value="2023">当前年份：2023</data>

这里，2023 是机器可读的值，而“当前年份：2023”是人类可读的文本。浏览器默认不会对 <data> 标签应用特殊样式，因此视觉上它与普通文本无异。

<data> 的典型应用场景

商品价格与货币单位

在电商网站中，商品价格通常需要同时展示给用户和机器（比如爬虫或数据分析工具）。<data> 可以很好地处理这种情况：

<p>
  特价：<data value="19.99">¥19.99</data>（原价：<data value="29.99">¥29.99</data>）
</p>

日期与时间标记

日期和时间经常需要以标准化格式存储，但以更友好的方式展示：

<p>
  活动截止时间：<data value="2023-12-31T23:59:59Z">2023年12月31日</data>
</p>

枚举类型数据

当需要展示枚举值时，<data> 可以关联代码与描述：

<p>
  订单状态：<data value="shipped">已发货</data>
</p>

<data> 与微格式的配合

<data> 可以与微格式（Microformats）或 RDFa 等语义化标记结合使用，增强数据的机器可读性。例如：

<div class="h-product">
  <span class="p-name">智能手机</span>
  <data class="p-price" value="599.99">$599.99</data>
</div>

<data> 与 <time> 的区别

HTML5 还提供了专门的 <time> 标签用于标记时间数据。两者的主要区别在于：

• <time> 专门用于日期时间，有更严格的格式要求
• <data> 是通用型的数据标记，可用于任何类型的数据

<!-- 使用 time 标签 -->
<p>发布时间：<time datetime="2023-05-15">5月15日</time></p>

<!-- 使用 data 标签 -->
<p>版本号：<data value="2.4.1">v2.4.1</data></p>

JavaScript 操作 <data> 元素

可以通过 JavaScript 轻松获取 <data> 元素的值：

const dataElement = document.querySelector('data');
console.log(dataElement.value); // 输出机器可读值
console.log(dataElement.textContent); // 输出人类可读文本

<data> 的可访问性考虑

虽然 <data> 本身不会为屏幕阅读器提供特殊语义，但可以通过 ARIA 属性增强：

<data value="75" aria-label="进度: 75%">75%</data>

<data> 在表单中的应用

<data> 可以与表单元素结合，提供额外的元数据：

<form>
  <label>
    选择套餐：
    <select name="plan">
      <option value="basic" data-price="9.99">基础版 ($9.99/月)</option>
      <option value="pro" data-price="19.99">专业版 ($19.99/月)</option>
    </select>
  </label>
  <output name="price-display"></output>
</form>

<script>
  document.querySelector('select').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    document.querySelector('output').textContent = 
      `每月价格: $${selectedOption.dataset.price}`;
  });
</script>

<data> 与 CSS 的交互

虽然 <data> 默认没有特殊样式，但可以通过 CSS 属性选择器进行样式化：

data[value^="error"] {
  color: red;
  font-weight: bold;
}

<p>系统状态：<data value="error-404">404错误</data></p>

<data> 在数据可视化中的应用

在数据可视化中，<data> 可以存储原始数据值，同时展示格式化后的文本：

<div class="chart">
  <div class="bar" style="width: 60%">
    <data value="0.6">60%</data>
  </div>
</div>

<data> 与 Web Components

在自定义元素中，<data> 可以作为数据传递的媒介：

<product-card>
  <data slot="price" value="49.99">$49.99</data>
</product-card>

<data> 的浏览器兼容性

<data> 标签在所有现代浏览器中都得到良好支持，包括：

• Chrome 15+
• Firefox 22+
• Safari 5.1+
• Edge 12+
• Opera 15+

对于旧版浏览器，<data> 会作为普通的行内元素渲染，不会导致功能问题。

<data> 与 SEO 优化

搜索引擎可以识别 <data> 标签中的机器可读值，这有助于:

• 提高结构化数据的识别率
• 增强价格、评级等特殊信息的提取
• 改善富媒体搜索结果的表现

<data> 在动态内容中的应用

在单页应用中，<data> 可以配合数据绑定框架使用：

// 使用 Vue.js 示例
const app = new Vue({
  el: '#app',
  data: {
    products: [
      { id: 1, name: '笔记本', price: 12.99 },
      { id: 2, name: '钢笔', price: 5.49 }
    ]
  },
  template: `
    <ul>
      <li v-for="product in products">
        <data :value="product.price">\${{ product.price.toFixed(2) }}</data>
      </li>
    </ul>
  `
});

<data> 与服务器端渲染

在服务器端生成的页面中，<data> 可以预先嵌入数据：

<!-- Node.js + Express 示例 -->
<h2>用户信息</h2>
<data value="<%= user.id %>">用户ID: <%= user.id %></data>

<data> 的嵌套使用

<data> 可以嵌套使用来表示复杂数据结构：

<data value='{"x":10,"y":20}'>
  坐标: 
  <data value="10">X=10</data>, 
  <data value="20">Y=20</data>
</data>

<data> 与 Web Scraping

网络爬虫可以优先提取 <data> 中的标准化值：

# Python 爬虫示例
from bs4 import BeautifulSoup

html = """
<p>温度: <data value="28.5">28.5°C</data></p>
"""
soup = BeautifulSoup(html, 'html.parser')
temperature = soup.find('data')['value']  # 获取 28.5

<data> 在多语言网站中的应用

在多语言网站中，<data> 可以存储语言无关的值：

<p>
  <data value="color-red">红色</data>
  <data value="color-red">Red</data>
  <data value="color-red">Rojo</data>
</p>

<data> 与 Web API 集成

从 API 获取数据时，可以直接将响应绑定到 <data> 元素：

fetch('/api/weather')
  .then(response => response.json())
  .then(data => {
    const tempElement = document.querySelector('#temperature');
    tempElement.value = data.temperature;
    tempElement.textContent = `${data.temperature}°F`;
  });

<data> 的性能考量

虽然 <data> 是轻量级元素，但在大规模使用时仍需注意：

• 避免在长列表中使用过多 <data> 标签
• 考虑使用 data-* 属性替代某些场景
• 对于频繁更新的数据，使用文本节点可能更高效

<data> 与 Web 标准的发展

随着 Web 组件化和数据驱动开发的普及，<data> 这类语义化标签的重要性正在提升。未来可能会看到：

• 更丰富的 value 格式支持
• 与 Web Components 更深度集成
• 在数据绑定框架中的原生支持增强