小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

一般来说，人们在书写包括HTML在内的文档时，习惯上按照类似于“章——节——小节”这样的层次结构来进行。

在HTML4中的描述方式：

	

	
	
		
第一章 小强的HTML5移动开发之路
		
1.1 HTML5概述
		
1.1.1 HTML5是什么？
		
1.1.2 HTML5和HTML4的区别
		
1.2 HTML5快速入门
		
1.2.1 HTML与XHTML
	

上面代码，勉强可以看出文档的主体结构。但是在比较复杂的页面中，这种结构很难看出来，所以就出现了如下写法：

	

	
	
		

			
第一章 小强的HTML5移动开发之路
			

				
1.1 HTML5概述
				

					
1.1.1 HTML5是什么？
				
				

					
1.1.2 HTML5和HTML4的区别
				
			
			

				
1.2 HTML5快速入门
				

					
1.2.1 HTML与XHTML
				
			
		

	

在HTML5中，为了使文档结构更加清晰，更容易理解，增加了很多具有语义性的专门用来划分文档结构的元素。

section元素：section元素是对页面文档结构进行划分的最基本也是最主要的结构元素，主要用来对网站 或应用程序的页面上的内容进行层次结构上的划分。一个section元素通常由内容及其标题构成。

	

	
	
		

			
第一章 小强的HTML5移动开发之路
			

				
1.1 HTML5概述
				

					
1.1.1 HTML5是什么？
				
				

					
1.1.2 HTML5和HTML4的区别
				
			
			

				
1.2 HTML5快速入门
				

					
1.2.1 HTML与XHTML
				
			
		

	

使用section元素的时候要注意：

1、不要将section元素与div元素混淆使用。当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div.

2、通常不建议为哪些没有标题的内容使用section,可以使用HTML5轮廓检测工具来检测（http://gsnedders.html5.org/outliner/）

article元素：article元素代表文档、页面或应用程序中的所有“正文”部分，它描述的内容应该是独立的、完整的、可以独自被外部引用的，可以使一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评价、一个独立的插件，或任何独立于上下文中其他部分的内容。

在一个section元素或者article元素中，应该只有一个标题，如果有两个标题，则第二个标题会被隐式放入一个新的section元素之内，如下面的代码所示，h2元素之后的内容会被隐式放入一个新的section元素内。

	
标题
	
	
副标题

nav元素：nav元素是一个可以作为页面导航的链接组。一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。在nav元素中，一般以ul列表的形式来具体放置改组链接元素。

aside元素：aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他别于主要内容的部分。

下面来实现一个博客主页例子：

界面布局如下：

	

		

			
阳光小强的博客
			

				http://blog.csdn.net/dawanganban
			
		
		

			

				

					主页
				
				

					博文目录
				
			
		
	
	

	

	

		

			

				
个人资料
			
			

				

				

					
					
阳光小强的博客
				
				
				

					
本人目前从事移动互联网开发，希望结识更多朋友
					
推荐专栏：
					

						
							小强的HTML5移动开发之路
						
					
					
联系方式：739299362
				
			
			

		
		

			

				
分类
				
					
						[管理]
					
				
			
			

				

					

						

							全部博文
							(62)
						
						

							HTML5
							(40)
						
						

							HTML5
							(40)
						
						

							HTML5
							(40)
						
						

							HTML5
							(40)
						
					
				
			
			

		
		

			

				
评论
			
			

				

					

						

							

								
									
									随风
									
								
								03-31 16:59
							
							

								

									
										 博主，您好。为什么我在url中输...
									
								
							
						
						

							

								
									
									随风
									
								
								03-31 16:59
							
							

								

									
										 博主，您好。为什么我在url中输...
									
								
							
						
						

							

								
									
									随风
									
								
								03-31 16:59
							
							

								

									
										 博主，您好。为什么我在url中输...
									
								
							
						
						

							

								
									
									随风
									
								
								03-31 16:59
							
							

								

									
										 博主，您好。为什么我在url中输...
									
								
							
						
					
				
			
			

		
	


	

		

			
分类
			
				
					[管理]
				
			
		
		

			

				

					

						

							

								
									HTML5中新增number元素的ValueAsNumber属性
								
							
							
							(2014-03-31 18:30)
						
						

							分类：
							HTML5
						
					
					

						
   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。
						
   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。
						
   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。
						
   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。
						
   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。
					
					

						

							阅读 | 
							评论  还没有被转载| 
							收藏 
						
						

							
								查看全文>>
							
						
					
				
			
		
	

样式文件main.css

div#blog{
	background-position:50% 0%;
	background-image:url(image/blogb.png);
	width:100%;
	/*background-repeat:no-repeat;*/
}

ul{
	list-style:none;
}

div#blogbody{
	margin:0px;
}

[id^=column_]{
	display:inline;
	float:left;
	overflow:hidden;
}

div#column_1{
	margin-left:20px;
	width:210px;
}

源代码下载：http://download.csdn.net/detail/lxq_xsyu/7125741

转载于:https://www.cnblogs.com/lanzhi/p/6469109.html