当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页简历结构和语义信息 hResume微格式

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

No. « 113 114 115 116 »

技术文章搜索

关键字

CSS样式表 中的 网页简历结构和语义信息 hResume微格式

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 51 ::
收藏到网摘: n/a

在两个月前开始了这个系列。我希望能够通过讲述我如何实现他们的细节来传播我对微格式的热爱，鼓励更多的人来支持他。到现在为止，我们已经讨论了：
基于链接关系的微格式:使用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.    
  2. <div class=”contact vcard”>
    3.    
  3. <img src="/images/personal/emilyLewis.jpg" width="150" height="203" class="photo" alt="Emily Lewis" />
    4.    
  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.    
  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.    
  6. <ul>
    7.    
  7. <li><a href="mailto:[email protected]" class="email">eplewis[at]gmail[dot]com</a></li>
    8.    
  8. <li><a href="http://www.emilylewisdesign.com/" class="url" rel="me">Design Portfolio</a></li>
    9.    
  9. <li><a href="http://www.linkedin.com/in/emilyplewis/" rel="me">LinkedIn profile</a></li>
    10.    
  10. </ul>
    11.    
  11. </div>
    12.    
  12. <h3>Highlights of Qualifications</h3>
    13.    
  13. <ul class=”summary”>
    14.    
  14. <li>Web designer specializing in hand-coded semantic XHTML, cross-browser CSS, progressive enhancement accessibility and usability</li>
    15.    
  15. <li>Expert in the design of corporate web sites, intranets, email campaigns and e-commerce applications</li>
    16.    
  16. …
    17.    
  17. </ul>
    18.    
  18. <h3>Technical Expertise</h3>
    19.    
  19. <h4>Web Design & Development</h4>
    20.    
  20. <ul>
    21.    
  21. <li><a href="http://technorati.com/tag/xhtml" class=”skill” rel=”tag”>XHTML</a> — 9 yrs</li>
    22.    
  22. <li><a href="http://technorati.com/tag/css" class=”skill” rel=”tag” >CSS</a> — 9 yrs</li>
    23.    
  23. …
    24.    
  24. </ul>
    25.    
  25. …
    26.    
  26. <h3>Experience & Accomplishments</h3>
    27.    
  27. <div class="vcalendar">
    28.    
  28. <div class=”experience vevent vcard”>
    29.    
  29. <a class="include nonVisual" href="#emily-hcard-name"></a>
    30.    
  30. <h4 class="title summary">Web Designer</h4>
    31.    
  31. <p class="org fn">Pitney Bowes Business Insight</p>
    32.    
  32. <p><abbr class="dtstart" title="2004-12-01">December 2004</abbr> – present</p>
    33.    
  33. <ul class="description">
    34.    
  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.    
  35. …
    36.    
  36. </ul>
    37.    
  37. </div>
    38.    
  38. …
    39.    
  39. </div>
    40.    
  40. <h3>Education</h3>
    41.    
  41. <div class="vcalendar">
    42.    
  42. <div class=”education vevent vcard”>
    43.    
  43. <h4 class="summary">Web Design & Development Certification</h4>
    44.    
  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.    
  45. <p><abbr class="dtstart" title="2001-09-01">September 2001</abbr>–<abbr class="dtend" title="2003-06-01">June 2003</abbr></p>
    46.    
  46. <p>GPA 3.8</p>
    47.    
  47. </div>
    48.    
  48. </div>
    49.    
  49. …
    50.    
  50. </div>
根属性：hresume

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

<div class=”hresume”>

必要属性：contact

hResume只有一个必须有的属性，就是contact，用来表明简历作者的姓名和联系信息，而且只能使用一次。hResume要求其中的联系信息为hCard格式：

       
  1. <div class="contact vcard“>
    2.    
  2. <img src="/images/personal/emilyLewis.jpg" width="150" height="203" class=”photo” alt=”Emily Lewis” />
    3.    
  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.    
  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.    
  5. <ul>
    6.    
  6. <li><a href="mailto:[email protected]" class=”email”>eplewis[at]gmail[dot]com</a></li>
    7.    
  7. <li><a href="http://www.emilylewisdesign.com/" class=”url” rel=”me”>Design Portfolio</a></li>
    8.    
  8. <li><a href="http://www.linkedin.com/in/emilyplewis/" rel="me">LinkedIn profile</a></li>
    9.    
  9. </ul>
    10.    
  10. </div>
同rel-me定义统一的身份

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

       
  1. <li><a href="http://www.emilylewisdesign.com/" class="url" rel=”me”>Design Portfolio</a></li>
    2.    
  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.    
  2. <ul class=”summary”>
    3.    
  3. <li>Web designer specializing in hand-coded semantic XHTML, cross-browser CSS, progressive enhancement accessibility and usability</li>
    4.    
  4. <li>Expert in the design of corporate web sites, intranets, email campaigns and e-commerce applications</li>
    5.    
  5. …
    6.    
  6. </ul>
可选属性：skill

可选属性skill附加在内容元素上，用来表明个人的特殊才能和技术。skill可以使用多次。规范要求技能的内容需要包含在指定了class="skill"和rel="tag"的链接元素中：

       
  1. <ul>
    2.    
  2. <li><a href="http://technorati.com/tag/xhtml" class=”skill” rel=”tag”>XHTML</a> — 9 yrs</li>
    3.    
  3. <li><a href="http://technorati.com/tag/css" class=”skill” rel=”tag”>CSS</a> — 9 yrs</li>
    4.    
  4. …
    5.    
  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.    
  2. <div class="experience vevent vcard“>
    3.    
  3. <a class="include nonVisual" href="#emily-hcard-name"></a>
    4.    
  4. <h4 class="title summary“>Web Designer</h4>
    5.    
  5. <p class=”org”>Pitney Bowes Business Insight</p>
    6.    
  6. <p><abbr class=”dtstart” title=”2004-12-01″>December 2004</abbr> – present</p>
    7.    
  7. <ul class=”description”>
    8.    
  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.    
  9. …
    10.    
  10. </ul>
    11.    
  11. </div>
    12.    
  12. …
    13.    
  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.    
  2. <div class="experience vevent vcard">
    3.    
  3. <a class=”include nonVisual” href=”#emily-hcard-name”>Emily Paige Lewis</a>
    4.    
  4. <h4 class="title">Web Designer</h4>
    5.    
  5. <p class="org fn">Pitney Bowes Business Insight</p>
    6.    
  6. <p><abbr class="dtstart" title="2004-12-01">December 2004</abbr> – present</p>
    7.    
  7. <ul class="description">
    8.    
  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.    
  9. …
    10.    
  10. </ul>
    11.    
  11. </div>
    12.    
  12. …
    13.    
  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.    
  2. <div class=" education vevent vcard“>
    3.    
  3. <h4 class=”summary”>Web Design & Development Certification</h4>
    4.    
  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.    
  5. <p><abbr class=”dtstart” title=”2001-09-01″>September 2001</abbr>–<abbr class=”dtend” title=”2003-06-01″>June 2003</abbr></p>
    6.    
  6. <p>GPA 3.8</p>
    7.    
  7. </div>
    8.    
  8. </div>

我没有使用什么

hResume还支持affiliation和发表作品信息。我没有实现他们因为同我关系不太大。

可选属性：affiliation

可选属性affiliation表明个人属于/有关系的机构组织。affiliation可以被使用多次。规范要求其中的组织要使用hCard来描述：

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

hResume没有特定的属性用来描述发表信息，不过，规范推荐使用<cite>来表明个人发表过的作品信息：

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

工具

上面基本涵盖了hResume的全部，我们看看如何能够使工作容易一些。有一些工具可以帮助实现hResume：

其他工具

好处

对于我来说，当有人问我为什么要使用微格式？我都会回答“为什么不呢”，标准、语义和微格式对于我来说都是最美妙的东西。

就这么多了？

上面就是对于hResume的描述。但是并不是这个系列的结束。还有一篇文章我计划用来讨论一些在写作这个系列的过程中学到的事情。还计划讨论一下“微格式同RDF”之间的争论。