html5中header標(biāo)簽怎么用-創(chuàng)新互聯(lián)

小編給大家分享一下html5中header標(biāo)簽怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元金安做網(wǎng)站,已為上家服務(wù),為金安各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

一、首先我們來(lái)說(shuō)說(shuō)html5 header標(biāo)簽元素基本介紹

header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他的內(nèi)容，比如在header里面放置logo圖片、搜索表單等等。

注意：一個(gè)頁(yè)面內(nèi)并沒有限制header的出現(xiàn)次數(shù)，也就是說(shuō)我們可以在同一頁(yè)面內(nèi)，不同的內(nèi)容區(qū)塊上分別加上一個(gè)header元素。

在HTML5版本之前習(xí)慣使用div標(biāo)簽布局網(wǎng)頁(yè)，在HTML5在DIV標(biāo)簽基礎(chǔ)上新增header標(biāo)簽元素。也叫“<header>”頭部標(biāo)簽。以前我們?cè)赿iv css布局中常常把網(wǎng)頁(yè)大致分為頭部、內(nèi)容、底部。對(duì)于大結(jié)構(gòu)我們常常使用div里加id進(jìn)行布局。而頭部常常使用<div id=”header”></div>或<div class=”header”></div>進(jìn)行布局，特點(diǎn)與傳統(tǒng)DIV布局不同，少了div做標(biāo)簽，而是新增元素標(biāo)簽。

正應(yīng)為大家公認(rèn)html布局中對(duì)“header”為常用命名，所以在HTML5新增了個(gè)header標(biāo)簽元素?？梢赃@樣理解為什么在html5中新增header為標(biāo)簽元素。

除了直接使用header標(biāo)簽外，也可以對(duì)header設(shè)置class或id。

html5 header標(biāo)簽的用法實(shí)例：

對(duì)主頁(yè)的介紹：

<header>  
 <h2>創(chuàng)新互聯(lián)建站</h2>  
 <p>專注于編程（創(chuàng)新互聯(lián)建站）</p>  
</header>  
<article>  
 <header>  
  <h2>創(chuàng)新互聯(lián)建站的html5語(yǔ)義化標(biāo)簽之結(jié)構(gòu)標(biāo)簽</h2>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...這里面包含了很多東西...</p>  
</article>

這就是最基本的用法了。在上面的結(jié)構(gòu)中，我們可以看到使用header我們定義了一篇文章的標(biāo)題和內(nèi)容。這里header標(biāo)簽的使用并不是頁(yè)面的頁(yè)頭，而是文章的頁(yè)頭。

所以在HTML5中，header的使用更加靈活，你可以根據(jù)你的需要來(lái)定義和組織document結(jié)構(gòu)。

同樣,在架構(gòu)頁(yè)面時(shí)，header標(biāo)簽一般都放在頁(yè)面的頂部，但是如果你想把他放在左側(cè)，右側(cè)甚至底部都沒有關(guān)系，標(biāo)簽只定義了本身在頁(yè)面的角色，而不是位置。當(dāng)然更具搜索引擎優(yōu)化原則，重要內(nèi)容最后在架構(gòu)頁(yè)面的時(shí)候提前。

二、現(xiàn)在再來(lái)說(shuō)說(shuō)兼容性的問(wèn)題了：

因?yàn)閔eader標(biāo)簽是HTML5新增標(biāo)簽元素，所以舊版本瀏覽器均不支持，需要IE9+以上瀏覽器、最新谷歌Chrome等瀏覽器才支持。當(dāng)然國(guó)內(nèi)360瀏覽器、百度瀏覽器、遨游瀏覽器等瀏覽器均借用系統(tǒng)自帶IE內(nèi)核，所以國(guó)內(nèi)瀏覽器實(shí)際上與你系統(tǒng)自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然就兼容HTML5新增標(biāo)簽元素。

現(xiàn)在我們升級(jí)一下上文的代碼：

<body>
<header>
<hgroup>
<h2>HTML5教程創(chuàng)新互聯(lián)建站</h2>
<a href=”/”>[手機(jī)版]</a>
<a href=”/”>[創(chuàng)新互聯(lián)建站]</a>
</hgroup>
<nav>
<ul>
<li><a href=”/”>首頁(yè)</a></li>
<li><a href=”/”>手機(jī)版</a></li>
<li><a href=”/”>論壇</a></li>
</ul>
</nav>
</header>
</body>

以上是html5中header標(biāo)簽怎么用的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)頁(yè)名稱：html5中header標(biāo)簽怎么用-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article32/hsspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、搜索引擎優(yōu)化、云服務(wù)器、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容