站長(zhǎng)資訊網(wǎng)在html中，header標(biāo)簽定義文檔的頁(yè)眉。語(yǔ)法格式為“<header>內(nèi)容</header>”。header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
一、header標(biāo)簽元素基本介紹
在HTML5版本之前習(xí)慣使用div標(biāo)簽布局網(wǎng)頁(yè)，在HTML5在div標(biāo)簽基礎(chǔ)上新增header標(biāo)簽元素。也叫“<header>”頭部標(biāo)簽。以前我們?cè)赿iv css布局中常常把網(wǎng)頁(yè)大致分為頭部、內(nèi)容、底部。對(duì)于大結(jié)構(gòu)我們常常使用div里加id進(jìn)行布局。而頭部常常使用<div id=”header”></div>或<div class=”header”></div>進(jìn)行布局，特點(diǎn)與傳統(tǒng)div布局不同，少了div做標(biāo)簽，而是新增元素標(biāo)簽。
正應(yīng)為大家公認(rèn)html布局中對(duì)“header”為常用命名，所以在HTML5新增了個(gè)header標(biāo)簽元素?？梢赃@樣理解為什么在html5中新增header為標(biāo)簽元素。
除了直接使用header標(biāo)簽外，也可以對(duì)header設(shè)置class或id。
二、語(yǔ)法結(jié)構(gòu)
header標(biāo)簽元素和div用法相同。有開(kāi)始有閉合。
語(yǔ)法：
<header>內(nèi)容</header>
1、直接不給id或class
<header>頭部?jī)?nèi)容區(qū)</header>
2、設(shè)置id
<header id=”pcss5”>頭部?jī)?nèi)容區(qū)</header>
3、設(shè)置class
<header class=”pcss5”>頭部?jī)?nèi)容區(qū)</header>
4、特點(diǎn)：就像div標(biāo)簽元素一樣可以多次使用，不同地方可以使用id或class設(shè)置不同樣式。
三、兼容性
因?yàn)閔eader標(biāo)簽是HTML5新增標(biāo)簽元素，所以舊版本瀏覽器均不支持，需要IE9+以上瀏覽器、最新谷歌Chrome等瀏覽器才支持。當(dāng)然國(guó)內(nèi)360瀏覽器、百度瀏覽器、遨游瀏覽器等瀏覽器均借用系統(tǒng)自帶IE內(nèi)核，所以國(guó)內(nèi)瀏覽器實(shí)際上與你系統(tǒng)自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然就兼容HTML5新增標(biāo)簽元素。
四、新舊div布局對(duì)比案例
通過(guò)div+CSS布局與HTML5+CSS布局對(duì)比觀察并掌握對(duì)header應(yīng)用。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html5 Header標(biāo)簽實(shí)例 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瀏覽器才能看到效果， 建議谷歌瀏覽器測(cè)試觀察效果 </header> <header class="color-000">我顏色為黑色,背景為#666</header> </body> </html>
效果截圖
推薦學(xué)習(xí)：html視頻教程
