持续学习-页面的HTML5改造
日期：2014-05-17 浏览次数：20577 次
之前设计的页面是纯粹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>
</d
