微格式

Kpsmart2025年3月1日大约 13 分钟

HTML微格式

微格式（Microformats）是一种通过在HTML中添加特定的类名和属性，为网页内容添加语义信息的方法。它们使得网页内容不仅对人类可读，也对机器可读。本文将详细介绍常见的微格式及其实现方法。

微格式概述

微格式是一种简单的标记约定，它利用HTML的类属性（class）来标记特定类型的信息，如联系人信息、事件、产品等。微格式的设计理念是"先为人类设计，再为机器设计"，它不需要引入新的HTML元素或属性，而是利用现有的HTML结构。

微格式的发展

微格式的概念最早由Tantek Çelik在2004年提出，随后发展成为一套开放的标准。微格式分为两代：

微格式1（Microformats1）：最初的微格式标准，包括hCard、hCalendar等
微格式2（Microformats2）：改进版本，使用前缀"h-"的类名，如h-card、h-event等

微格式2解决了微格式1的一些问题，提供了更一致的命名约定和解析规则，是目前推荐使用的版本。

微格式的优势

简单易用：只需添加特定的类名，不需要学习新的语法
向后兼容：不会破坏现有的HTML结构和样式
搜索引擎友好：主流搜索引擎可以识别微格式，提高内容的可发现性
提高用户体验：可以被浏览器扩展和其他工具识别，提供增强功能
开放标准：由社区维护，没有专利限制

常见的微格式2标准

h-card（联系人信息）

h-card用于标记人员、组织或地点的联系信息，是vCard标准在HTML中的表示。

基本示例

<div class="h-card">
  <img class="u-photo" src="avatar.jpg" alt="头像">
  <h1 class="p-name">张三</h1>
  <p class="p-org">ABC科技有限公司</p>
  <p class="p-job-title">前端开发工程师</p>
  <a class="u-email" href="mailto:zhangsan@example.com">zhangsan@example.com</a>
  <a class="u-url" href="https://example.com">个人网站</a>
  <p class="p-tel">+86 123 4567 8901</p>
  <p class="p-adr">
    <span class="p-locality">北京</span>,
    <span class="p-region">海淀区</span>,
    <span class="p-street-address">中关村大街1号</span>,
    <span class="p-postal-code">100080</span>
  </p>
</div>

常用属性

p-name：姓名
p-org：组织/公司
p-job-title：职位
u-email：电子邮件
u-url：网站
p-tel：电话
p-adr：地址
u-photo：照片
p-note：备注/简介

h-event（事件信息）

h-event用于标记事件信息，如会议、演出、假期等。

基本示例

<div class="h-event">
  <h1 class="p-name">2023前端技术大会</h1>
  <p>
    时间：<time class="dt-start" datetime="2023-09-15T09:00:00+08:00">2023年9月15日 09:00</time>
    至 <time class="dt-end" datetime="2023-09-17T18:00:00+08:00">2023年9月17日 18:00</time>
  </p>
  <p class="p-location">北京国际会展中心</p>
  <p class="p-summary">一年一度的前端技术盛会，汇集行业顶尖专家，探讨最新技术趋势。</p>
  <div class="p-description">
    <p>本次大会将涵盖以下主题：</p>
    <ul>
      <li>前端框架最新进展</li>
      <li>性能优化策略</li>
      <li>跨平台开发技术</li>
      <li>前端安全实践</li>
    </ul>
  </div>
  <a class="u-url" href="https://example.com/conference">活动详情</a>
  <p>组织者：<span class="p-organizer">前端技术联盟</span></p>
</div>

常用属性

p-name：事件名称
dt-start：开始时间
dt-end：结束时间
p-location：地点
p-summary：简介
p-description：详细描述
u-url：事件链接
p-organizer：组织者
p-category：事件类别

h-product（产品信息）

h-product用于标记产品信息，如商品、服务等。

基本示例

<div class="h-product">
  <h1 class="p-name">超轻便笔记本电脑X1</h1>
  <img class="u-photo" src="laptop.jpg" alt="笔记本电脑X1">
  <p class="p-description">13英寸超轻便笔记本，重量仅1.2kg，搭载最新处理器和高清显示屏。</p>
  <p>价格：<span class="p-price">6999</span> <span class="p-currency">CNY</span></p>
  <p class="p-category">电子产品</p>
  <p class="p-brand">TechBrand</p>
  <a class="u-url" href="https://example.com/products/laptop-x1">产品详情</a>
  <div class="p-review h-review">
    <span class="p-rating">4.5</span>/5 - <span class="p-reviewer">科技评测网</span>
  </div>
