页面载入中...

CSSZone | 专注前端交互,专注用户体验

  • 注册
  • 登录
专注前端交互,专注用户体验
  • 升级IE6
    升级IE6
  • 配色方案
    配色方案
  • 配色辞典
    配色辞典

  • 意见反馈

  • 网站地图

  • 头像展示

  • 版权声明
  • Index
  • XHTML+CSS
  • UE+SEO
  • WordPress
  • Share
  • News
  • Diary
  • About
  • RSS
首页 » XHTML+CSS » 使用微格式——为语义Web创建简单实用的格式

使用微格式——为语义Web创建简单实用的格式

作者: xiaohu | 时间: 2010年4月05日 | 分类: XHTML+CSS

Microformats 不仅仅是一种技术,从用户角度来说,它是 Web内容 的一部分。从技术角度来说,Microformats并不是一种新技术,它的实质只是Markup language(HTML、XHTML)。所谓micro指的是它是一小段代码和一小段特定的Web内容,所谓formats指的是它有一种固定的标记格式。

什么是微格式
微格式:建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式(microformats.org官方定义)。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定,是兼顾人机可读性设计的数据表达方式,对Web网页进行语义注解的方法。这种方法依托于标准的Web页面写作技术,例如,XHTML,这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面,在XHTML文档中给一些标签(Tag)增加一些属性(attribute),这些属性对信息的语义结构进行注解,处理XHTML文档的软件,例如,浏览器等,如果不认识这些属性可以跳过,并不造成任何不良影响。

设计师和开发人员使用微格式来添加结构和针对网络发布有意义的信息,需要作的仅仅是为现有的(X)HTML元素添加元数据和其他属性。所以,我们无需抛开已有的工作习惯,因为微格式提供的解决方法是符合当前我们行为和习惯模式的。

从技术上来说,这些数据是一些语义标记,用标准的(X)HTML中的class名称设置。他是开放、可用、自由的,可以被任何人使用。

那么,微格式在实际应用中的意义和作用又是什么呢?微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:

在爬取Web内容时,能够更为准确地识别内容块的语义;
对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。

简单的微格式
我们从上面的描述知道,微格式实际就是为现有的(X)HTML元素添加元数据和其他属性,增强语义。那么我们就来看一个简单的微格式应用吧。
以前我们是这样写一个链接到首页的代码的:


<a href=”http://www.csszone.net” >CSSZone Blog</a>

而现在我们要为这个代码元素<a>加上rel属性。

<a href=”http://www.csszone.net“ rel=”homepage”>CSSZone Blog</a>

上面的链接标记<a>包括rel=”home”属性,该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性,就为这个链接添加了具体的结构和意义。

hCard 微格式
hCard是一种微格式,用来发布个人,公司,组织,地点等详细的联系信息。它可以包含在(X)HTML,Atom,RSS等可扩展置标语言中。hCard使用vCard(RFC 2426)的属性和值来实现这些功能。

它可以使分析器(比如其他网站,Firefox的Operator插件)获得详细的信息,并通过别的网站或者地图工具进行显示,或者载入到地址簿等其他程序。

示例一

如下HTML代码:

<div>
<div>Joe Doe</div>
<div>The Example Company</div>
<div>604-555-1234</div>
<a href=”http://example.com/”>http://example.com/</a>
</div>

加入微格式后,成为:

<div class=”vcard”>
<div class=”fn”>Joe Doe <div class="org">The Example Company <div class="tel">604-555-1234 <a class="url" href="http://example.com/">http://example.com/</a>
</div>

这里,正式名称(class=”fn”),组织(class=”org”),电话号码(class=”tel”)和url(class=”url”)分别用相应的class标示;同时,所有内容都包含在class=”vcard”里。

示例二

这里是维基媒体基金会的联系方式,可以作为hCard的一个真实示例:

Wikimedia Foundation Inc.

200 2nd Ave. South #358

St. Petersburg, FL 33701-4313

USA

Phone: +1-727-231-0101

Email: info@wikimedia.org

Fax: +1-727-258-0207

加入微格式后,成为:

<div class=”vcard”>
<div class=”fn org”>Wikimedia Foundation Inc.</div>
<div class=”adr”>
<div class=”street-address”>200 2nd Ave. South #358</div>
<div>
<span class=”locality”>St. Petersburg</span>,
<span class=”region”>FL </div>
<div class="country-name">USA</div>
</div>
<div>Phone: <div>Email: <div>
<span class="tel"><span class="type">Fax</span>:
<span class="value">+1-727-258-0207 </div>
</div>

注意,在这个例子中,正式名称(class=”fn”)和组织(class=”org”)写在了一个属性中,表示这是一个组织,而不是个人。

其他常用的hCard属性包括:

bday – 生日
email
honorific-prefix -(西式)名字前的尊称,例如:博士(Dr.)、牧师(Rev.)等,在东方会放在名字的后方。
honorific-suffix -(西式)名字后的尊称,一般都是封衔,例如:太平绅士(JP)、大紫荆勋章(GBM),一般详列在名字的最后方。
logo
nickname – 昵称、爱称或外号。西方人的名字一般都有简写,有时这些昵称或外号就用来分辨同名的人。例如:William “Bill” Gates 中间的”Bill”。
note
photo
post-office-box
Geo也可以被包含在hCard中,表示某个地址的坐标。Geo是一种在HTML和XHTML中标记WGS84地理坐标(经度,纬度)的微格式。尽管属于“草案”,其格式是稳定的并已经被使用。它还可以作为hCard微格式的一个子集。

以上摘自:维基百科

目前已具备完整规范的微格式还包括:hCard、hCalendar、XOXO、XFN、VoteLinks和3个“rel-”微格式:rel- license、rel-nofollow和rel-tag。

后记
Yahoo是微格式的大力提倡者.Flickr一个图片分享平台,用vcard微格式处理用户信息数据,通过应用软件直接获取页面上的用户信息数据后,将这些数据导出或者直接导入到其他的应用程序中,例如使用Firefox的operator插件可以分析和到处数据,然后根据提取的 geo,location等地理信息在Google Map,Yahoo Map中定位用户,伴随着相关应用软件的开发,vcard数据可不只是能用作这些.再来看看Yahoo的对微格式的另外一个应用upcoming,是一个日历的事件管理应用,在获取页面的hcalendar微格式数据之后,它可以将数据导出或者直接导入到其他的web日历事件管理软件中.

Dopplr提供的或许更加让微格式的应用方向更加清晰.它提供的服务是将你的行踪与你的联系列表关联起来,方便你的朋友关注你的行踪,及时的为你提供帮助,主要方式为常规的RSS订阅和iCal订阅.你在网上的某些页面的 hcard,hcalendar微格式数据可以导入到Dopplr中,然后可以将这些数据导入到支持Dopplr的微格式数据的程序中,当前主要为Mac 机的iCal和支持多个系统平台兼容iCal数据格式的Mozilla产品Sunbird.

说到这里,使用微格式不只是web代码语义化那么简单.如何应用微格式是最重要的.对于微格式如何被解析,可以看看Brian Suda的一篇文章Parsing Microformats,或许有所帮助.到Brian Suda的个人网站上也可以找到更多有趣的东西。

Microformat 官方网站:Microformat

  • 微格式
  • 语义web
« 愚人节谷歌献礼,google PR更新 | XML语言的特色描述 »

现有1条评论

  1. crusher 说:
    2010/05/28于09:48

    在用。还没见效果

    回复

Leave a Reply

点击这里取消回复

站内搜索

没有找到您所需要的?尝试使用站内搜索吧.

热文排行

  • CSSZone发起全民升级Internet Explorer 6活动 - 1,083 views
  • 找把梯子,翻越长城(一)为什么用Tor?如何获得Tor? - 912 views
  • 支付宝——马云团队正悄然构建新商业文明 - 903 views
  • 交互组件——搜索输入框的功能用户体验 - 852 views
  • “可能吧”被墙了。今天你被和谐了吗? - 724 views
  • 如今是web1.0,web2.0还是web3.0时代? - 715 views
  • 我的网页我做主! - 714 views
  • 你的CSS书写习惯是否规范? - 703 views
  • 冷门属性系列——display:table - 681 views
  • 被遗忘的CSS选择器 - 595 views

最新文章

  • 用户体验杂谈
  • 迷人的HTML5和CSS3应用实例
  • 我的网页我做主!
  • 专注前端交互,专注用户体验
  • 支付宝——马云团队正悄然构建新商业文明
  • 如今是web1.0,web2.0还是web3.0时代?
  • 揭开Mobile Web开发的神秘面纱
  • 新版Google Web
  • 交互组件——搜索输入框的功能用户体验
  • XML语言的特色描述

友情链接

  • lin04com’s blog
  • 肖邦的悲伤 个人主页
  • 链接列表 | 申请入口

同分类文章

  • 迷人的HTML5和CSS3应用实例
  • 揭开Mobile Web开发的神秘面纱
  • XML语言的特色描述
  • 使用微格式——为语义Web创建简单实用的格式
  • 从零开始构建HTML 5 Web页面
  • 被遗忘的CSS选择器
  • CSS3水晶按钮
  • 自定义链接下划线样式
  • 冷门属性系列——display:table
  • 你的CSS书写习惯是否规范?
  • 查看 XHTML+CSS 更多文章

Copyright © 2009-2010 CSSZone All rights reserved & Creative Commons License