译自:http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-an-html5-microdata-powered-resume/
译者:蒋宇捷(转载请标明出处http://blog.csdn.net/hfahe)
Janet Wagner于2011 年9月27日
教程细节
• 概要:HTML5的微数据API
• 难度:初级/中级
• 估计完成时间: 60-90分钟
将创建的最终产品
/* Default Styles --------------------------------------------------- */ body { margin: 0px; padding: 0px; background: url("../images/bg_dark_green.png"); background-color: inherit; font-size: 16px; font-family: "Trebuchet MS", Helvetica, sans-serif; color: #000; } a:link { text-decoration: underline; color: #000; font-weight: bold; } a:visited { text-decoration: underline; color: #000; font-weight: bold; } a:hover { text-decoration: underline; color: #669933; font-weight: bold; } a:active { text-decoration: underline; color: #000; font-weight: bold; } #wrapper { width: 965px; margin: 0 auto; } #content { background-color: #eee; width: 960px; text-align: left; overflow: auto; position: relative; margin: 25px 0px 25px 0px; border: #fff solid 2px; } .clear { float: none; clear: both; margin: 20px 0px 20px 0px; } /* Header --------------------------------------------------- */ #contact-details .header_1 { float: left; width: 350px; text-align: center; margin: 40px 0px 0px 20px; } #contact-details .header_1 img { border: #fff solid 4px; background: url("../images/bg_img_dark_green.png"); padding: 16px; margin: 10px 0px 0px 0px; } #contact-details .header_2 { float: left; width: 570px; margin: 40px 0px 0px 10px; } #contact-details .header_2 a { font-weight: normal; } #contact-details h1 { margin: 0px 0px 0px 20px; font-size: 52px; font-weight: bold; } #contact-details h3 { margin: 0px 0px 32px 20px; font-size: 30px; font-weight: bold; font-style: italic; } #contact-details ul.info_1 { list-style: none; margin: 0px 0px 0px -12px; font-size: 18px; } #contact-details ul.info_2 { list-style: none; margin: 0px 0px 15px -12px; font-size: 18px; } #contact-details li.address { background: url("../images/home.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } #contact-details li.phone { background: url("../images/phone.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } #contact-details li.email { background: url("../images/mail.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } #contact-details li.site_url { background: url("../images/computer.png") no-repeat; background-position: 0px 2px; padding: 0px 0px 12px 40px; } #contact-details li.twitter { background: url("../images/twitter_sm.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } /* Main Content --------------------------------------------------- */ h2.top { margin: 0px; font-size: 22px; font-weight: bold; } h2 { margin: 40px 0px 0px 0px; font-size: 22px; font-weight: bold; } dl { margin: 0px 50px 0px 0px; } dt { float: left; width: 200px; font-size: 20px; font-weight: bold; font-style: italic; text-align: right; } dd { width: 620px; float: right; margin-right: 20px; } dl#contact { margin: 0px; } dt#contact { margin: 0px; } dd#contact { margin: 0px; } p.bus1 { margin: 0px; font-weight: bold; color: #669933; } p.edu-info { margin: 10px 0px 0px 0px; font-weight: bold; color: #669933; } p.edu-info a { color: #000; } p.edu-info a:hover { color: #669933; } p.time { margin: 0px; } p.summary { margin: 10px 0px 0px 0px; } #skills ul.list1 { float: left; list-style: none; margin: 0px 0px 0px -40px; width: 220px; } #skills ul.list2 { float: left; list-style: none; margin: 0px 0px 0px 0px; width: 220px; } #skills li { background: url("../images/bullet_green.png") no-repeat; background-position: 0px 2px; padding: 0px 0px 0px 25px; } abbr { border-width: 0px; } /* Footer --------------------------------------------------- */ #footer { margin: 60px 40px 0px 40px; } #footer img { border: 0px; } #footer .footer_content { width: 700px; overflow: auto; margin: auto; border: #fff solid 2px; background-color: #dcdcdc; } #footer ul.icons_1 { float: left; width: 525px; margin: 15px 10px 10px 15px; padding: 0px; } #footer ul.icons_2 { float: right; width: 100px; margin: 10px 20px 10px 10px; padding: 0px; } #footer .icons_1 li, #footer .icons_2 li { margin: 0px 0px 0px 7px; padding: 0px; list-style-type: none; display: inline; } #footer a { color: #000; } #footer a:hover { color: #669933; } #footer .credits { float: none; clear: both; margin: 10px 0px 20px 0px; font-size: 12px; text-align: center; } #footer .credits a { font-weight: normal; }________________________________________
<!DOCTYPE html> <html> <head> <meta charset=UTF-8"> <meta charset="utf-8"> <title>Online Resume of Your Name</title> <!-- Meta --> <meta name="description" content="A few lines about yourself"> <meta name="keywords" content="web,developer,designer,resume" /> <meta name="author" content="Your Name"> <!-- CSS Stylesheet --> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Content Area --> <div id="content"> <!-- Begin Header --> <header> <!-- Begin Contact Section --> <section id="contact-details"> <!-- Begin Profile Image Section --> <div class="header_1"> <img src="images/profile.jpg" width="250" height="250" alt="Your Name" /> </div> <!-- End Profile Image Section --> <!-- Begin Profile Information Section --> <div class="header_2"> <h1><span>Your Name</span></h1> <h3>Web Developer / Designer</h3> <ul class="info_1"> <li class="address">555 Street Address, Toledo, Ohio, 43606 U.S.A.</li> </ul> <ul class="info_2"> <li class="phone">(000) 000-0000</li> <li class="email"><a href="mailto:[email protected]">[email protected]</a></li> <li class="site_url"><a href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li> <li class="twitter"><a href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li> </ul> </div> <!-- End Profile Information Section --> </section> <!-- End Contact Section --> </header> <!-- End Header --> <div class="clear"> </div> <!-- Begin Profile Section --> <dl> <dt>Profile:</dt> <dd> <section class="summary"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </section> </dd> </dl> <!-- End Profile Section --> <div class="clear"> </div> <!-- Begin Skills Section --> <dl> <dt>Skills:</dt> <dd> <section id="skills"> <ul class="list1"> <li>XHTML</li> <li>HTML5</li> <li>PHP</li> <li>JavaScript</li> <li>Magento</li> <li>WordPress</li> </ul> <ul class="list2"> <li>HTML</li> <li>CSS</li> <li>MySQL</li> <li>jQuery</li> <li>CMS Made Simple</li> <li>Photoshop</li> </ul> </section> </dd> </dl> <!-- End Skills Section --> <div class="clear"> </div> <!-- Begin Experience Section --> <dl> <dt>Experience:</dt> <dd> <section id="experience"> <!-- Position #1 --> <h2 class="top">Web Developer / Designer</h2> <p class="bus1">Company Name 1</p> <p class="time">February 2009 - Present</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p> <!-- Position #2 --> <h2>Web Developer / Programmer</h2> <p class="bus1">Company Name 2</p> <p class="time">November 2007 - February 2009</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p> <!-- Position #3 --> <h2>Web Developer / Programmer</h2> <p class="bus1">Company Name 3</p> <p class="time">March 2006 - November 2007</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p> </section> </dd> </dl> <!-- End Experience Section --> <div class="clear"> </div> <!-- Begin Publications Section --> <dl> <dt>Publications:</dt> <dd> <section id="publications"> <a href="http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a>, <a href="http://net.tutsplus.com/" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11 </section> </dd> </dl> <!-- End Publications Section --> <div class="clear"> </div> <!-- Begin Education Section --> <dl> <dt>Education:</dt> <dd> <section id="education"> <p class="bus1">University of Toledo</p> 2801 Bancroft Street <br /> Toledo, Ohio, 43606 U.S.A. <p class="summary">Web Design</p> <p class="time">2003 - 2005</p> <p class="edu-info"> <a href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a> </p> </section> </dd> </dl> <!-- End Education Section --> <div class="clear"> </div> <!-- Begin Footer --> <footer id="footer"> <!-- Begin Footer Content --> <div class="footer_content"> <!-- Begin Schema Person --> <ul class="icons_1"> <li><a href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li> <li><a href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li> <li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li> <li><a href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li> <li><a href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li> <li><a href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li> </ul> <ul class="icons_2"> <li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li> </ul> <!-- End Schema Person --> </div> <!-- End Footer Content --> <div class="credits"> Social Icons by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons" target="_blank" title="Paul Robert Lloyd">Paul Robert Lloyd</a>, Profile & Download Icons by <a href="http://dryicons.com/" target="_blank" title="DryIcons">DryIcons</a>, Phone Icon by <a href="http://www.comfi.com/telecom-icons/" target="_blank" title="ComFi Telecom">ComFi Telecom</a>, Profile Image User Symbol by <a href="http://thenounproject.com/" target="_blank" title="The Noun Project">The Noun Project</a>. <br /> All used under a Creative Commons Attribution-ShareAlike license: <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank" title="Creative Commons Attribution-ShareAlike license">http://creativecommons.org/licenses/by-sa/3.0/</a> </div> </footer> <!-- End Footer --> </div> <!-- End Content --> </div> <!-- End Wrapper --> </body> </html>________________________________________
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->此代码是一个HTML5 JavaScript shim,用于让IE识别和渲染HTML5元素。
<div itemscope itemtype="http://schema.org/Person"> Content that contains information about a Person </div>Itemscope元素和Person模式的ItemType 属性都将被放在简历页面联系方式和社会化媒体链接的部分,像如下所示:
<!-- Begin Contact Section --> <section id="contact-details"> <div itemscope itemtype="http://schema.org/Person"> Rest of Code Block Here </div> </section> <!-- End Contact Section -->
<!-- Begin Social Media and Download Links --> <div itemscope itemtype="http://schema.org/Person"> Rest of Code Block Here </div> <!-- End Social Media and Download Links -->itemscope元素和PostalAddress模式的ItemType属性被嵌入Person模式中,包含地址信息放在无序的列表<ul></ul>中:
<!-- Begin PostalAddress Schema --> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <ul class="info_1"> <li class="address"><span itemprop="streetAddress">555 Street Address</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li> </ul> </div> <!-- End PostalAddress Schema -->Itemprop属性
<!-- Begin Contact Section --> <section id="contact-details"> <div itemscope itemtype="http://schema.org/Person"> <!-- Begin Profile Image Section --> <div class="header_1"> <img src="images/profile.jpg" itemprop="image" width="250" height="250" alt="Your Name" /> </div> <!-- End Profile Image Section --> <!-- Begin Profile Information Section --> <div class="header_2"> <h1><span itemprop="name">Your Name</span></h1> <h3><span itemprop="jobTitle">Web Developer / Designer</span></h3> <!-- Begin PostalAddress Schema --> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <ul class="info_1"> <li class="address"><span itemprop="streetAddress">555 Street Address</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li> </ul> </div> <!-- End PostalAddress Schema --> <ul class="info_2"> <li class="phone"><span itemprop="telephone">(000) 000-0000</span></li> <li class="email"><a href="mailto:[email protected]" itemprop="email">[email protected]</a></li> <li class="site_url"><a rel="me" itemprop="url" href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li> <li class="twitter"><a rel="me" itemprop="url" href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li> </ul> </div> <!-- End Profile Information Section --> </div> </section> <!-- End Contact Section -->
<!-- Begin Social Media and Download Links --> <div itemscope itemtype="http://schema.org/Person"> <ul class="icons_1"> <li><a rel="author" itemprop="url" href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li> <li><a rel="me" itemprop="url" href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li> <li><a rel="me" itemprop="url" href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li> <li><a rel="me" itemprop="url" href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li> <li><a rel="me" itemprop="url" href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li> <li><a rel="me" itemprop="url" href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li> </ul> <ul class="icons_2"> <li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li> </ul> </div> <!-- End Social Media and Download Links -->________________________________________
<!-- Begin Skills Section --> <div itemscope itemtype="http://schema.org/ItemList"> Rest of Code Block Here </div> <!-- End Skills Section -->Itemprop属性
<!-- Begin Skills Section --> <div itemscope itemtype="http://schema.org/ItemList"> <dl> <dt itemprop="name">Skills:</dt> <dd> <section id="skills"> <ul class="list1"> <li itemprop="itemListElement">XHTML</li> <li itemprop="itemListElement">HTML5</li> <li itemprop="itemListElement">PHP</li> <li itemprop="itemListElement">JavaScript</li> <li itemprop="itemListElement">Magento</li> <li itemprop="itemListElement">WordPress</li> </ul> <ul class="list2"> <li itemprop="itemListElement">HTML</li> <li itemprop="itemListElement">CSS</li> <li itemprop="itemListElement">MySQL</li> <li itemprop="itemListElement">jQuery</li> <li itemprop="itemListElement">CMS Made Simple</li> <li itemprop="itemListElement">Photoshop</li> </ul> </section> </dd> </dl> </div> <!-- End Skills Section -->________________________________________
<!-- Position #1 --> <div itemscope itemtype="http://schema.org/Organization"> Rest of Code Block Here </div> <!-- Position #2 --> <div itemscope itemtype="http://schema.org/Organization"> Rest of Code Block Here </div> <!-- Position #3 --> <div itemscope itemtype="http://schema.org/Organization"> Rest of Code Block Here </div>Itemprop属性
<section id="experience"> <!-- Position #1 --> <div itemscope itemtype="http://schema.org/Organization"> <h2 class="top"><span itemprop="jobTitle">Web Developer / Designer</span></h2> <p class="bus1"><span itemprop="name">Company Name 1</span></p> <p class="time">February 2009 - Present</p> <p itemprop="description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p> </div> <!-- Position #2 --> <div itemscope itemtype="http://schema.org/Organization"> <h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2> <p class="bus1"><span itemprop="name">Company Name 2</span></p> <p class="time">November 2007 - February 2009</p> <p itemprop="description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p> </div> <!-- Position #3 --> <div itemscope itemtype="http://schema.org/Organization"> <h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2> <p class="bus1"><span itemprop="name">Company Name 3</span></p> <p class="time">March 2006 - November 2007</p> <p itemprop="description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p> </div> </section>________________________________________
<section id="publications"> <div itemscope itemtype="http://schema.org/Article"> Rest of Code Block Here </div> </section>Itemprop属性
<section id="publications"> <div itemscope itemtype="http://schema.org/Article"><span itemprop="name"> <a itemprop="url" href="http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a></span>, <a href="http://net.tutsplus.com/" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11 </div> </section>________________________________________
<section id="education"> <div itemscope itemtype="http://schema.org/EducationalOrganization"> Rest of Code Block Here </div> </section>PostalAddress的Itemscope元素和ItemType属性
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">2801 Bancroft Street</span> <br /> <span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span> </div>Itemprop属性
<section id="education"> <div itemscope itemtype="http://schema.org/EducationalOrganization"> <p class="bus1"><span itemprop="name">University of Toledo</span></p> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">2801 Bancroft Street</span> <br /> <span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span> </div> <p class="summary"><span itemprop="name">Web Design</span></p> <p class="time">2003 - 2005</p> <p class="edu-info"> <a itemprop="url" href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a> </p> </div> </section>________________________________________
<a href="[https://plus.google.com/your_profile]?rel=me">Google+</a>或使用“Google个人资料”按钮代码:
<a rel="me" href="https://profiles.google.com/your_profile"> <img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32"> </a>谷歌最近改变了作者署名标记的说明,这将会影响到rel = “me“和rel =”author“标签的使用。新的说明指明在文本和个人资料按钮链接上都要使用rel =“author“标签。然而,rel =“me”需要用来替代rel =“author”。如下面的截图所示。