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