Html5页脚标签元素在HTML5底部添加页脚元素标签，识别html 5添加页脚标签的基础。理解页脚css布局教程真正掌握和理解页脚

我记得在之前的html5版本之前，我们在网页底部布局版权的时候用的是id="页脚"或者class="页脚"。了解更多关于html教程标签！

传统的html布局代码，例如：

divid=" footer " DIVCSS5.COM版权所有br/了解CSS并在DIV CSS资源上找到DIV CSS5！/div

但是，在html5中，常用的名称“页脚”是作为html5元素标记成员添加的。

一、html5语法结构 - TOP

1.语法

页脚DIVCSS5.COM版权br/学习CSS，在DIV CSS资源上找到DIV CSS5！/页脚

2.向页脚元素标记添加id

页脚id=" ABC " DIVCSS5.COM版权所有br/学习CSS并在DIV CSS资源上找到DIV CSS5！/页脚

3.向页脚标记添加类

页脚类="偃师" DIVCSS5.COM版权br/学习CSS，在DIV CSS资源上找到DIV CSS5！/页脚

4.知识扩展

当我们在html5开发中使用页脚标签时，我们可以将其视为普通的div标签，但它们通常用于网站的底部布局。一般一个网页只有一个底部区域，更好只用一次页脚。

需要注意的是，html5中新增了footer，与IE8以下的IE浏览器不兼容，慎用。

二、html5 footer使用布局案例 - TOP

通过比较传统的div标签布局和页脚标签布局，我们可以掌握页脚标签。同时给页脚加类，设置红色字体，以供比较。

1.完整的HTML5布局示例代码

！doctypehtmlheartaccharset=' utf-8 '/title footer联机演示div CSS 5/title style body { text-align : center }/*传统版式CSS */# footer { color 3360 # CCC；背景： # 630202；border-top :1 pxsolid # 871515；padd :10 px 030 px0；Width:}/*HTML5布局样式直接设置页脚元素*/页脚{ background: # CCCborder-top :1 pxsolid # 000；padd :10 px 030 px0；宽度：}。color-f00 { color : # f00 }/style/head body p传统html使用div布局/p divid=' footer ' DIVCSS5.COM版权br/了解CSS，查找DIVCSS5！DIV CSS5页脚标签布局/p页脚DIVCSS5.COM版权所有br/了解CSS，在DIV CSS资源上找到DIV CSS5！/footerphtml5页脚标签布局设置类/pfooterclass=' color-f00 ' DIVCSS5.COM版权br/学习CSS，找到DIVCSS5！/页脚/正文/html

上面使用了传统的html div标记和html5foot标记布局，还为页脚设置了类。

2.HTML5布局浏览器截图

HTML代码HTML英尺布局和浏览器浏览效果马赛克图

测试html5页脚标签的布局效果，需要支持HTML 5 IE浏览器测试。测试推荐Google chrome浏览器或者win IE9或者以上。

3.在线演示：查看案例(需要在IE9或以上浏览器或Google浏览器中测试浏览观察，在HTML5浏览器中查看案例效果)

4.打包并下载：

立即下载(1.086KB)

三、html footer总结 - TOP

灵活的把页脚标签当成div标签，比如设置类和id。注意浏览器兼容性，选择性使用页脚作为html5布局标签。