Home思洋影视事业部网站建设知识库
0 Comments

如何使用HTML 5创建在线精美简历(4)

发布于：2013-09-02  |   作者：广州网站建设  |   已聚集：人围观

第4步：添加Schema.org微数据-ITEMLIST列表

 

 

接下来我们要添加的标记模式是 ITEMLIST。

Itemscope元素和ItemType属性

ITEMLIST模式的itemscope元素和ItemType属性将被像如下这样放置在技能段落：



    
	
  1. 
		<!-- Begin Skills Section --> 
    2. 
	
  2. 
		<div itemscope itemtype="http://schema.org/ItemList"> 
    3. 
	
  3. 
		   
    4. 
	
  4. 
		Rest of Code Block Here  
    5. 
	
  5. 
		   
    6. 
	
  6. 
		</div> 
    7. 
	
  7. 
		<!-- End Skills Section --> 
    8. 




	Itemprop属性



	在适当的<span></span>标记中添加“ itemprop “属性。下面是我们将在这个模式中使用的属性：

	广州网站建设,网站建设,广州网页设计,广州网站设计



	ITEMLIST模式



	◆ itemprop =“itemListElement”



	技能段落的最终页面




    
	
  1. 
		<!-- Begin Skills Section --> 
    2. 
	
  2. 
		<div itemscope itemtype="http://schema.org/ItemList"> 
    3. 
	
  3. 
		   
    4. 
	
  4. 
		<dl> 
    5. 
	
  5. 
		<dt itemprop="name">Skills:</dt> 
    6. 
	
  6. 
		<dd> 
    7. 
	
  7. 
		   
    8. 
	
  8. 
		<section id="skills"> 
    9. 
	
  9. 
		<ul class="list1"> 
    10. 
	
  10. 
		<li itemprop="itemListElement">XHTML</li> 
    11. 
	
  11. 
		<li itemprop="itemListElement">HTML5</li> 
    12. 
	
  12. 
		<li itemprop="itemListElement">PHP</li> 
    13. 
	
  13. 
		<li itemprop="itemListElement">JavaScript</li> 
    14. 
	
  14. 
		<li itemprop="itemListElement">Magento</li> 
    15. 
	
  15. 
		<li itemprop="itemListElement">WordPress</li> 
    16. 
	
  16. 
		</ul> 
    17. 
	
  17. 
		<ul class="list2"> 
    18. 
	
  18. 
		<li itemprop="itemListElement">HTML</li> 
    19. 
	
  19. 
		<li itemprop="itemListElement">CSS</li> 
    20. 
	
  20. 
		<li itemprop="itemListElement">MySQL</li> 
    21. 
	
  21. 
		<li itemprop="itemListElement">jQuery</li> 
    22. 
	
  22. 
		<li itemprop="itemListElement">CMS Made Simple</li> 
    23. 
	
  23. 
		<li itemprop="itemListElement">Photoshop</li> 
    24. 
	
  24. 
		</ul> 
    25. 
	
  25. 
		</section> 
    26. 
	
  26. 
		   
    27. 
	
  27. 
		</dd> 
    28. 
	
  28. 
		</dl> 
    29. 
	
  29. 
		   
    30. 
	
  30. 
		</div> 
    31. 
	
  31. 
		<!-- End Skills Section --> 
    32. 




	步骤5：添加Schema.org微数据-组织



	



	下一步，我们将添加Organization模式。



	Itemscope元素和ItemType属性



	Organization模式的itemscope元素和ItemType属性将会被放置在“Experience”段落里所列出的 “Position”元素里，如下所示：

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		<!-- Position #1 --> 
    2. 
	
  2. 
		<div itemscope itemtype="http://schema.org/Organization"> 
    3. 
	
  3. 
		   
    4. 
	
  4. 
		Rest of Code Block Here  
    5. 
	
  5. 
		   
    6. 
	
  6. 
		</div> 
    7. 
	
  7. 
		   
    8. 
	
  8. 
		<!-- Position #2 --> 
    9. 
	
  9. 
		<div itemscope itemtype="http://schema.org/Organization"> 
    10. 
	
  10. 
		   
    11. 
	
  11. 
		Rest of Code Block Here  
    12. 
	
  12. 
		   
    13. 
	
  13. 
		</div> 
    14. 
	
  14. 
		   
    15. 
	
  15. 
		<!-- Position #3 --> 
    16. 
	
  16. 
		<div itemscope itemtype="http://schema.org/Organization"> 
    17. 
	
  17. 
		   
    18. 
	
  18. 
		Rest of Code Block Here  
    19. 
	
  19. 
		   
    20. 
	
  20. 
		</div> 
    21. 




	Itemprop属性



	在适当的<span></span>标记中添加“ itemprop “属性。下面是我们将在这个模式中使用的属性：



	Organization模式



	◆  itemprop="jobTitle"



	◆ itemprop="name"



	◆  itemprop="description"



	工作经历段落的最终页面




    
	
  1. 
		<section id="experience"> 
    2. 
	
  2. 
		   
    3. 
	
  3. 
		<!-- Position #1 --> 
    4. 
	
  4. 
		<div itemscope itemtype="http://schema.org/Organization"> 
    5. 
	
  5. 
		   
    6. 
	
  6. 
		<h2 class="top"><span itemprop="jobTitle">Web Developer / Designer</span></h2> 
    7. 
	
  7. 
		<p class="bus1"><span itemprop="name">Company Name 1</span></p> 
    8. 
	
  8. 
		<p class="time">February 2009 - Present</p> 
    9. 
	
  9. 
		   
    10. 
	
  10. 
		<p itemprop="description"> 
    11. 
	
  11. 
		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.  
    12. 
	
  12. 
		</p> 
    13. 
	
  13. 
		   
    14. 
	
  14. 
		</div> 
    15. 
	
  15. 
		   
    16. 
	
  16. 
		<!-- Position #2 --> 
    17. 
	
  17. 
		<div itemscope itemtype="http://schema.org/Organization"> 
    18. 
	
  18. 
		   
    19. 
	
  19. 
		<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2> 
    20. 
	
  20. 
		<p class="bus1"><span itemprop="name">Company Name 2</span></p> 
    21. 
	
  21. 
		<p class="time">November 2007 - February 2009</p> 
    22. 
	
  22. 
		   
    23. 
	
  23. 
		<p itemprop="description"> 
    24. 
	
  24. 
		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.  
    25. 
	
  25. 
		</p> 
    26. 
	
  26. 
		   
    27. 
	
  27. 
		</div> 
    28. 
	
  28. 
		   
    29. 
	
  29. 
		<!-- Position #3 --> 
    30. 
	
  30. 
		<div itemscope itemtype="http://schema.org/Organization"> 
    31. 
	
  31. 
		   
    32. 
	
  32. 
		<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2> 
    33. 
	
  33. 
		<p class="bus1"><span itemprop="name">Company Name 3</span></p> 
    34. 
	
  34. 
		<p class="time">March 2006 - November 2007</p> 
    35. 
	
  35. 
		   
    36. 
	
  36. 
		<p itemprop="description"> 
    37. 
	
  37. 
		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.  
    38. 
	
  38. 
		</p> 
    39. 
	
  39. 
		   
    40. 
	
  40. 
		</div> 
    41. 
	
  41. 
		   
    42. 
	
  42. 
		</section> 
    43. 




	第六步：添加Schema.org微数据-Article



	 



	



	 



	接下来，我们将把Article模式添加到页面。



	Article的Itemscope元素和ItemType属性



	Article模式的itemscope元素和ItemType属性将会被放置在“Publications”段落里所列出的 “Article”元素里，如下所示：




    
	
  1. 
		<section id="publications"> 
    2. 
	
  2. 
		<div itemscope itemtype="http://schema.org/Article"> 
    3. 
	
  3. 
		   
    4. 
	
  4. 
		Rest of Code Block Here  
    5. 
	
  5. 
		   
    6. 
	
  6. 
		</div> 
    7. 
	
  7. 
		</section> 
    8. 




	Itemprop属性



	在适当的标记中添加“ itemprop “属性。下面是我们将在这个模式中使用的属性：



	Article模式



	◆ itemprop="name"



	◆ itemprop="url"



	Publications段落的最终页面




    
	
  1. 
		<section id="publications"> 
    2. 
	
  2. 
		<div itemscope itemtype="http://schema.org/Article"><span itemprop="name"> 
    3. 
	
  3. 
		<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  
    4. 
	
  4. 
		</div> 
    5. 
	
  5. 
		</section> 
    6. 




	第7步：添加Schema.org微数据- EducationalOrganization和PostalAddress



	 



	



	 



	下一步我们将把EducationalOrganization和PostalAddress模式添加到页面。



	EducationalOrganization的Itemscope元素和ItemType属性



	PostalAddress的Itemscope元素和ItemType属性



	PostalAddress模式的itemscope元素和ItemType属性嵌套在EducationalOrganization模式里，将会被放置在“Education”段落包含地址信息的代码里，如下所示：




    
	
  1. 
		<section id="education"> 
    2. 
	
  2. 
		<div itemscope itemtype="http://schema.org/EducationalOrganization"> 
    3. 
	
  3. 
		   
    4. 
	
  4. 
		Rest of Code Block Here  
    5. 
	
  5. 
		   
    6. 
	
  6. 
		</div> 
    7. 
	
  7. 
		</section> 
    8. 




	Itemprop属性



	在适当的<span></span>标记中添加“ itemprop “属性。下面是我们将在这个模式中使用的属性：



	EducationalOrganization模式



	◆ itemprop="name"



	◆ itemprop="url"



	PostalAddress架构



	◆  itemprop="streetAddress"



	◆ itemprop="addressLocality"



	◆  itemprop="addressRegion"



	◆  itemprop="postalCode"



	◆  itemprop="addressCountry"



	Education段落的最终页面




    
	
  1. 
		<section id="education"> 
    2. 
	
  2. 
		<div itemscope itemtype="http://schema.org/EducationalOrganization"> 
    3. 
	
  3. 
		   
    4. 
	
  4. 
		<p class="bus1"><span itemprop="name">University of Toledo</span></p> 
    5. 
	
  5. 
		   
    6. 
	
  6. 
		<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> 
    7. 
	
  7. 
		<span itemprop="streetAddress">2801 Bancroft Street</span> 
    8. 
	
  8. 
		<br /> 
    9. 
	
  9. 
		<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span> 
    10. 
	
  10. 
		</div> 
    11. 
	
  11. 
		   
    12. 
	
  12. 
		<p class="summary"><span itemprop="name">Web Design</span></p> 
    13. 
	
  13. 
		<p class="time">2003 - 2005</p> 
    14. 
	
  14. 
		   
    15. 
	
  15. 
		<p class="edu-info"> 
    16. 
	
  16. 
		<a itemprop="url" href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a> 
    17. 
	
  17. 
		</p> 
    18. 
	
  18. 
		   
    19. 
	
  19. 
		</div> 
    20. 
	
  20. 
		</section> 
    21. 



			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机