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

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

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

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

我们已经使用这些元素来构建页面，并且样式化它们，尽管似乎每个元素的用法都通过其名称而不言自明，但我们还是来学习更多的细节。

<header>

在上面的示例中，和在大多数站点上一样，页眉（header）将是页面的第一个元素，包含了站点的标题、标志、回到主页的链接等。规范提到：

“页眉元素表示一组介绍性内容或导航辅助内容……注意：页眉元素通常包含了节（section）的标题（一个h1到h6的元素，或者一个hgroup元素），但不是必须的。页眉元素也可以用来包含一节的目录、一个搜索表单，或者任何相关的标志。”

让我们来解析这部分内容。首先要注意的一点是，页眉元素不是必需的。在上面的示例中，已经有了页眉元素，因为它包含了<h1>。页眉的作用是组织“介绍性或导航性”元素，因此，这里给出一个更加实际的示例：
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<header> 
    2. 
	
  2. 
		<a href="/"><img src=logo.png alt="home"></a> 
    3. 
	
  3. 
		<h1>My interesting blog</h1> 
    4. 
	
  4. 
		</header> 
    5. 




	很多Web站点都有一个标题和一个标语或子标题。要让大纲算法忽略子标题（从而把主标题和子标题放入到一个逻辑单元，参见第2章中更详细的介绍），主标题和子标题可以一起放入到新的<hgroup>元素中：




    
	
  1. 
		<header> 
    2. 
	
  2. 
		<a href="/"><img src=logo.png alt="home"></a> 
    3. 
	
  3. 
		<hgroup> 
    4. 
	
  4. 
		<h1>My interesting blog</h1> 
    5. 
	
  5. 
		<h2>Tedium, dullness and monotony</h2> 
    6. 
	
  6. 
		</hgroup> 
    7. 
	
  7. 
		</header> 
    8. 




	页眉也可以包含导航。这可能对全站导航很有用，尤其是模板驱动的站点，其中，整个<header>元素可能都来自于模板文件。例如，图1.6所示的www.thaicookery.co.uk上的水平方向上的全站导航，代码如下：



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



	
		

			
				
		

		

		

	




	 




    
	
  1. 
		<header> 
    2. 
	
  2. 
		 <hgroup> 
    3. 
	
  3. 
		  <h1>Thai cookery school></h1> 
    4. 
	
  4. 
		  <h2>Learn authentic Thai cookery in your own home</h2> 
    5. 
	
  5. 
		 </hgroup> 
    6. 
	
  6. 
		 <nav> 
    7. 
	
  7. 
		  <ul> 
    8. 
	
  8. 
		   <li>Home</li> 
    9. 
	
  9. 
		   <li><a href="courses.html">Cookery courses</a></li> 
    10. 
	
  10. 
		   <li><a href="contact.html">Contact</a></li> 
    11. 
	
  11. 
		  </ul> 
    12. 
	
  12. 
		 </nav> 
    13. 
	
  13. 
		</header> 
    14. 




	当然，<nav>并不是必须要在<header>之中。Thai cookery的示例也可以使用<header>外部的一个主<nav>很容易地标记：




    
	
  1. 
		<header> 
    2. 
	
  2. 
		<hgroup> 
    3. 
	
  3. 
		<h1>Thai cookery school></h1> 
    4. 
	
  4. 
		<h2>Learn authentic Thai cookery in your own home</h2> 
    5. 
	
  5. 
		</hgroup> 
    6. 
	
  6. 
		</header> 
    7. 
	
  7. 
		<nav> 
    8. 
	
  8. 
		<ul> 
    9. 
	
  9. 
		<li>Home</li> 
    10. 
	
  10. 
		<li><a href="courses.html">Cookery courses</a></li> 
    11. 
	
  11. 
		<li><a href="contact.html">Contact</a></li> 
    12. 
	
  12. 
		</ul> 
    13. 
	
  13. 
		</nav> 
    14. 




	这很大程度上取决于你是否相信，全站导航属于全站的页眉，以及是否会实际地考虑使其易于样式化。例如，我的个人站点在内容区域的左边有很长的全站导航，它可能比一个帖子还要长很多。将这个<nav>放在<header>中，可能会导致很难把主要内容放在右边并且还要拥有一个页脚，因此在这种情况下，全站导航放在<header>的外部，并且作为<body>的子元素的兄弟，与我们前面示例中的情况一样（如图1.7所示）。



	
		

			
				
		

	




	 



	注意，我现在只是为页面创建了主<header>，可以有多个<header>，我们将在第2章中介绍。



	<nav>



	<nav>元素用来构建导航。导航定义为一个页面中（例如，一篇文章顶部的一个目录，它可以链接到同一页面的锚点）或一个站点内的链接。但是，并不是链接的每一个集合都是一个<nav>；赞助商的链接的列表就不是<nav>。一个搜索结果页面也不是，因为它是该页面的主内容。



	与<header>和<footer>（以及所有的新元素）一样，我们并不限制每个页面中<nav>元素的数量。在一个页眉中，可以有全站的<nav>，作为当前文章的目录的一个<nav>，以及在其下面链接到站点的其他相关文章的<nav>。



	<nav>元素的内容可能是链接的一个列表，标记为一个无序的列表（自从Mark Newhouse的启蒙性的文章“Taming Lists”在http://www. alistapart.com/articles/taminglists/发表以后，这就成为一种惯例），或者在面包屑路径的情况下，是一个有序的列表。注意，<nav>元素是一个包装器，它不会替代<ol>或<ul>元素，但是会包围它。通过这种方式，不理解该元素的遗留的浏览器将会看到列表元素和列表项，并且它们行为正常。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机