站長資訊網(wǎng)
html5新增的頁眉標(biāo)簽是“header”。header標(biāo)簽可定義文檔的頁眉（介紹信息），是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，常用來表示一些前言性質(zhì)或?qū)Ш筋惖膬?nèi)容；它可以包含一些標(biāo)題性質(zhì)元素，也可以放置一些比如logo，搜索框等的元素。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
html5新增的頁眉標(biāo)簽是“header”。
header標(biāo)簽可定義文檔的頁眉（介紹信息）。
<header> 元素用來表示一些前言性質(zhì)或?qū)Ш筋惖膬?nèi)容。它可以包含一些標(biāo)題性質(zhì)元素，也可以放置一些比如logo，搜索框，或其它的<header>元素等。
header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他的內(nèi)容，比如在header里面放置logo圖片、搜索表單等等。
注意：一個(gè)頁面內(nèi)并沒有限制header的出現(xiàn)次數(shù)，也就是說我們可以在同一頁面內(nèi)，不同的內(nèi)容區(qū)塊上分別加上一個(gè)header元素。
使用說明：
-
<header>元素并不是一個(gè)可以形成段落內(nèi)容的元素，所以，不需要在內(nèi)容目錄里體現(xiàn)出來。
header元素的用法：
下面根據(jù)一幅圖來具體看看header元素的使用方法：
黑色線框所包裹的就是我們的網(wǎng)頁，在網(wǎng)頁里面有一個(gè)網(wǎng)頁標(biāo)題，在網(wǎng)頁標(biāo)題下面是我們的文章標(biāo)題和正文內(nèi)容區(qū)域，在這幅圖里面我們就可以給我們的網(wǎng)頁標(biāo)題和文章標(biāo)題都使用header元素。
下面就一起來演示下：
<body> <header> <h1>網(wǎng)頁標(biāo)題</h1> </header> <article> <header> <h1>文章標(biāo)題</h1> </header> <p>文章正文部分</p> </article> </body>
Header元素效果演示圖：
在HTML5中，一個(gè)header元素至少可以包含一個(gè)heading元素（h1-h6），也可以包括我們下節(jié)課將要學(xué)習(xí)的hgroup元素，還可以包括其他的元素，在新的W3C HTML5標(biāo)準(zhǔn)，我們還可以把NAV元素包括進(jìn)去。
下面我們就來實(shí)現(xiàn)上圖中header案例：
<style> *{ Margin:0; Padding:0; } Body{ Font-family:微軟雅黑; Text-algin:center; } A{ Color:#f60; Text-decoration:none; } Hgroup{ Margin-bottom:10px; } Nav{ Height:48px; Backgroud:#ff6600; } Nav li{ Float:left; Backgroud:#000000; Border-radius:5px; Padding:5px 10px; Margin:10px; List-style:none; } </style> <body> <header> <hgroup> <h1>HTML5視頻教程</h1> <a href=”/”>[手機(jī)版]</a> <a href=”/”>[HTML5論壇]</a> </hgroup> <nav> <ul> <li><a href=”/”>首頁</a></li> <li><a href=”/”>手機(jī)版</a></li> <li><a href=”/”>論壇</a></li> </ul> </nav> </header> </body>
最終效果演示圖：
推薦教程：《html視頻教程》
