【IT168 专稿】在上一篇文章《对阵Flash 实战HTML 5技巧之页面布局》中我们给大家介绍了一个符合HTML5标准的网页的设计过程,在本篇文章中,我们紧接上一篇的内容,继续踏上HTML5之旅。
文章的评论区域
在文章后的读者评论区域中,我们使用的是sections标签,如下:
<section id="comments">
<h1> 3 Comments</h1>
<article class="comment">
<div class="comment-meta" id="comment-1">
<a href="" rel="external nofollow">Homer Simps on</a>
<img src="" alt="" class="avatar" />
<time datetime="" pubdate></time>
</div>
<div class="comment-body">
<p></p>
</div>
</article>
<article class="comment"></article>
<article class="comment"></article>
<article class="comment"></article>
</section>
<h1> 3 Comments</h1>
<article class="comment">
<div class="comment-meta" id="comment-1">
<a href="" rel="external nofollow">Homer Simps on</a>
<img src="" alt="" class="avatar" />
<time datetime="" pubdate></time>
</div>
<div class="comment-body">
<p></p>
</div>
</article>
<article class="comment"></article>
<article class="comment"></article>
<article class="comment"></article>
</section>
在id为comments的section区域内,存放的是读者的所有评论,每一条评论都被设置放在<article class="comment">内,在<article>标签内,再使用div及相关样式进行了设置修饰。
页面的footer div部分
在评论区域后,是广告区域,这里我们设计一个大的div层,如下图:
其代码结构如下:
<div id="footer">
<aside class="sub-footer">
<h1></h1>
<p></p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</aside>
<aside class="sub-footer">
<h1></h1>
<p></p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</aside>
<aside class="advertising">
<h1></h1>
<a href=""><img src="" alt="" /></a>
</aside>
</div>
<aside class="sub-footer">
<h1></h1>
<p></p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</aside>
<aside class="sub-footer">
<h1></h1>
<p></p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</aside>
<aside class="advertising">
<h1></h1>
<a href=""><img src="" alt="" /></a>
</aside>
</div>
可以看到,这里我们再次使用了<aside>标签,因为这些不是页面的主要内容,在三个aside标签区域中,分别设置了相关的<ul>,<li>和页面链接标签。
最后的footer版权声明
在整个页面的最下方,是版权声明部分,这最适合使用footer标签了,如下:
<footer role="contentinfo" class="contentinfo">
<p>…………</p>
</footer>
<p>…………</p>
</footer>
小结
在本文中,指导大家使用了HTML5中的新的标签,比如<aside>,<header>,<footer>,<article>,<nav>,<sections>等去创建符合HTML5标准格式的网页。由于HTML5标准还没最后敲定,因此,其中的内容有可能在将来有所改变。作为前端或者后端开发者,建议从现在开始就关注和学习HTML5,更多的资料可以参考一些著名的HTML5网站,如:W3C的HTML标准, www.w3.org/TR/html5/ 及著名的HTML5咨询网站http://html5doctor.com等。