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

使用HTML 5大纲（6）

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

使用HTML 5大纲（6）

正如你在第1章中见到的，边栏可以构想成一组单独的<nav>元素，每个<nav>元素都有自己的标题（Jobs、Dating、CD box sets、Today誷 paper等），使用灰色背景、蓝色文字和深红色上边框。
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<aside> 
    2. 
	
  2. 
		 <nav> 
    3. 
	
  3. 
		 <h2>guardianjobs</h2> 
    4. 
	
  4. 
		 <form role=search ... > ... </form> 
    5. 
	
  5. 
		 <ul> 
    6. 
	
  6. 
		  <li><a href=#>Upload your CV</a></li> 
    7. 
	
  7. 
		  ...  
    8. 
	
  8. 
		  </ul> 
    9. 
	
  9. 
		 </nav> 
    10. 
	
  10. 
		 <nav> 
    11. 
	
  11. 
		 <h2>Online Dating</h2> 
    12. 
	
  12. 
		 ...  
    13. 
	
  13. 
		 </nav> 
    14. 
	
  14. 
		<section> 
    15. 
	
  15. 
		<h2>Sponsored Features</h2> 
    16. 
	
  16. 
		<section> 
    17. 
	
  17. 
		</aside> 
    18. 




	注意，我在<nav>中包含了一个搜索表单，对我来说它似乎更适合用作一个搜索表单而不是导航辅助。我还根据其功能赋予它ARIA的角色。



	“Sponsored Features”没有位于<nav>中，因为它不是主要的导航，其主要用途大概是广告。你可能不同意我的做法（我保证不会生气），因此，你可能选择把所有内容放到一个包含的<nav>中：




    
	
  1. 
		<nav> 
    2. 
	
  2. 
		 <h2>guardianjobs</h2> 
    3. 
	
  3. 
		 <form role=search ... > ... </form> 
    4. 
	
  4. 
		 <ul> 
    5. 
	
  5. 
		  <li><a href=#>Upload your CV</a></li> 
    6. 
	
  6. 
		   ...  
    7. 
	
  7. 
		 </ul> 
    8. 
	
  8. 
		 
    9. 
	
  9. 
		 <h2>Online Dating</h2> 
    10. 
	
  10. 
		 <ul> 
    11. 
	
  11. 
		  ...  
    12. 
	
  12. 
		 </ul> 
    13. 
	
  13. 
		   ...  
    14. 
	
  14. 
		 
    15. 
	
  15. 
		 <h2>Sponsored Features</h2> 
    16. 
	
  16. 
		 <ul> 
    17. 
	
  17. 
		   ...  
    18. 
	
  18. 
		 </ul> 
    19. 
	
  19. 
		</nav> 
    20. 




	现在，让我们来看看主内容区（如图2.16所示）。

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



	
		

			
				
		

		

		

	




	作为一家报纸的站点，《卫报》主页让位给新闻报道文章，这毫不令人奇怪。注意这点很重要，这里没有最高级别的标题来组织主要文章。如“top stories（要闻报道）”，否则，你可能会把所有内容放到一个<section>中。因此，你只是给出了<article>的一个列表。因为<section>不适合用在这里，如果要用一个元素来包含所有的文章以便于样式化，那么应该使用无语义的<div>元素。



	有一篇特色文章，它主要是由一幅图像组成，大概是因为它是可用的最引人瞩目的图片（如图2.17所示）。



	
		

			
				
		

		

		

	




	剩下的只不过是一个<article>，尽管我们可能需要一个class或id来允许特殊的样式化。



	特色文章的下面，我们有一些不是要闻的节（这往往不是主页上的信息，它们主要是到其他页面的链接，但不仅仅如此）。它们都有自己的标题（“Best of guardian.co.uk”、“Latest multimedia”、“What you誶e saying”），然后是一组文章。因此，最合适的元素就是位于<section>中的<article>：




    
	
  1. 
		<section> 
    2. 
	
  2. 
		<h2>Best of guardian.co.uk</h2> 
    3. 
	
  3. 
		<article> 
    4. 
	
  4. 
		<h3>Is Britain broken?</h3> 
    5. 
	
  5. 
		...  
    6. 
	
  6. 
		</article> 
    7. 
	
  7. 
		 
    8. 
	
  8. 
		<article> 
    9. 
	
  9. 
		<h3>Notes and queries</h3> 
    10. 
	
  10. 
		...  
    11. 
	
  11. 
		</article> 
    12. 
	
  12. 
		 
    13. 
	
  13. 
		<article> 
    14. 
	
  14. 
		<h3>Tech Weekly live: Personal privacy</h3> 
    15. 
	
  15. 
		...  
    16. 
	
  16. 
		</article> 
    17. 
	
  17. 
		...  
    18. 
	
  18. 
		</section> 
    19. 
	
  19. 
		 
    20. 
	
  20. 
		<section> 
    21. 
	
  21. 
		<h2>Latest multimedia</h2> 
    22. 
	
  22. 
		...  
    23. 
	
  23. 
		</section> 
    24. 




	在这个Web站点上（但没有在屏幕截图上显示出来），还有一些<nav>块（“Trending”、“Campaigns and Investigations”）以及一个“宽大的页脚”，后者我们在第1章中见到过，应该是位于<footer>之外的几个全页的<nav>块，而<footer>包含了通常的隐私信息、条款和条件以及可访问性信息。



	好了，女士们先生们，这就是基于HTML 5的www.guardian.co.uk。和任何其他较为正式的标记练习一样，这里有合理的不同观点。由于HTML是一种通用语言，所以并没有元素适用于每一种特定情况。


			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机