DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> microformat官方對於hCard的解釋
microformat官方對於hCard的解釋
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:業界也不斷出現了許多對於hCard的解釋,這邊我大部分翻譯了microformat官方文章和部分文章,詳細整理一下,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等。
  • 地理類
    地理位置的信息,時區、經緯度等。
    這個類別也己經獨立制定為為另一個規范geo,目前 FireFox 的 Operator 插件支持找到頁面上符合的 geo 規范的數據,根據經緯度Operator可以跳轉到Google Maps或Yahoo Maps相應的地址,不過目前geo沒有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>

網頁制作poluoluo文章簡介:業界也不斷出現了許多對於hCard的解釋,這邊我大部分翻譯了microformat官方文章和部分文章,詳細整理一下,hCard大致分為六大類.

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> 

網頁制作poluoluo文章簡介:業界也不斷出現了許多對於hCard的解釋,這邊我大部分翻譯了microformat官方文章和部分文章,詳細整理一下,hCard大致分為六大類.

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> 

網頁制作poluoluo文章簡介:業界也不斷出現了許多對於hCard的解釋,這邊我大部分翻譯了microformat官方文章和部分文章,詳細整理一下,hCard大致分為六大類.

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
收件地址。子屬性type與adr的type屬性的值一樣,跟adr同級,值為字符串。

例子:

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

網頁制作poluoluo文章簡介:業界也不斷出現了許多對於hCard的解釋,這邊我大部分翻譯了microformat官方文章和部分文章,詳細整理一下,hCard大致分為六大類.

通訊類
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
時區

geo
經緯度

例子:

<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> 

網頁制作poluoluo文章簡介:業界也不斷出現了許多對於hCard的解釋,這邊我大部分翻譯了microformat官方文章和部分文章,詳細整理一下,hCard大致分為六大類.

組織類
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.
[email protected]"></object> 
     ...  
</div> 

安全類
class
表示hCard是否公開,它有三個子屬性值:

PUBLIC
公開的

PRIVATE
私有的

CONFIDENTIAL
保密的

key
hCard的訪問密碼

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved