html5 header標簽 html header css布局教程

2020-03-24 17:45:26

字體：大中小

來源：轉載

供稿：網友

html5 header元素標簽 html5新增標簽元素之<header</header，通過html header基礎教程學習同時作為header css布局技巧

一、header標簽元素基本介紹 - TOP
在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。

二、語法結構 - TOP

header標簽元素和div用法相同。有開始有閉合。

語法：

<header內容</header

1、直接不給id或class

<header頭部內容區</header

2、設置id

<headerid=”divcss5”頭部內容區</header

3、設置class

<headerclass=”divcss5”頭部內容區</header

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

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

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

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

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

<!DOCTYPEhtml
<html
<head
<metacharset="utf-8"/
<titlehtml5Header標簽實例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
<divid="header"我在傳統div布局中</div
<header我在傳統div布局中,必須在支持HTML5瀏覽器才能看到效果，
建議谷歌瀏覽器測試觀察效果</header
<headerclass="color-000"我顏色為黑色,背景為#666</header
</body
</html