持续学习-页面的HTML5改造 _HTML/CSS

继续学习-页面的HTML5改造

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

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

步骤：

1.修改文件头代码段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

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

2.按照自己的喜好定义link等连接标签。HTML5接受简化的甚至是无引号并且大小写混杂的代码，不过为了代码可读性，还是根据自己的需要和习惯来。
3.去掉废弃零件。也就是HTML里面那些可以用CSS来代替表示样式的属性，都将其去掉。如<font>.
4.替换使用全新语义元素：
a.将id为header的div元素，改为<header>元素。
b.将id为navigation的div元素，改为<nav>元素。
c.将id为footer的div元素，改为<footer>元素。
d.将侧边栏id为siderbar的div元素，改为<aside>元素。
e.将侧边栏的每一个部分，使用<section>元素包含内容块。并且将h4修正为h1（为了相对容易的解析出正确的大纲）。
f.主要内容文本中应该强调的重点使用<em>标记，一些为吸引人注意的文本使用<b>标记，另一些其他语气的使用<i>标记。
5.根据修改的新元素，修改css文件，套用之前的样式。
6.给页面添加地标角色。

例如：<nav role="navigation">

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>And the winner isn't</title>
	<link href="reset.css" rel="stylesheet"/>
	<link href="style.css" rel="stylesheet"/>
</head>
<body>
	<div id="wrapper">
		<!-- the header and navigation -->
		<header role="banner">
			<div id="headline">
				<span>AND THE WINNER IS</span><span id="special_hint">N'T...</span>
			</div>
			<nav role="navigation">
				<ul>
					<li><a href="#">WHY?</a></li>
					<li><a href="#">SYNOPSIS</a></li>
					<li><a href="#">STILLS/PHOTOS</a></li>
					<li><a href="#">VIDEOS/CLIPS</a></li>
					<li><a href="#">QUOTES</a></li>
					<li><a href="#">QUIZ</a></li>
				</ul>
			</nav>
		</header>
		
		<div id="main" role="main">
			<!-- the siderbar -->
			<aside>
				<section role="complementary">
					<h1>UNSUNG HEROES...</h1>
					<a href="#"><img src="image/cableGuy.jpg" alt="CableGuy"/></a>
					<a href="#"><img src="image/chicago.jpg" alt="Chicago"/></a>
					<br>
				</section>
				<section role="complementary">
					<h1>OVERHYPED<br>NONSENSE...</h1>
					<a href="#"><img src="image/goonies.jpg" alt="Goonies"/></a>
					<a href="#"><img src="image/kingKong.jpg" alt="KingKong"/></a>
					<br>
				</section>
			</aside>
			<!-- the content -->
			<div id="content">
				<img src="image/oscar.png"></img>
				<div id="text">
				<h1>EVERY YEAR <br><em>WHEN I WATCH THE OSCARS I'M ANNOYED...</em></h1>
				<p>that films like <b>King Kong</b>,<b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinernatic heroes lose out.Not very Hollywood is it?<br>
					<i>We're here to put things right.</i>
				</p>
				<br>
				<a href="#">these should have won >></a>
				</div>
			</div>
		</div>
		
		<!-- the footer -->
		<footer role="contentinfo">
			<div id="notation">NOTE:OUR OPINION IS ABSOLTELY CORRECT.YOU ARE WRONG,EVEN IF YOU THINK YOU ARE RIGHT.THAT'S A FACT.DEAL WITH IT.</div>
			<div id="footimg"></div>
		</footer>
	</div>
</body>
</html>

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