189 8069 5689
教程细节
◆ 概要：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;
- }
#p#
第2步：页面
下一步，我们需要一个HTML文件。下面是一个我们都可能熟悉的基本布局。
Online Resume of Your Name
#p#
关于页面的几个说明
HTML5 Shiv
由于Schema.org微数据是基于HTML5微数据的规范，HTML5的标记被用来创建一页简历的网站模板。不幸的是，旧的网页浏览器如IE7和IE8不承认某些HTML5元素。在这些旧的浏览器中，使用HTML5编写的页面将无法正确呈现。
当在IE8里点击图片查看全图时，下面是在线简历示例的截图：
为了解决这些旧IE浏览器版本的问题，在标签间添加了如下的代码(在CSS样式表下面)：
此代码是一个HTML5 JavaScript shim，用于让IE识别和渲染HTML5元素。
注：在IE9和其他现代浏览器中不需要使用HTML5 JavaScript shim。
定义列表
我们在标记中使用
而不是无序列表来定义列表。这是因为当考虑到每个项目都有一个标题和描述时更有意义。Section vs Article
关于HTML5的Section和Article元素的使用似乎有一些混乱。我们在页面中使用Section元素，因为没有简历的段落是独立的内容。HTML5的Article元素被用在独立的内容上，例如博客文章或新闻报道。本文很好的解释了HTML5 Section和Acricle元素之间的差异 。
第三步：添加Schema.org微数据-Person和PostalAddress
我们首先要添加的模式类型是Person和PostalAddress。
Itemscope元素和ItemType属性
我们将一个itemscope元素添加到
标签上。
- Content that contains information about a Person
- 分享题目：如何使用HTML5创建在线精美简历
分享URL：http://cdxtjz.cn/article/codjjdg.html