- 浏览: 662469 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
zhouyicang:
为嘛人气不够,这么好的文章,我找了几十篇博客,才找到这篇解惑了 ...
HTML 块级元素/内联元素 -
young7:
不错,解惑了
HTML 块级元素/内联元素 -
lvjin948:
获取浏览器语言的完美方案。http://blog.csdn.n ...
JavaScript获取浏览器语言类型 -
tarena_hhh:
我用了css优化工具,发现他的顺序有很大不一样?????
CSS属性书写顺序及命名规则 -
deng131:
谢谢你的提醒,是有个地方写错了
javascript事件绑定addEventListener,attachEvent
首先,请不要一厢情愿地把微格式(Microformat)理解为某种语言的简化,这是完全错误的字面理解,事实完全相反,从经典个例“hCard微格式”看出,它是把XHTML语言在Web中的应用“冗余”话了。当然初识它的人都难免会犯类似错误。什么是微格式呢?它存在的意义又是什么?本文或许会让你对Microformat有所了解,并对其蕴含的巨大潜力及广泛用途折服。
什么是微格式
微格式:建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式(microformats.org官方定义)。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定,是兼顾人机可读性设计的数据表达方式,对Web网页进行语义注解的方法。这种方法依托于标准的Web页面写作技术,例如,XHTML,这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面,在XHTML文档中给一些标签(Tag)增加一些属性(attribute),这些属性对信息的语义结构进行注解,处理XHTML文档的软件,例如,浏览器等,如果不认识这些属性可以跳过,并不造成任何不良影响(ITPUB)。
设计师和开发人员使用微格式来添加结构和针对网络发布有意义的信息,需要作的仅仅是为现有的(X)HTML元素添加元数据和其他属性。所以,我们无需抛开已有的工作习惯,因为微格式提供的解决方法是符合当前我们行为和习惯模式的。
从技术上来说,这些数据是一些语义标记,用标准的(X)HTML中的class名称设置。他是开放、可用、自由的,可以被任何人使用。
那么,微格式在实际应用中的意义和作用又是什么呢?微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:
1. 在爬取Web内容时,能够更为准确地识别内容块的语义;
2. 对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。
简单的微格式
我们从上面的描述知道,微格式实际就是为现有的(X)HTML元素添加元数据和其他属性,增强语义。那么我们就来看一个简单的微格式应用吧。
以前我们是这样写一个链接到首页的<a></a>代码的:
<a href=”http://www.bbon.cn”>Web Design Blog</a>
而现在我们要为这个代码元素<a>加上 rel属性。
<a href=”http://www.bbon.cn“ rel=”homepage”>Web Design 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>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<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</span> <span class="postal-code">33701-4313</span>
</div>
<div class="country-name">USA</div>
</div>
<div>Phone: <span class="tel">+1-727-231-0101</span></div>
<div>Email: <span class="email">info@wikimedia.org</span></div>
<div>
<span class="tel"><span class="type">Fax</span>:
<span class="value">+1-727-258-0207</span></span>
</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的个人网站上也可以找到更多有趣的东西(摘自:Cheshirecat.cn)。
Microformat 官方网站:Microformat
什么是微格式
微格式:建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式(microformats.org官方定义)。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定,是兼顾人机可读性设计的数据表达方式,对Web网页进行语义注解的方法。这种方法依托于标准的Web页面写作技术,例如,XHTML,这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面,在XHTML文档中给一些标签(Tag)增加一些属性(attribute),这些属性对信息的语义结构进行注解,处理XHTML文档的软件,例如,浏览器等,如果不认识这些属性可以跳过,并不造成任何不良影响(ITPUB)。
设计师和开发人员使用微格式来添加结构和针对网络发布有意义的信息,需要作的仅仅是为现有的(X)HTML元素添加元数据和其他属性。所以,我们无需抛开已有的工作习惯,因为微格式提供的解决方法是符合当前我们行为和习惯模式的。
从技术上来说,这些数据是一些语义标记,用标准的(X)HTML中的class名称设置。他是开放、可用、自由的,可以被任何人使用。
那么,微格式在实际应用中的意义和作用又是什么呢?微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:
1. 在爬取Web内容时,能够更为准确地识别内容块的语义;
2. 对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。
简单的微格式
我们从上面的描述知道,微格式实际就是为现有的(X)HTML元素添加元数据和其他属性,增强语义。那么我们就来看一个简单的微格式应用吧。
以前我们是这样写一个链接到首页的<a></a>代码的:
<a href=”http://www.bbon.cn”>Web Design Blog</a>
而现在我们要为这个代码元素<a>加上 rel属性。
<a href=”http://www.bbon.cn“ rel=”homepage”>Web Design 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>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<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</span> <span class="postal-code">33701-4313</span>
</div>
<div class="country-name">USA</div>
</div>
<div>Phone: <span class="tel">+1-727-231-0101</span></div>
<div>Email: <span class="email">info@wikimedia.org</span></div>
<div>
<span class="tel"><span class="type">Fax</span>:
<span class="value">+1-727-258-0207</span></span>
</div>
</div>
注意,在这个例子中,正式名称(class=”fn”)和组织(class=”org”)写在了一个属性中,表示这是一个组织,而不是个人。
其他常用的hCard属性包括:
* bday – 生日
* 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的个人网站上也可以找到更多有趣的东西(摘自:Cheshirecat.cn)。
Microformat 官方网站:Microformat
发表评论
-
css定位z-index问题
2012-11-09 11:04 15321. 某些浏览器下元素层级遮盖存在bug; 2. 某个元素z ... -
几种 css hack 方法
2012-10-31 22:38 1630第一种:!important方式 .DIV{ backgr ... -
前端使用CSS浮动16条规则
2012-06-18 09:40 1707好久没来写东西了,今 ... -
浏览器兼容 CSS Hack方法
2012-03-01 23:11 1325.element{ color:#00 ... -
IE中css属性writing-mode使用
2011-09-22 21:03 1980在项目中遇到这个属性的用法设置文本的垂直显示,但是只能在ie中 ... -
javascript获取元素CSS样式值
2011-06-18 14:36 1721IE: element.currentStyle curre ... -
div,span标签title属性
2011-06-07 21:59 10249div,span标签title属性:规定元素的额外信息(可在工 ... -
CSS中border实现圆角效果
2011-05-27 22:42 1736重要的是其实现的原理,明白原理后就可以自由的发挥你的想象了,不 ... -
CSS中border实现三角效果
2011-05-27 21:52 1310一直关注js比较多,对css不是很熟,作为前端开发工程师而言这 ... -
IE6下png格式图片透明问题
2011-05-24 10:26 983.png{ background: url(http:// ... -
IE6,IE7下设置透明度opacity问题
2011-05-24 09:55 4086在前端开发中经常被问到IE下这个bug问题: ie6下是因为 ... -
ie6下实现position:fixed效果
2011-05-23 17:31 1058由于IE下position:fixed无效,所以需要寻找一种合 ... -
CSS中ime-mode控制输入法选择
2011-02-12 11:41 2034上图更好说明如何使用应用场景 ime-mode: 语法: ... -
@font-face网页嵌入字体
2011-02-10 10:47 1754字体使用是网页设计中不可或缺的一部分。在网页中使用某一特定字体 ... -
IE中hasLayout属性布局问题
2010-12-13 12:11 1376IE中 Internet Explorer for Windo ... -
<img/>垂直居中方法
2010-10-17 09:47 2720以前面试中遇到相似问题。“纯CSS实现未知尺寸的图片(但高宽都 ... -
<div>页面居中显示
2010-10-17 08:58 2362以前在面试中就遇到过这个问题。借用别人的解释。 以下为让di ... -
IE6 png背景透明问题
2010-10-01 11:35 1949相信在前端开发中大家都会遇到浏览器的兼容性问题,这个问题网上有 ... -
CSS鼠标指针cursor属性
2010-09-27 21:47 3989大家都知道常用的鼠标指针样式: * au ... -
清除float浮动三种方法
2010-09-22 13:09 18191:使用空标签清除浮动。我用了很久的一种方法,空标签可以是di ...
相关推荐
本书以单片机的功能为模块,以外围器件、相关电路设计的实际应用为内容,以实例问答的方式向读者介绍了如何将单片机硬件、程序和外围器件的选择合理地实施到项目开发中。 本书8个章节中的单片机使用案例都是...
Java zip压缩包查看程序,应用弹出文件选择框,选择ZIP格式的压缩文件,可以像Winrar软件一样查看压缩文件内部的文件及文件夹,源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...
Java zip压缩包查看程序,应用弹出文件选择框,选择ZIP格式的压缩文件,可以像Winrar软件一样查看压缩文件内部的文件及文件夹,源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...
Java zip压缩包查看程序,应用弹出文件选择框,选择ZIP格式的压缩文件,可以像Winrar软件一样查看压缩文件内部的文件及文件夹,源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...
本书以单片机的功能为模块,以外围器件、相关电路设计的实际应用为内容,以实例问答的方式向读者介绍了如何将单片机硬件、程序和外围器件的选择合理地实施到项目开发中。 本书8个章节中的单片机使用案例都是...
本书以单片机的功能为模块,以外围器件、相关电路设计的实际应用为内容,以实例问答的方式向读者介绍了如何将单片机硬件、程序和外围器件的选择合理地实施到项目开发中。 本书8个章节中的单片机使用案例都是...
当今微处理器和PC机已经渗入到现代社会生产生活的各个领域,各种嵌入式应用系统大量涌现,需要大批能够熟练完成计算机底层硬件和软件开发研制的技术人才。笔者通过几十年从事嵌入式计算机教学科研工作,感到此类人才...
该应用程序会将和微格式的实例转换为位置,并将其显示在地图上。 (此过程可能需要一分钟,因此请耐心等待!) 如果您正在运行自己的应用程序副本,则还可以选择在文本框中输入一个或多个URL。 当您点击“映射这些...
软盘驱动器 微处理器插槽(CPU) 内存插槽(内存条) 标准插口(USB、键盘、鼠标…) 数码相机… 《计算机应用基础》(计算机应用基础实训指导)-第7章实例PPT素材-添加动画效果全文共14页,当前为第10页。 Intel 奔腾...
j2me 游戏开发实例 昨天在网上闲逛,发现一篇讲解用delphi实现华容道游戏的文章,颇受启发.于是,产生了将华容道游戏移植到手机中去的冲动.现在手机游戏琳琅满目,不一而足,华容道的实现版本也很多.正巧不久前...
资源格式: PDF 版本: 扫描版 出版社: 中国青年出版社书号: 9787500671060发行时间: 2007年 地区: 大陆 语言: 简体中文 简介: 内容简介: 《Pro/ENGINEER中文野火版钣金件设计专家实例精讲》以Pro/ENGINEER中文...
常见的音乐文件格式有MP3、WMA、WAV等。一般情况下,播放器都支持一种或多种格式的音乐文件。就像我们平常见到的MP3播放器,它就是支持播放MP3格式的音乐播放器。MP3播放器其实就是一个功能特定的“微型电脑”。在MP3...
(5)已实现的典型机器指令的执行实例,即相应的微指令与其执行次序的安排与衔接;(6)要实现的新指令的格式与功能。四、内容及目标设计内容:1、通过知识的综合运用,设计一台新的微程序控制器模型计算机。2、根据...
1.3.3REST风格的Web服务实例 1.4Web GIS的组成 1.5ArcGIS Server REST风格的Web服务 1.5.1ArcGIS S erver站点的架构 1.5.2ArcGIS Server发布的服务类型 1.5.3服务发布 1.5.4Web服务的URL及元数据 1.5.5查看地图 ...
8.1.1 嵌入式微处理器189 8.1.2 存储器189 8.1.3 输入/输出设备191 8.1.4 通信与扩展接口191 8.2 硬件设计基础知识191 8.2.1 计算机体系结构191 8.2.2 电子技术192 8.2.3 抗干扰技术193 8.2.4 印制...
3.1 指令格式及寻址 53 3.1.1 指令系统与指令格式 53 3.1.2 寻址及寻址方式的概念 54 3.2 8086指令系统的寻址方式 54 3.2.1 与操作数有关的寻址方式 55 3.2.2 与I/O端口有关的寻址方式 57 3.3 8086指令系统 58 3.3.1...
该函数库还包括每一个外设的驱动描述和应用实例。通过使用本固件函数库,无需深入掌握细节,用户也可以轻松应用每一个外设。因此,使用本固态函数库可以大大减少用户的程序编写时间,进而降低开发成本
Java zip压缩包查看程序,应用弹出文件选择框,选择ZIP格式的压缩文件,可以像Winrar软件一样查看压缩文件内部的文件及文件夹,源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码...
什么是微型网站? 微型网站是Jekyll的一个实例,可以为您的新库发布静态网页。 拥有这些自动生成的网页的一些好处是: 您可以轻松地以降价格式编写文档。 模板,布局,样式和其他资源将在编译时通过插件提供。 ...