為網(wǎng)頁添加hCard微格式

說到“微格式”,有人力捧,有人質(zhì)疑。歸根結(jié)底,我覺得還是瀏覽器和終端設(shè)備的支持沒有跟上,沒有形成一個(gè)完整的應(yīng)用流程。盡管如此,Yahoo、Google 等行業(yè)巨頭已經(jīng)開始在各自的主流產(chǎn)品中應(yīng)用微格式。而作為網(wǎng)站開發(fā)者和個(gè)人站長,你對“微格式”的應(yīng)用仍在觀望之中嗎?
其實(shí),微格式并不復(fù)雜,它離我們也并不遙遠(yuǎn)。不妨現(xiàn)在就行動起來,試試在網(wǎng)頁中添加微格式吧!
在我看來,微格式最主打的應(yīng)用非 hCard 莫屬。所以本文將著重介紹一些 hCard 的應(yīng)用經(jīng)驗(yàn)。
vCard/VCF
在討論 hCard 之前,有必要先介紹一下 vCard。
vCard 是電子名片的文件格式標(biāo)準(zhǔn),它可以存儲聯(lián)系人的姓名、公司名稱、職位、電話、地址、電子信箱、網(wǎng)站等信息。vCard 的文件擴(kuò)展名通常為 .VCF
,一個(gè)簡單的 VCF 文件看起來通常是這個(gè)樣子的:
BEGIN:VCARD
VERSION:2.1
N:Michael;Jackson
TEL:13912345678
END:VCARD
雖然對普通網(wǎng)友來說,VCF 文件似乎并不常見,但事實(shí)上它已經(jīng)在眾多領(lǐng)域得到了廣泛的支持和應(yīng)用。
我第一次接觸到 VCF 文件是在整理手機(jī)通訊錄時(shí)。當(dāng)時(shí)我需要將手機(jī)中的通訊錄轉(zhuǎn)移到新手機(jī)中,我下載并試用了一些相關(guān)的工具軟件,比如 PC 端手機(jī)管理軟件 NOKIA PC Suite 與 Oxygen Phone Manager、通訊錄管理軟件 Outlook/Outlook Express、手機(jī)端通訊錄備份工具 SmartVCard 等等。我發(fā)現(xiàn)所有這些軟件都“不約而同”地支持 VCF 格式,NOKIA 智能手機(jī)甚至原生支持在手機(jī)端導(dǎo)入/導(dǎo)出 VCF 文件。
hCard
再來看看 hCard。我們知道 hCard 是一種微格式,通常應(yīng)用在 HTML 等語言中,主要用于組織并標(biāo)記網(wǎng)頁中的聯(lián)絡(luò)信息。hCard 直接采用 vCard 的屬性名稱作為自身的標(biāo)記規(guī)則,這意味 hCard 與 vCard 有著天生的兼容性。這些特性令它成為最受關(guān)注的微格式應(yīng)用。
和其它微格式一樣,hCard 對網(wǎng)頁的瀏覽者是完全透明的。hCard 使用 HTML 標(biāo)簽的 class 屬性來對數(shù)據(jù)進(jìn)行標(biāo)記。有時(shí),當(dāng) HTML 文檔中現(xiàn)有的標(biāo)簽不足以進(jìn)行細(xì)致的標(biāo)記時(shí),可能需要增加額外的標(biāo)簽(通常是不影響網(wǎng)頁外觀的 span
或 div
標(biāo)簽)。關(guān)于在網(wǎng)頁中添加 hCard(或?qū)?vCard 轉(zhuǎn)換成 hCard)的具體方法,我不打算在此贅述,因?yàn)榫W(wǎng)上已經(jīng)有了非常詳盡的參考資料,我會將它們列在本文的末尾。
在何處添加 hCard
在網(wǎng)頁的什么地方添加 hCard 呢?其實(shí)從它的用途可以看出,網(wǎng)頁中凡是涉及到個(gè)人、網(wǎng)站或公司的聯(lián)系信息都可以采用 hCard 來進(jìn)行標(biāo)記。
以 CSS魔法 的首頁為例,涉及此類聯(lián)系信息的頁面元素有站點(diǎn)標(biāo)題、“關(guān)于站長”、“友情鏈接”三塊區(qū)域,我們就可以分別以網(wǎng)站、站長、朋友為主體單獨(dú)設(shè)置 hCard。
為什么要使用 hCard
你可能會問,既然 hCard 對網(wǎng)頁的瀏覽者是完全透明的,那我們?yōu)槭裁从忠M(fèi)神費(fèi)力地在網(wǎng)頁中添加 hCard 呢?
目前看來,這似乎是一件費(fèi)力不討好的事情,因?yàn)?hCard 等微格式尚未得到瀏覽器和終端設(shè)備的良好支持。但是一旦這些不足得到了改善,hCard 就會為我們的數(shù)字生活帶來極大的便利。來看幾個(gè)理想中的例子:
- 當(dāng)我用手機(jī)瀏覽某公司的網(wǎng)站時(shí),手機(jī)瀏覽器識別出了網(wǎng)頁中的 hCard 信息。這個(gè) hCard 標(biāo)記了該公司的多種聯(lián)絡(luò)方式,手機(jī)瀏覽器很聰明地提示我“是否保存到通訊錄”,于是我很經(jīng)松地保存了我所需要的信息。
- 手機(jī)瀏覽器還可以將頁面中的 hCard 導(dǎo)出為 VCF 文件,我將 VCF 文件用藍(lán)牙傳輸?shù)酵碌氖謾C(jī)上,他們也輕松保存了這些聯(lián)系信息,同時(shí)也可以方便地同步到電腦上的通訊錄軟件中。
- 更令我驚喜的是,手機(jī)瀏覽器識別出了 hCard 中的地理位置信息(經(jīng)緯度),并可將此信息傳遞給手機(jī)內(nèi)的 GPS 導(dǎo)航軟件,這樣連出行道路都不需要我四處打聽了!
這些應(yīng)用看起來似乎不錯(cuò)吧?其實(shí)這些情景離我們已經(jīng)越來越近了,目前 hCard 已經(jīng)有了一些可行的應(yīng)用流程。
現(xiàn)階段的 hCard 應(yīng)用
現(xiàn)階段的 hCard 應(yīng)用主要以桌面端為主,因?yàn)槟壳八坪踹€沒有支持微格式的手機(jī)端瀏覽器。
目前可以識別微格式信息的瀏覽器包括安裝了 Tails Export 或 Operator 擴(kuò)展的 Firefox,以及安裝了 Safari Microformats Plugin 插件的 Mac 版 Safari 瀏覽器。
這些的瀏覽器在識別出頁面中的 hCard 信息之后,通常都可以提供導(dǎo)出 VCF 文件的功能。這些導(dǎo)出的 VCF 文件可以很方便地添加到本機(jī)的通訊錄(Outlook 或 Address Book)中,隨后便可以通過 NOKIA PC Suite 或 Apple iTunes 等軟件將本機(jī)通訊錄同步到 NOKIA 手機(jī)或 iPhone/iPod 等便攜設(shè)備之中。
其中,Safari Microformats Plugin 插件可以直接將 hCard 中的聯(lián)系人信息導(dǎo)入本機(jī)(僅限 Mac OS)的通訊錄。
此外,F(xiàn)irefox 的 Operator 擴(kuò)展還提供了一些針對微格式的在線應(yīng)用,比如“使用 Google 地圖查找”、“添加至雅虎通訊錄”等等,有效地豐富了 hCard 的應(yīng)用范圍。
值得一提的是,還有一個(gè)完全在線的、與瀏覽器無關(guān)的實(shí)現(xiàn)方案——Microformats Bookmarklet(微格式書簽)。雖然它的界面明顯借鑒自 Safari Microformats Plugin,但它實(shí)際上是跨瀏覽器的(支持 Safari、Firefox 和 IE 等瀏覽器)。它的使用很簡單,也很有趣,把這個(gè)鏈接“微格式書簽工具”拖放至?xí)灆冢ɑ蛱砑拥绞詹貖A),就算是完成了“安裝”。此后在瀏覽任何網(wǎng)頁時(shí),只要點(diǎn)擊這個(gè)書簽項(xiàng)(或打開這個(gè)收藏夾項(xiàng)目),就可以識別并操作網(wǎng)頁中的微格式信息了。(不過這個(gè)工具需要調(diào)用 jQuery,可能會與網(wǎng)頁自身調(diào)用的 JS 庫相沖突,或者因 jQuery 加載失敗導(dǎo)致失效,不夠穩(wěn)定。)
結(jié)語
雖然目前微格式尚未得到瀏覽器和終端設(shè)備的良好支持,但我們相信,在不遠(yuǎn)的將來,hCard 等微格式應(yīng)用會令網(wǎng)頁中的信息更加精確和豐富,并為互聯(lián)網(wǎng)用戶帶來更多的便利。
相關(guān)閱讀
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng),可以同時(shí)控制行和列,相比 Flex(一維布局),更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非?;A(chǔ)且重要的屬性,它們用于控制元素周圍的空白區(qū)域,本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性,用于告訴瀏覽器某個(gè)元素在未來可能會發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中,去除a標(biāo)簽(超鏈接)的下劃線的幾種方法,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-04-07
- 在前端開發(fā)中,CSS(層疊樣式表)不僅是用來控制網(wǎng)頁的外觀和布局,更是實(shí)現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級,本文將2025-04-07
css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案,感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起2025-03-10前端 CSS 動態(tài)設(shè)置樣式::class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法:對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式;通過數(shù)組語法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26