MJiA

本文是“A Blog Not Limited”上“Getting Semantic With Microformats”系列文章的翻译，请尊重原文版权。

原文链接：http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-3-hcard/

——————————————————————

在这个系列的开始，我在第一部分详细讨论了基于链接关系的微格式──使用rel属性。然后在第二部分中讨论了使用XFN扩展rel属性来展现社交网络关系。XFN和rel-基础的微格式都相对简单，仅仅需要在链接(<a>)元素中添加rel属性，从而提供相关的语义上下文描述。

现在，我们来继续讨论hCard 微格式，他用来在网页内容中添加人、组织、公司和地点的结构化语义信息。

（这篇文章会很长，找个舒服点的姿势。）（译注：呼呼～～）

来源：vCard

vCard是用于电子商务名片的标准，通常被附加在邮件中，采用“.vcf”的扩展名。就像传统的商务名片一样，vCard中包括姓名和联系信息。hCard是用来允许网站作者将自己的vCard信息放入到他们网页中的标准化格式。hCard使用对于vCard而言1:1的重新展现方式。这意味着标记为hCard的网页内容可以被转化为vCard，从而在支持vCard的应用或者服务中使用。

人、组织、公司和地点

hCard微格式展现人、组织、公司和地点──换句话说就是地址/联系方式，包括但不仅仅限于如下信息：

• 格式化/结构化名称
• 邮寄地址
• Email地址
• 电话号码
• 电报挂号

上述所有信息都可以包括在hCard中，唯一必须的信息是格式化名称。其他任何信息都是可选的。跟所有微格式相同的是，hCard使用已有的标记和属性来定义地址/联系方式，不过是使用特定的不同class值，通常被引用为“属性”和“子属性”。

有名字的人

我使用hCard在博客上的第一个实现就是我个人的联系信息，在我的“关于”页面中：

1. <div class=”vcard”>
2. <p class="fn n"><span class="given-name">Emily</span> <span class="additional-name">Paige</span> <span class="family-name">Lewis</span></p>
3. <p><a class="email" href="mailto:emily@ablognotlimited.com">emily@ablognotlimited.com</a></p>
4. <p class="adr"><span class="locality">Albuquerque</span>, <abbr class="region" title="New Mexico">NM</abbr> <span class="postal-code">87106</span> <acronym class="country-name" title="United States of America">USA</acronym></p>
5. <p class="nonVisual"><a href="http://www.ablognotlimited.com" rel="home me" class="url">A Blog Not Limited</a></p>
6. </div>

上述代码中需要的注意的是，所有的标记和内容都包含在<div>中，而该<div>被指定了class="vcard"属性。其中包括的元素可以是任何东西 (<p>, <ul>, <span>等等)，只要这些都是合法的标记，最好都是具有语义信息的。但class="vcard"这一句相当的重要。您可能会问：“但是这个微格式被叫做hCard…为什么要使用vcard作为属性值？”这是因为，hCard需要1:1的对应到vCard。所有这些定义的hCard属性(class值)都是以vCard属性名称为基础定义的。接受这一点，朝前看～

个人身份信息

我们看一下把上面的例子分解为不同的属性，先以这些个人信息为例，比如我的名字。您可以看到我的名字信息包含在<p class="fn n">之中：

<p class=”fn n”><span class=”given-name”>Emily</span> <span class=”additional-name”>Paige</span> <span class=”family-name”>Lewis</span></p>

代码 fn 用来说明内部包含的内容是对应于人名的字符串，像前面提过的，这个是在hCard微格式中必需的属性。代码 n 用来说明内部包含的内容是人名的结构，例如姓、名、字等。虽然属性n在规范要求中必须出现，但是如果包含在fn属性中的值恰好是两个词的话，属性则作为隐式处理。在微格式的Wiki上有对隐式优化（implied optimization）的详细介绍。

还有一些其他身份属性需要介绍一下：

• class="nickname"：表明个人的昵称/网络名称
• class="photo"：表明个人的照片，需要指定<img />元素用来指向照片的网络地址URL(通过 src)。还可以通过指定<object>元素，然后在data属性中指向照片的URL。
• class="bday"：表明个人的生日，需要指定生日日期信息的元素。

批注：日期

应该提一下的是，当谈论到日期信息时，他经常被标注为人和机器都能阅读的信息格式。这被称作日期时间设计模式。

不需要介绍太多的细节（因为我们会在hCalendar微格式中更详细的介绍），下面提供一个示例，通常日期被组织成下面的格式：

<abbr class="bday" title=”1974-09-04″>1974年9月4日</abbr>

