为了创建更好的页面结构，HTML5提供了新的【结构元素】

在HTML5以前，我们只能通过div元素作为结构元素，而HTML5则提供了article、section、nav、aside、header、footer、main等文档结构元素。

1.article与section元素

article：用于页面上独立、完善的一篇文章，该元素表示的内容是一个帖子、一篇Blog文字、一篇短文、一条完整的回复。总而言之，只要是一篇独立的文档内容，就应该使用article元素来表示，规则如下。

• article元素内部可使用header定义文章标题部分。
• article元素内部可使用footer定义脚注部分。
• article元素内部可使用section把文章内容分成几个段落。
• article元素内部可嵌套多个article作为它的附属文章，比如一篇Blog文章后面可以有多篇回复文章。

section：用于对页面的内容进行分块。通常可以由标题内容组成，关于规则如下。

• 通常我们建议section包含一个标题，也就是h1到h5元素来定义标题。
• section元素可以包含多个article元素，表示该分块内部包含多篇文章。
• section元素可以嵌套section元素，用于表示该分块包含多个多个子分块。

除了section元素可以指定cite属性之外，article元素只支持id、class、style、contentEditable、hidden等通用属性。

提示：article和section这两个元素很容易混淆，因为它们都可以包含多个元素，而且可以相互嵌套，但article和section侧重点不一样，article元素侧重于表达一篇独立的、完整的文章，而section侧重对文章的内容进行分块，下面模拟一个论坛帖子。

	
	
	


浏览帖子内容

	
学习Android，必须先学习Java吗
	
Android上的应用程序只能用Java编写吗？可以用C++吗？
	
	

		
回复内容
		
		

			
			
还是得学习Java
			
作者：kongyeeku
			
虽然Android不一定要使用Java开发，还可以选择JavaScript、

				或NDK开发，但Java毕竟是Android主要的开发语言，

				因此建议学习Android之前还是先学习Java
		
		
		

			
			
Java是基础
			
作者：kuan008
			
Java是基础，学好Java再去学习Android事半功倍。
		
	
	
	

		
评价内容
		
		

			
			
讨论很好
			
大家讨论的很深入，对我帮助很大
		
		
		

			
			
赞
			
不错，赞
		
	

2.header和footer元素

header元素	通常代表标题。从功能上类似于h1到h6元素，不过header还可以包含普通元素，比如p、span、nav元素等。
footer元素	用于父级元素定义脚注的部分，包括作者的版权信息、授权信息等

当网页内容、acticle、section包含了更多复杂内容的标题时，此时建议使用header元素来组织，根据前面的例子修改了一下。

	
	
	




	 
	返回首页
	
浏览帖子内容


	
学习Android，必须先学习Java吗
	
Android上的应用程序只能用Java编写吗？可以用C++吗？
	
	

		
回复内容
		
		

			
			

				
还是得学习Java
				
作者：kongyeeku
			
			
虽然Android不一定要使用Java开发，还可以选择JavaScript、

				或NDK开发，但Java毕竟是Android主要的开发语言，

				因此建议学习Android之前还是先学习Java
		
		
		

			
			

				
Java是基础
				
作者：kuan008
			
			
Java是基础，学好Java再去学习Android事半功倍。
		
	
	
	

		
评价内容
		
		

			
			
讨论很好
			
大家讨论的很深入，对我帮助很大
		
		
		

			
			
赞
			
不错，赞
		
	
	
	

		以上帖子和回复只代表其个人观点，不代表我们的观点或立场
	


	站点信息
	联系我们

3.nav与aside元素

nav元素	定义页面上的导航条，包括页面上的主导航条、侧边、内部、页面下方的导航
aside元素	定义当前页面的附属信息，通常使用css渲染成侧边框

Html5提供nav和aside元素只是文档元素，并不负责对内容进行处理，建议我们用CSS来控制，例子如下。

article {
	font-size:11pt;
}
header {
	background-color:#ddd;
}
footer {
	border-top: 1px solid black;
	font-size: 12px;
	text-align: center;
}
aside {
	position:absolute;
	background-color:#dda;
	border:1px solid black;
	width: 200px;
	left:75%;
}
article>aside{
	top:40%;
}
body>aside{
	top:5%;
}

• aside元素放在body内部，表明为整个页面添加边栏。
• aside元素放在其他父元素内部，表明为父元素添加边栏。

	
	
	
	




	返回首页
	
浏览帖子内容


	
学习Android，必须先学习Java吗
	
Android上的应用程序只能用Java编写吗？可以用C++吗？
	
	

		
回复内容
		
		

			
			

				
还是得学习Java
				
作者：kongyeeku
			
			
虽然Android不一定要使用Java开发，还可以选择JavaScript、

				或NDK开发，但Java毕竟是Android主要的开发语言，

				因此建议学习Android之前还是先学习Java
		
		
		

			
			

				
Java是基础
				
作者：kuan008
			
			
Java是基础，学好Java再去学习Android事半功倍。
		
	
	
	

		
评价内容
		
		

			
			
讨论很好
			
大家讨论的很深入，对我帮助很大
		
		
		

			
			
赞
			
不错，赞
		
	
	
	

		以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场
	
	
	

		

		
关于楼主
		
用户组: 编程摸索者
 
		
注册日期: 2009-7-27
 
		
上次访问: 2012-1-3 20:02
 
		
最后发表: 2012-1-1 17:38
 
		
发帖数级别: 小试牛刀
 
		
阅读权限: 30
 
		
	


	站点信息
	联系我们



	
页面导航
	

		

			
查看相关内容
			
返回首页
			
返回本版
		
	

4.main元素

一个html页面只能包含一个main元素，用于包含除导航条、Logo、版权信息等之外的主要内容，换句话来说，我们使用main元素，页面中的article、section和div元素都应该放在main元素内，main元素不应该放在允许重复出现的内容中，demo如下。

	
	
	




	
浏览回复内容


还是得学习Java
作者：kongyeeku
虽然Android不一定要使用Java开发，还可以选择JavaScript、

	或NDK开发，但Java毕竟是Android主要的开发语言，

	因此建议学习Android之前还是先学习Java

5.figure和figcaption元素

html为图像语义额外添加了figure和figcaption这两个元素，下面我们来看看这两个元素的功能。

figure元素	表示一块独立的图片区域，可以包含一个以上img元素，还可以包含一个figcaption元素，定义图片区域的标题
figcaption元素	通常放在figure内部，定义图片区域的标题

下面使用figure元素定义了一块图片区域，包含了三张图片，并且通过figcaption添加了标题。此外，还使用了css添加了边框。

	
	
	



	
Java体系
	
	
	

figure定义的图片区域代表了网页上的独立区域，每个figure元素内部只能包含一个figcaption元素。

 

--------------如果大家喜欢我的博客，可以点击左上角的关注哦。