2.6 实验指导2-1：使用新增元素构建网页
在本节之前，已经通过大量的练习介绍了HTML 5中新增的结构元素、块级语义元素、行内语义元素、交互元素以及改良HTML 4的元素。本节主要使用上面所介绍的元素，将这些元素结合起来构建一个完整的网页，最终效果如图2-20所示。
读者可以根据如图2-20所示的效果图分析网页结构，大体来看，整个网页分为三部分。这三部分分别是顶部、底部和中间区域。其中，中间区域又分为左侧和右侧两部分。
（1）根据分析的网页结构添加代码，如下所示。
<header id="bloghead"></header>
<div id="blogbody">
<div id="column_1"></div>
<div id="column_2"></div>
</div>
<footer id="blogfooter"></footer>
（2）为上面的结构元素分别编写CSS样式，完成头部、底部以及中间区域的美化。部分代码如下。
图2-20 使用HTML 5新增元素构建网页
header#bloghead {
height: 265px;
position:relative;
}
header#bloghead,div#blogbody{
margin: 0px;
}
div#column_1{
margin-left:20px;
width:210px;
}
div#column_2{
margin-left:10px;
width:740px;
}
footer#blogfooter {
color: #ddecfa;
position:relative;
top:36%;
height:186px;
margin:0 auto;
text-align:center;
background-position:bottom;
font-weight:bold;
clear:both;
padding-top:0px;
}
（3）向页面的头部添加内容，头部内容包括作者的博客名称、网址和导航列表等内容。其中，导航列表使用nav元素实现，然后在nav元素中添加ul和li元素。代码如下。
<header id="bloghead">
<div id="blogTitle">
<h1 id="blogname">HTML5热门爱好者</h1>
<div id="bloglink">http://www.sina.com/lovehtml5blog/</div>
</div>
<nav id="blognav">
<ul id="blognavInfo">
<li><a href="http://blue-butterfly.net/html5blog/main.html" id="on">首页</a></li>
<li><a href="http://blog.sina.com.cn/s/articlelist_1792358825_0_1.html">博文目录</a></li>
</ul>
</nav>
</header>
（4）为上个步骤中的nav元素以及ul和li元素添加CSS样式，部分样式如下。
nav#blognav {
width: 431px;
height: 48px;
top: 60%;
left: 108px;
}
nav#blognav ul li {
background-image: url(images/sg_newsp.png);
padding:0px 14px;
background-position: 100% -240px;
background-repeat: no-repeat;
float: left;
font-size: 14px;
overflow: hidden;
}
（5）向页面的底部区域添加内容，这些内容包括版权所有和当前的联系方式。代码如下。
<footer id="blogfooter">
<div><p>版权所有:HTML 5热门爱好者 Copyright 2013 All Rights Reserved</p></div>
<div>联系QQ:798215854 联系电话：130639*****</div>
</footer>
（6）运行页面查看页面效果，如图2-21所示。
图2-21 头部和底部区域内容显示
（7）中间区域左侧和右侧不同，左侧只是显示一些基本信息，包括作者信息、文章分类和评论三部分。将整个左侧使用aside元素表示，然后向该元素中添加其他内容，每一部分内容都使用section元素表示。在第一部分中添加内容，使用header元素表示标题，然后在显示作者头像时添加figure元素。部分代码如下。
<section id="conn1">
<header id="connHead1"> <h1>作者介绍</h1> </header>
<div id="connBody1">
<div>
<figure>
<img src="images\html5.jpg" alt="作者介绍">
<figcaption>疯狂的爱好者</figcaption>
</figure>
</div>
<div id="divSpecial"><!--省略部分内容--></div>
</section>
（8）向左侧与作者信息有关的内容添加CSS样式，部分样式代码如下。
figure{
margin-left:15px;
margin-top:0px;
}
figcaption{
color:gray;
font-weight:bold;
padding-left:25px;
}
（9）左侧第二部分表示文章的分类，其中使用header元素表示头部内容，nav、ul和li结合实现文章的分类。部分代码如下。
<section id="conn2">
<header id="connHead2">
<h1>分类</h1><span id="edit1"><a href="#">[<cite>管理</cite>]</a></span>
</header>
<div id="connBody2">
<nav id="classList">
<ul>
<li id="dot1"><a target="_blank" href="#">全部博文</a><em> (62)</em></li>
<!--省略部分内容-->
</ul>
</nav>
</div>
</section>
（10）向左侧与文章分类有关的内容中添加样式，部分样式如下。
nav#classList {
padding:10px;
}
nav#classList ul li{
line-height:21px;
padding-left:8px;
font-family:宋体;
font-size:12px;
}
（11）左侧第三部分显示读者的评论信息，这些评论包括评论人昵称、评论时间和评论内容等。其中，可以使用header表示标题的“评论”文本，使用nav、ul和li元素显示第一条评论信息，time元素指定发布日期和时间。部分内容如下。
<section id="conn3">
<header id="connHead3"><h1>评论</h1></header>
<div id="connBody3">
<nav id="zComments">
<ul id="zCommentsUl">
<li id="commentsCell_linedot1">
<div id="commentsH1"><span id="commentsName_txtc_dot1"><a href="#" target="_blank" title="随风">从头开始</a></span><time datetime="2011-04-01T16:59" pubdate>08-25 14:50</time></div>
<div id="commentsContants1"><div id="commentsContantsTxt1"><a href="#" target="_blank"> 博主您好，非常喜欢您的文章，能不能把您的...</a></div></div>
</li>
<!--省略部分内容-->
</ul>
</nav>
</div>
</section>
（12）为左侧第三部分的有关内容添加样式，如指定time元素所显示的颜色和字体大小，具体样式代码不再显示。
（13）右侧内容很重要也很简单，它包含一些文章列表以及底部的分页内容。其中，使用section元素表示每一篇文章，使用footer元素表示右侧底部的分页链接。在每一篇文章中，都包含文章标题、内容和操作（如评论和收藏）。部分代码如下。
<section>
<header>
<div id="blog_title_h1">
<h1 id="blog_title1"><a href="#" target="_blank">本地缓存mainfest详解</a></h1>
<time datetime="2011-04-05T18:30" pubdate>(2013-08-25 18:30)</time>
</div>
<div id="articleTag1"><span id="txtb1">分类：</span><a href="#"> HTML5</a></div>
</header>
<div id="content1">
<p> Web应用程序的本地缓存是通过每个页面的manifest文件来管理的。manifest文件是一个简单文本文件，在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径。你可以为每一个页面单独指定一个manifest文件，也可以对整个Web应用程序指定一个总的manifest文件。</p>
</div>
<footer id="tagMore1">
<div id="tag_txtc1"><a href="#" target="_blank">阅读</a> ┆ <a target="_blank" href="#">评论</a> ┆ 还没有被转载┆ <a href="javascript:;" onclick="return false;">收藏</a> </div>
<div id="more1"><span id="smore1"><a href="#">查看全文</a>>></span></div>
</footer>
</section>
（14）为上述文章内容指定样式，例如文章标题的字体样式和字体大小，具体样式代码不再显示。
（15）根据效果图为右侧的分页链接添加文本和样式。以文本为例，代码如下。
<footer id="tagMore1">
<div id="tag_txtc1">
<a href="#" target="_blank">阅读</a> ┆ <a target="_blank" href="#">评论</a> ┆ 还没有被转载┆ <a href="javascript:;" onclick="return false;">收藏</a>
</div>
<div id="more1"><span id="smore1"><a href="#">查看全文</a>>></span></div>
</footer>
（16）右侧内容设计完成后，本节实验指导就已经完成了。所有内容完成后重新运行页面，最终的设计效果如图2-20所示。