html5 <header>標(biāo)簽 html header css布局教程 </header>

呂小薇 2016-12-28

展開全文

html5 <header>標(biāo)簽 html header css布局教程

html5 header元素標(biāo)簽 html5新增標(biāo)簽元素之<header></header>，通過html header基礎(chǔ)教程學(xué)習(xí)同時作為header css布局技巧

一、header標(biāo)簽元素基本介紹 - TOP

在HTML5版本之前習(xí)慣使用div標(biāo)簽布局網(wǎng)頁，在HTML5在DIV標(biāo)簽基礎(chǔ)上新增header標(biāo)簽元素。也叫“<header>”頭部標(biāo)簽。以前我們在div css布局中常常把網(wǎng)頁大致分為頭部、內(nèi)容、底部。對于大結(jié)構(gòu)我們常常使用div里加id進行布局。而頭部常常使用<div id=”header”></div>或<div class=”header”></div>進行布局，特點與傳統(tǒng)DIV布局不同，少了div做標(biāo)簽，而是新增元素標(biāo)簽。

正應(yīng)為大家公認(rèn)html布局中對“header”為常用命名，所以在HTML5新增了個header標(biāo)簽元素?？梢赃@樣理解為什么在html5中新增header為標(biāo)簽元素。

除了直接使用header標(biāo)簽外，也可以對header設(shè)置class或id。

二、語法結(jié)構(gòu) - TOP

header標(biāo)簽元素和div用法相同。有開始有閉合。

語法：

<header>內(nèi)容</header>

1、直接不給id或class

<header>頭部內(nèi)容區(qū)</header>

2、設(shè)置id

<header id=”divcss5”>頭部內(nèi)容區(qū)</header>

3、設(shè)置class

<header class=”divcss5”>頭部內(nèi)容區(qū)</header>

4、特點：就像DIV標(biāo)簽元素一樣可以多次使用，不同地方可以使用id或class設(shè)置不同樣式。

三、兼容性 - TOP

因為header標(biāo)簽是HTML5新增標(biāo)簽元素，所以舊版本瀏覽器均不支持，需要IE9+以上瀏覽器、最新谷歌Chrome等瀏覽器才支持。當(dāng)然國內(nèi)360瀏覽器、百度瀏覽器、遨游瀏覽器等瀏覽器均借用系統(tǒng)自帶IE內(nèi)核，所以國內(nèi)瀏覽器實際上與你系統(tǒng)自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然就兼容HTML5新增標(biāo)簽元素。

四、新舊DIV布局對比案例 - TOP

通過DIV+CSS布局與HTML5+CSS布局對比觀察并掌握對header應(yīng)用。

1、DIVCSS5實例HTML5+CSS完整代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html5 Header標(biāo)簽實例 DIVCSS5</title> 
<style> 
/* 傳統(tǒng)布局CSS */ 
#header{ width:300px; height:40px; background:#CCC} 
 
/* HTML5布局樣式 */ 
header{ width:400px; height:70px; color:#F00; background:#F5F5F5} 
.color-000{ color:#000; background:#666} 
</style> 
</head> 
<body> 
<div id="header">我在傳統(tǒng)div布局中</div> 
 
<header>我在傳統(tǒng)div布局中,必須在支持HTML5瀏覽器才能看到效果， 
建議谷歌瀏覽器測試觀察效果</header> 
 
<header class="color-000">我顏色為黑色,背景為#666</header> 
</body> 
</html>

2、效果截圖

html5 header布局效果截圖
div與header布局效果截圖

DIVCSS5特別提示：代碼在DW軟件截圖、效果在谷歌Chrome（支持HTML5）瀏覽器效果進行PS的效果圖。普通IE6-IE8不支持HTML5看不到HTML5布局效果，需要IE9及以上版本瀏覽器看到布局效果。

3、在線演示：查看案例（提示：需要在支持HTML5瀏覽器才能看到HTML5布局效果）

4、打包下載完整HTML源代碼：

立即下載（1.072KB）

五、總結(jié) - TOP

DIVCSS5建議，為了兼容從IE6到最新版本IE，普通WEB網(wǎng)頁布局還不是時候使用html5新增標(biāo)簽元素。建議還是使用常規(guī)DIV+CSS布局html網(wǎng)頁。平時知道HTML5新增有這些標(biāo)簽元素，知道使用方法與DIV本質(zhì)沒有什么區(qū)別。當(dāng)然你會DIV+CSS布局自然會HTML5中新增元素標(biāo)簽。