注意在<abbr>中包含的内容是人类能够阅读的信息格式，而title中的值是机器能够阅读的信息格式。不过，<abbr>元素使用在日期信息的描述上（abbr设计模式）目前引起了一些无障碍访问上的关注。我会在后面的hCalendar中继续详细讨论这些，目前被建议的解决方案是使用<span>元素中的title属性值来描述，而不是使用<abbr>。

子属性

现在回到之前我的“关于页面”的例子……

很多hCard属性都拥有子属性用来提供更多的上下文语境信息。在我的例子中，在<p class="fn n">元素中使用了很多<span>来引用子属性：

<p class="fn n"><span class=”given-name”>Emily</span> <span class=”additional-name”>Paige</span> <span class=”family-name”>Lewis</span></p>

• class="given-name"说明我的姓
• class="additional-name"说明我的中间名字
• class="family-name"说明我的名

在这三个子属性中，given-name和family-name在每个vcard中只能使用一次，而additional-name可以使用多次。

下面还有两个子属性可以介绍一下：

• class="honorific-prefix"表明名字前缀（例如“先生”、“博士”）
• class="honorific-suffix"表明名字后缀（例如“PhD”等）

同additional-name类似，这两个子属性可以被使用多次。

Email和电话信息

例子的下一部分是我的Email地址：

<p><a class=”email” href=”mailto:emily@ablognotlimited.com”>emily@ablognotlimited.com</a></p>

为email属性指定到我个人的链接表明该链接的目的地址是我的Email地址。在<a>中内容可以是任意的，我选择显示我Email地址的真实字符，而你可以选择使用“AT”代替“@”。email属性也可以使用多次，如果使用多次，可以使用type子属性来区分哪个Email地址是更倾向于常用的：

1. <p><a class=”email” href=”mailto:test1@test.com”><span class=”type”>pref</span>erred email</a></p>
2. <p><a class=”email” href=”mailto:test2@test.com”>alternate email</a></p>

还可以添加另一个属性，tel，用来表明个人的电话号码（通过value子属性）。属性tel同样拥有一个type子属性用来表明号码的类型（例如，家中号码、工作、传真等）：

<p class=”tel”><span class=”type”>Work</span>: <span class=”value”>555-123-4567</span></p>

type子属性完全是可选的，如果没有任何数值的话，缺省值是“voice”。

tel属性可以被使用多次，type子属性同样可以使用“pref”值来表示该号码是常用号码。

1. <p class=”tel”><span class=”type”>Work</span>(<span class=”type”>pref</span>erred): <span class=”value”>555-123-4567</span></p>
2. <p class=”tel”><span class=”type”>Home</span>: <span class=”value”>555-789-0123</span></p>

最后，value子属性可以是隐式的。如果type属性被指定但是没有value被指定的话，在tel之内除了type属性之外的属性都会被认为是value。

地址信息

上面例子的下一个部分是我的地址信息：

<p class=”adr”><span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM</abbr> <span class=”postal-code”>87106</span> <acronym class=”country-name” title=”United States of America”>USA</acronym></p>

adr属性表明地址部分，我通过很多不同的<span>来描述和说明不同的子属性：

• class="locality"表明城市
• class="region"表明省/洲
• class="postal-code"表明ZIP编码
• class="country-name"表明国家

看一下我的country-name，我使用<acronym>元素来使用简称的国家描述，而把国家的全名放到了title中。当然也可以直接写出全名而忽略掉<acronym>。

如果想获得更多的细节，还可以包括下列属性：

• class="street-address"表明街道地址
• class="extended-address"表明公寓号码
• class="type"来表明地址类型，例如工作、家庭

批注：address

稍等！语义信息在哪里呢？为什么不使用<address>元素作为地址信息的容器，却使用<p>？实际上，直到我写这篇文章作研究的时候我才发现一直不恰当的使用<address>很多年。我一直认为应该直接字面翻译用address来描述地址信息。但是我错了。

根据W3C，<address> 元素定义为：

“… used by authors to supply contact information for a document or a major part of a document such as a form.（作者为文档或者文档局部提供联系信息时候使用）”

所以，在一些例子中，如果联系信息是文档作者的话，他可能是联系信息合适的容器元素。对于这些例子，我就放弃了使用<address>。

网页站点信息

上面例子最后一部分在<a class="url">中包含了我的博客地址：

<p class="nonVisual"><a href="http://www.ablognotlimited.com" rel="home me" class=”url”>A Blog Not Limited</a></p>

url属性表明链接（<a>）目的地址（href）是一个关于我的站点。虽然我是在引用我的博客，但同样也可以是我在任何网站上的关于我的信息页面的URL。

例子最后部分需要注意的几点：

