明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML5的<footer>標簽元素怎么使用

發(fā)表時間：2024-05-09 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]H5里面增加了一個<footer>標簽元素，那么我們要怎樣使用呢？記得我們在html5版本以前布局網(wǎng)頁底部版權(quán)時，都會習(xí)慣使用id=”footer”或class=”footer”來標記段落，但是在H5里有了這個標簽之后，一切都簡單了很多。HTML5 <footer>標簽元素...
H5里面增加了一個<footer>標簽元素，那么我們要怎樣使用呢？記得我們在html5版本以前布局網(wǎng)頁底部版權(quán)時，都會習(xí)慣使用id=”footer”或class=”footer”來標記段落，但是在H5里有了這個標簽之后，一切都簡單了很多。

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

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

比如傳統(tǒng)html布局代碼：

<div id=”footer”>  
　　學(xué)習(xí)PHP，上www.php.cn! 
</div>

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

html5語法結(jié)構(gòu)

1、語法

<footer> 
    第一行
　學(xué)習(xí)PHP，上www.php.cn! 
</footer>

2、對footer元素標簽加id

<footer id=”abc”> 
    第一行
　學(xué)習(xí)PHP，上www.php.cn! 
</footer>

3、對footer標簽加class

<footer class=”yanshi”> 
    第一行
　學(xué)習(xí)PHP，上www.php.cn! 
</footer>

4、知識擴展

我們在html5開發(fā)使用footer標簽時，把當作普通div標簽對待即可，只不過一般用于網(wǎng)站底部布局。一般情況下一篇網(wǎng)頁只有一個底部區(qū)，所以使用最好只使用一次footer即可。

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

tml5 footer使用布局案例

通過傳統(tǒng)div標簽布局與footer標簽布局對比觀察學(xué)習(xí)，從而掌握footer標簽。同時對footer加class，設(shè)置紅色字體進行對比。

1、完整HTML5布局實例代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>footer </title> 
<style> 
body{text-align:center} 
/* 傳統(tǒng)布局CSS */  
#footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%} 
 
/* HTML5布局樣式 直接對footer元素設(shè)置樣式 */  
footer{ background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} 
.color-F00{ color:#F00}  
</style> 
</head> 
<body> 
<p>傳統(tǒng)html 使用div布局</p> 
<div id="footer"> 
　　    第一行
　學(xué)習(xí)PHP，上www.php.cn! 
</div> 
<p>html5 footer標簽布局</p> 
<footer> 
　　    第一行
　學(xué)習(xí)PHP，上www.php.cn! 
</footer> 
 
<p>html5 footer標簽布局設(shè)置class</p> 
<footer class="color-F00"> 
　    第一行
　學(xué)習(xí)PHP，上www.php.cn! 
</footer> 
</body> 
</html>

以上使用傳統(tǒng)html div標簽和html5 footer標簽布局，同時也對footer設(shè)置class

<footer>標簽的用法就是這么多了，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)推薦

html 的<header>標簽需要怎么使用


html文檔類型聲明怎么寫


css3里怎么顯示圓形圖片

以上就是HTML5的<footer>標簽元素怎么使用 的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。