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

使用HTML 5大纲（1）

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

使用HTML 5大纲（1）

一些字处理应用程序拥有显示一个文档的大纲的功能。例如，图2.4显示了本章在Microsoft Word 2007中的大纲视图。

 

HTML 5有一个严谨定义的大纲算法，它允许用户代理从一个Web页面生成一个类似的大纲。就像是一个字处理软件，让用户对Web页面有一个快速的概览（其实Web页面本身也是一种字处理应用程序）。大纲算法的另一个主要用途是聚合，抓取内容将其插入到其他的位置，并且确保目标Web页面仍然有一个逻辑结构。

本节相当紧凑，也还没有任何浏览器实现它（尽管在http://code. google.com/p/h5o/已经有了一个JavaScript实现）。要理解何时使用<section>、<aside>或<div>，你需要理解文档大纲的概念。
广州网站建设,网站建设,广州网页设计,广州网站设计

与HTML 4的一个主要的不同，也是在继续学习之前应该掌握的一个重要的概念，就是某些HTML 5元素（<article>、<section>、<nav>和<aside>）都是成节的内容，它们在大纲中开始一个新的节。为了说明这一概念，让我们来看示例代码：



    
	
  1. 
		<h1>Hello</h1> 
    2. 
	
  2. 
		<div> 
    3. 
	
  3. 
		 <h1>World</h1> 
    4. 
	
  4. 
		</div> 
    5. 




	要说明这一算法是如何工作的，我们需要使用位于gsnedders. html5.org/outliner/的基于Web的工具，因为当前还没有浏览器嵌入这一逻辑。这段代码所产生的概览和我们的预期相同（如图2.5所示）。



	
		

			
				
		

	




	 



	如果我们把无意义的<div>修改为一个<article>，后者是一个成节的内容，图2.6展示了所发生的变化。



	
		

			
				
		

	




	 



	可以看到，成节内容的出现已经将其内容移动到了其前面的内容“下面”的层级。简单地说，article元素中的<h1>逻辑上是一个<h2>，因为<article>已经开始了新的一节。使用<section>、<hav>或<article>，而不是<article>来做同样的事情，因为它们都是成节的内容。



	实际上，在这里你使用什么级别的标题是无关紧要的，大纲算法关心嵌套和相对级别，因此，如下代码：




    
	
  1. 
		<h3>Hello</h3> 
    2. 
	
  2. 
		<article> 
    3. 
	
  3. 
		 <h6>World</h6> 
    4. 
	
  4. 
		</article> 
    5. 




	能产生和图2.6完全相同的结果。



	你可能会说：“这有什么用处呢？”首先，它意味着你不再像HTML 4中那样受6个层级的标题的限制。嵌套到7层的<section>、<article>、<nav>或<aside>（或者它们的任何组合）之中的一个标题元素，变成了逻辑上的<h7>元素（除非你在标记法律文档或者一些其他的特别的内容，如果需要这么多的层级的话，你应该重新考虑自己的内容）。

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



	另一个优点就是使用聚合。假设Remy贴出一篇文章：




    
	
  1. 
		<article> 
    2. 
	
  2. 
		 <h1>What I did on my holiday</h1> 
    3. 
	
  3. 
		 <p>I went to Narnia. I was bitten by a trilobite. Then I  
    4. 
	
  4. 
		  came home.</p> 
    5. 
	
  5. 
		</article> 
    6. 




	我们假设你在经营一家很大的在线报社，并且很想聚合这篇文章。当神奇的聚合机器将它插入到你的模板中，结果代码如下：




    
	
  1. 
		<h1>The Monotonous Times</h1> 
    2. 
	
  2. 
		<section> 
    3. 
	
  3. 
		 <h2>Breaking news</h2> 
    4. 
	
  4. 
		  <article> 
    5. 
	
  5. 
		   <h1>What I did on my holiday</h1> 
    6. 
	
  6. 
		   <p>I went to Narnia. I was bitten by a trilobite.  
    7. 
	
  7. 
		    Then I came home.</p> 
    8. 
	
  8. 
		  </article> 
    9. 
	
  9. 
		..  
    10. 
	
  10. 
		</section> 
    11. 




	显然，“breaking news（重大新闻）”的层级应该比Remy的博客帖子的标题的层级高，但是，由于Remy的模板和你的模板之间的错误匹配，<h2>反倒比<h1>更重要了。



	然而，查看一下大纲，显示的一切都像我们期望的那样（如图2.7所示）。你弄巧成拙了。



	
		

			
				
		

		

		

	




	<nav>、<aside>和无标题的节



	由于你可能会在开发的过程中养成检查文档大纲的习惯，就好像频繁地验证代码并在不同浏览器中检查它一样，gsnedders.html5. org/outliner/提供了一个快捷方便的大纲生成工具。



	如果发现成节的内容没有标题，它会给出报告：




    
	
  1. 
		<article> 
    2. 
	
  2. 
		 <p>I have no heading</p> 
    3. 
	
  3. 
		</article> 
    4. 



			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机