溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關html中header定義的作用是什么，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
在html中，header標簽定義文檔的頁眉。語法格式為“<header>內容</header>”。header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題等。
一、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+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中header定義的作用是什么，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
