继续学习-页面的HTML5改造

来源：互联网发布：消防防毒面具品牌知乎编辑：程序博客网时间：2024/06/03 20:29

之前设计的页面是纯粹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，让网页绚烂无比。敬请期待！