如何使用HTML5創建在線精美簡歷 · Web前端-關注HTML5與CSS3

譯自：[http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-an-html5-microdata-powered-resume/](http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-presentation-slides-with-html-and-css-2/) [](http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-presentation-slides-with-html-and-css-2/)譯者：蔣宇捷（轉載請標明出處[http://blog.csdn.net/hfahe](http://blog.csdn.net/hfahe)） Janet Wagner于2011 年9月27日 **教程細節** ?概要：HTML5的微數據API ?難度：初級/中級 ?估計完成時間： 60-90分鐘 **將創建的最終產品** ![](https://box.kancloud.cn/2016-08-09_57a9a29be51d2.jpg) [下載源文件](http://nettuts.s3.amazonaws.com/1056_html5microdataresume/html5_resume_microdata.zip)?[示例頁面](http://www.webcodepro.net/demos/html5-resume/html5_resume_demo.html) ? 2009年5月，谷歌推出了富摘要信息，在Google的搜索結果顯示一個小塊，使用戶更容易決定哪些網頁是他們搜索相關的信息。在2011年6月，谷歌宣布建立Schema.org，從谷歌、Bing和雅虎創建結構化數據的標記模式。 ? 本教程演示了如何采用Schema.org的微數據創建一個在線的簡歷。本教程還包括關于如何使用作者署名標記！（譯者注：Schema.org相關信息可參見http://www.rwwchina.com/2011/06/is_schemaorg_really_a_google_land_grab.html） ________________________________________ **附加內容包括** ? 本教程示例是一個頁面的網站模板，你可以自由的作為你的網上簡歷使用。作為多余的獎勵，多種顏色版本都包含在源文件的zip包中：深綠色，淺綠色，深藍色和淺藍色。 ? 請注意，這并不是網頁設計或CSS教程，所以只會提到HTML5和Schema.org的微數據標記。 ? 現在，讓我們開始吧！ ________________________________________ **第1步：CSS** ? 創建一個名為“style.css”的CSS樣式表，包括下面的代碼。不要擔心，這相當簡單，并且理解它不是本教程的必須。 ~~~ /* 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; } ~~~ ________________________________________ **第2步：頁面** ? 下一步，我們需要一個HTML文件。下面是一個我們都可能熟悉的基本布局。 ~~~ <!DOCTYPE html> <html> <head> <meta charset=UTF-8"> <meta charset="utf-8"> <title>Online Resume of Your Name</title>  <meta name="description" content="A few lines about yourself"> <meta name="keywords" content="web,developer,designer,resume" /> <meta name="author" content="Your Name">  <link rel="stylesheet" type="text/css" href="css/style.css" />  </head> <body>  <div id="wrapper">  <div id="content">  <header>  <section id="contact-details">  <div class="header_1"> <img src="images/profile.jpg" width="250" height="250" alt="Your Name" /> </div>   <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:your-email@gmail.com">your-email@gmail.com</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>  </section>  </header>  <div class="clear">?</div>  <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>  <div class="clear">?</div>  <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>  <div class="clear">?</div>  <dl> <dt>Experience:</dt> <dd> <section id="experience">  <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>  <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>  <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>  <div class="clear">?</div>  <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>  <div class="clear">?</div>  <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>  <div class="clear">?</div>  <footer id="footer">  <div class="footer_content">  <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>  </div>  <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>  </div>  </div>  </body> </html> ~~~ ________________________________________ **關于頁面的幾個說明** HTML5 Shiv ? 由于Schema.org微數據是基于HTML5微數據的規范，HTML5的標記被用來創建一頁簡歷的網站模板。不幸的是，舊的網頁瀏覽器如IE7和IE8不承認某些HTML5元素。在這些舊的瀏覽器中，使用HTML5編寫的頁面將無法正確呈現。 ? 當在IE8里點擊圖片查看全圖時，下面是在線簡歷示例的截圖： ![](https://box.kancloud.cn/2016-08-09_57a9a29c0cbaa.jpg) ? 為了解決這些舊IE瀏覽器版本的問題，在標簽間添加了如下的代碼（在CSS樣式表下面）： ~~~  ~~~ ? 此代碼是一個HTML5 JavaScript shim，用于讓IE識別和渲染HTML5元素。 ? 注：在IE9和其他現代瀏覽器中不需要使用HTML5 JavaScript shim。定義列表 ? 我們在標記中使用<dd></dd>而不是無序列表來定義列表。這是因為當考慮到每個項目都有一個標題和描述時更有意義。 Section vs Article ? 關于HTML5的Section和Article元素的使用似乎有一些混亂。我們在頁面中使用Section元素，因為沒有簡歷的段落是獨立的內容。HTML5的Article元素被用在獨立的內容上，例如博客文章或新聞報道。本文很好的解釋了HTML5 Section和Acricle元素之間的差異。 ________________________________________ **第三步：添加Schema.org微數據-Person和PostalAddress** ? 我們首先要添加的模式類型是Person和PostalAddress。 Itemscope元素和ItemType屬性 ? 我們將一個itemscope元素添加到<div></div>標簽上。 ~~~ <div itemscope itemtype="http://schema.org/Person"> Content that contains information about a Person </div> ~~~ ? Itemscope元素和Person模式的ItemType 屬性都將被放在簡歷頁面聯系方式和社會化媒體鏈接的部分，像如下所示： ~~~  <section id="contact-details"> <div itemscope itemtype="http://schema.org/Person"> Rest of Code Block Here </div> </section>  ~~~ ~~~  <div itemscope itemtype="http://schema.org/Person"> Rest of Code Block Here </div>  ~~~ ? itemscope元素和PostalAddress模式的ItemType屬性被嵌入Person模式中，包含地址信息放在無序的列表<ul></ul>中： ~~~  <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>  ~~~ Itemprop屬性 ? 需要把Itemprop屬性添加到適當的span標記中，以便對搜索引擎提供我們網頁的附加信息。下面是我們將使用這些模式的屬性： *Person模式* ?itemprop="image" ?itemprop="name" ?itemprop="jobTitle" ?itemprop="telephone" ?itemprop="email" ?itemprop="url" *PostalAddress架構* ?itemprop="streetAddress" ?itemprop="addressLocality" ?itemprop="addressRegion" ?itemprop="postalCode" ?itemprop="addressCountry" 聯系人和社會化媒體鏈接段落的最終頁面 ~~~  <section id="contact-details"> <div itemscope itemtype="http://schema.org/Person">  <div class="header_1"> <img src="images/profile.jpg" itemprop="image" width="250" height="250" alt="Your Name" /> </div>   <div class="header_2"> <h1><span itemprop="name">Your Name</span></h1> <h3><span itemprop="jobTitle">Web Developer / Designer</span></h3>  <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>  <ul class="info_2"> <li class="phone"><span itemprop="telephone">(000) 000-0000</span></li> <li class="email"><a href="mailto:your-email@gmail.com" itemprop="email">your-email@gmail.com</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>  </div> </section>  ~~~ ~~~  <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>  ~~~ ________________________________________ **第4步：添加Schema.org微數據-ITEMLIST列表** **![](https://box.kancloud.cn/2016-08-09_57a9a29c27983.jpg)** ? 接下來我們要添加的標記模式是 ITEMLIST。 Itemscope元素和ItemType屬性 ? ITEMLIST模式的itemscope元素和ItemType屬性將被像如下這樣放置在技能段落： ~~~  <div itemscope itemtype="http://schema.org/ItemList"> Rest of Code Block Here </div>  ~~~ Itemprop屬性 ? 在適當的<span></span>標記中添加“ itemprop “屬性。下面是我們將在這個模式中使用的屬性： *ITEMLIST模式* ?itemprop =“itemListElement” 技能段落的最終頁面 ~~~  <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>  ~~~ ________________________________________ **步驟5：添加Schema.org微數據-組織** **![](https://box.kancloud.cn/2016-08-09_57a9a29c3cf95.jpg)** ? 下一步，我們將添加Organization模式。 Itemscope元素和ItemType屬性 ? Organization模式的itemscope元素和ItemType屬性將會被放置在“Experience”段落里所列出的 “Position”元素里，如下所示： ~~~  <div itemscope itemtype="http://schema.org/Organization"> Rest of Code Block Here </div>  <div itemscope itemtype="http://schema.org/Organization"> Rest of Code Block Here </div>  <div itemscope itemtype="http://schema.org/Organization"> Rest of Code Block Here </div> ~~~ Itemprop屬性 ? 在適當的<span></span>標記中添加“ itemprop “屬性。下面是我們將在這個模式中使用的屬性： *Organization模式* ?itemprop="jobTitle" ?itemprop="name" ?itemprop="description" 工作經歷段落的最終頁面 ~~~ <section id="experience">  <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>  <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>  <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> ~~~ ________________________________________ **第六步：添加Schema.org微數據-Article** **![](https://box.kancloud.cn/2016-08-09_57a9a29c63704.jpg)** ? 接下來，我們將把Article模式添加到頁面。 Article的Itemscope元素和ItemType屬性 ? Article模式的itemscope元素和ItemType屬性將會被放置在“Publications”段落里所列出的 “Article”元素里，如下所示： ~~~ <section id="publications"> <div itemscope itemtype="http://schema.org/Article"> Rest of Code Block Here </div> </section> ~~~ Itemprop屬性 ? 在適當的<span></span>標記中添加“ itemprop “屬性。下面是我們將在這個模式中使用的屬性： *Article模式* ?itemprop="name" ?itemprop="url" Publications段落的最終頁面 ~~~ <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> ~~~ ________________________________________ **第7步：添加Schema.org微數據- EducationalOrganization和PostalAddress** **![](https://box.kancloud.cn/2016-08-09_57a9a29c75af6.jpg)** ? 下一步我們將把EducationalOrganization和PostalAddress模式添加到頁面。 EducationalOrganization的Itemscope元素和ItemType屬性 ? EducationalOrganization模式的itemscope元素和ItemType屬性將會被放置在“Education”段落里，如下所示： ~~~ <section id="education"> <div itemscope itemtype="http://schema.org/EducationalOrganization"> Rest of Code Block Here </div> </section> ~~~ PostalAddress的Itemscope元素和ItemType屬性 ? PostalAddress模式的itemscope元素和ItemType屬性嵌套在EducationalOrganization模式里，將會被放置在“Education”段落包含地址信息的代碼里，如下所示： ~~~ <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屬性 ? 在適當的<span></span>標記中添加“ itemprop “屬性。下面是我們將在這個模式中使用的屬性： *EducationalOrganization模式* ?itemprop="name" ?itemprop="url" *PostalAddress架構* ?itemprop="streetAddress" ?itemprop="addressLocality" ?itemprop="addressRegion" ?itemprop="postalCode" ?itemprop="addressCountry" Education段落的最終頁面 ~~~ <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> ~~~ ________________________________________ **關于作者署名標記** ![](https://box.kancloud.cn/2016-08-09_57a9a29c8bf2a.jpg) ? 在谷歌搜索結果中用圖像顯示作者署名標記（John Resig）。 ? 在2011年6月，谷歌開始支持“作者署名標記”。通過使用例如REL =“作者” 和 rel =“我”的標記，搜索引擎可以識別網絡上同一作者創建的內容。使用作者署名標記，有多個作者的網站可以將所有的文章分別鏈接到不同作者所屬的特定頁面。 ? 多作者的網站需要使用rel=”author”標簽來將獨立的文章鏈接到合適的作者頁面。如果作者頁面包含使用了rel =“me”標簽的一個鏈接到作者“Google個人資料”的鏈接，作者信息就可能會出現在搜索結果中。 ? 為了幫助用戶發現高質量的內容，谷歌正在試驗把作者信息顯示在搜索引擎結果里。此功能正在逐步推出，并可能成為搜索引擎結果和排名里一個非常重要的部分。 ________________________________________ REL標簽 ? 一個網頁簡歷網站模版的聯系人和社會化媒體鏈接段落包含鏈接到一個主網站和社會化媒體頁面的URL。“REL”屬性需要被添加到這些段落的鏈接上，使得作者署名標記得以實現。作者署名標記允許搜索引擎來識別網絡上同一作者所創建的內容。 ? 有兩個作者署名標記相關的特定標簽： ?rel="me" ?rel="author" ? 簡歷網站頁面的大多數鏈接指向關于同一個人的站點。所以我們添加了rel =“me”的標簽。添加rel =“author”標簽用于谷歌個人資料鏈接。根據你在何處發表的在線簡歷，您可能需要為“Google個人資料”鏈接使用rel =“me”標簽來代替。 ________________________________________ **第8步：創建一個谷歌個人資料** 如果你想開始在網上通過使用作者署名標記標識你的原文，你首先需要創建一個“Google個人資料”。如果你已經有一個谷歌個人資料頁，那么你應該更新您的個人資料（添加自己的照片，關于自己的信息，職業等）。您還需要確保有一個+1的選項卡顯示在頁面上。 *“如果您的Google個人資料中包括一個良好的、明確的內容，它將會有資格作為縮略圖出現在搜索結果里”。* ________________________________________ **第9步：鏈接網頁到你的Google個人資料** ? 要為一個網頁發布著作權，你需要做兩件事： ?將該網頁鏈接到你的“Google個人資料” ?更新“Google個人資料”鏈接到你網站的主頁。 ? 您可以使用文本鏈接將內容鏈接到你的Google個人資料： ~~~ <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”。如下面的截圖所示。 ![](https://box.kancloud.cn/2016-08-09_57a9a29ca8623.jpg) “錯誤：作者個人資料頁沒有一個到Google個人資料的rel = me式鏈接“的截圖 ? 用John Resig為例： ?在John Resig個人站點的關于頁面，他使用rel =“me“鏈接到了Google個人資料。 ?在John Resig的Google+資料中，他鏈接到了個人站點的主頁和關于頁面。 ________________________________________ **第10步：完整的Google作者署名表（非常重要）** ? 一旦您添加了Schema.org的微數據和完成步驟8和9，完善并提交谷歌作者署名申請表。 ? 直到谷歌作者署名表格完成并提交前，您的作者署名標記可能無法正常工作。 ________________________________________ **第11步：利用富摘要測試工具測試微數據標記** ![](https://box.kancloud.cn/2016-08-09_57a9a29cc8a83.jpg) 點擊圖片以查看完整的測試結果 ? 您可以通過使用谷歌富摘要測試工具來檢查你的網頁，以確保谷歌在搜索結果里能正確解析，并顯示你的微數據標記。此測試工具可以檢查包括幾個類型的結構化的數據標記，微觀數據，微格式和 RDFa。 ? 注：谷歌富摘要測試工具處于測試階段，可能會有意料之外的結果。在結果的完整尺寸截圖里包括一個錯誤：“警告：缺少必要的參數fn”。Schema.org不使用“fn”標簽，但是微格式使用這個標簽。這最有可能是一個故障。 ________________________________________ **全部完成！** ? 您現在已經使用HTML5和Schema.org微數據創建了一個精美的在線簡歷，可以在搜索引擎結果里提供你的相關信息。此外，通過使用作者署名標記，你可以幫助搜索引擎識別網絡上所有你自己的原創內容！ ? 還有什么問題？在評論里告訴我們，并謝謝你的閱讀！