• 为了保证使用基于rel-的微格式，我确保里面包含了rel="home me"。看，组合微格式是多么容易阿！
• 链接被包含在<p class="nonVisual">元素中，该元素仅仅是一个我用来指定特别显示风格的段落，而跟hCard微格式没有直接的关系。

最后的产品

在这么一大段的解释之后，让我们在回头看看他是什么样子的：

因为hCard使用标准的XHTML，他完全可以使用您喜欢的风格渲染出来。您可以去参考Chris Coyier最近发布的微格式商务名片，就是使用hCard的标记加上特别漂亮的CSS来模拟传统的商务名片的效果。The possibilities are only limited to your CSS skills.

添加到地址簿？

在我的例子中您可以看到在hCard内容下面跟着一个链接──“添加到您的地址簿”。这仅仅是一个指向vCard文件的链接，会允许您下载并添加到地址簿应用中。您可以简单的提供一个到.vcf文件的链接，或者您可以利用Technorati的联系人服务。使用Technorati的技术，您可以简单的在您hCard页面的地址前加上http://feeds.technorati.com/contacts/，然后使用拼接的字符串作为链接（<a>）中的目的地址（href）。

<a href="http://feeds.technorati.com/contact/http://www.ablognotlimited.com/about/” title=”Download vCard”>Add to Address Book</a>

当用户点击该链接，vCard会被动态生成，用户可以下载他：

规则和提醒

现在我已经描述一遍我的hCard例子了，有必要指出一些规则需要遵守：

• 属性和子属性名字是大小写敏感的
• vcard“根节点”不能同其他属性组合在一起，因此，class="vcard fn" 是无效的
• 属性不能同子属性组合，因此，class="tel value"是无效的

并不是很难，是吧。微格式毕竟是标准，所以他需要遵守一些规则。并且，不要忘记：当谈论微格式的时候，并不是在讨论标记名称，而是class值和不同的标记属性──属性和子属性。您基本上可以使用任意的(X)HTML元素，而还可以确保微格式是有效的──如果您恰当的为他们赋予属性和子属性值。当然，如果您打算拥抱微格式的语义，那么也应该拥抱这些具有语义的标记名称。

别忘了Profile

不要忘了前面提过的XFN，我们非常推荐在hCard的Profile中包含XFN信息，仅仅需要在网页的<head>中指定下面的微格式：

<head profile=”http://purl.org/uF/hCard/1.0/”>

W3C允许多个Profile描述，使用空格隔开，所以可以同时指定hCard和XFN：

<head profile=”http://gmpg.org/xfn/11 http://purl.org/uF/hCard/1.0/”>

就像前面提过XFN时候一样，我在全局的文件中维护<head>，所以这两项会包含在所有的博客页面中。

组合hCard和XFN

hCard使用在自然语言中提供大量的上下文信息。我习惯在我的文章中应用很多关于我的信息，不过通常也会引用我的朋友和同事……使用hCard来描述这些引用也是非常有意义的。而且他跟我使用XFN值来描述这些引用并不冲突。微格式最好的一点就是您可以随意的组合他们。根据引用的上下文，我使用不尽相同的标记。比如，当我引用某人的文章或者日志，我使用<cite>作为我vcard的容器：

<p> … the brilliant <cite class=”vcard”><a href=”http://adactio.com” rel=”muse colleague” class=”url fn” title=”Link opens off this site”>Jeremy Keith</a></cite>, who suggests using <a href=”http://adactio.com/journal/1122/” title=”Link opens off this site”>hCard in natural language</a>.</p>

而当我简单的引用某人，我使用<span>作为vcard的容器：

<span class=”vcard”><a href=”http://www.jenschwedler.com/” title=”Link opens off this site” class=”url fn” rel=”met colleague co-worker friend”>Jen Schwedler</a></span>

最后，如果我只是使用名字作为某人的引用，我会使用<abbr>作为格式化的容器，而把他的全名写在title之中：

<span class="vcard"><abbr class=”fn” title=”Ian Pitts”><a href=”http://www.iso-100.com/” title=”Link opens off this site” class=”url” rel=”met colleague co-worker friend”>Ian</a></abbr></span>

在所有这些例子中，标记语言简单的映射出我希望得到的语义。hCard和XFN微格式都是相同的：

• fn属性指定名字
• url属性指定网站地址
• rel使用合适的值

如果我拥有更多这些个人的信息（例如Email、工作职称等），我会同样使用属性和子属性来标记这些内容。

组织和公司

我也遇到过需要使用hCard来描述一个公司或者组织的情况，我也会提供如下的描述：

