偷米寄居偷米寄居

...

« 浅谈结构、行为分离 ie8新特性的应用 »

微格式 Microformats » hCard

关于hCard

在说hCard前我们先认识下vCard,vCard标准正在被广泛应用,像Mac系统中的”Address Book”。

另外,其它博客作者使用它加上少量的HTML用来描述自己或他们的朋友或家庭。而且搜索引擎蜘蛛或其它聚合器能收集到这些信息,自动转换为vCard,然后把它们用到一些vCard相关程序或服务,如outLook的导入vCard文件。

hCard采用了以vCard的属性和值1比1对应的方式。博客作者们可以利用具语义的HTML和vCard标准来在他们的页面上插入hCard,然后用CSS来美化。另外,hCard能够让应用程序从页面直接取回信息,而不用通过其它独立的vCard文件取得。

你可以马上用官方的hCard创建器来创建你的hCard代码并放在你的博客或网站以共享你的个人信息。

翻译自Microformats.org

hCard的出现让web2.0的共享精神更加强烈。microformat制定了许多标准,在不改变页面结构的情况下,我们可以共享我们页面的数据出来。业界也不断出现了许多对于hCard的解释,这边我大部分翻译了microformat官方文章和部分文章,详细整理一下,hCard大致分为六大类:

识别类

用来识别hCard的一些信息,如姓名,相片等。

地址类

记录您的地址、邮编等信息。

通讯类

记录您的通讯信息,比如电话、email等。

地理类

地理位置的信息,时区、经纬度等。

这个类别也己经独立制定为为另一个规范,目前 FireFoxOperator 插件支持找到页面上符合的 规范的数据,根据经纬度Operator可以跳转到Google MapsYahoo Maps相应的地址,不过目前没有zoom属性,所以转向后地图总是默认放大倍数。

组织类

hCard所属的组织、公司或相关信息。

备注类

hCard相关信息及备注。如hCard属于哪一种分类,hCard的最新修改时间等等。

安全类

hCard的安全相关信息,比如公开等级、访问密码等。

识别类

fn

格式化名称,hCard中只能出现一个,并且必须存在!

例子1:

					<div class="vcard">
					   <span class="fn">tommyfan</span>
					</div>
			 

如果fn属性里面出现value属性,value内的值将做为fn的值

例子2:

				<div class="vcard">
				   <span class="fn">my name is <strong class="value">tommyfan</strong></span>
				</div>
			 

如果使用abbr标签,指定title。title的值将成为fn的值

例子3:

				<div class="vcard">
				   他们总叫我<abbr class="fn" title="tommyfan" >偷米饭</span>
				</div> 
n

由名字片段组合成的集合,比如姓名前缀+后缀+昵称的集合。

它的子属性有以下:

honorific-prefic

姓名前缀

given-name

additional-name

别名、花名

family-name

honorific-suffix

姓名后缀

例子1:

				<div class="vcard">
				   他们总叫我<abbr title="tommyfan" class="fn" >偷米饭</abbr>,但是我比较喜欢别人叫我<span class="honorific-prefic">Mr</span> <span class="family-name">fan</span>
				</div>
			

例子2:

				<div class="vcard">
				    <div class="fn"> 姓名:<span class="value"> 偷米饭</span>;</div>
				    <div class="n">
				       Name:
				       <span class="value">
				          <span class="given-name">Tommy</span>
				          <span class="family-name">Fan</span>
				       </span>
				     </div>
				     ...
				</div>
			
nickname

昵称

例子:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>
				    <div class="nickname">
				       昵称:
				       <span class="value">
				          偷米饭
				       </span>
				    </div>
				    ...
				</div>
			
photo

指定hCard的形象图片

例子:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="photos">
				       照片:
				       <img src="http://www.tommyfan.com/logo.jpg" alt="tommyfan" title="某某人照片" class="photo" />
				    </div>
				   ...
				</div>
			
bday

生日,格式为ISO Date

如果你只知道大概的生日日期,可以这样写:

例子1:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="mybday">
				       生日:<abbr class="bday" title="1996-04-15">April 15, 1996</abbr>
				       <br	/>
				    </div>
				   ...
				</div>
			

如果你知道生日精确的时间,可以这样写:

例子2:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="mybday">
				       生日:<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr><br	/>
				    </div>
				   ...
				</div>
			

如果你只记得大概时间段,可以这样写:

例子3:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="mybday">
				       生日:<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr><br	/>
				       <br	/>
				    </div>
				   ...
				</div>
			

地址类

adr

说明您拥有地址的集合。

它的子属性有以下:

type

地址类型,有下列几种类型,大写为默认类型:

INTL

国际配送地址

POSTAL

邮寄地址

PARCEL

包裹送货地址

WORK

工作地址

dom

国内配送地址

home

家庭住址

pref

首选地址,如果有多个地址时,可指定首选地址。

例子:

						<div class="vcard">
						    <div class="fn"> 
						       姓名:
						       <span class="value">
						           偷米饭
						       </span>
						    </div>
						    <div class="adr">
						       <abbr class="type"   title="dom">
						          <abbr class="type"   title="home">
						             家庭
						          </abbr>
						       </abbr>
						       地址:中国广东省陆丰市甲子镇<span   class="street-address">水果街</span>香蕉巷32号
						    </div>
						    ...
						</div>
					
