首頁 > web前端 > html教學 > HTML5的
標籤元素怎麼使用

HTML5的
標籤元素怎麼使用

php中世界最好的语言
發布: 2017-11-22 17:20:37
原創
7652 人瀏覽過

H5裡面增加了一個

標籤元素,那我們要怎麼使用呢?記得我們在html5版本以前佈局網頁底部版權時,都會習慣使用id=”footer”或class=”footer”來標記段落,但是在H5裡有了這個標籤之後,一切都簡單了很多。

HTML5

標籤元素新增html5底部footer元素標籤,對html 5新增footer標籤基礎認識到了解footer css佈局教程做到真正掌握與認識

記得我們在先前html5版本以前佈局網頁底部版權時,習慣使用id=”footer”或class=”footer”。了解更多html教學標籤!

例如傳統html佈局程式碼:

<div id=”footer”>  
  学习PHP,上m.sbmmt.com! 
</div>
登入後複製

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

html5語法結構

1、語法

<footer> 
    第一行
 学习PHP,上m.sbmmt.com! 
</footer>
登入後複製

2、對footer元素標籤加上id

<footer id=”abc”> 
    第一行
 学习PHP,上m.sbmmt.com! 
</footer>
登入後複製

3、對footer標籤加class

<footer class=”yanshi”> 
    第一行
 学习PHP,上m.sbmmt.com! 
</footer>
登入後複製

4、知識擴充

我們在html5開發使用footer標籤時,把當作普通div標籤對待即可,只不過一般用於網站底部佈局。一般情況下一篇網頁只有一個底部區,所以使用最好只使用一次footer即可。

要注意:

是html5新增的,在IE8及以下IE瀏覽器不相容,謹慎使用。

tml5 footer使用佈局案例  

透過傳統div標籤佈局與footer標籤佈局對比觀察學習,​​從而掌握footer標籤。同時對footer加class,並設定紅色字體進行比較。

1、完整HTML5佈局實例代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>footer </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{ background:#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"> 
      第一行
 学习PHP,上m.sbmmt.com! 
</div> 
<p>html5 footer标签布局</p> 
<footer> 
      第一行
 学习PHP,上m.sbmmt.com! 
</footer> 
 
<p>html5 footer标签布局设置class</p> 
<footer class="color-F00"> 
     第一行
 学习PHP,上m.sbmmt.com! 
</footer> 
</body> 
</html>
登入後複製

以上使用傳統html div標籤和html5 footer標籤佈局,同時也對footer設定class

標籤的用法就是這麼多了,更多精彩請關注php中文網其它相關文章!

相關推薦

html 的

標籤需要怎麼使用


##html文檔類型宣告怎麼寫


css3裡怎麼顯示圓形圖片#

以上是HTML5的

標籤元素怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板