• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 网页简历结构和语义信息 hResume微格式

网页简历结构和语义信息 hResume微格式

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含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”>

您可能想查找下面的文章:

  • 网页简历结构和语义信息 hResume微格式

相关文章

  • 2017-08-0645个非常奇妙的CSS3 特性应用示例
  • 2017-08-06CSS文字控制与文本控制属性介绍及应用示例
  • 2017-08-06设置层的漂移的简单实现方法
  • 2017-08-06CSS3实现10种Loading效果
  • 2017-08-06下拉框select样式改写具体实现
  • 2017-08-06多角色选项卡登录效果
  • 2017-08-06CSS3 please 跨浏览器的CSS3产生器
  • 2017-08-06css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样
  • 2017-08-06DIV设置float后父容器无法定位高度的问题解决方法
  • 2017-08-06div等浮层在IE6下被下拉框遮挡的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 让页脚紧贴页面底部的CSS代码
    • CSS控制二级菜单动态出现不只有js才能做到
    • CSS滤镜同时过滤文字的问题的解决方法
    • CSS毛玻璃效果如何实现
    • CSS常用属性的默认值详细整理
    • CSS 文字加阴影变3D效果演示
    • 利用CSS3的特性改变文本选中时的颜色
    • 14款免费的RSS、CSS和HTML验证工具
    • CSS失效怎么办?请检查网页最头部是否包含Doctype标签
    • CSS 制作网页导航条(下)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有