HTML5 <footer>标签元素 新增html5底部footer元素标签，对html 5新增footer标签根蒂认识到了解footer css结构教程做到真正驾御与认识<footer>
记得我们在畴前html5版本从前机关网页底部版权时，习俗使用id=”footer”或class=”footer”。熟习更多html教程标签！
譬如古板html组织代码：
<div id=”footer”> © CSS5.COM 版权一切<br /> 深造CSS，找DIV+CSS成本上CSS5! </div>
但在html5中将此”footer”经常运用的定名新增为html5元素标签成员。
一、html5语法结构
1、语法
<footer> © CSS5.COM 版权所有<br /> 进修CSS，找DIV+CSS成本上CSS5! </footer>
2、对footer元素标签加id
<footer id=”abc”> © CSS5.COM 版权悉数<br /> 学习CSS，找DIV+CSS资源上CSS5! </footer>
3、对footer标签加class
<footer class=”yanshi”> © CSS5.COM 版权全数<br /> 学习CSS，找DIV+CSS成本上CSS5! </footer>
4、知识扩张
我们在html5垦荒运用footer标签时，把算作寻常div标签对待即可，只是通常用于站点底部布局。通常环境下一篇网页只需一个底部区，所以使用最好只应用一次footer便可。
紧要留心：<footer>是html5新增的，在IE8及以下IE阅读器不兼容，谨慎应用。
二、html5 footer应用结构案例
经由过程古板div标签结构与footer标签结构对比观察进修，从而把握footer标签。同时对footer加class，配置红色字体进行比拟。
1、残破HTML5布局实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>footer 在线演示 CSS5</title>
<style>
body{text-align:center}
/* 保守构造CSS */
#footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%}
/* HTML5构造样式 直接对footer元素配置名堂 */
footer{ bac千克round:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%}
.color-F00{ color:#F00}
</style>
</head>
<body>
<p>激进html 运用div布局</p>
<div id="footer">
© CSS5.COM 版权全体<br />
学习CSS，找DIV+CSS资源上CSS5!
</div>
<p>html5 footer标签结构</p>
<footer>
© CSS5.COM 版权全部<br />
学习CSS，找DIV+CSS利润上CSS5!
</footer>
<p>html5 footer标签组织配置class</p>
<footer class="color-F00">
© CSS5.COM 版权全部<br />
学习CSS，找DIV+CSS本钱上CSS5!
</footer>
</body>
</html>
以上应用古板html div标签和html5 footer标签机关，同时也对footer配置class。
2、HTML5布局浏览器截图
HTML代码html5 footer组织与涉猎器涉猎成果拼接图
要测试html5 footer标签布局成果，必要支持HTML5的IE涉猎器测试。引荐google chrome涉猎器、或win IE9以上涉猎器测试。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h52414.shtml
