继续学习-页面的HTML5改造

之前设计的页面是纯粹HTML4.01搭建的。

下面我们根据步骤一步一步将HTML4.01升级到HTML5。（不考虑IE9以下的老版本浏览器，如果想老版本浏览器支持，可以使用腻子脚本。）

步骤：

1.修改文件头代码段。

这个lang=“en”，是对应英文。本人查了一下，对应中文的很多，但是一般用“zh”就可以了。

2.按照自己的喜好定义link等连接标签。HTML5接受简化的甚至是无引号并且大小写混杂的代码，不过为了代码可读性，还是根据自己的需要和习惯来。
3.去掉废弃零件。也就是HTML里面那些可以用CSS来代替表示样式的属性，都将其去掉。如.
4.替换使用全新语义元素：
a.将id为header的div元素，改为

元素。
b.将id为navigation的div元素，改为

元素。
c.将id为footer的div元素，改为

元素。
d.将侧边栏id为siderbar的div元素，改为

元素。
e.将侧边栏的每一个部分，使用

元素包含内容块。并且将h4修正为h1（为了相对容易的解析出正确的大纲）。
f.主要内容文本中应该强调的重点使用标记，一些为吸引人注意的文本使用标记，另一些其他语气的使用标记。
5.根据修改的新元素，修改css文件，套用之前的样式。
6.给页面添加地标角色。

例如：

可用的role值分别是：application、banner、complementary、contentinfo、form、main、navigation、search。

PS：这里关于离线应用和加入video&audio这些没有加，本人感觉一般用的倒是不多。需要时可以在网上查看。

这里给出修改完的HTML5代码：

	
	
	
	


	

		
		

			

				AND THE WINNER ISN'T...
			
			

				

					
WHY?
					
SYNOPSIS
					
STILLS/PHOTOS
					
VIDEOS/CLIPS
					
QUOTES
					
QUIZ
				
			
		
		
		

			
			

				

					
UNSUNG HEROES...
					
					
					

				
				

					
OVERHYPED
NONSENSE...
					
					
					

				
			
			
			

				
				

				
EVERY YEAR 
WHEN I WATCH THE OSCARS I'M ANNOYED...
				
that films like King Kong,Moulin Rouge and Munich get the statue whilst the real cinernatic heroes lose out.Not very Hollywood is it?

					We're here to put things right.
				
				

				these should have won >>
				
			
		
		
		
		

			
NOTE:OUR OPINION IS ABSOLTELY CORRECT.YOU ARE WRONG,EVEN IF YOU THINK YOU ARE RIGHT.THAT'S A FACT.DEAL WITH IT.
			

		
	

css的就不放上了，下一章开始主要修改css3，让网页绚烂无比。敬请期待！