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

何时使用新的HTML 5结构化元素（2）

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

何时使用新的HTML 5结构化元素（2）

使用一个列表很有意义（它给了你更多的CSS钩子），但这不是强制的。下面的形式绝对有效：
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<nav> 
    2. 
	
  2. 
		<p><a href="/">Home</a></p> 
    3. 
	
  3. 
		<p><a href="/about">About</a></p> 
    4. 
	
  4. 
		</nav> 
    5. 




	也可以包含标题以用于导航：




    
	
  1. 
		<nav> 
    2. 
	
  2. 
		<h2>Main navigation</h2> 
    3. 
	
  3. 
		<ul> 
    4. 
	
  4. 
		<li><a href="/about">About me</a></li> 
    5. 
	
  5. 
		<li><a href="/news">News</a></li> 
    6. 
	
  6. 
		</ul> 
    7. 
	
  7. 
		</nav> 
    8. 




	将<nav>和其他的元素组合到边栏中



	很多站点都有一个边栏，其中包含多个导航块以及其他的非导航内容。例如，我的个人站点www.brucelawson.co.uk，如图1.8所示。



	
		

			
				
		

		

		

	




	主内容左边的边栏有很多的导航区域（不是图片），例如页面、分类、存档以及最近的评论。这些都标记为一系列的<nav>元素（包含了子项的列表的一个单个的<nav>也是可以的，但是，我喜欢对每种类型的导航使用彼此独立的<nav>元素）。



	这些<nav>元素包含在新的<aside>元素中，该元素“可以用于摘录引用或边栏这样的排版效果，可以用于广告、一组导航元素，以及认为应该与页面的主内容区分开来的其他内容”（参见http://dev.w3. org/html5/spec/semantics.html#the-aside-element）。

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




    
	
  1. 
		<aside> 
    2. 
	
  2. 
		<nav> 
    3. 
	
  3. 
		<h2>Pages</h2> 
    4. 
	
  4. 
		<ul> .. </ul> 
    5. 
	
  5. 
		</nav> 
    6. 
	
  6. 
		 
    7. 
	
  7. 
		...  
    8. 
	
  8. 
		 
    9. 
	
  9. 
		<nav> 
    10. 
	
  10. 
		<h2>Recent comments</h2> 
    11. 
	
  11. 
		<ul> ... </ul> 
    12. 
	
  12. 
		</nav> 
    13. 
	
  13. 
		<section> 
    14. 
	
  14. 
		<h2>blah blah</h2> 
    15. 
	
  15. 
		<a href="...">Web hosting by LovelyHost</a> 
    16. 
	
  16. 
		<img src="..."> 
    17. 
	
  17. 
		<p>Powered by <a href="...">WordPress</a></p> 
    18. 
	
  18. 
		<p><a href="...">Entries (RSS)</a> and <a href="..."> 
    19. 
	
  19. 
		 Comments (RSS)</a></p> 
    20. 
	
  20. 
		<section> 
    21. 
	
  21. 
		</aside> 
    22. 




	注意“Blah blah”部分没有标记为<nav>，还有到我的Web主机的链接、我的照片以及两个RSS链接，都不是像规范定义的<nav>那样“包含主要导航块的节”。为了使边栏标题在大纲算法中保持同样的层级（参见第2章了解更多信息），将它们包含在一个<section>中。标记这一边栏的另一种方式是，使用单个的整体的<nav>，而不是多个<nav>元素。就像猫科动物标本制作师告诉你的一样，剥猫皮的方法不止一种。



	<footer>



	<footer>元素在规范中定义为表示“用于其最近的祖先成节内容或成节根元素的页脚”（“成节内容”包括article、aside、nav和section，而“成段根元素”包括blockquote、body、details、fieldset、figure、td等）。



	注意，和页眉元素一样，一个页面上可以有多个页脚，我们将在第2章中再次学习。现在，我们的页面上只有一个页脚，它是body元素的一个子元素。正如规范所述，“当最近的祖先成节内容或成节根元素是body元素的时候，它将应用于整个页面”。



	规范还提到，“一个页脚通常包含关于其节的信息，例如，谁编写了它、到相关文档的链接、版权数据，等等”。



	我们的页脚包含了版权数据，它还包含在一个<small>元素中。在HTML 5中重新定义了<small>元素，之前它是一个表现性元素，但是在HTML 5中，它表示附属细则（附属细则通常用来免责、警告、提出法律限制或版权）。附属细则有时候也用于表明权限，用于满足许可性需求。



	站点的页脚可能有多个版权提示。你可能链接到私有政策、可访问性信息（为何要将其隐藏到不显眼的地方呢？）以及其他类似的链接。这些应该包含在<nav>中，尽管规范的建议是不要这么做（参见前面的<nav>小节）。



	你可能会像www.thecssdiv.co.uk那样拥有一个时髦的“宽大的页脚”（如图1.9所示）。



	
		

			
				
		

	





			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机