真正掌握与认识<footer>

2019年11月30日作者：佚名

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以上涉猎器测试。