Microformats教程 第4部分

本文首发于:http://www.lunaticsun.com/article/microformats-four


目前,这个系列已经有四篇文章了,它们是

  1. 什么是Microformats
  2. Microformats教程 第1部分
  3. Microformats教程 第2部分
  4. Microformats教程 第3部分

在这一部分中,我将讲述反映个人信息的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"

常用hCard个人信息参考
语意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很相似,能够包含一系列子元素。

常用adr地址信息参考
语意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,那么我们的联系人网络就能够更强大。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值