为网页添加hCard微格式

所属分类: 网页制作 / CSS 阅读数: 1550
收藏 0 赞 0 分享

说到“微格式”,有人力捧,有人质疑。归根结底,我觉得还是浏览器和终端设备的支持没有跟上,没有形成一个完整的应用流程。尽管如此,Yahoo、Google 等行业巨头已经开始在各自的主流产品中应用微格式。而作为网站开发者和个人站长,你对“微格式”的应用仍在观望之中吗?

其实,微格式并不复杂,它离我们也并不遥远。不妨现在就行动起来,试试在网页中添加微格式吧!

在我看来,微格式最主打的应用非 hCard 莫属。所以本文将着重介绍一些 hCard 的应用经验。

vCard/VCF

在讨论 hCard 之前,有必要先介绍一下 vCard。

vCard 是电子名片的文件格式标准,它可以存储联系人的姓名、公司名称、职位、电话、地址、电子信箱、网站等信息。vCard 的文件扩展名通常为 .VCF,一个简单的 VCF 文件看起来通常是这个样子的:

BEGIN:VCARD
VERSION:2.1
N:Michael;Jackson
TEL:13912345678
END:VCARD

虽然对普通网友来说,VCF 文件似乎并不常见,但事实上它已经在众多领域得到了广泛的支持和应用。

我第一次接触到 VCF 文件是在整理手机通讯录时。当时我需要将手机中的通讯录转移到新手机中,我下载并试用了一些相关的工具软件,比如 PC 端手机管理软件 NOKIA PC Suite 与 Oxygen Phone Manager、通讯录管理软件 Outlook/Outlook Express、手机端通讯录备份工具 SmartVCard 等等。我发现所有这些软件都“不约而同”地支持 VCF 格式,NOKIA 智能手机甚至原生支持在手机端导入/导出 VCF 文件。

hCard

再来看看 hCard。我们知道 hCard 是一种微格式,通常应用在 HTML 等语言中,主要用于组织并标记网页中的联络信息。hCard 直接采用 vCard 的属性名称作为自身的标记规则,这意味 hCard 与 vCard 有着天生的兼容性。这些特性令它成为最受关注的微格式应用。

和其它微格式一样,hCard 对网页的浏览者是完全透明的。hCard 使用 HTML 标签的 class 属性来对数据进行标记。有时,当 HTML 文档中现有的标签不足以进行细致的标记时,可能需要增加额外的标签(通常是不影响网页外观的 spandiv 标签)。关于在网页中添加 hCard(或将 vCard 转换成 hCard)的具体方法,我不打算在此赘述,因为网上已经有了非常详尽的参考资料,我会将它们列在本文的末尾。

在何处添加 hCard

在网页的什么地方添加 hCard 呢?其实从它的用途可以看出,网页中凡是涉及到个人、网站或公司的联系信息都可以采用 hCard 来进行标记。

以 CSS魔法 的首页为例,涉及此类联系信息的页面元素有站点标题、“关于站长”、“友情链接”三块区域,我们就可以分别以网站、站长、朋友为主体单独设置 hCard。

为什么要使用 hCard

你可能会问,既然 hCard 对网页的浏览者是完全透明的,那我们为什么又要费神费力地在网页中添加 hCard 呢?

目前看来,这似乎是一件费力不讨好的事情,因为 hCard 等微格式尚未得到浏览器和终端设备的良好支持。但是一旦这些不足得到了改善,hCard 就会为我们的数字生活带来极大的便利。来看几个理想中的例子:

  • 当我用手机浏览某公司的网站时,手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式,手机浏览器很聪明地提示我“是否保存到通讯录”,于是我很经松地保存了我所需要的信息。
  • 手机浏览器还可以将页面中的 hCard 导出为 VCF 文件,我将 VCF 文件用蓝牙传输到同事的手机上,他们也轻松保存了这些联系信息,同时也可以方便地同步到电脑上的通讯录软件中。
  • 更令我惊喜的是,手机浏览器识别出了 hCard 中的地理位置信息(经纬度),并可将此信息传递给手机内的 GPS 导航软件,这样连出行道路都不需要我四处打听了!

这些应用看起来似乎不错吧?其实这些情景离我们已经越来越近了,目前 hCard 已经有了一些可行的应用流程。

现阶段的 hCard 应用

现阶段的 hCard 应用主要以桌面端为主,因为目前似乎还没有支持微格式的手机端浏览器。

目前可以识别微格式信息的浏览器包括安装了 Tails Export 或 Operator 扩展的 Firefox,以及安装了 Safari Microformats Plugin 插件的 Mac 版 Safari 浏览器。

安装了 Tails Export 扩展的 Firefox

这些的浏览器在识别出页面中的 hCard 信息之后,通常都可以提供导出 VCF 文件的功能。这些导出的 VCF 文件可以很方便地添加到本机的通讯录(Outlook 或 Address Book)中,随后便可以通过 NOKIA PC Suite 或 Apple iTunes 等软件将本机通讯录同步到 NOKIA 手机或 iPhone/iPod 等便携设备之中。

其中,Safari Microformats Plugin 插件可以直接将 hCard 中的联系人信息导入本机(仅限 Mac OS)的通讯录。

Safari Microformats Plugin (示意图)

此外,Firefox 的 Operator 扩展还提供了一些针对微格式的在线应用,比如“使用 Google 地图查找”、“添加至雅虎通讯录”等等,有效地丰富了 hCard 的应用范围。

安装了 Operator 扩展的 Firefox

值得一提的是,还有一个完全在线的、与浏览器无关的实现方案——Microformats Bookmarklet(微格式书签)。虽然它的界面明显借鉴自 Safari Microformats Plugin,但它实际上是跨浏览器的(支持 Safari、Firefox 和 IE 等浏览器)。它的使用很简单,也很有趣,把这个链接“微格式书签工具”拖放至书签栏(或添加到收藏夹),就算是完成了“安装”。此后在浏览任何网页时,只要点击这个书签项(或打开这个收藏夹项目),就可以识别并操作网页中的微格式信息了。(不过这个工具需要调用 jQuery,可能会与网页自身调用的 JS 库相冲突,或者因 jQuery 加载失败导致失效,不够稳定。)

Microformats Bookmarklet (微格式书签工具)

结语

虽然目前微格式尚未得到浏览器和终端设备的良好支持,但我们相信,在不远的将来,hCard 等微格式应用会令网页中的信息更加精确和丰富,并为互联网用户带来更多的便利。

相关阅读

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多