首页 » 编程语言 » html » 正文

HTML5标签:footer元素的使用方法及作用

html元素中的<footer>标签是html5新增的标签,用于定义整个页面的页脚或页面中其他内容区块的页脚,下面我们将会详细介绍<footer>标签的使用方法及作用。

<footer>标签的定义

 <footer> 标签定义整个页面的页脚,或文章页脚、或页面中某个内容区块的页脚;

 <footer> 标签可以在一个页面中出现多次,并没有次数限制;

 <footer> 标签是html5新增标签

浏览器支持情况

 <footer> 标签已被IE9, Firefox, Opera, Chrome, and Safari支持;

但在IE 8 以及更早的版本中,是不支持 <footer> 标签的。

<footer>标签的用法

footer元素代表整个页面、文章或其他内容区域的页脚(或脚注),常常位于页面或内容块的结尾,通常包含页面或内容块的脚注信息,如作者、版权、相关文档的链接、联系信息等。

1、网站页脚

<footer> 标签用于定义网站页脚,则位于整个页面的底部,如下图所示:

2019-12-17_232001.jpg

网站页脚部分的<footer>标签,通常包含整个页面或网站版权信息、使用条款链接、联系信息等,演示代码如下:

<body>
<footer>
<p> 
<a href="">关于我们</a> |  
<a href="">联系我们</a> |    
<a href="">网站地图</a> |    
<a href="">广告投放</a> |    
<a href="">投稿中心</a>
</p>
</footer>
</body>

以上代码运行结果如下:

2019-12-21_174056.png

<footer>标签定义网站页脚,则表示的是与整个网站相关的基本信息。

2、文章页脚

<footer>标签也可以定义文章页脚,位于页面中主体文章内容的尾部,常常包含该文章的一些基本信息,比如,文章的作者、相关连接、文章版权等信息,演示代码如下:

<article>
<footer>
<p> 
<a href="">文章作者</a>  
<a href="">文章来源</a>    
<a href="">版权声明</a>      
<a href="">相关资料</a>  
</p>
</footer>
</article>

<footer>标签定义文章页脚,则表示的是该文章相关的一些基本信息。

3、其他内容区块的页脚

<footer>标签除了定义网站页脚、文章页脚外,可以定义其他内容区块的页脚,但要根据实际情况而定,如果确实适合定义一个页脚,才可以使用;如果没有必要或不适合的话,就尽量不要使用footer,毕竟乱用任何html标签都是不合理的做法。

但要注意,<footer>标签定义的通常是该区块内容相关的一些信息。



欢迎您发表评论或留言