post-office-box

信箱号码

street-address

街道地址

extended-address

扩展地址

region

省/州

locality

城市

postal-code

邮编

country-name

国家

例子:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>
				    <div class="adr">
				       <abbr class="type"   title="home">
				          家庭
				       </abbr>
				          地址:
				       <span   class="country-name">
				          中国
				       </span>
				       <span   class="region">
				          广东省
				       </span>
				       <span   class="locality">
				          陆丰市甲子镇
				       </span>
				       <span   class="street-address">
				          乜叉叉街
				       </span>
				       <span   class="extended-address">
				          乜叉叉巷N号
				       </span>
				    </div>
				    ...
				</div>
			
label

收件地址。子属性typeadrtype属性的值一样,跟adr同级,值为字符串。

例子:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>
				    <address class="adr label">
				    ...
				</div>
			

通讯类

tel

说明你的联系电话,有下例几个子属性:

type

指定电话类型,有下列几种类型,大写为默认类型:

VOICE

语音电话

home

家庭电话

msg

带留言功能的电话

work

工作电话

fax

传真电话

cell

移动电话

video

视频电话

pager

传呼器

bbs

电子布告栏系统电话

modem

调制解调器连接电话

car

车载电话

ISDN

ISDN的服务电话

pcs

个人通讯服务电话

pref

首选,如果有多个电话时,可以指定首选电话

email

电子邮件地址

mailer

写邮件常使用的软件,如Outlook

例子:

		<div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           偷米饭
		       </span>
		    </div>
		    <div class="tel">
		       <abbr class="type"   title="cell">
		       手机	
		       </abbr>
		       :
		       <span   class="value">
		       13751051095
		       </span>
		    </div>
		    <div   class="tel">
		      <abbr class="type"   title="work">
		          办公	
		       </abbr>
		       电话:
		       <span   class="value">
		          0755-86013388-5557
		      </span>
		    </div>
		     ...
		</div>
	

地理类

tz

时区

经纬度

例子:

		<div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           偷米饭
		       </span>
		    </div>
		    <div class="tz">
		        时区:
		        <span class="value">
		            +08:00   北京,重庆,香港特别行政区,乌鲁木齐
		        </span>
		    </div> 
		    <div   class="geo">
		       <span   class="longitude">
		          经度:<span   class="value">115.224609</span>
		       </span>
		       <span   class="latitude">
		          纬度:<span   class="value">23.538809</span>
		       </span>
		    </div> 
		     ...
		</div>
	

组织类

title

你在组织或公司里的职称

role

你在组织或公司里担当什么角色

logo

你所属组织或公司的形象图片

agent

你的助理或秘书

org

表示你所在的组织或公司

例子:

		<div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           偷米饭
		       </span>
		    </div>
		    <div class="org">
		        我的公司:
		        <span class="value">
		            深圳腾讯科技有限公司
		        </span>
		    </div> 
		</div>
	

备注类

category

指定hCard的分类,可以指定多个值,用空格隔开。

note

标注一些追加信息或对hCard的备注

rev

hCard修改时间,ISO Date格式

sort-string

对于姓名,不同城市或国家有不同的排序,有的国家依据姓,有的国家却是名,此属性指定排序的依据。

sound

为hCard指定一个声音来注释hCard的信息

uid

全球唯一id,值可以为IANA己注册检验人的格式,也可以为自定义格式。

url

指定一个hCard相关的url

例子:

		 <div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           <a href="http://www.tommyfan.com/hCard/tommyfan/" class="url" rel="tag">
		              偷米饭
		           </a>
		       </span>
		    </div>
		    <div class="category">
		        卡名分类:
		        <span class="value" >
		            个人信息
		        </span>
		    </div>
		    <div class="notes">
		        备注:
		        <span class="note" >
		            这张卡片是记录关于Tommy的信息
		        </span>
		    </div>
		    <div class="revDate">
		        修改时间:
		         <abbr class="rev" title="2007-06-25">
		            June 25,2007 
		         </abbr>
		    </div>
		    <div class="sort-string">
		        排序:
		        <span class="value">
		            Tommy
		        </span>
		    </div>
		    <div class="uid">
		        uid:
		        <span class="value" >
		            19950401-080045-40000F192713-0052
		        </span>
		    </div>
		     <object class="sound" type="audio/basic"data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com"></object>
		     ...
		</div>
	  

安全类

class

表示hCard是否公开,它有三个子属性值:

PUBLIC

公开的

PRIVATE

私有的

CONFIDENTIAL

保密的

key

hCard的访问密码

2009-5-9 21:48 5 comments 4,019 views

Comments

Leave a comment

*
*

Hot Articles

  1. 微格式 Microformats » hCard

    4,019 views

  2. 用hCard添加手机联系人

    2,960 views

  3. 纯CSS搞定按钮、链接点击时的虚线

    1,440 views

  4. ie8新特性的应用

    1,370 views

  5. 神奇!IE下鼠标中轴滚动无效

    1,269 views

New Comments

My Friends