微格式

微格式是一种在HTML中嵌入结构化语义的轻量级方案，通过约定类名表达特定含义。

核心概念

设计原则

text

微格式遵循原则：
1. 使用现有HTML属性（class、rel）
2. 类名约定表达语义
3. 人类可读，机器可解析
4. 简单易用，无需额外技术

常用微格式

微格式	用途	类名前缀
hCard	人物/组织信息	vcard
hCalendar	事件信息	vevent
hAtom	文章/博客条目	hentry
hReview	评论/评价	hreview
hRecipe	食谱	hrecipe
hProduct	产品信息	hproduct

hCard 微格式

人物信息

HTML

<div class="vcard">
  <span class="fn">张三</span>
  <span class="title">前端工程师</span>
  <span class="org">科技公司</span>

  <div class="adr">
    <span class="locality">北京</span>
    <span class="country-name">中国</span>
  </div>

  <a class="email" href="mailto:zhangsan@example.com">zhangsan@example.com</a>
  <span class="tel">+86-138-0000-0000</span>
</div>

hCard 类名说明

类名	含义
fn	全名（Full Name）必填
n	结构化姓名
nickname	昵称
title	职位
org	所属组织
email	邮箱
tel	电话
adr	地址容器
url	个人主页

结构化姓名

HTML

<div class="vcard">
  <span class="n">
    <span class="given-name">张</span>
    <span class="family-name">三</span>
  </span>
</div>

hCalendar 微格式

事件信息

HTML

<div class="vevent">
  <span class="summary">前端技术大会</span>
  <time class="dtstart" datetime="2026-05-20T09:00">2026年5月20日 9:00</time>
  -
  <time class="dtend" datetime="2026-05-20T18:00">18:00</time>

  <span class="location">北京国际会议中心</span>
  <span class="description">讨论前端最新技术趋势</span>

  <a class="url" href="https://frontend-conf.com">活动详情</a>
</div>

hCalendar 类名说明

类名	含义
summary	事件名称
dtstart	开始时间
dtend	结束时间
location	地点
description	描述
url	事件链接

hReview 微格式

评论信息

HTML

<div class="hreview">
  <span class="item">
    <span class="fn">iPhone 15 Pro</span>
  </span>

  <span class="rating">4.5</span>
  <abbr class="rating" title="4.5">★★★★☆</abbr>

  <span class="reviewer vcard">
    <span class="fn">张三</span>
  </span>

  <time class="dtreviewed" datetime="2026-05-17">2026年5月17日</time>

  <span class="summary">性能优秀，设计出色</span>
  <span class="description">详细评论内容...</span>
</div>

rel 微格式

rel 属性语义

HTML

<!-- 联系人 -->
<a rel="contact" href="...">联系人</a>

<!-- 标签 -->
<a rel="tag" href="/tags/html/">HTML</a>

<!-- 许可协议 -->
<a rel="license" href="https://creativecommons.org/">CC协议</a>

<!-- 作者 -->
<a rel="author" href="...">作者</a>

<!-- 引用 -->
<a rel="citation" href="...">引用来源</a>

rel值	含义
contact	联系人信息
tag	标签/关键词
license	内容许可
author	作者链接
bookmark	书签/重要页面
nofollow	不跟踪链接

微格式与Schema.org对比

特性	微格式	Schema.org
实现方式	class类名	JSON-LD/Microdata
学习成本	低	中
搜索引擎支持	部分	全部主流
扩展性	有限	丰富词汇表
推荐使用	简单场景	SEO优化场景

注意：微格式适合轻量级语义表达，SEO优化场景推荐使用 Schema.org JSON-LD。

要点总结

微格式通过约定 class 类名表达语义
hCard 用于人物/组织信息
hCalendar 用于事件信息
rel 属性表达链接关系语义
简单场景可用微格式，SEO场景用Schema.org

📝 发现内容有误？点击此处直接编辑