當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

如何使用HTML5创建在线精美简历

發(fā)布時(shí)間：2025/3/17 HTML 56 豆豆

生活随笔收集整理的這篇文章主要介紹了如何使用HTML5创建在线精美简历小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

譯自：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-an-html5-microdata-powered-resume/

譯者：蔣宇捷（轉(zhuǎn)載請(qǐng)標(biāo)明出處http://blog.csdn.net/hfahe）

Janet Wagner于2011 年9月27日

教程細(xì)節(jié)
? 概要：HTML5的微數(shù)據(jù)API
? 難度：初級(jí)/中級(jí)
? 估計(jì)完成時(shí)間： 60-90分鐘
將創(chuàng)建的最終產(chǎn)品

下載源文件?示例頁面? ? 2009年5月，谷歌推出了富摘要信息，在Google的搜索結(jié)果顯示一個(gè)小塊，使用戶更容易決定哪些網(wǎng)頁是他們搜索相關(guān)的信息。在2011年6月，谷歌宣布建立Schema.org，從谷歌、Bing和雅虎創(chuàng)建結(jié)構(gòu)化數(shù)據(jù)的標(biāo)記模式。
? ? 本教程演示了如何采用Schema.org的微數(shù)據(jù)創(chuàng)建一個(gè)在線的簡(jiǎn)歷。本教程還包括關(guān)于如何使用作者署名標(biāo)記！（譯者注：Schema.org相關(guān)信息可參見http://www.rwwchina.com/2011/06/is_schemaorg_really_a_google_land_grab.html）
________________________________________
附加內(nèi)容包括
? ? 本教程示例是一個(gè)頁面的網(wǎng)站模板，你可以自由的作為你的網(wǎng)上簡(jiǎn)歷使用。作為多余的獎(jiǎng)勵(lì)，多種顏色版本都包含在源文件的zip包中：深綠色，淺綠色，深藍(lán)色和淺藍(lán)色。
? ? 請(qǐng)注意，這并不是網(wǎng)頁設(shè)計(jì)或CSS教程，所以只會(huì)提到HTML5和Schema.org的微數(shù)據(jù)標(biāo)記。
? ? 現(xiàn)在，讓我們開始吧！
________________________________________
第1步：CSS
? ? 創(chuàng)建一個(gè)名為“style.css”的CSS樣式表，包括下面的代碼。不要擔(dān)心，這相當(dāng)簡(jiǎn)單，并且理解它不是本教程的必須。
/* 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步：頁面
? ? 下一步，我們需要一個(gè)HTML文件。下面是一個(gè)我們都可能熟悉的基本布局。
<!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>________________________________________
關(guān)于頁面的幾個(gè)說明
HTML5 Shiv
? ? 由于Schema.org微數(shù)據(jù)是基于HTML5微數(shù)據(jù)的規(guī)范，HTML5的標(biāo)記被用來創(chuàng)建一頁簡(jiǎn)歷的網(wǎng)站模板。不幸的是，舊的網(wǎng)頁瀏覽器如IE7和IE8不承認(rèn)某些HTML5元素。在這些舊的瀏覽器中，使用HTML5編寫的頁面將無法正確呈現(xiàn)。
? ? 當(dāng)在IE8里點(diǎn)擊圖片查看全圖時(shí)，下面是在線簡(jiǎn)歷示例的截圖：
? ? 為了解決這些舊IE瀏覽器版本的問題，在標(biāo)簽間添加了如下的代碼（在CSS樣式表下面）：
? ? 此代碼是一個(gè)HTML5 JavaScript shim，用于讓IE識(shí)別和渲染HTML5元素。
? ? 注：在IE9和其他現(xiàn)代瀏覽器中不需要使用HTML5 JavaScript shim。
定義列表
? ? 我們?cè)跇?biāo)記中使用<dd></dd>而不是無序列表來定義列表。這是因?yàn)楫?dāng)考慮到每個(gè)項(xiàng)目都有一個(gè)標(biāo)題和描述時(shí)更有意義。
Section vs Article
? ? 關(guān)于HTML5的Section和Article元素的使用似乎有一些混亂。我們?cè)陧撁嬷惺褂肧ection元素，因?yàn)闆]有簡(jiǎn)歷的段落是獨(dú)立的內(nèi)容。HTML5的Article元素被用在獨(dú)立的內(nèi)容上，例如博客文章或新聞報(bào)道。本文很好的解釋了HTML5 Section和Acricle元素之間的差異。
________________________________________
第三步：添加Schema.org微數(shù)據(jù)-Person和PostalAddress
? ? 我們首先要添加的模式類型是Person和PostalAddress。
Itemscope元素和ItemType屬性
? ? 我們將一個(gè)itemscope元素添加到<div></div>標(biāo)簽上。
<div itemscope itemtype="http://schema.org/Person"> Content that contains information about a Person </div>? ? Itemscope元素和Person模式的ItemType 屬性都將被放在簡(jiǎn)歷頁面聯(lián)系方式和社會(huì)化媒體鏈接的部分，像如下所示：
 <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屬性添加到適當(dāng)?shù)膕pan標(biāo)記中，以便對(duì)搜索引擎提供我們網(wǎng)頁的附加信息。下面是我們將使用這些模式的屬性：
Person模式
?itemprop="image"
?itemprop="name"
?itemprop="jobTitle"
?itemprop="telephone"
?itemprop="email"
?itemprop="url"
PostalAddress架構(gòu)
?itemprop="streetAddress"
?itemprop="addressLocality"
?itemprop="addressRegion"
?itemprop="postalCode"
?itemprop="addressCountry"
聯(lián)系人和社會(huì)化媒體鏈接段落的最終頁面
 <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微數(shù)據(jù)-ITEMLIST列表

? ? 接下來我們要添加的標(biāo)記模式是 ITEMLIST。
Itemscope元素和ItemType屬性
? ? ITEMLIST模式的itemscope元素和ItemType屬性將被像如下這樣放置在技能段落：
 <div itemscope itemtype="http://schema.org/ItemList"> Rest of Code Block Here </div> Itemprop屬性
? ? 在適當(dāng)?shù)?lt;span></span>標(biāo)記中添加“ itemprop “屬性。下面是我們將在這個(gè)模式中使用的屬性：
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微數(shù)據(jù)-組織

? ? 下一步，我們將添加Organization模式。
Itemscope元素和ItemType屬性
? ? Organization模式的itemscope元素和ItemType屬性將會(huì)被放置在“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屬性
? ? 在適當(dāng)?shù)?lt;span></span>標(biāo)記中添加“ itemprop “屬性。下面是我們將在這個(gè)模式中使用的屬性：
Organization模式
?itemprop="jobTitle"
?itemprop="name"
?itemprop="description"
工作經(jīng)歷段落的最終頁面
<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微數(shù)據(jù)-Article

? ? 接下來，我們將把Article模式添加到頁面。
Article的Itemscope元素和ItemType屬性
? ? Article模式的itemscope元素和ItemType屬性將會(huì)被放置在“Publications”段落里所列出的 “Article”元素里，如下所示：
<section id="publications"> <div itemscope itemtype="http://schema.org/Article"> Rest of Code Block Here </div> </section>Itemprop屬性
? ? 在適當(dāng)?shù)?lt;span></span>標(biāo)記中添加“ itemprop “屬性。下面是我們將在這個(gè)模式中使用的屬性：
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微數(shù)據(jù)- EducationalOrganization和PostalAddress

? ? 下一步我們將把EducationalOrganization和PostalAddress模式添加到頁面。
EducationalOrganization的Itemscope元素和ItemType屬性
? ? EducationalOrganization模式的itemscope元素和ItemType屬性將會(huì)被放置在“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模式里，將會(huì)被放置在“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屬性
? ? 在適當(dāng)?shù)?lt;span></span>標(biāo)記中添加“ itemprop “屬性。下面是我們將在這個(gè)模式中使用的屬性：
EducationalOrganization模式
?itemprop="name"
?itemprop="url"
PostalAddress架構(gòu)
?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>________________________________________
關(guān)于作者署名標(biāo)記

?? ? 在谷歌搜索結(jié)果中用圖像顯示作者署名標(biāo)記（John Resig）。
? ? 在2011年6月，谷歌開始支持“作者署名標(biāo)記”。通過使用例如REL =“作者” 和 rel =“我”的標(biāo)記，搜索引擎可以識(shí)別網(wǎng)絡(luò)上同一作者創(chuàng)建的內(nèi)容。使用作者署名標(biāo)記，有多個(gè)作者的網(wǎng)站可以將所有的文章分別鏈接到不同作者所屬的特定頁面。
? ? 多作者的網(wǎng)站需要使用rel=”author”標(biāo)簽來將獨(dú)立的文章鏈接到合適的作者頁面。如果作者頁面包含使用了rel =“me”標(biāo)簽的一個(gè)鏈接到作者“Google個(gè)人資料”的鏈接，作者信息就可能會(huì)出現(xiàn)在搜索結(jié)果中。
? ? 為了幫助用戶發(fā)現(xiàn)高質(zhì)量的內(nèi)容，谷歌正在試驗(yàn)把作者信息顯示在搜索引擎結(jié)果里。此功能正在逐步推出，并可能成為搜索引擎結(jié)果和排名里一個(gè)非常重要的部分。
________________________________________
REL標(biāo)簽
? ? 一個(gè)網(wǎng)頁簡(jiǎn)歷網(wǎng)站模版的聯(lián)系人和社會(huì)化媒體鏈接段落包含鏈接到一個(gè)主網(wǎng)站和社會(huì)化媒體頁面的URL。“REL”屬性需要被添加到這些段落的鏈接上，使得作者署名標(biāo)記得以實(shí)現(xiàn)。作者署名標(biāo)記允許搜索引擎來識(shí)別網(wǎng)絡(luò)上同一作者所創(chuàng)建的內(nèi)容。
? ? 有兩個(gè)作者署名標(biāo)記相關(guān)的特定標(biāo)簽：
?rel="me"
?rel="author"
? ? 簡(jiǎn)歷網(wǎng)站頁面的大多數(shù)鏈接指向關(guān)于同一個(gè)人的站點(diǎn)。所以我們添加了rel =“me”的標(biāo)簽。添加rel =“author”標(biāo)簽用于谷歌個(gè)人資料鏈接。根據(jù)你在何處發(fā)表的在線簡(jiǎn)歷，您可能需要為“Google個(gè)人資料”鏈接使用rel =“me”標(biāo)簽來代替。
________________________________________
第8步：創(chuàng)建一個(gè)谷歌個(gè)人資料
如果你想開始在網(wǎng)上通過使用作者署名標(biāo)記標(biāo)識(shí)你的原文，你首先需要?jiǎng)?chuàng)建一個(gè)“Google個(gè)人資料”。
如果你已經(jīng)有一個(gè)谷歌個(gè)人資料頁，那么你應(yīng)該更新您的個(gè)人資料（添加自己的照片，關(guān)于自己的信息，職業(yè)等）。
您還需要確保有一個(gè)+1的選項(xiàng)卡顯示在頁面上。
“如果您的Google個(gè)人資料中包括一個(gè)良好的、明確的內(nèi)容，它將會(huì)有資格作為縮略圖出現(xiàn)在搜索結(jié)果里”。
________________________________________
第9步：鏈接網(wǎng)頁到你的Google個(gè)人資料
? ? 要為一個(gè)網(wǎng)頁發(fā)布著作權(quán)，你需要做兩件事：
?將該網(wǎng)頁鏈接到你的“Google個(gè)人資料”
?更新“Google個(gè)人資料”鏈接到你網(wǎng)站的主頁。
? ? 您可以使用文本鏈接將內(nèi)容鏈接到你的Google個(gè)人資料：
<a href="[https://plus.google.com/your_profile]?rel=me">Google+</a>? ? 或使用“Google個(gè)人資料”按鈕代碼：
<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>? ? 谷歌最近改變了作者署名標(biāo)記的說明，這將會(huì)影響到rel = “me“和rel =”author“標(biāo)簽的使用。新的說明指明在文本和個(gè)人資料按鈕鏈接上都要使用rel =“author“標(biāo)簽。然而，rel =“me”需要用來替代rel =“author”。如下面的截圖所示。
“錯(cuò)誤：作者個(gè)人資料頁沒有一個(gè)到Google個(gè)人資料的rel = me式鏈接“的截圖? ? 用John Resig為例：
?在John Resig個(gè)人站點(diǎn)的關(guān)于頁面，他使用rel =“me“鏈接到了Google個(gè)人資料。
?在John Resig的Google+資料中，他鏈接到了個(gè)人站點(diǎn)的主頁和關(guān)于頁面。
________________________________________
第10步：完整的Google作者署名表（非常重要）
? ? 一旦您添加了Schema.org的微數(shù)據(jù)和完成步驟8和9，完善并提交谷歌作者署名申請(qǐng)表。
? ? 直到谷歌作者署名表格完成并提交前，您的作者署名標(biāo)記可能無法正常工作。
________________________________________
第11步：利用富摘要測(cè)試工具測(cè)試微數(shù)據(jù)標(biāo)記
點(diǎn)擊圖片以查看完整的測(cè)試結(jié)果? ? 您可以通過使用谷歌富摘要測(cè)試工具來檢查你的網(wǎng)頁，以確保谷歌在搜索結(jié)果里能正確解析，并顯示你的微數(shù)據(jù)標(biāo)記。此測(cè)試工具可以檢查包括幾個(gè)類型的結(jié)構(gòu)化的數(shù)據(jù)標(biāo)記，微觀數(shù)據(jù)，微格式和 RDFa。
? ? 注：谷歌富摘要測(cè)試工具處于測(cè)試階段，可能會(huì)有意料之外的結(jié)果。在結(jié)果的完整尺寸截圖里包括一個(gè)錯(cuò)誤：“警告：缺少必要的參數(shù)fn”。Schema.org不使用“fn”標(biāo)簽，但是微格式使用這個(gè)標(biāo)簽。這最有可能是一個(gè)故障。
________________________________________
全部完成！
? ? 您現(xiàn)在已經(jīng)使用HTML5和Schema.org微數(shù)據(jù)創(chuàng)建了一個(gè)精美的在線簡(jiǎn)歷，可以在搜索引擎結(jié)果里提供你的相關(guān)信息。此外，通過使用作者署名標(biāo)記，你可以幫助搜索引擎識(shí)別網(wǎng)絡(luò)上所有你自己的原創(chuàng)內(nèi)容！
? ? 還有什么問題？在評(píng)論里告訴我們，并謝謝你的閱讀！

總結(jié)

以上是生活随笔為你收集整理的如何使用HTML5创建在线精美简历的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：命令行小白执行第三步时出错，具体情况如下
下一篇：前端开发书签（一）