为网页添加hCard微格式

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

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

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

vCard/VCF

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

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

BEGIN:VCARDVERSION:2.1N:Michael;JacksonTEL:13912345678END: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 浏览器。

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

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

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

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

结语

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

相关阅读

  • hCard 的官方资料
  • 中文维基百科: vCard
  • 中文维基百科: hCard

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索网页
, 手机
, 应用
, 浏览器
, 格式
, 手机端失效
, 信息
, safari扩展浏览器
, vcard文件
手机格式
微格式、css微格式、html微格式、微格式 meta、ethercard.h,以便于您获取更多的相关知识。

时间: 2024-11-01 13:08:53

为网页添加hCard微格式的相关文章

简单了解微格式(Microformat)

首先,请不要一厢情愿地把微格式(Microformat)理解为某种语言的简化,这是完全错误的字面理解,事实完全相反,从经典个例"hCard微格式"看出,它是把XHTML语言在Web中的应用"冗余"话了.当然初识它的人都难免会犯类似错误.什么是微格式呢?它存在的意义又是什么?本文或许会让你对Microformat有所了解,并对其蕴含的巨大潜力及广泛用途折服. 什么是微格式 微格式:建立在已有的.被广泛采用的标准基础之上的一组简单的.开放的数据格式(microforma

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.4 微格式

2.4 微格式 微格式由一群草根开发人员联合创建.通过使用现有属性的标准化标记模式,他们给内容添加上了更多的属性.微格式最大的魅力不在于它是HTML的扩展,而在于它使用当前的开发方法来工作.它既是一种设计原则,也是一组标准用法模式. 微格式多种多样,有相当复杂的微格式,也有极其简单的微格式.下面这个例子,可能是最简单的微格式: 这种微格式被称为Rel-Tag微格式.关键字是rel属性中的tag,它让其他机器知道URL链接到一个在a元素里的页面,这个页面由一个标签来描述,该标签的名称是URL的最后

Facebook在个人信息下载工具中悄然增加微格式

Facebook个人信息下载页面 新浪科技讯 北京时间9月8日上午消息,据美国科技博客网站TechCrunch报道,Facebook已悄然在其"个人信息下载"(Download Your Information)功能中增加了对微格式(microformats)的支持. 这样一来,开发者就可以解析Facebook用户帐户中包含的简介信息.帖子.照片和视频.尽管这项变动不会对主流用户使用Facebook数据的方式产生直接影响,如用户仍不能导入Facebook联系人列表,但却是Faceboo

互联网标准 之 微格式

微格式 微格式其实并不是浏览器或者HTML的某种标准,而是很多人进行起草创建的.它帮助我们更有效的管理前端代码,不仅让人能够读取其中的信息,也能让机器理解(典型的比如爬虫). 微格式目前的应用并不广泛,大多数的网站都是采用自己定义的格式来书写. 因此就会出现这样的情况,同样时招聘网站,A站采用一种风格,B站采用另一种风格.这样如果某个爬虫需要爬去招聘中个人信息,就不得不写出两套方案.微格式则使用某种规定的格式,比如在class中以特定的类名标识,从而区分不同的关键字段. 目前已经制定了多种微格式

网页添加背景音乐

网页 一.学会添加音乐文件 为网页添加背景音乐的方法一般有两种,第一种是通过普通的<bgsound>标签来添加,另一种是通过<embed>标签来添加. (一)使用<bgsound>标签 用Dreamweaver打开需要添加背景音乐的页面,点击"代码"打开代码编辑视图,在<body></body>之间输入"<"在弹出的代码提示框中选择bgsound. Dreamweaver自动输入"<b

让你的主页声色并茂—巧为网页添加背景音乐

网页 对于个人站长来说,如何能使自己的网站与众不同.充满个性,一直是不懈努力的目标.除了尽量提高页面的视觉效果.互动功能以外,如果能在打开网页的同时,听到一曲优美动人的音乐,相信这会使你的网站增色不少. 一.学会添加音乐文件 为网页添加背景音乐的方法一般有两种,第一种是通过普通的< bgsound>标签来添加,另一种是通过< embed>标签来添加. (一)使用< bgsound>标签 用Dreamweaver打开需要添加背景音乐的页面,点击"代码"

用HTML5为你的网页添加音效

 为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放器). 其实很简单,就是利用HTML5中的audio标签,播放声音.不过为了照顾IE 6-8,还是用上了bgsound. 兼容所有主流浏览器(非主流不在考虑之列了) 闲话少说,上代码: <a href="#" class="fui-btn">播放</

解决win7系统无法将网页添加到收藏夹的方法

  许多用户在访问网站时,如果看到自己感兴趣的网页内容或网站,通常我们都会通过Ctrl+D添加到收藏夹中,但近期有部分win7系统用户,在浏览器下添加网页收藏时,却发现无法将网页添加到收藏夹,对于这一问题我们如何解决呢?下面看小编为大家提供的详细解决方法吧! 原因分析: 很多时候网址不能收藏都是由于收藏夹目录指向错误引起的,我们可以到注册表里将其修复. 操作方法: 1.在开始菜单中点击"运行",然后输入"regedit"并且回车; 2.打开注册表编辑器,依次展开[H

ASP代码给网页添加验证码的实现方法

  本文给大家介绍ASP实现给网页添加验证码的功能,您可以将这个功能添加在注册表单.网页评论等中,下边来看实现的方法: 第一步:下载本文下的附件.该压缩包为 imgchk 文件夹 ,其中有三个文件:validatecode.asp,validatebody.fixvalidatehead.fix 主要即是为生成 验证码 服务的. 将解压文件夹直接释放在需要在某页添加验证码的同目录下,(比如 addnew.asp 需要添加验证码,该文件在 cnbruce 文件夹下,则将 imgchk 文件夹同时释