HTML <data> 标签-代码号

HTML `<data>` 标签详解：机器可读数据标记指南

<data> 标签是 HTML5 中引入的新元素，用于为指定数据定义机器可读的等效值。该标签能够将面向用户的可读内容与面向机器的标准化格式关联起来，便于自动化系统和网站脚本处理数据。

基本语法

<data> 标签是双标签，需要在开标签 <data> 和闭标签 </data> 之间包含内容。其核心属性是 value，用于指定机器可读的格式值。

<data value="机器可读值">人类可读内容</data>

功能特点

数据分离：将展示给用户的内容与机器处理所需的数据格式分离
脚本支持：为 JavaScript 等脚本语言提供结构化数据访问
语义化：增强 HTML 文档的语义化程度，明确标识数据内容

代码示例

示例1：产品列表数据标记

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 产品数据标记示例</title>
</head>
<body>
  <h1>代码号学习编程课程列表</h1>
  <ul>
    <li>
      <data value="course_001">前端开发入门 - 2025年春季班</data>
    </li>
    <li>
      <data value="course_002">Python数据分析 - 2025年夏季班</data>
    </li>
    <li>
      <data value="course_003">全栈项目实战 - 2025年秋季班</data>
    </li>
  </ul>
</body>
</html>

示例2：结合JavaScript使用

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - data标签与JavaScript交互</title>
  <script>
    function showCourseDetail(element) {
      const courseId = element.querySelector('data').value;
      alert(`您选择的课程ID是: ${courseId}`);
    }
  </script>
</head>
<body>
  <h1>代码号编程课程选择</h1>
  <div onclick="showCourseDetail(this)">
    <p>课程名称: <data value="WEB_DEV_2025">Web前端开发实战</data></p>
    <p>学习时长: 3个月</p>
  </div>
</body>
</html>

属性说明

属性	值类型	描述说明
value	机器可读格式	设置 `<data>` 标签内容的机器可读版本，这是必需属性

注意：<data> 标签还支持所有全局属性和事件属性。

与相似标签的区别

`<data>` vs `<time>`

使用 <time> 标签处理日期和时间相关数据
使用 <data> 标签处理其他类型的机器可读数据

示例：正确使用场景

<!-- 时间数据使用time标签 -->
<p>课程开始时间: <time datetime="2025-09-01">2025年9月1日</time></p>

<!-- 其他机器可读数据使用data标签 -->
<p>课程代码: <data value="CS101">计算机科学基础</data></p>

CSS样式设置

可以为 <data> 标签应用各种CSS样式属性：

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - data标签样式示例</title>
  <style>
    data {
      font-family: 'Arial', sans-serif;
      font-size: 14px;
      color: #333;
      background-color: #f8f9fa;
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px dashed #ccc;
    }
    
    data:hover {
      background-color: #e9ecef;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>推荐课程: <data value="ADV_JS_2025">高级JavaScript编程</data></p>
</body>
</html>

本节课程知识要点

语义化价值：<data> 标签增强了HTML文档的语义化程度，使机器能够更好地理解数据内容
数据关联：通过 value 属性建立人类可读内容与机器可读值的关联
脚本集成：JavaScript可以轻松获取和处理 <data> 标签中的机器可读值
适用场景：适合用于产品列表、课程编号、库存单位等需要机器处理的数据

实际应用场景

场景1：电子商务产品列表

<!DOCTYPE html>
<html>
<head>
  <title>代码号编程书籍商店</title>
</head>
<body>
  <h1>编程学习资源</h1>
  <div class="product-list">
    <div class="product">
      <h2><data value="book_001">HTML5与CSS3权威指南</data></h2>
      <p>价格: ￥68.00</p>
      <p>库存: <data value="15">15本</data></p>
    </div>
    <div class="product">
      <h2><data value="book_002">JavaScript高级程序设计</data></h2>
      <p>价格: ￥89.00</p>
      <p>库存: <data value="8">8本</data></p>
    </div>
  </div>
</body>
</html>

场景2：学习进度跟踪

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 学习进度管理</title>
</head>
<body>
  <h1>我的学习进度</h1>
  <ul>
    <li>
      HTML基础: <data value="progress_85">85%完成</data>
      <progress value="85" max="100"></progress>
    </li>
    <li>
      CSS样式: <data value="progress_60">60%完成</data>
      <progress value="60" max="100"></progress>
    </li>
  </ul>
</body>
</html>