如何使用HTML5创建在线精美简历-白红宇

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

阅读量：5280 次

发布时间：2019-06-14

本文共 27097 字，大约阅读时间需要 90 分钟。

译自：

译者：蒋宇捷（转载请标明出处）

Janet Wagner于2011 年9月27日

教程细节

• 概要：HTML5的微数据API

• 难度：初级/中级

• 估计完成时间： 60-90分钟

将创建的最终产品

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里点击图片查看全图时，下面是在线简历示例的截图：

为了解决这些旧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列表

接下来我们要添加的标记模式是 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微数据-组织

下一步，我们将添加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

接下来，我们将把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”。如下面的截图所示。