HTML 標籤的用法
- 巴扎黑原創
- 2017-06-07 11:41:336136瀏覽
html5 header元素標籤 html5新增標籤元素之
一、header標籤元素基本介紹 - TOP
在HTML5版本之前習慣使用div標籤佈局網頁，並在HTML5在DIV標籤基礎上新增header標籤元素。也叫「
正應為大家公認html版面配置中對「header」為常用命名，所以在HTML5新增了個header標籤元素。可以這樣理解為什麼在html5中新增header為標籤元素。
除了直接使用header標籤外，也可以對header設定class或id。
二、文法結構 - TOP
header標籤元素和div用法相同。有開始有閉合。
語法：
1、直接不給id或class
2、設定id
#3、設定class
4、特色：就像DIV標籤元素一樣可以多次使用，不同地方可以使用id或class設定不同樣式。
三、相容性 - TOP
因為header標籤是HTML5新增標籤元素，所以舊版瀏覽器皆不支持，需要IE9+以上瀏覽器、最新GoogleChrome等瀏覽器才支持。當然國內360瀏覽器、百度瀏覽器、遨遊瀏覽器等瀏覽器均借用系統自帶IE內核，所以國內瀏覽器實際上與你係統自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然相容於HTML5新增標籤元素。
四、新舊DIV佈局比較案例 - TOP
透過DIV+CSS佈局與HTML5+CSS佈局比較觀察並掌握對header應用。
1、DIVCSS5實例HTML5+CSS完整程式碼
<!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>2、效果截圖
程式碼在DW軟體截圖、效果在Google Chrome（支援HTML5）瀏覽器效果進行PS的效果圖。一般IE6-IE8不支援HTML5看不到HTML5佈局效果，需要IE9以上版本瀏覽器才能看到佈局效果。
以上是HTML