DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁簡歷結構和語義信息:hResume微格式
網頁簡歷結構和語義信息:hResume微格式
編輯：CSS進階教程     

網頁制作poluoluo文章簡介：現在，我們來討論hResume微格式，他通常被用來為網頁內容中的簡歷添加結構和語義信息。

在兩個月前開始了這個系列。我希望能夠通過講述我如何實現他們的細節來傳播我對微格式的熱愛，鼓勵更多的人來支持他。到現在為止，我們已經討論了：

基於鏈接關系的微格式:使用rel屬性

為網頁添加hCard微格式

非常酷的微格式：XFN規范

為網頁內容添加結構和語義的hAtom微格式

現在，我們來討論hResume微格式，他通常被用來為網頁內容中的簡歷添加結構和語義信息。

hResume背景

在我們詳細討論hResume之前，先來了解一些背景知識。

提案規范

hResume是一個處於提案狀態的微格式。這是什麼意思呢？意味著在成為正式提案之前還會有很多變化，雖然說最終一定會通過。這會不會有很大影響？可能對您來說，但是對我來說影響不大。我非常接受的一點就是現在所有的互聯網技術都是日新月異的，這是互聯網的特性。

微格式最好的地方

hResume屬於簡單的微格式之一，只有八個屬性。同時，hResume還是一個很復雜的微格式；他利用另外三個微格式：rel-tag，hCard 和 hCalendar。在很多方面上看，這也呈現出微格式最強大的特點：他們使用已有的標准。

最不好的地方

hResume如何利用hCard和hCalendar對於我來說，很多時候都非常讓人困惑和有挫敗感。也許是因為他還處於提案狀態，在最後通過的時候希望這些問題都能夠被解決。不過，也可能是因為我沒有想好如何把hCard和hCalendar信息更好的同我的簡歷融合在一起。不過不管是什麼原因，從我的角度來說，hResume在某種程度上顯示了微格式很不好的地方。並不是只有在使用hResume的時候才有問題。所有的微格式都缺少容易理解的信息和很好的文檔。我想這讓推動微格式很苦惱。

因為hResume還是提案階段，所以很難期望有很多人分享這方面的信息和資源。但是微格式的Wiki上還是提供了很詳細的定義。因為另外的資源非常少，所以才使得實現這個微格式非常的痛苦和挫敗。不過這也是我為什麼寫這些關於微格式的博客文章，我也希望能夠有越來越多的文章出現，越來越多的人談論他，就會有越來越多更好的資源和信息。

歷史

hResume的歷史非常簡單。不像hCard、hCalendar和hAtom，在他之前沒有類似的技術手段。不過，他還是建立在對現有簡歷格式的研究基礎上，例如HR-XML和Europass。

基礎知識

跟所有微格式一樣，他也有一些規則這裡還要說明：

  • 屬性和子屬性通過class代碼聲明。這些代碼定義了hResume微格式
  • 屬性和子屬性名稱大小寫敏感
  • “根”屬性不能和其他子屬性組合在一起。因此，<p class="hresume contact"> 是無效的
  • 包含微格式的標記元素跟微格式之間沒有直接關系（建議使用有效並具有語義信息的標記）

Profile

在實現hResume的頁面中，需要在<head>中聲明他的Profile：

<head profile=”http://microformats.org/wiki/hresume-profile/”>

前面提過，hResume利用hCard和hCalendar來描述信息，所以，如果您也實現了這兩個微格式，您還需要包含他們的Profile聲明。W3C允許多個Profile聲明（使用空格隔開），所以可以同時包含三個Profile：

<head profile="http://microformats.org/wiki/hresume-profile/ http://purl.org/uF/hCard/1.0/ http://purl.org/uF/hCalendar/1.0/“>

由於hCard和hCalendar屬於正式標准，所以，他們可以使用組合Profile URL來聲明，我推薦使用該聲明：

<head profile="http://microformats.org/wiki/hresume-profile/ http://purl.org/uF/2008/03/“>

例子

同前面講過的微格式不同，我沒有在博客上實現hResume。因為真是找不到原因在我的博客上放個人簡歷，而且我已經在我的設計檔案中提供了hResume實現。下面的例子是從我我設計檔案中的簡歷提取出來的。不過真實的信息是非常多的標記元素和信息，所以我刪除了一些重復的信息，盡量保持簡潔，此外還剔除了用來定義顯示風格的class值。

如果需要的話，您可以去我的頁面中查看全文的代碼。

  1. <div class=”hresume”>
  2. <div class=”contact vcard”>
  3. <img src="/images/personal/emilyLewis.jpg" width="150" height="203" class="photo" alt="Emily Lewis" />
  4. <h2 class="fn n" id="emily-hcard-name"><span class="given-name">Emily</span> <span class="additional-name">Paige</span> <span class="family-name">Lewis</span></h2>
  5. <p class="adr"><span class="locality">Albuquerque</span>, <abbr class="region" title="New Mexico">NM<abbr> <span class="postal-code">87106</span> <abbr class="country-name" title="United States of America">USA</abbr></p>
  6. <ul>
  7. <li><a href="mailto:eplewis@gmail.com" class="email">eplewis[at]gmail[dot]com</a></li>
  8. <li><a href="http://www.emilylewisdesign.com/" class="url" rel="me">Design Portfolio</a></li>
  9. <li><a href="http://www.linkedin.com/in/emilyplewis/" rel="me">LinkedIn profile</a></li>
  10. </ul>
  11. </div>
  12. <h3>Highlights of Qualifications</h3>
  13. <ul class=”summary”>
  14. <li>Web designer specializing in hand-coded semantic XHTML, cross-browser CSS, progressive enhancement accessibility and usability</li>
  15. <li>Expert in the design of corporate web sites, intranets, email campaigns and e-commerce applications</li>
  16. …
  17. </ul>
  18. <h3>Technical Expertise</h3>
  19. <h4>Web Design & Development</h4>
  20. <ul>
  21. <li><a href="http://technorati.com/tag/xhtml" class=”skill” rel=”tag”>XHTML</a> — 9 yrs</li>
  22. <li><a href="http://technorati.com/tag/css" class=”skill” rel=”tag” >CSS</a> — 9 yrs</li>
  23. …
  24. </ul>
  25. …
  26. <h3>Experience & Accomplishments</h3>
  27. <div class="vcalendar">
  28. <div class=”experience vevent vcard”>
  29. <a class="include nonVisual" href="#emily-hcard-name"></a>
  30. <h4 class="title summary">Web Designer</h4>
  31. <p class="org fn">Pitney Bowes Business Insight</p>
  32. <p><abbr class="dtstart" title="2004-12-01">December 2004</abbr> – present</p>
  33. <ul class="description">
  34. <li>Designed interfaces and developed XHTML, CSS and graphics for main corporate site, international sites, marketing newsletters, corporate blog, corporate intranet and user conference site</li>
  35. …
  36. </ul>
  37. </div>
  38. …
  39. </div>
  40. <h3>Education</h3>
  41. <div class="vcalendar">
  42. <div class=”education vevent vcard”>
  43. <h4 class="summary">Web Design & Development Certification</h4>
  44. <p class="org fn"><a href="http://www.gwu.edu/index.cfm" class="url" title="Link opens off this site">George Washington University</a>, Center for Professional Development</p>
  45. <p><abbr class="dtstart" title="2001-09-01">September 2001</abbr>–<abbr class="dtend" title="2003-06-01">June 2003</abbr></p>
  46. <p>GPA 3.8</p>
  47. </div>
  48. </div>
  49. …
  50. </div>
根屬性：hresume

根屬性是hresume，是必須要有的。所有的hResume信息都要包含在被指定class="hresume"的元素中：

<div class=”hresume”>

必要屬性：contact

hResume只有一個必須有的屬性，就是contact，用來表明簡歷作者的姓名和聯系信息，而且只能使用一次。hResume要求其中的聯系信息為hCard格式：

  1. <div class="contact vcard“>
  2. <img src="/images/personal/emilyLewis.jpg" width="150" height="203" class=”photo” alt=”Emily Lewis” />
  3. <h2 class=”fn n” id=”emily-hcard-name”><span class=”given-name”>Emily</span> <span class=”additional-name”>Paige</span> <span class=”family-name”>Lewis</span></h2>
  4. <p class=”adr”><span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM<abbr> <span class=”postal-code”>87106</span> <abbr class=”country-name” title=”United States of America”>USA</abbr></p>
  5. <ul>
  6. <li><a href="mailto:eplewis@gmail.com" class=”email”>eplewis[at]gmail[dot]com</a></li>
  7. <li><a href="http://www.emilylewisdesign.com/" class=”url” rel=”me”>Design Portfolio</a></li>
  8. <li><a href="http://www.linkedin.com/in/emilyplewis/" rel="me">LinkedIn profile</a></li>
  9. </ul>
  10. </div>
同rel-me定義統一的身份

在上面的例子中，我在到網站的鏈接上使用了rel-me：

  1. <li><a href="http://www.emilylewisdesign.com/" class="url" rel=”me”>Design Portfolio</a></li>
  2. <li><a href="http://www.linkedin.com/in/emilyplewis/" rel=”me”>LinkedIn profile</a></li>

如同我們在第一部分中討論的，rel="me"用來定義從關於某人的某個頁面到另一個頁面的超鏈接關系。

使用address的問題

hResume規范中也建議使用<address>來描述個人聯系信息。根據W3C的描述，<address>元素為：

“… used by authors to supply contact information for a document or a major part of a document such as a form.（譯：作者用來為文檔或者文檔大部分內容提供聯系信息）“

在簡歷的例子中，<address>語義上是正確的，因為他描述的聯系信息是屬於簡歷作者的。不過，您會注意到我在上面的例子中沒有使用<address>，這是因為<address>不能包含塊級元素。當然，我可以使用<span>來替換所有的<p>和<ul>，但是那會讓文檔失去很多語義信息和結構，所以就沒有考慮<address>。

可選屬性：summary

可選屬性summary用來表明求職意向和勝任工作的簡介。同樣，只能在hResume中使用一次。在我的簡歷中，我沒有描述求職意向，但是卻提供了勝任工作的列表：

  1. <h3>Highlights of Qualifications</h3>
  2. <ul class=”summary”>
  3. <li>Web designer specializing in hand-coded semantic XHTML, cross-browser CSS, progressive enhancement accessibility and usability</li>
  4. <li>Expert in the design of corporate web sites, intranets, email campaigns and e-commerce applications</li>
  5. …
  6. </ul>
可選屬性：skill

可選屬性skill附加在內容元素上，用來表明個人的特殊才能和技術。skill可以使用多次。規范要求技能的內容需要包含在指定了class="skill"和rel="tag"的鏈接元素中：

  1. <ul>
  2. <li><a href="http://technorati.com/tag/xhtml" class=”skill” rel=”tag”>XHTML</a> — 9 yrs</li>
  3. <li><a href="http://technorati.com/tag/css" class=”skill” rel=”tag”>CSS</a> — 9 yrs</li>
  4. …
  5. </ul>
瘋狂的鏈接

我按照規范要求的實現了skill屬性，但是我非常不喜歡這些鏈接。我不明白為什麼規范需要屬性必須要被包含在鏈接之內，為什麼不能包含在內容元素中？我並不能確認這些鏈接帶來任何的價值，尤其是對於可能的雇主來說。事實上，這會讓想了解我的人注意力分散。

標簽空間似乎無關

另外一個問題就是規范要求這些鏈接必須實現rel="tag"。在第一部分中，我們討論過，rel-tag表示鏈接的目的地址是一個標簽地址。而且rel-tag需要在鏈接中使用標簽內容作為URL的最後一段。由於這些限定，我把所有的skill鏈接都指向了Technorati，因為他提供了標簽空間。

可是，這就讓這些鏈接更跟我的內容無關了。如果我使用這些鏈接，我更希望他們能夠鏈接到能給出具體信息的地方，比如Wikipedia，但是他並沒有提供這些技能的條目。最後，我可能會把所有能指向wikipedia的鏈接都換成指向wikipedia，而內容不存在的技能鏈接就只好刪掉。或者只好把整個skill部分都刪除，反正他是可選的。

可選屬性：experience

可選屬性experience用來表明個人的工作經歷。可以使用多次。規范要求每個工作經歷都作為一個“事件”可以使用hCalendar來描述，並且把職務/角色的內容寫在hCard中：

  1. <div class=”vcalendar”>
  2. <div class="experience vevent vcard“>
  3. <a class="include nonVisual" href="#emily-hcard-name"></a>
  4. <h4 class="title summary“>Web Designer</h4>
  5. <p class=”org”>Pitney Bowes Business Insight</p>
  6. <p><abbr class=”dtstart” title=”2004-12-01″>December 2004</abbr> – present</p>
  7. <ul class=”description”>
  8. <li>Designed interfaces and developed XHTML, CSS and graphics for main corporate site, international sites, marketing newsletters, corporate blog, corporate intranet and user conference site</li>
  9. …
  10. </ul>
  11. </div>
  12. …
  13. </div>
包含模式：避免冗余

因為規范要求為所有工作職務和角色指定hCard信息，而hCard需要fn屬性（人的格式化名字）這就意味著對於我簡歷中每條experience，我需要列出我的名字信息。這真是沒有太大意思。

幸好，微格式的家伙們想出了辦法──包含模式，允許在頁面中使用已經在某個地方定義好的數據。使用包含模式，我就可以在experience中包含我已經在contact中定義好的fn信息了。首先，我需要為我的contact hCard fn值定義一個id，這樣我就可以引用他：

<h2 class="fn n" id=”emily-hcard-name”><span class=”given-name”>Emily</span> <span class=”additional-name”>Paige</span> <span class=”family-name”>Lewis</span></h2>

然後，對應所有的experience，我可以為鏈接<a>指定class="include"，而在鏈接的href值中指定到fn id：

  1. <div class="vcalendar">
  2. <div class="experience vevent vcard">
  3. <a class=”include nonVisual” href=”#emily-hcard-name”>Emily Paige Lewis</a>
  4. <h4 class="title">Web Designer</h4>
  5. <p class="org fn">Pitney Bowes Business Insight</p>
  6. <p><abbr class="dtstart" title="2004-12-01">December 2004</abbr> – present</p>
  7. <ul class="description">
  8. <li>Designed interfaces and developed XHTML, CSS and graphics for main corporate site, international sites, marketing newsletters, corporate blog, corporate intranet and user conference site</li>
  9. …
  10. </ul>
  11. </div>
  12. …
  13. </div>

此外，包含模式還允許使用<object>。<object>比鏈接要更加具有語義信息，不過他會造成顯示問題。

例如，在Safari中：
Display of include object in Safari

Chrome也會有類似問題：
Display of include object in Chrome

Opera不會顯示滾動條，但是會顯示一大片空白區域：
Display of include object in Opera

IE6和IE7也顯示一些東西（不知道具體是什麼東西）：
Display of include object in IE

由於這些顯示問題，目前還是推薦使用鏈接方式，不過同樣有問題。其實算不上問題，只是需要記住：鏈接內部必須有指定內容，以便無障礙訪問的屏幕發聲程序有東西可以讀取。

日期時間設計模式

對於每個工作“事件”，我都使用了推薦的hCalendar方式描述。這意味著我要使用對開始和結束的時間使用日期時間設計模式：

<p><abbr class=”dtstart” title=”1999-11-01″>November 1999</abbr> – <abbr class=”dtend” title=”2004-01-01″>January 2004</abbr></p>

這個模式要求被包含在<abbr>元素中，該元素使用title屬性值來定義“機器可讀”的時間格式，而通過包含的內容來指定人類可讀的時間格式。在title中包含的日期時間格式需要遵循ISO 8601格式要求。

可選屬性：education

可選屬性education表明教育“事件”，比如本科教育。education也可以使用多次。並且同experience相似，規范要求每個education“事件”都使用hCalendar格式描述。雖然規范中沒有要求，我還是為大學或學院添加了hCard信息描述：

  1. <div class=”vcalendar”>
  2. <div class=" education vevent vcard“>
  3. <h4 class=”summary”>Web Design & Development Certification</h4>
  4. <p class=”org fn”><a href=”http://www.gwu.edu/index.cfm” class=”url” title=”Link opens off this site”>George Washington University</a>, Center for Professional Development</p>
  5. <p><abbr class=”dtstart” title=”2001-09-01″>September 2001</abbr>–<abbr class=”dtend” title=”2003-06-01″>June 2003</abbr></p>
  6. <p>GPA 3.8</p>
  7. </div>
  8. </div>