1. <div class=”vcard”>
2. <p class=”fn org”>Big Ass Blow-Up Dolls</p>
3. <img src="logo.png" class=”logo” width=”69px” height=”69px” alt=”Big Ass Blow-Up Dolls” />
4. <p class=”adr”><span class=”street-address”>6969 Happiness Avenue</span>, <span class=”locality”>Los Angeles</span>, <abbr class=”region” title=”California”>CA</abbr> <span class=”postal-code”>69069</span></p>
5. <ul>
6. <li class=”tel”><span class=”value”>696-969-6969</span></li>
7. <li><a class=”email” href=”mailto:goodtimes@babud.com”>Email Us</a></li>
8. <li><a class=”url” href=”http://www.babud.com/”>Visit Our Web Site</a></li>
9. </ul>
10. </div>

可以看到，描述组织或者公司的hCard基本上同描述个人的是一样的。主要的区别在于：

• 除了fn属性表明名字之外，组织名字也会被赋予org属性。而针对组织和公司，您从来不会使用n属性
• 对应于<img />中的photo，相应的图片使用logo属性来描述组织或者公司LOGO。

地点

上述针对组织和公司的描述基本上跟地点的描述是一致的。您可以简单的引用某些地点，使用fn org 来表明名字，并附加上面提过的地址信息描述。下面是一个地点hCard的自然描述：

<p class=”vcard”>During my visit to <span class=”locality”>Altanta</span>, <abbr title=”Georgia” class=”region”>GA</abbr>, I plan to check out <span class=”fn org”>Centennial Olympic Park</span>.</p>

有一些特定的“位置相关”的hCard属性用来描述地点（不限于描述地点）：

• geo属性表明全球位置，使用两个子属性latitude和longitude（经度和纬度）。
• latitude子属性使用十进制数值来表明纬度
• longitute子属性使用十进制数值来表明经度

说说好处

现在已经讨论了几个hCard的例子，让我们来说说好处。

语义

前面也说过，现在还要说：

微格式的使用为网页内容添加结构和意义，使得他同时适合人类和机器阅读，仅仅通过已有的标记和数据规范。同时推动网络标准更宽泛的概念，让所有人获益。

分享联系信息

使用hCard来标记联系信息，您可以使联系信息自动的转换为可下载的vCard，从而提供给像微软Outlook和Apple的地址簿等应用使用。您可以使用Technorati联系人服务，或者自己生成并在服务器上提供下载。

同时，还有一些浏览器附加组件或者扩展自动把hCard信息导出到vCard：

Firefox

Operator 0.9.3识别hCard内容并提供用户选项允许导出信息到vCard，从而提供给地址簿应用使用：

在截图中您还可以看到一列选项，Operator使用hCard信息在各大网站之间搜索，包括Google Maps：

Tails Export 0.3.5是另外一个Firefox附加组件，借助hCard信息来导出到地址簿应用：

Safari

Safari微格式插件非常适合Safari用户来发现网页中的hCard信息，然后存储到地址簿中。我不是Safari常用用户，我没有安装这个插件，所以不能提供截图。

Bookmarklets

前面提到的Safari插件的概念被实现为一个浏览器无关的微格式书签工具，我可以确定他非常的有效：

还有很多hCard书签工具。

搜索

使用微格式标记的网页内容具有更多的意义。可以帮助搜索引擎更好的评测您提供的内容，也许还可以提升您的搜索引擎排名。应用到搜索引擎并没有任何绝对的保证，但是具有上下文的内容总是一个很好的开始。

很多搜索引擎也在他们自己的应用和服务中使用hCard：

• Google在Google Maps中添加了hCard微格式
• Technorati 微格式搜索提供对hCard和其他微格式的搜索，还包括hCalendar和hReview
• Yahoo! Local使用hCard来标记他的结果，同样还使用hCalendar和hReview

社交网络

社交网络站点使用hCard微格式来标记用户个人资料页面，同样还有用户的联系人、好友、follower页面：

• Twitter对个人资料页面使用hCard，同样也包括following和follower列表
• ClaimID在用户公共个人资料页面使用hCard
• Last.fm在个人资料页面使用hCard，为fn包含photo和url属性

这些仅仅是其中一些例子，文章“使用hCard的服务”列举了所有使用hCard的服务和网站。

帮助简化的工具

下面为大家介绍一些简化的工具，可以帮助您简化手写代码的工作，也可以帮助您记住所有这些属性值：

• hCard 生成器提供简单的表单来编辑hCard信息
• hCard微格式验证器 允许您提交包含hCard信息的URL，然后验证其中的属性和子属性
• 还有hCard cheatsheet提供属性和子属性的快速参考信息

还有更多

前面已经介绍了大量关于hCard的详细信息。但是还有更多我没有提到的。强烈推荐您花上一些时间来阅读下面这些hCard微格式的属性和子属性，并参考大量实例.