本文首发于:http://www.lunaticsun.com/article/microformats-four
目前,这个系列已经有四篇文章了,它们是
在这一部分中,我将讲述反映个人信息的microformats:hCard。这是一个较前几部分的内容都复杂很多的microformats。
hCard就像是我们生活中的名片一样,反映了我们每个人的个人信息,它能够包含姓名、出生日期、工作单位、地址、电话、电子邮件和个人网站等许多信息,如果你已经阅读了这套教程的前几部分,那么你肯定能够猜到hCard所要做的仅仅是将这些个人信息的标记代码标准化,从而使不同的系统能够从网页上读取这些信息。
在了解如何创建hCard之前,我想先说一下microformats是在一系列的原则之下产生的。这些原则非常重要,如果我们哪一天自己创建microformats,那么就必须遵循这些设计原则,这些原则也是保证我们能够创造出高效率的microformats的必要条件。它们是:
- 解决一个特定的问题
- 尽可能简单易用
- 首先是给人阅读,其次机器亦能读取
- 是可以嵌入的一个组件
- 尽量使用已有标准
hCard解决了一个个人信息的问题,它很简单,无非是一些web内容和 HTML ,其中的web内容是给人阅读的,随后机器亦能读取格式化的hCard,hCard作为一个有固定模式的组件能够嵌入在任何网页中,并且hCard来自另一个标准vCard。接下来就让我们看看如何标记个人信息hCard。通常我们标记个人信息时都会将它放在一个 div
区域中,然后给它添加 class
属性以便添加 CSS 。在hCard中我们也将通过添加 class
属性来标记hCard。由于 class
属性经常被用于标记某一类microformats,所以我们称这一种常见的模式为class design pattern。而我们创建的复杂的microformats通常会有子元素,而相对于子元素来说的最外层的元素称为root element。hCard中的典型root element是:
<div class="vcard"></div>
注意, 以上 class
的值是vcard,而不是hcard 。以上代码的关键点在于,microformats对于你使用何种元素标记它并没有强行的规定,所以 div
并不是必要的,也可以是 p
。microformats的灵活性所在就是你可以使用任何你觉得符合语意的元素,但关键是要添加上 class="vcard"
。
以上代码并不能构成一个合法的hCard,hCard规定,一个合法的hCard至少要包含一个人的姓名。而个人姓名在hCard中使用 class="fn"
标记。
<div class="vcard">
<span class="fn">Lunatic Sun</span>
</div>
以下表格提供了其他一些常用的信息,但是 必要的信息 只有 class="fn"
。
语意 | HTML |
---|---|
个人网站 | class="url" |
出生日期 | class="bday" title="19830420" |
个人照片 | class="photo" |
工作单位 | class="org" |
头衔 | class="title" |
职务 | class="role" |
电话号码 | class="tel" |
电子邮件 | class="email" |
和HTML中 class
属性一样,我们可以在 class
中同时指定两个值,只要当前元素能够同时表示两个信息。如:
<a href="http://www.lunaticsun.com" class="fn url">Lunatic Sun</a>
另外,hCard中还有一个非常重要的地址信息 class="adr"
,它的用法与hCard很相似,能够包含一系列子元素。
语意 | HTML |
---|---|
具体地址 | class="extended-address" |
路牌信息 | class="street-address" |
城市 | class="locality" |
邮编 | class="postal-code" |
国家 | class="country-name" |
以上地址信息的范围是由小到大的。并且整个 adr
microformats可以嵌入到hCard之中。
<div class="vcard">
....
<div class="adr">
....
</div>
....
</div>
目前,hCard已经得到了广泛的应用,如果你在firefox上安装了 Operator ,那么你就可以直接将页面上的个人信息导出为 .vcf 文件,并且直接导入你的联系人管理软件,如Microsoft Outlook。Operator还能够将hCard直接导入Yahoo通讯录,特别方便,这样你就不用手动输入你朋友们的信息了。对于当今的Web 2.0企业来说,如果都能够实现 XFN 和hCard,那么我们的联系人网络就能够更强大。