一张名片 Microformats 网站

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

所有 Microformats 都是标准化的 ID 和 Class 名称,用于包装数据。 真的,就是这样。

假设您下周要举办生日派对,并且您要在网上发布有关派对的信息。 此事件有一个名称(生日派对!),一个地点(Chuck E. Cheese!),一个时间(晚上 6:00-9:00),以及一些额外的细节(不要带礼物)。 有很多种方法可以以语义方式在网络上呈现此信息。 该事件可以是使用 DL 和 DT 的定义列表。 您也可以使用非常常见的标题和段落标签。 Microformats 提出的建议是,不要使用这些标签,而是使用一组称为 hCalendar 事件的特定标准化标签。

这是一个 hCalendar 事件的示例:

<div id="hcalendar-Birthday-Party" class="vevent">
  <abbr title="2008-09-19T06:00Z00" class="dtstart">September 19, 2008  6</abbr> – 
  <abbr title="2008-09-19T09:00Z" class="dtend">9am</abbr> :  
  <span class="summary">Birthday Party</span> at 
  <span class="location">Chuck E. Cheese</span>
  <div class="description">No gifts</div>
</div>

这非常不错,因为它仅使用非常通用的包装器来包装所有数据。 大多数网站不会直接对非常通用的元素(如 div 和 span)应用任何样式。 因此,您有机会使用提供的类名来匹配您网站的样式。

让我们创建一个简单的“名片”网站,该网站具有功能完备的 Microformats“hCard”。 创建您自己的 hCard 的最简单方法可能是使用 Microformats 网站本身的 hCard 生成器

我的看起来像这样:

<div id="hcard-Chris-Coyier" class="vcard">
	<a class="url fn" href="http://chriscoyier.net">Chris Coyier</a>
	<div class="org">CSS-Tricks</div>
	<p><a class="email" href="mailto:[email protected]">[email protected]</a></p>
	<div class="adr">
		<span class="locality">Portland</span>, 
		<span class="region">OR</span>
	</div>
</div>

由于 hCard 完全包装在一个 div 中,如果需要,我们实际上可以使用 CSS 针对它并用图像替换整个东西(CSS 图像替换)。 这正是我在演示页面上所做的。 我只是想表明使用 Microformats 不会以任何方式将您锁定在任何特定样式中。

查看演示 下载文件

 

请注意,在演示中,小卡片是可点击的,可以下载我的 vCard。 vCard 是地址簿软件(例如苹果的地址簿)的标准文件格式。 hCard 是基于该标准的 Microformat。 是的,这有点令人困惑…

那么您在网站上使用了 Microformats。 那又怎样呢?

老实说,这可能不是什么大不了的事…… 至少,您可以把它看作“做正确的事”。 每天,您都可以看到现在已被广泛采用的网络标准所能实现的可能性的证据。 想象一下,如果所有数据都迁移到标准化格式,我们还能做些什么。

但作为早期采用者,也有一些很酷的优势。 Remy Sharp 两年前的 Microformats 书签工具 今天仍然很酷。 您所要做的就是将其拖到您的书签栏中,然后单击以在任何页面上激活它。 它会在页面上查找所有 Microformats,并为您提供一个不错的模态窗口来下载它们。 这是将人员添加到地址簿、将事件添加到日历等超级快速的方法。

更多信息

Tails Firefox 扩展: 非常棒的小型 Firefox 插件。 自动检测 Microformats,并在底部栏中显示一个小图标。 单击它以打开一个用于查看/导出它们的侧边栏。

为什么要使用 Microformats?