我沒有使用什麼

hResume還支持affiliation和發表作品信息。我沒有實現他們因為同我關系不太大。

可選屬性：affiliation

可選屬性affiliation表明個人屬於/有關系的機構組織。affiliation可以被使用多次。規范要求其中的組織要使用hCard來描述：

  1. <ul>
  2. <li class="affliation vcard“><span class=”fn org”>Association for Accounting Marketing</span></li>
  3. <li class="affliation vcard“><span class=”fn org”>NM Adobe Users Group</span></li>
  4. </ul>
發表作品

hResume沒有特定的屬性用來描述發表信息，不過，規范推薦使用<cite>來表明個人發表過的作品信息：

<cite>“Choosing the Best Managed Care Plan”</cite>, New OD, September 1998

工具

上面基本涵蓋了hResume的全部，我們看看如何能夠使工作容易一些。有一些工具可以幫助實現hResume：

  • hResume生成器通過提交信息自動生成hResume
  • hResume項目為Word Press構建了hResume插件
  • Emurse提供一些生成hResume的模板
  • LinkedIn為他900萬公共個人信息提供hResume描述
  • CV Antix是一個基於網絡應用的簡歷生成器
  • Resolio生成基於hResume格式的簡歷

其他工具

  • 有一個Word Press的LinkedIn hResume插件可以從LinkedIn資料中提取hResume數據
  • Brian Suda構建了一個beta版本的hResume到簡歷XML轉化的工具
  • Optimus 微格式轉換器提供從hResume到JSON，XML或者RSS格式的轉換

好處

對於我來說，當有人問我為什麼要使用微格式？我都會回答“為什麼不呢”，標准、語義和微格式對於我來說都是最美妙的東西。

就這麼多了？

上面就是對於hResume的描述。但是並不是這個系列的結束。還有一篇文章我計劃用來討論一些在寫作這個系列的過程中學到的事情。還計劃討論一下“微格式同RDF”之間的爭論。

CSS進階教程
WebKit中可用的CSS高級特性
使用在WebKit中可用的CSS高級特性，可以為你的網站或網絡應用帶來一個新的更令人興奮的東西。在閱
CSS實例教程:用ul li做圓角表格
網頁制作poluoluo文章簡介：今天用ul li做個圓角表格，圓角用了背景圖片。
CSS3制作的精彩的網頁實例教程
網頁制作Poluoluo文章簡介：用CSS3創造的10個精彩案例. 今天看到

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
如何像表格table一樣對層div進行輕松布局 css3.0的新屬性的參考列表 用CSS設計高體驗的表單顯示效果示例 一列固定寬度布局和背景圖片絕對定位 WEB設計：首屆CSS世界大賽獲獎作品欣賞 CSS基礎教程:Class以及ID選擇器 6月收集的25個CSS3按鈕和CSS3菜單設計教程 不必需的樣式腳本文件導致頁面不能及時更新 CSS3實例應用:制作照片長廊 CSS3網頁制作實例:實現網頁文字漸變內發光投影
熱門推薦
CSS樣式表的hack的寫作方法 css框架是什麼 CSS教程：margin屬性定義邊外補白 css實現文字的自動隱藏 分析總結一下＜li＞和＜hr＞的樣式定義 從基礎開始:CSS實用教程（三） 用CSS和jQuery制作霓虹效果 CSS控制頁面樣式的4種方式和優先級問題 Div+CSS布局入門
大家都在看
js 獲取本地文件及目錄的方法(推薦) JS制作簡單的三級聯動 JavaScript DOM進階方法 HTML5 Canvas實現360度全景圖 JavaScript prototype屬性使用說明 CSS初學者入門:使用table布局網頁不明智 JavaScript截取字符串的2個函數介紹 HTML基礎之HTML內容細則
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved