技术开发 频道

对阵Flash 实战HTML 5技巧之页面设计

    【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>

  在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>标签,因为这些不是页面的主要内容,在三个aside标签区域中,分别设置了相关的<ul><li>和页面链接标签。

  最后的footer版权声明

  在整个页面的最下方,是版权声明部分,这最适合使用footer标签了,如下:

  <footer role="contentinfo" class="contentinfo">
    
<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等。

0
相关文章