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

使用HTML 5大纲（2）

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

使用HTML 5大纲（2）

这会给出“Untitled Section（无标题的节）”这样的大纲。对于<section>和<article>来说，这是一条有用的警告，因为这些元素几乎总是以一个标题开始的。

然而，在<nav>和<aside>中，没有标题绝对是合法的。你可能想要给某些<nav>块加上诸如“Most popular posts”或“Recent comments”这样的标题，但是，你可能不想要给主站点<nav>也加一个多余的标题，而只想仅仅是显示“Navigation”。

因此，如果你看到“Untitled Section（无标题的节）”，不要自动地假设应该在那里放上一个标题。将其当做一条警告，而不是一个错误。已经有人报告了一个Bug，以便为<nav>中的无标题的节给出一条较为友好的消息，但是，到目前为止，这个Bug还没有解决。
广州网站建设,网站建设,广州网页设计,广州网站设计

<hgroup>

有时候，可能会有一个标题和一个子标题，或者标语。Slashdot使用“news for nerds. News that matters”；dev.Opera有“Follow the Standards. Break the Rules”；Metafilter则是“community weblog”。我们如何标记这些标语？在HTML 4中，我们可以使用：



    
	
  1. 
		<h1>Metafilter</h1> 
    2. 
	
  2. 
		<p>community weblog</p> 
    3. 




	但是，这给人感觉不对，因为感觉子标题应该是一个标题。标记这一点的替代方法是：




    
	
  1. 
		<h1>Metafilter</h1> 
    2. 
	
  2. 
		<h2>community weblog</h2> 
    3. 




	但是，这样一来，站点的每个页眉都需要是<h3>～<h6>，因为它们都是标语的下一层级。在HTML 5中，子标题可以标记为一个从文档大纲中移除的标题元素，如下所示：




    
	
  1. 
		<hgroup> 
    2. 
	
  2. 
		 <h1>Metafilter</h1> 
    3. 
	
  3. 
		 <h2>community weblog</h2> 
    4. 
	
  4. 
		</hgroup> 
    5. 




	这会产生如图2.8所示的大纲。



	
		

			
				
		

		

		

	




	规范对<hgroup>的描述是：“用于文档的摘要、大纲以及类似目的时，hgroup元素的文本定义为该元素的子孙中从h1～h6的最高层级的元素的文本”。



	因此：




    
	
  1. 
		<article> 
    2. 
	
  2. 
		 <hgroup> 
    3. 
	
  3. 
		   <h2>Get the beers in! Here comes</h2> 
    4. 
	
  4. 
		   <h1>Remy Sharp!</h1> 
    5. 
	
  5. 
		 </hgroup> 
    6. 
	
  6. 
		</article> 
    7. 




	在大纲中显示文本“Remy Sharp”，因为这是该组之中最高层级的标题元素。



	成节的根



	注意，某些元素（<blockquote>、<body>、<details>、<fieldset>、<figure>、<td>）叫做成节的根，并且它们可以拥有自己的大纲，但是，这些元素中的节和标题对于它们的祖先的大纲没有任何影响。这是因为，你可能在一个<blockquote>中引用一篇文章的几个节，但是这些引用的节并没有构成整个文档大纲的部分。



	在下面的例子中：

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




    
	
  1. 
		<h1>Unicorns and butterflies</h1> 
    2. 
	
  2. 
		<nav> 
    3. 
	
  3. 
		 <h2>Main nav</h2> 
    4. 
	
  4. 
		...  
    5. 
	
  5. 
		</nav> 
    6. 
	
  6. 
		<article> 
    7. 
	
  7. 
		 <h2>Fairies love rainbows!</h2> 
    8. 
	
  8. 
		 <p>According to Mr Snuggles the fluffy kitten, fairies  
    9. 
	
  9. 
		  like:</p> 
    10. 
	
  10. 
		 <blockquote> 
    11. 
	
  11. 
		  <h3>Pretty dainty things</h3> 
    12. 
	
  12. 
		  <p>Fairies love rainbows, ribbons, and ballet shoes</p> 
    13. 
	
  13. 
		  <h3>Weaponry</h3> 
    14. 
	
  14. 
		  <p>Fairies favour Kalashnikovs, flick knives, and  
    15. 
	
  15. 
		   depleted uranium missiles</p> 
    16. 
	
  16. 
		 </blockquote> 
    17. 
	
  17. 
		</article> 
    18. 




	大纲不会包含blockquote的内容（如图2.9所示）。



	
		

			
				
		

	




	 



	在HTML 5中样式化标题



	这些内容给CSS的编写者带来了一个挑战。



	假定有如下内容：




    
	
  1. 
		<article><section><h1>...</h1></section></article> 
    2. 
	
  2. 
		<article><article><h1>...</h1></article></article> 
    3. 
	
  3. 
		<section><section><h1>...</h1></section></section> 
    4. 
	
  4. 
		<section><aside><h1>...</h1></aside></section> 
    5. 
	
  5. 
		<h3>...</h3> 
    6. 




	 



	 


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机