HTML+CSS+JavaScript网页制作实用教程
上QQ阅读APP看书,第一时间看更新

1.4.3 课堂案例——使用footer元素

footer元素通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。footer元素和header元素的使用方法基本一样,可以在一个页面中使用多次,如果在一个区段后面加入footer元素,那么它就相当于该区段的尾部了。

在HTML5出现之前,通常使用类似下面的代码来编写页面的页脚。


<div id="footer">
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</div>

在HTML5中,可以不使用div元素,而用更加语义化的footer元素来写,如下所示。


<footer>
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul> 
</footer> 

footer元素可以用作页面整体的页脚,也可以作为一个内容区块的结尾。例如,可以将<footer>直接写在<article>或是<section>中。

在article元素中添加footer元素,如下所示。


<article>
    文章内容
    <footer> 
        文章的脚注 
    </footer> 
</article> 

在section元素中添加footer元素,如下所示。


<section>
    分段内容  
    <footer> 
        分段内容的脚注 
    </footer> 
</section>