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

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

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

学习目标

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

核心知识点

一、时间标签：time

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

<!-- 基础用法 --><p>文章发布于<timedatetime="2024-06-01">2024年6月1日</time>。</p><!-- 带具体时间 --><p>会议时间：<timedatetime="2024-06-01T14:30:00+08:00">2024年6月1日 下午2:30</time></p><!-- 只有时间 --><p>开放时间：<timedatetime="09:00">上午9点</time>至<timedatetime="18:00">下午6点</time></p><!-- 持续时间 --><p>视频时长：<timedatetime="PT15M30S">15分30秒</time></p>

datetime格式速查

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

二、联系信息：address

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

<article><h2>文章标题</h2><p>文章内容...</p><!-- 标记文章作者的联系信息 --><address><p>作者：张三</p><p>邮箱：<ahref="mailto:zhangsan@example.com">zhangsan@example.com</a></p><p>GitHub：<ahref="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属性

<!-- 默认展开 --><detailsopen><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>价格：<datavalue="299.00">¥299</data></p><!-- 库存数量 --><p>库存：<datavalue="50">仅剩 50 件</data></p><!-- 产品编号 --><p>型号：<datavalue="SKU-12345">Pro Max 2024</data></p>

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

五、微数据（Microdata）入门

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

基本语法

<divitemscopeitemtype="https://schema.org/Person"><spanitemprop="name">张三</span><spanitemprop="jobTitle">前端工程师</span><ahref="mailto:zhangsan@example.com"itemprop="email">zhangsan@example.com</a></div>

在 DevTools 中查看

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

六、Schema.org 常用类型

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

文章（Article）

<articleitemscopeitemtype="https://schema.org/Article"><header><h1itemprop="headline">HTML5 语义化指南</h1><p>作者：<spanitemprop="author"itemscopeitemtype="https://schema.org/Person"><spanitemprop="name">张三</span></span></p><timeitemprop="datePublished"datetime="2024-06-01">2024年6月1日</time></header><divitemprop="articleBody"><p>文章内容...</p></div></article>

产品（Product）

<divitemscopeitemtype="https://schema.org/Product"><h2itemprop="name">无线蓝牙耳机</h2><imgsrc="headphone.jpg"alt="耳机图片"itemprop="image"width="200"><divitemprop="offers"itemscopeitemtype="https://schema.org/Offer"><spanitemprop="price"content="299.00">¥299</span><metaitemprop="priceCurrency"content="CNY"><spanitemprop="availability"content="https://schema.org/InStock">有货</span></div><divitemprop="aggregateRating"itemscopeitemtype="https://schema.org/AggregateRating">评分：<spanitemprop="ratingValue">4.5</span>/<spanitemprop="bestRating">5</span>（<spanitemprop="reviewCount">128</span>条评价）</div></div>

面包屑导航（BreadcrumbList）

<navaria-label="面包屑"><olitemscopeitemtype="https://schema.org/BreadcrumbList"><liitemprop="itemListElement"itemscopeitemtype="https://schema.org/ListItem"><aitemprop="item"href="/"><spanitemprop="name">首页</span></a><metaitemprop="position"content="1"></li><liitemprop="itemListElement"itemscopeitemtype="https://schema.org/ListItem"><aitemprop="item"href="/articles"><spanitemprop="name">文章</span></a><metaitemprop="position"content="2"></li><liitemprop="itemListElement"itemscopeitemtype="https://schema.org/ListItem"><spanitemprop="name">当前文章</span><metaitemprop="position"content="3"></li></ol></nav>

七、微数据的 SEO 价值

搜索结果富媒体展示： ┌─────────────────────────────────────────┐ │ HTML5 语义化完全指南 │ │ example.com │ │ │ │ ⭐ 4.5 (128条评价) │ ← 来自 AggregateRating │ ¥299 | 有货 │ ← 来自 Product/Offer │ 2024年6月1日 · 张三 │ ← 来自 Article └─────────────────────────────────────────┘

动手练习

练习 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 的 富媒体测试工具 验证

常见误区 ⚠️

速查卡片 📋

高级语义标签速查

微数据三要素

<divitemscopeitemtype="https://schema.org/类型"><spanitemprop="属性名">属性值</span></div>

常用 Schema.org 类型

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 富媒体测试工具验证微数据

扩展阅读

• MDN:元素
• MDN: 元素
• MDN: 和
• Schema.org 官网（英文）
• Google 富媒体测试工具

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