第19篇：高级语义与微数据

HTML5 不仅提供了结构标签，还提供了让机器"读懂"内容的工具。time、address、details/summary 等高级语义标签，以及微数据（Microdata），让你的网页对搜索引擎和自动化工具更友好。

学习目标

  • 掌握 time、address、details/summary、data 等高级语义标签
  • 理解微数据（Microdata）的基本概念和语法
  • 学会使用 Schema.org 词汇表标记结构化数据
  • 了解这些技术对 SEO 和可访问性的实际价值
  • 能够在网页中正确应用微数据

核心知识点

一、时间标签：time

time 标签标记日期和时间，通过 datetime 属性提供机器可读的格式。

<!-- 基础用法 -->
<p>文章发布于 <time datetime="2024-06-01">2024年6月1日</time>。</p>

<!-- 带具体时间 -->
<p>会议时间：<time datetime="2024-06-01T14:30:00+08:00">
  2024年6月1日 下午2:30
</time></p>

<!-- 只有时间 -->
<p>开放时间：<time datetime="09:00">上午9点</time>
  至 <time datetime="18:00">下午6点</time></p>

<!-- 持续时间 -->
<p>视频时长：<time datetime="PT15M30S">15分30秒</time></p>
datetime 格式速查
类型 格式 示例
日期 YYYY-MM-DD 2024-06-01
时间 HH:MM / HH:MM:SS 14:30 / 14:30:00
日期+时间 YYYY-MM-DDTHH:MM:SS 2024-06-01T14:30:00
带时区 +HH:MM 2024-06-01T14:30:00+08:00
持续时间 PTH#MS#S PT15M30S（15分30秒）
年月 YYYY-MM 2024-06
年仅 YYYY 2024

💡 为什么用 time？ 搜索引擎通过 datetime 理解内容的时效性；日历应用可以自动识别并添加事件。

二、联系信息：address

address 标记内容作者/所有者的联系信息，不是通用的"地址"。

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>

  <!-- 标记文章作者的联系信息 -->
  <address>
    <p>作者：张三</p>
    <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
    <p>GitHub：<a href="https://github.com/zhangsan">@zhangsan</a></p>
  </address>
</article>

<!-- 页面级联系信息 -->
<footer>
  <address>
    <p>© 2024 示例公司</p>
    <p>北京市朝阳区 xxx 大厦</p>
    <p>电话：010-1234-5678</p>
  </address>
</footer>
address 的使用范围
✅ 适合 ❌ 不适合
文章作者的联系信息 任意地址（如快递收货地址）
网站运营方的联系方式 没有"联系人"属性的纯位置
组织的联系信息 —

三、折叠详情：details + summary

无需 JavaScript，就能实现点击展开/收起的效果。

<details>
  <summary>常见问题：如何退款？</summary>
  <p>您可以在购买后 7 天内申请退款。请登录账户，在订单详情页点击"申请退款"按钮。</p>
</details>

<details>
  <summary>常见问题：支持哪些支付方式？</summary>
  <ul>
    <li>支付宝</li>
    <li>微信支付</li>
    <li>银行卡</li>
  </ul>
</details>
open 属性
<!-- 默认展开 -->
<details open>
  <summary>默认展开的内容</summary>
  <p>这段内容默认可见。</p>
</details>
多级嵌套
<details>
  <summary>第一章：HTML 基础</summary>

  <details>
    <summary>1.1 什么是 HTML？</summary>
    <p>HTML 是超文本标记语言...</p>
  </details>

  <details>
    <summary>1.2 HTML 文档结构</summary>
    <p>一个基本的 HTML 文档包含...</p>
  </details>
</details>

💡 应用场景：FAQ、文档目录、设置面板、评论折叠等。

四、机器可读数据：data

data 标签为内容提供一个机器可读的等价值。

<!-- 产品价格：人类可读 + 机器可读 -->
<p>价格：<data value="299.00">¥299</data></p>

<!-- 库存数量 -->
<p>库存：<data value="50">仅剩 50 件</data></p>

<!-- 产品编号 -->
<p>型号：<data value="SKU-12345">Pro Max 2024</data></p>

💡 data vs time：time 专用于日期时间，data 用于任何需要机器可读值的场景。

五、微数据（Microdata）入门

微数据是一种在 HTML 中嵌入结构化数据的方式，让搜索引擎理解页面内容的含义。

基本语法
<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">张三</span>
  <span itemprop="jobTitle">前端工程师</span>
  <a href="mailto:zhangsan@example.com" itemprop="email">zhangsan@example.com</a>
</div>
属性 作用
itemscope 定义一个数据项的范围
itemtype 指定数据类型（来自 Schema.org）
itemprop 定义数据项的属性
在 DevTools 中查看

Chrome DevTools → Elements → 右键元素 → “Show HTML5 Microdata”（部分版本支持）

六、Schema.org 常用类型

Schema.org 是 Google、Bing、Yahoo 共同支持的结构化数据词汇表。

文章（Article）
<article itemscope itemtype="https://schema.org/Article">
  <header>
    <h1 itemprop="headline">HTML5 语义化指南</h1>
    <p>
      作者：<span itemprop="author" itemscope itemtype="https://schema.org/Person">
        <span itemprop="name">张三</span>
      </span>
    </p>
    <time itemprop="datePublished" datetime="2024-06-01">2024年6月1日</time>
  </header>

  <div itemprop="articleBody">
    <p>文章内容...</p>
  </div>
</article>
产品（Product）
<div itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">无线蓝牙耳机</h2>
  <img src="headphone.jpg" alt="耳机图片" itemprop="image" width="200">

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price" content="299.00">¥299</span>
    <meta itemprop="priceCurrency" content="CNY">
    <span itemprop="availability" content="https://schema.org/InStock">有货</span>
  </div>

  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    评分：<span itemprop="ratingValue">4.5</span> /
    <span itemprop="bestRating">5</span>
    （<span itemprop="reviewCount">128</span> 条评价）
  </div>
</div>
面包屑导航（BreadcrumbList）
<nav aria-label="面包屑">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">首页</span></a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/articles"><span itemprop="name">文章</span></a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">当前文章</span>
      <meta itemprop="position" content="3">
    </li>
  </ol>
</nav>

七、微数据的 SEO 价值

搜索结果富媒体展示：
┌─────────────────────────────────────────┐
│ HTML5 语义化完全指南                      │
│ example.com                             │
│                                         │
│ ⭐ 4.5 (128条评价)                       │  ← 来自 AggregateRating
│ ¥299 | 有货                              │  ← 来自 Product/Offer
│ 2024年6月1日 · 张三                      │  ← 来自 Article
└─────────────────────────────────────────┘
微数据类型 搜索结果效果
Article 显示作者、发布时间
Product 显示价格、库存、评价
Recipe 显示烹饪时间、评分、图片
FAQPage 显示问答折叠
HowTo 显示步骤列表

动手练习

练习 1：time 标签实践

为一篇新闻文章添加时间标记：

  • 发布日期：2024 年 6 月 15 日
  • 最后修改时间：2024 年 6 月 16 日 10:30（北京时间）
  • 活动持续时间：2 小时 30 分钟
  • 使用正确的 datetime 格式

练习 2：details/summary FAQ

创建一个包含 5 个问题的 FAQ 页面：

  • 每个问题用 details + summary
  • 第一个问题默认展开（open）
  • 尝试嵌套结构（如"账户相关"下面有多个子问题）

练习 3：为个人主页添加微数据

为一个个人简介页面添加 Schema.org Person 微数据：

  • 姓名、职位、公司
  • 邮箱、电话、地址
  • 社交媒体链接
  • 使用 Google 的 富媒体测试工具 验证

常见误区 ⚠️

误区 真相
“address 可以写任意地址” 只应写作者/所有者的联系信息。收货地址用 p
“time 只能标记完整日期” 可以标记日期、时间、年月、持续时间等
“details/summary 需要 JavaScript” ❌ 纯 HTML 原生支持，无需 JS
“微数据对 SEO 没有实际影响” Google 明确使用微数据生成富媒体结果，提升点击率
“Schema.org 只有英文” 有中文翻译，但 itemtype URL 仍用英文
“所有页面都需要微数据” 不是必须，但对产品、文章、事件页面强烈建议
“data 和 time 可以互换” 不能！time 专用于时间，data 用于其他机器可读值
“微数据只能用于搜索引擎” 也用于屏幕阅读器、智能助手、自动化工具

速查卡片 📋

高级语义标签速查

标签 语义 示例
time 日期/时间 <time datetime="2024-06-01">6月1日</time>
address 作者联系信息 <address><a href="mailto:..."></address>
details 可折叠详情 <details><summary>标题</summary>...</details>
summary details 的标题 必须作为 details 的第一个子元素
data 机器可读数据 <data value="299">¥299</data>

微数据三要素

<div itemscope itemtype="https://schema.org/类型">
  <span itemprop="属性名">属性值</span>
</div>

常用 Schema.org 类型

类型 适用场景
Article 博客文章、新闻
Person 个人简介
Product 产品页面
Organization 公司/组织
BreadcrumbList 面包屑导航
FAQPage FAQ 页面
HowTo 教程/步骤

time datetime 格式

日期：    YYYY-MM-DD        → 2024-06-01
时间：    HH:MM:SS          → 14:30:00
日期时间：YYYY-MM-DDTHH:MM  → 2024-06-01T14:30
带时区：  +HH:MM            → 2024-06-01T14:30+08:00
持续时间：PTH#MS#S          → PT2H30M（2小时30分钟）

高级语义 checklist

  • 日期时间用 time + datetime
  • 作者联系信息用 address
  • FAQ/可折叠内容用 details + summary
  • 机器可读值用 data + value
  • 产品/文章页面考虑添加微数据
  • 用 Google 富媒体测试工具验证微数据

扩展阅读

📌 下一步：HTML 不仅是结构标记，还能调用浏览器的高级能力。进入 第20篇：HTML5 新 API 概览，了解 Canvas、Geolocation、LocalStorage 等浏览器端 API。

# html5 # 前端 # html
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

海外动态代理行业彻底换代，AI 数据时代新标准已到来

avatar AtomGit开源社区
cover

2026年论文写作AI哪个好用？7款工具实测对比，轻松拿捏

avatar AtomGit开源社区
cover

2026年SEO+GEO优化指南：搜索排名机制解析与实用工具推荐

avatar AtomGit开源社区