一、什么是微格式？
微格式是一种轻量级的语义标记方法，它通过复用HTML中现有的 class 属性，为内容添加结构化信息。它不引入新的标签或属性，而是使用一组约定的类名（如 vcard、vevent）来表示特定类型的数据，使得人和机器都能更好地理解页面内容。
微格式的设计哲学
以人为中心：标记对开发者友好，易于阅读和编写。
复用现有标准：基于HTML和CSS，无需学习全新的语法。
渐进增强：即使浏览器不支持，也不会破坏页面显示。
常见用途
类别 | 描述 |
|---|---|
联系人信息（h-card） | 标记个人或组织的联系方式、姓名、照片等 |
日历事件（h-event） | 标记活动的开始时间、结束时间、地点、描述 |
社交关系（XFN） | 通过链接的 rel 属性表示人际关系（如同事、朋友） |
产品信息（h-product） | 标记产品名称、描述、价格、图片等 |
评论/评级（h-review） | 标记用户评价、评分、作者等 |
示例：使用微格式标记一个人
<div class="h-card">
<img class="u-photo" src="avatar.jpg" alt="追风">
<a class="p-name u-url" href="https://example.com">追风</a>
<span class="p-job-title">前端工程师</span>
<span class="p-org">ABC 科技</span>
<span class="p-tel">+86 123-4567-8901</span>
</div>标记 | 描述 |
|---|---|
h-card | 表示这是一个“个人名片”数据块 |
u-photo | 表示照片URL |
p-name | 表示姓名 |
p-job-title | 表示职位 |
p-org | 表示所在组织 |
p-tel | 表示电话号码 |
搜索引擎和解析器能轻松提取出这些信息，用于生成富摘要、导入联系人等场景。
二、什么是微数据？
微数据是HTML5引入的一种标准化结构化数据标记方式，它使用自定义属性（如 itemscope、itemtype、itemprop）在HTML中嵌入机器可读的数据。与微格式不同，微数据通常与 Schema.org 词汇表配合使用，后者提供了涵盖几乎所有领域的丰富类型和属性，支持极其复杂的数据结构。
核心属性解析
itemscope：声明该元素包含一个数据项。
itemtype：指定该数据项的类型，通常是一个Schema.org的URL（如
https://schema.org/Person）。itemprop：标记数据项的属性，属性名由Schema.org定义。
itemid：为数据项提供全局唯一标识符（可选）。
itemref：引用当前页面中其他元素作为数据项的一部分（可选）。
常见用途
类别 | 描述 |
|---|---|
商品/产品（Product） | 标记名称、价格、库存、评价等 |
文章/新闻（Article、NewsArticle） | 标记标题、作者、发布日期、摘要 |
人物/组织（Person、Organization） | 标记姓名、职位、地址、联系方式 |
事件（Event） | 标记活动名称、时间、地点、票价 |
评论/评分（Review、Rating） | 标记评分值、评论内容、作者 |
视频/音频（VideoObject、AudioObject） | 标记时长、上传者、缩略图 |
示例：使用微数据标记一个人（含嵌套组织）
<div itemscope itemtype="https://schema.org/Person">
<img itemprop="image" src="avatar.jpg" alt="破军">
<span itemprop="name">破军</span>
<span itemprop="jobTitle">后端工程师</span>
<span itemprop="worksFor" itemscope itemtype="https://schema.org/Organization">
<span itemprop="name">XYZ 公司</span>
<span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="addressLocality">北京</span>
</span>
</span>
<meta itemprop="email" content="pojun@example.com">
</div>外层 div 声明了一个 Person 数据项。
内部的 worksFor 属性又嵌套了一个 Organization 数据项，包含组织名称和地址。
meta 标签用于隐藏但提供机器可读的电子邮件地址。
微数据让内容描述变得精确而灵活，非常适合电商、新闻、本地商家等复杂场景。
三、微格式 vs 微数据：全面对比
对比维度 | 微格式 | 微数据 |
|---|---|---|
引入方式 | 基于现有 class 属性，复用CSS类名 | 引入HTML5新属性（itemscope、itemprop等） |
词汇表 | 自有一套有限的约定（如h-card、h-event） | 可扩展，常与Schema.org海量词汇配合 |
复杂度 | 简单轻量，适合常见小型场景 | 更强大，支持嵌套、多值、跨标签引用 |
学习曲线 | 平缓，几分钟即可上手 | 较陡，需要理解Schema.org类型体系 |
支持度 | 较早出现，部分搜索引擎仍支持 | HTML5标准，Google、Bing、Yandex等广泛支持 |
适用场景 | 社交分享、联系人、事件、简单评论 | 电商、文章、食谱、视频、产品、招聘等复杂数据 |
可扩展性 | 有限，仅能使用预定义类名 | 极强，可自定义类型和属性（通过Schema.org） |
与现有代码集成 | 无需修改HTML结构，只需添加类名 | 可能需要添加额外属性，但兼容性好 |
选择建议
若只需为博客、个人站点添加简单的联系人或事件信息，微格式足矣。
若运营电商网站、新闻门户或需要精细化SEO，微数据+Schema.org是首选。
四、与 <figure> 标签的完美结合
<figure> 元素用于表示独立的内容单元，如图片、图表、代码片段、音视频等，通常带有 <figcaption> 作为标题或说明。将微数据应用于 <figure>，可以为这些媒体内容赋予丰富的机器可读语义，使其在搜索引擎、知识图谱中表现更出色。
示例：为图片添加微数据（ImageObject）
<figure itemscope itemtype="https://schema.org/ImageObject">
<img src="architecture.png" alt="微服务架构图" itemprop="contentUrl">
<figcaption itemprop="caption">图5：微服务架构概览</figcaption>
<meta itemprop="name" content="微服务架构图">
<meta itemprop="width" content="800">
<meta itemprop="height" content="600">
</figure>itemscope 和 itemtype 定义数据项为 ImageObject。
contentUrl 指向图片文件。
caption 为图片说明（即 <figcaption>内容）。
name 为图片标题。
width 和 height 通过 <meta> 标签提供，对用户不可见但机器可读。
优点
搜索引擎在图片搜索中可直接显示标题、说明、尺寸等富信息。
社交平台抓取时能生成更丰富的卡片。
辅助技术（虽然支持有限）可获取更多上下文。
更多结合场景
场景一：
产品图片：将 <figure> 包裹的产品图片标记为 Product 类型，并在其中嵌套 Offers 信息。
<figure itemscope itemtype="https://schema.org/Product">
<img src="shoes.jpg" alt="运动鞋" itemprop="image">
<figcaption itemprop="name">轻量跑鞋</figcaption>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">499</span>
<meta itemprop="priceCurrency" content="CNY">
</div>
</figure>场景二：
视频内容：使用 VideoObject 标记视频时长、上传日期等。
<figure itemscope itemtype="https://schema.org/VideoObject">
<video src="tutorial.mp4" itemprop="contentUrl" controls></video>
<figcaption itemprop="description">HTML5视频教程</figcaption>
<meta itemprop="uploadDate" content="2025-01-15">
<meta itemprop="duration" content="PT10M30S">
</figure>五、为什么需要微格式/微数据？
5.1 搜索引擎优化（SEO）
Google、Bing等主流搜索引擎明确支持微数据和微格式，它们会解析这些标记并用于生成 富摘要（Rich Snippets）。例如：
商品页面显示评分、价格、库存状态。
文章页面显示作者头像、发布时间。
活动页面显示日期、地点、票务信息。
富摘要能显著提升搜索结果页的点击率（CTR），为网站带来更多流量。
5.2 数据互联与知识图谱
结构化数据使网页内容能被更广泛地重用。例如：
浏览器插件可提取联系人信息并一键存入手机。
语音助手（如Siri、Google Assistant）可从页面中获取事件信息并添加到日历。
搜索引擎构建知识图谱时，结构化数据是重要来源，让实体关系更加清晰。
5.3 面向未来的语义网
随着人工智能和物联网的发展，机器对网页内容的理解需求越来越高。微数据和微格式正是构建语义网的基础技术之一，让网页不仅是给人看的，也是给机器“读”的。
5.4 提升可访问性（间接）
虽然微数据本身不直接影响可访问性，但清晰的语义结构有助于辅助技术未来更好地解读内容。例如，屏幕阅读器可能根据 itemprop 提供更准确的导航。
六、实际应用建议与注意事项
6.1 如何开始使用？
微格式：访问 microformats.org 查阅规范，在HTML中添加相应类名。
微数据：
访问 schema.org 查找适合您内容的类型。
在页面中按示例添加 itemscope、itemtype 和 itemprop。
使用 Google 的 Rich Results Test 工具验证标记是否正确。
6.2 注意事项
不要过度标记：只为关键内容添加结构化数据，避免滥用导致被搜索引擎惩罚。
保持内容一致：结构化数据应与页面上可见内容保持一致，不要隐藏虚假信息。
优先使用微数据：对于大多数现代网站，微数据+Schema.org是更强大、更通用的选择。
考虑JSON-LD替代方案：除了微数据，Google也推荐使用JSON-LD（JavaScript对象表示法）嵌入结构化数据，它更简洁且不污染HTML。但对于与HTML元素紧密绑定的场景（如图片、视频），微数据依然合适。
总结
微格式 是一种轻量、易用的语义标记方式，通过复用 class 属性为常见内容（联系人、事件等）添加语义，适合快速集成和简单场景。
微数据 是HTML5标准化的结构化数据方案，配合 Schema.org 丰富的词汇表，能够精确描述各种复杂实体，是构建现代SEO和数据互联的利器。
在 <figure>、<article> 等语义标签中嵌入微数据，可以为图片、视频、文章等独立内容赋予更丰富的机器可读含义，进一步提升内容的可发现性和展示效果。
无论选择哪种技术，目的都是为了让网页内容更智能、更互联。掌握它们，您就为网站打开了一扇通向语义世界的大门，让机器更懂您，也让您的信息走得更远。
彩蛋
文中配有完整示例，点击《微格式与微数据完整示例》即可查看。
