【鄭州分院第一百零四期】微格式

microformat

1.背景介紹

由于HTML中缺少相應的元素,很難突出顯示人、地點或日期等類型的信息。為了解決這個問題,有一組開發人員決定開發一套標準的命名約定盒標記模式來表示這些數據。這些命名約定基于vCard(電子名片)和iCalendar(日歷數據交換)等現有的數據格式,現在稱為微格式(microformat)。

2.知識剖析

2.1 ? microformat定義

建立在已有的、被廣泛采用的標準基礎之上的一組簡單的、開放的數據格式(microformats.org官方定義)。是把語義嵌入到HTML以便有助于分離式開發而制定的一些簡單約定,是兼顧人機可讀性設計的數據表達方式,對Web網頁進行語義注解的方法。

2.2 ?微格式在實際應用中的意義和作用又是什么呢?

微格式按照某種已有的被廣泛應用的標準,通過對內容塊的語義標記,可以讓外部應用程序、聚合程序和搜索引擎能夠做以下事情:

1、在捉取Web內容時,能夠更為準確地識別內容塊的語義;

2、對內容進行操作,包括提供訪問、校對,還可以將其轉化成其他的相關格式,提供給外部程序和Web服務使用。

2.3 簡單的微格式

我們從上面的描述知道,微格式實際就是為現有的(X)HTML元素添加元數據和其他屬性,增強語義。那么我們就來看一個簡單的微格式應用吧。

以前我們是這樣寫一個鏈接到首頁的代碼的:

而現在我們要為這個代碼元素a加上rel屬性。

上面的鏈接標記a包括rel=”homepage”屬性,該屬性顯示鏈接的目標頁面是該網站的首頁。通過為已有的鏈接元素添加語義化屬性,就為這個鏈接添加了具體的結構和意義。

2.4?hCard 微格式

hCard是一種微格式,用來發布個人,公司,組織,地點等詳細的聯系信息。

它可以使分析器(比如其他網站,Firefox的Operator插件)獲得詳細的信息,并通過別的網站或者地圖工具進行顯示,或者載入到地址簿等其他程序。

2.5?示例一

加入微格式后,成為:

這里,正式名稱(class=”fn”),組織(class=”org”),電話號碼(class=”tel”)和url(class=”url”)分別用相應的class標示;同時,所有內容都包含在class="vcard"里。

2.6?示例二

這里是維基媒體基金會的聯系方式,可以作為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

加入微格式后,成為:

2.7?其他常用的hCard屬性包括:

bday – 生日

email

honorific-prefix -(西式)名字前的尊稱,例如:博士(Dr.)、牧師(Rev.)等,在東方會放在名字的后方。

honorific-suffix -(西式)名字后的尊稱,一般都是封銜,例如:太平紳士(JP)、大紫荊勛章(GBM),一般詳列在名字的最后方。

logo

nickname – 昵稱、愛稱或外號。西方人的名字一般都有簡寫,有時這些昵稱或外號就用來分辨同名的人。例如:William “Bill” Gates 中間的”Bill”。

note

目前已具備完整規范的微格式還包括:hCard、hCalendar、XOXO、XFN、VoteLinks和3個“rel-”微格式:rel- license、rel-nofollow和rel-tag。

三.常見問題

你可能會問,既然 hCard 對網頁的瀏覽者是完全透明的,那我們為什么又要費神費力地在網頁中添加 hCard 呢?

目前看來,這似乎是一件費力不討好的事情,因為 hCard 等微格式尚未得到瀏覽器和終端設備的良好支持。但是一旦這些不足得到了改善,hCard 就會為我們的數字生活帶來很大的便利。

四.解決方案

來看幾個例子

當我用手機瀏覽某公司的網站時,手機瀏覽器識別出了網頁中的 hCard 信息。這個 hCard 標記了該公司的多種聯絡方式,手機瀏覽器很聰明地提示我“是否保存到通訊錄”,于是我很經松地保存了我所需要的信息。

手機瀏覽器還可以將頁面中的 hCard 導出為 VCF 文件,我將 VCF 文件用藍牙傳輸到同事的手機上,他們也輕松保存了這些聯系信息,同時也可以方便地同步到電腦上的通訊錄軟件中。

此外,Firefox 的 Operator 擴展還提供了一些針對微格式的在線應用,比如“使用 Google 地圖查找”、“添加至雅虎通訊錄”等等,有效地豐富了 hCard 的應用范圍。

五.編碼實戰

見上面的知識剖析

六.拓展思考

大家知道的微格式或者用過的微格式有哪些?

七.更多討論

說到“微格式”,有人力捧,有人質疑。盡管如此,而作為網站開發者和個人站長,你對“微格式”的應用仍在觀望之中嗎?

八.參考文獻

什么是微格式及經典實例演示_網頁設計

為網頁添加hCard微格式

PPT鏈接:https://ptteng.github.io/PPT/PPT/css-Microformat.html#/4

視頻鏈接:https://v.qq.com/x/page/w0501o0at82.html

文本鏈接:http://www.jnshu.com/daily/22509


microformat微格式_騰訊視頻
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容