</div>

常用属性

p-name：产品名称
u-photo：产品图片
p-description：产品描述
p-price：价格
p-currency：货币单位
p-category：产品类别
p-brand：品牌
u-url：产品链接
p-review：评价

h-review（评论/评价）

h-review用于标记对产品、服务、场所等的评论或评价。

基本示例

<div class="h-review">
  <h1 class="p-name">超轻便笔记本电脑X1评测</h1>
  <p>评价：<span class="p-rating">4.5</span>/5</p>
  <p>评价者：<span class="p-reviewer h-card">
    <span class="p-name">李四</span>
  </span></p>
  <p>评价日期：<time class="dt-published" datetime="2023-08-10">2023年8月10日</time></p>
  <div class="p-item h-product">
    <span class="p-name">超轻便笔记本电脑X1</span>
  </div>
  <div class="p-summary">性能强劲，便携性出色，但价格偏高。</div>
  <div class="e-content">
    <p>这款笔记本电脑的优点是...</p>
    <p>不足之处在于...</p>
    <p>总体来说，这是一款值得推荐的产品。</p>
  </div>
</div>

常用属性

p-name：评价标题
p-rating：评分
p-reviewer：评价者
dt-published：发布时间
p-item：评价对象
p-summary：评价摘要
e-content：评价内容

h-entry（文章/博客条目）

h-entry用于标记文章、博客文章、新闻等内容。

基本示例

<article class="h-entry">
  <h1 class="p-name">HTML微格式：提升网页语义化的简单方法</h1>
  <p>作者：<a class="p-author h-card" href="https://example.com/about">
    <span class="p-name">王五</span>
  </a></p>
  <p>发布时间：<time class="dt-published" datetime="2023-07-20T14:30:00+08:00">2023年7月20日</time></p>
  <p class="p-summary">本文介绍了HTML微格式的基本概念和实现方法，帮助开发者提升网页的语义化水平。</p>
  <div class="e-content">
    <p>微格式是一种简单而有效的方法，可以为HTML添加语义信息...</p>
    <!-- 文章内容 -->
  </div>
  <p>分类：<a class="p-category" href="/category/html">HTML</a>, <a class="p-category" href="/category/seo">SEO</a></p>
  <a class="u-url" href="https://example.com/blog/microformats">原文链接</a>
</article>

常用属性

p-name：文章标题
p-author：作者
dt-published：发布时间
p-summary：摘要
e-content：正文内容
p-category：分类
u-url：文章链接
u-comment：评论链接

h-feed（文章/博客列表）

h-feed用于标记文章或博客文章的列表。

基本示例

<div class="h-feed">
  <h1 class="p-name">前端技术博客</h1>
  <p class="p-author h-card">由<span class="p-name">前端技术团队</span>维护</p>
  
  <article class="h-entry">
    <h2 class="p-name"><a class="u-url" href="/blog/post1">HTML微格式入门</a></h2>
    <p class="p-summary">了解HTML微格式的基础知识...</p>
    <time class="dt-published" datetime="2023-07-20">2023年7月20日</time>
  </article>
  
  <article class="h-entry">
    <h2 class="p-name"><a class="u-url" href="/blog/post2">CSS Grid布局详解</a></h2>
    <p class="p-summary">掌握CSS Grid布局的核心概念...</p>
    <time class="dt-published" datetime="2023-07-15">2023年7月15日</time>
  </article>
  
  <article class="h-entry">
    <h2 class="p-name"><a class="u-url" href="/blog/post3">JavaScript异步编程</a></h2>
    <p class="p-summary">深入理解JavaScript的异步机制...</p>
    <time class="dt-published" datetime="2023-07-10">2023年7月10日</time>
  </article>
</div>

常用属性

p-name：Feed标题
p-author：作者/维护者
p-summary：Feed描述
h-entry：包含的文章条目

h-recipe（食谱）

h-recipe用于标记食谱信息。

基本示例

