footer元素

最新推荐文章于 2021-07-04 11:47:01 发布

xxiaowen

最新推荐文章于 2021-07-04 11:47:01 发布

阅读量1.2k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/51217132

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

footer元素可以作为其上层父级内容区块或一个根区块的脚注。footer通常包含其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

在HTML5出现之前，是这样编写页脚

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者：wenzhilanyu@126.com
        	时间：2016-04-22
        	描述：footer元素
    -->
	    <div id="footer">
	    	 <ul>
	    	 	<li>版权信息</li>
	    	 	<li>网站地图</li>
	    	 	<li>联系方式</li>
	    	 </ul>
	    </div>
	</body>
</html>

效果图

但是到了HTML5之后，这种方式将不再使用，而是使用更加语义化的footer元素来代替

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者：wenzhilanyu@126.com
        	时间：2016-04-22
        	描述：footer元素
    -->
	    <footer>
	    	 <ul>
	    	 	<li>版权信息</li>
	    	 	<li>网站地图</li>
	    	 	<li>联系方式</li>
	    	 </ul>
	    </footer>
	</body>
</html>

效果图

提示：与header元素一样，页面中也未限制footer元素的个数。同时，可以为article元素或section元素添加footer元素。

具体代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者：wenzhilanyu@126.com
        	时间：2016-04-22
        	描述：footer元素
    -->
     <!--
	    <footer>
	    	 <ul>
	    	 	<li>版权信息</li>
	    	 	<li>网站地图</li>
	    	 	<li>联系方式</li>
	    	 </ul>
	    </footer>
	    -->
	    <article>
	    	文章内容
	    	<footer>
	    		文章的脚注
	    	</footer>
	    </article>
	    <section>
	    	分段内容
	    	<footer>
	    		分段内容的脚注
	    	</footer>
	    </section>
	</body>
</html>

效果图