微格式(microformat)
由于HTML中缺少相应的元素,很难突出显示人、地点或日期等类型的信息。为了解决这个问题,有一组开发人员决定开发一套标准的命名约定盒标记模式来表示这些数据。这些命名约定基于vCard和iCalendar等现有的数据格式,现在称为微格式(microformat)。请看下面的例子:
什么是微格式
微格式:建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式(microformats.org官方定义)。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定,是兼顾人机可读性设计的数据表达方式,对Web网页进行语义注解的方法。这种方法依托于标准的Web页面写作技术,例如,XHTML,这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面,在XHTML文档中给一些标签(Tag)增加一些属性(attribute),这些属性对信息的语义结构进行注解,处理XHTML文档的软件,例如,浏览器等,如果不认识这些属性可以跳过,并不造成任何不良影响(ITPUB)。

设计师和开发人员使用微格式来添加结构和针对网络发布有意义的信息,需要做的仅仅是为现有的(X)HTML元素添加元数据和其他属性。所以,我们无需抛开已有的工作习惯,因为微格式提供的解决方法是符合当前我们行为和习惯模式的。
从技术上来说,这些数据是一些语义标记,用标准的(X)HTML中的class名称设置。他是开放、可用、自由的,可以被任何人使用。
那么,微格式在实际应用中的意义和作用又是什么呢?微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:
- 在爬取Web内容时,能够更为准确地识别内容块的语义;
- 对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。
简单的微格式
我们从上面的描述知道,微格式实际就是为现有的(X)HTML元素添加元数据和其他属性,增强语义。那么我们就来看一个简单的微格式应用吧。
以前我们是这样写一个链接到首页的<a></a>代码的:
<a href=”http://www.5icool.org” >Web Design Blog</a>
而现在我们要为这个代码元素<a>加上rel属性。
<a href=”http://www.5icool.org“ rel=”homepage”>Web Design Blog</a>
上面的链接标记<a>包括rel=”homepage”属性,该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性,就为这个链接添加了具体的结构和意义。
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– 生日emailhonorific-prefix-(西式)名字前的尊称,例如:博士(Dr.)、牧师(Rev.)等,在东方会放在名字的后方。honorific-suffix-(西式)名字后的尊称,一般都是封衔,例如:太平绅士(JP)、大紫荆勋章(GBM),一般详列在名字的最后方。logonickname– 昵称、爱称或外号。西方人的名字一般都有简写,有时这些昵称或外号就用来分辨同名的人。例如:William “Bill” Gates 中间的”Bill”。notephotopost-office-box
Geo也可以被包含在hCard中,表示某个地址的坐标。Geo是一种在HTML和XHTML中标记WGS84地理坐标(经度,纬度)的微格式。尽管属于“草案”,其格式是稳定的并已经被使用。它还可以作为hCard微格式的一个子集。
以上摘自:维基百科
目前已具备完整规范的微格式还包括:hCard、hCalendar、XOXO、XFN、VoteLinks和3个“rel-”微格式:rel- license、rel-nofollow和rel-tag。
微格式(microformat)的更多相关文章
- html的特质语义:微格式及其他(重点介绍其中两种)
今天再次翻开html的书本, 感觉过了个周末似乎生疏了许多, 虽然我是刚接触html的, 但是对于他还是抱有极其大的兴趣的, 所以不爱看书的我, 也开始一遍遍的翻阅着书本, 寻找解决问题的方法, 下面 ...
- 前端知识杂烩(HTML[5]?+CSS篇)
1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...
- 【CSS】class和id命名规则
说明,本篇内容为书籍<高流量网站CSS开发技术>的学习总结,文字出自书本 书不错,推荐阅读学习 也可参阅网上的博文 原载:彬Go链接:http://blog.bingo929.com/cs ...
- 前端面试题目汇总摘录(HTML 和 CSS篇)
温故而知新,保持空杯心态 HTML 和 CSS 你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么 浏览器名称 内核 IE trident Firefox(火狐) gecko Safari we ...
- 如何获取(GET)一杯咖啡——星巴克REST案例分析
英文原文:How to GET a Cup of Coffee 我们已习惯于在大型中间件平台(比如那些实现CORBA.Web服务协议栈和J2EE的平台)之上构建分布式系统了.在这篇文章里,我们将采取另 ...
- 朝花夕拾《精通CSS》一、HTML & CSS 的基础
一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...
- 前端编码风格规范之 HTML 规范
HTML 规范 文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及 ...
- SEO技巧之WordPress篇幅
随着搜索引擎大兴, 排列在前的网站引入大量流量. 无论是搜索页面的广告还是查出来的结果, 与搜索者的目标匹配度都比较高 (如果搜索引擎足够智能), 所以通过搜索引擎而来的访客很可能会从网站上得到他想要 ...
- 【读书笔记《Bootstrap 实战》】6.单页营销网站
我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...
随机推荐
- C的Define
#define Conn(x,y) x##y //表示x连接y #define ToChar(x) #@x //给x加上单引号 #define ToString(x) #x //给x加双引号 #d ...
- linux文件的硬连接和软连接
建立软连接:ln -s 原路径 目标路径 原理示意图: 特点: 1. 相当于win中的快捷方式 2. 删除链接文件,源文件不受影响 3. 删除源文件,链接文件失效 4. ...
- 可方便扩展的JIRA Rest Web API的封装调用
JIRA是一个缺陷跟踪管理系统,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域,当我们需要把第三方业务系统集成进来时,可以调用他的API. JIRA本身的A ...
- php 中的查找算法 和 排序方法(多字段排序)
一.查找算法 1.顺序查找(一个一个查,效率低,不用多说) 2.二分查找 /* php 二分查找 在$a数组里查找$x的位置 $a必须是一个以升序排序后的数组 */ function binsearc ...
- LabelRank非重叠社区发现算法介绍及代码实现(A Stabilized Label Propagation Algorithm for Community Detection in Networks)
最近在研究基于标签传播的社区分类,LabelRank算法基于标签传播和马尔科夫随机游走思路上改装的算法,引用率较高,打算将代码实现,便于加深理解. 这个算法和Label Propagation 算法不 ...
- Luogu P4670 [BalticOI 2011 Day2]Plagiarism 题解
我最近是不是数据结构学傻了啊... 这道题看是1e5,所以复杂度为\(O(nlogn)\)的是完全可以跑过去的,然后看题,要求的对于每个数满足要求的区间的长度之和,我们自然而然的就可以想到用FHQ-T ...
- .NET源码Stack<T>和Queue<T>的实现
这阵子在重温数据结构的时候,顺便用ILSpy看了一些.NET类库的实现,发现一些基本的数据结构的实现方法也是挺有意思的,所以这里拿出来跟大家分享一下.这篇文章讨论的是Stack和Queue的泛型实现. ...
- Jmeter参数化与检查点
一.Jmeter参数话有3种方法: 1. add->pre processors->user parameter(用户参数) 2.add->config Element->CS ...
- 开源视频会议bigbluebutton
这是另一个开源视频会议项目,简称bbb 官方网站:http://bigbluebutton.org/ 代码地址:https://code.google.com/p/bigbluebutton/ dem ...
- OpenGL10-骨骼动画原理篇(2)
接上一篇的内容,上一篇,简单的介绍了,骨骼动画的原理,给出来一个 简单的例程,这一例程将给展示一个最初级的人物动画,具备多细节内容 以人走路为例子,当人走路的从一个站立开始,到迈出一步,这个过程是 一 ...