<div class="h-recipe">
  <h1 class="p-name">香煎三文鱼</h1>
  <img class="u-photo" src="salmon.jpg" alt="香煎三文鱼">
  
  <p class="p-summary">简单美味的香煎三文鱼，配以新鲜蔬菜和柠檬汁。</p>
  
  <p>准备时间：<span class="dt-duration" datetime="PT15M">15分钟</span></p>
  <p>烹饪时间：<span class="dt-duration" datetime="PT20M">20分钟</span></p>
  <p>总时间：<span class="dt-duration" datetime="PT35M">35分钟</span></p>
  <p>份量：<span class="p-yield">2人份</span></p>
  
  <h2>配料：</h2>
  <ul>
    <li class="p-ingredient">三文鱼片 2块</li>
    <li class="p-ingredient">橄榄油 2汤匙</li>
    <li class="p-ingredient">盐 适量</li>
    <li class="p-ingredient">黑胡椒 适量</li>
    <li class="p-ingredient">柠檬 1个</li>
    <li class="p-ingredient">迷迭香 少许</li>
  </ul>
  
  <h2>步骤：</h2>
  <div class="e-instructions">
    <ol>
      <li>将三文鱼洗净，用厨房纸吸干水分。</li>
      <li>在三文鱼两面撒上盐和黑胡椒。</li>
      <li>热锅，倒入橄榄油。</li>
      <li>放入三文鱼，皮朝下，中火煎3-4分钟至皮酥脆。</li>
      <li>翻面继续煎2-3分钟。</li>
      <li>挤上柠檬汁，撒上迷迭香。</li>
      <li>装盘即可食用。</li>
    </ol>
  </div>
  
  <p>营养信息：<span class="p-nutrition">每份含蛋白质25克，脂肪15克</span></p>
  <p>难度：<span class="p-skill-level">简单</span></p>
</div>

常用属性

p-name：食谱名称
u-photo：食谱图片
p-summary：简介
dt-duration：准备/烹饪时间
p-yield：份量
p-ingredient：配料
e-instructions：步骤说明
p-nutrition：营养信息
p-skill-level：难度级别

微格式的属性前缀

微格式2使用特定的前缀来表示不同类型的属性：

p-：表示普通文本属性（plain text），如p-name、p-description
u-：表示URL属性（URL），如u-url、u-photo
dt-：表示日期时间属性（date time），如dt-start、dt-published
e-：表示富文本内容（embedded markup），如e-content、e-instructions

这些前缀帮助解析器确定如何处理属性值，提高了微格式的一致性和可预测性。

微格式与其他结构化数据格式的比较

除了微格式，还有其他几种方法可以在网页中嵌入结构化数据：

1. 微数据（Microdata）

微数据是HTML5的一部分，使用itemscope、itemtype和itemprop等属性。

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">张三</span>
  <span itemprop="jobTitle">软件工程师</span>
  <a itemprop="email" href="mailto:zhangsan@example.com">zhangsan@example.com</a>
</div>

2. RDFa

RDFa（Resource Description Framework in Attributes）是一种在HTML中嵌入RDF三元组的方法。

<div vocab="http://schema.org/" typeof="Person">
  <span property="name">张三</span>
  <span property="jobTitle">软件工程师</span>
  <a property="email" href="mailto:zhangsan@example.com">zhangsan@example.com</a>
</div>

3. JSON-LD

JSON-LD（JavaScript Object Notation for Linked Data）是一种基于JSON的结构化数据格式，它将所有结构化数据放在<script>标签中。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "张三",
  "jobTitle": "软件工程师",
  "email": "zhangsan@example.com"
}
</script>

比较

特性	微格式	微数据	RDFa	JSON-LD
易用性	高	中	低	中
与HTML集成	紧密	紧密	紧密	分离
可读性	高	中	低	高
复杂性支持	低	中	高	高
搜索引擎支持	中	高	高	最高
维护难度	低	中	高	低

微格式的主要优势在于其简单性和易用性，特别适合标记简单的结构化数据。对于更复杂的数据结构，其他格式可能更合适。

微格式的解析和使用

解析微格式

有多种工具和库可以用来解析网页中的微格式：

microformats-parser：JavaScript库，用于解析微格式
php-mf2：PHP库，用于解析微格式2
mf2py：Python库，用于解析微格式2

示例（使用JavaScript）：

// 使用microformats-parser库解析页面中的微格式
import { mf2 } from 'microformats-parser';

// 解析当前页面
const parsed = mf2(document.documentElement.innerHTML, { baseUrl: window.location.href });
console.log(parsed.items); // 输出解析到的微格式项目