常用的命名新增为html5元素标签成员。

在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。