HTML5 footer標簽元素 html底部footer css布局教程

2020-03-24 17:47:32

字體：大中小

來源：轉載

供稿：網友

HTML5 <footer標簽元素新增html5底部footer元素標簽，對html 5新增footer標簽基礎認識到了解footer css布局教程做到真正掌握與認識<footer

記得我們在以前html5版本以前布局網頁底部版權時，習慣使用id=”footer”或class=”footer”。了解更多html教程標簽！

比如傳統html布局代碼：

<divid=”footer”
　　©DIVCSS5.COM版權所有<br/
　　學習CSS，找DIV+CSS資源上DIVCSS5!
</div

但在html5中將此”footer”常用的命名新增為html5元素標簽成員。

一、html5語法結構 - TOP

1、語法

<footer
　　©DIVCSS5.COM版權所有<br/
　　學習CSS，找DIV+CSS資源上DIVCSS5!
</footer

2、對footer元素標簽加id

<footerid=”abc”
　　©DIVCSS5.COM版權所有<br/
　　學習CSS，找DIV+CSS資源上DIVCSS5!
</footer

3、對footer標簽加class

<footerclass=”yanshi”
　　©DIVCSS5.COM版權所有<br/
　　學習CSS，找DIV+CSS資源上DIVCSS5!
</footer

4、知識擴展
我們在html5開發使用footer標簽時，把當作普通div標簽對待即可，只不過一般用于網站底部布局。一般情況下一篇網頁只有一個底部區，所以使用最好只使用一次footer即可。

需要注意：<footer是html5新增的，在IE8及以下IE瀏覽器不兼容，謹慎使用。

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

通過傳統div標簽布局與footer標簽布局對比觀察學習，從而掌握footer標簽。同時對footer加class，設置紅色字體進行對比。

1、完整HTML5布局實例代碼

<!DOCTYPEhtml
<html
<head
<metacharset="utf-8"/
<titlefooter在線演示DIVCSS5</title
<style
body{text-align:center}
/*傳統布局CSS*/
#footer{color:#CCC;background:#630202;border-top:1pxsolid#871515;padding:10px030px0;width:100%}
/*HTML5布局樣式直接對footer元素設置樣式*/
footer{background:#CCC;border-top:1pxsolid#000;padding:10px030px0;width:100%}
.color-F00{color:#F00}
</style
</head
<body
<p傳統html使用div布局</p
<divid="footer"
　　©DIVCSS5.COM版權所有<br/
　　學習CSS，找DIV+CSS資源上DIVCSS5!
</div
<phtml5footer標簽布局</p
<footer
　　©DIVCSS5.COM版權所有<br/
　　學習CSS，找DIV+CSS資源上DIVCSS5!
</footer
<phtml5footer標簽布局設置class</p
<footerclass="color-F00"
　　©DIVCSS5.COM版權所有<br/
　　學習CSS，找DIV+CSS資源上DIVCSS5!
</footer
</body
</html