译自：[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分钟
**将创建的最终产品**
[下载源文件](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 -->
<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: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>
<!-- 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>
~~~
________________________________________
**关于页面的几个说明**
HTML5 Shiv
由于Schema.org微数据是基于HTML5微数据的规范，HTML5的标记被用来创建一页简历的网站模板。不幸的是，旧的网页浏览器如IE7和IE8不承认某些HTML5元素。在这些旧的浏览器中，使用HTML5编写的页面将无法正确呈现。
当在IE8里点击图片查看全图时，下面是在线简历示例的截图：
为了解决这些旧IE浏览器版本的问题，在标签间添加了如下的代码（在CSS样式表下面）：
~~~
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
~~~
此代码是一个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 属性都将被放在简历页面联系方式和社会化媒体链接的部分，像如下所示：
~~~
<!-- 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属性
需要把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"
联系人和社会化媒体链接段落的最终页面
~~~
<!-- 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: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>
<!-- 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 -->
~~~
________________________________________
**第4步：添加Schema.org微数据-ITEMLIST列表**
****
接下来我们要添加的标记模式是 ITEMLIST。
Itemscope元素和ItemType属性
ITEMLIST模式的itemscope元素和ItemType属性将被像如下这样放置在技能段落：
~~~
<!-- Begin Skills Section -->
<div itemscope itemtype="http://schema.org/ItemList">
Rest of Code Block Here
</div>
<!-- End Skills Section -->
~~~
Itemprop属性
在适当的<span></span>标记中添加“ itemprop “属性。下面是我们将在这个模式中使用的属性：
*ITEMLIST模式*
•itemprop =“itemListElement”
技能段落的最终页面
~~~
<!-- 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 -->
~~~
________________________________________
**步骤5：添加Schema.org微数据-组织**
****
下一步，我们将添加Organization模式。
Itemscope元素和ItemType属性
Organization模式的itemscope元素和ItemType属性将会被放置在“Experience”段落里所列出的 “Position”元素里，如下所示：
~~~
<!-- 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属性
在适当的<span></span>标记中添加“ itemprop “属性。下面是我们将在这个模式中使用的属性：
*Organization模式*
•itemprop="jobTitle"
•itemprop="name"
•itemprop="description"
工作经历段落的最终页面
~~~
<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>
~~~
________________________________________
**第六步：添加Schema.org微数据-Article**
****
接下来，我们将把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**
****
下一步我们将把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>
~~~
________________________________________
**关于作者署名标记**
在谷歌搜索结果中用图像显示作者署名标记（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”。如下面的截图所示。
“错误：作者个人资料页没有一个到Google个人资料的rel = me式链接“的截图
用John Resig为例：
•在John Resig个人站点的关于页面，他使用rel =“me“链接到了Google个人资料。
•在John Resig的Google+资料中，他链接到了个人站点的主页和关于页面。
________________________________________
**第10步：完整的Google作者署名表（非常重要）**
一旦您添加了Schema.org的微数据和完成步骤8和9，完善并提交谷歌作者署名申请表 。
直到谷歌作者署名表格完成并提交前，您的作者署名标记可能无法正常工作。
________________________________________
**第11步：利用富摘要测试工具测试微数据标记**
点击图片以查看完整的测试结果
您可以通过使用谷歌富摘要测试工具来检查你的网页，以确保谷歌在搜索结果里能正确解析，并显示你的微数据标记。此测试工具可以检查包括几个类型的结构化的数据标记，微观数据， 微格式 和 RDFa。
注：谷歌富摘要测试工具处于测试阶段，可能会有意料之外的结果。在结果的完整尺寸截图里包括一个错误：“警告：缺少必要的参数fn”。Schema.org不使用“fn”标签，但是微格式使用这个标签。这最有可能是一个故障。
________________________________________
**全部完成！**
您现在已经使用HTML5和Schema.org微数据创建了一个精美的在线简历，可以在搜索引擎结果里提供你的相关信息。此外，通过使用作者署名标记，你可以帮助搜索引擎识别网络上所有你自己的原创内容！
还有什么问题？在评论里告诉我们，并谢谢你的阅读！
- 前言
- AutoPager的简单实现
- 利用CSS3特性巧妙实现漂亮的DIV箭头
- IE9在Win7下任务栏新特性简介
- 浏览器九宫格的简单实现
- Raphael js库简介
- 使用CSS3构建Ajax加载动画
- 用CSS3创建动画价格表
- 用CSS3实现浏览器的缩放功能
- 用纯CSS3实现QQ LOGO
- 用CSS3创建旋转载入器
- 使用Javascript开发移动应用程序
- 用HTML5创建超酷图像灰度渐变效果
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
- 仅用CSS创建立体旋转幻灯片
- 如何创建跨浏览器的HTML5表单
- 用CSS3实现动画进度条
- HTML5 Guitar Tab Player
- 奇妙的HTML5 Canvas动画实例
- 谈HTML5和CSS3的国际化支持
- 实现跨浏览器的HTML5占位符
- 前端开发必备工具：WhatFont Bookmarklet-方便的查询网页上的字体
- 使用HTML5和CSS3来创建幻灯片
- HTML5之美
- 如何使用HTML5创建在线精美简历
- 以小见大、由浅入深-谈如何面试Javascript工程师
- 快速入门：HTML5强大的Details元素
- 用CSS3实现图像风格
- HTML5视频字幕与WebVTT
- 用纯CSS3实现Path华丽动画
- 用3个步骤实现响应式网页设计
- 遇见CSS3滤镜
- 关于CSS3滤镜的碎念
- 用纯CSS3绘制萌系漫画人物动态头像
- CSS3新的鼠标样式介绍
- 用HTML5献上爱的3D玫瑰
- 对HTML5 Device API相关规范的解惑
- 如何使用HTML5实现拍照上传应用
- 2012第一季度国外HTML5移动开发趋势
- HTML5新特性：范围样式
- 百度开发者大会-《用HTML5新特性开发移动App》PPT分享
- Chrome 19对于HTML5最新支持的动态：电池状态API，全屏API，震动API，语音API
- 遇见Javascript类型数组(Typed Array)
- 用HTML5 Audio API开发游戏音乐
- 用HTML5实现人脸识别
- 用Javascript实现人脸美容
- Chrome 20对于HTML5最新支持的动态：颜色输入，网络信息API，CSS着色器
- 用HTML5实现手机摇一摇的功能
- 用HTML5实现iPad应用无限平滑滚动
- 用非响应式设计构建跨端Web App
- 了解SVG
- HTML5图像适配介绍
- HTML5安全：内容安全策略（CSP）简介
- HTML5安全：CORS（跨域资源共享）简介
- 用CSS3 Region和3D变换实现书籍翻页效果
- 谈谈移动App的思维误区
- Chrome新特性：文件夹拖拽支持
- 《关注HTML5安全》
- HTML5安全风险详析之一：CORS攻击
- HTML5安全风险详析之二：Web Storage攻击
- HTML5图像适配最新进展：响应式图片规范草案
- HTML5移动Web App相关标准状态及路线图
- HTML5安全风险详析之三：WebSQL攻击
- Chrome引入WebRTC支持视频聊天App
- HTML5安全风险详析之四：Web Worker攻击
- HTML5安全风险详析之五：劫持攻击
- HTML5安全风险详析之六：API攻击
- HTML5安全攻防详析之七：新标签攻击
- 在iOS Safari中播放离线音频
- 使用WebRTC实现远程屏幕共享
- Firefox、Android、iOS遇见WebRTC
- HTML5光线传感器简介
- HTML5安全攻防详析之八：Web Socket攻击
- HTML5安全攻防详析之完结篇：HTML5对安全的改进
- 激动人心！在网页上通过语音输入文字 - HTML5 Web Speech API介绍
- Web滚动性能优化实战
- 用CSS3设计响应式导航菜单
- 用HTML5构建高性能视差网站
- 漫谈@supports与CSS3条件规则
- HTML5下载属性简介
- 如何开发优秀的HTML5游戏？-迪斯尼《寻找奥兹之路》游戏技术详解（一）
- 如何开发优秀的HTML5游戏？-迪斯尼《寻找奥兹之路》游戏技术详解（二）
- 趋势：Chrome为打包应用提供强大新特性
- 从HTML5移动应用现状谈发展趋势
- 基于HTML5的Web跨设备超声波通信方案