首页 | 开发 | 网页 | HTML5

HTML5 <footer>标签元素 css3布局教程

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; bac公斤round:#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以上浏览器测试。

相关链接