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

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

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

一、首先我們來說說html5 header標簽元素基本介紹

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

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

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

正應為大家公認html布局中對“header”為常用命名，所以在HTML5新增了個header標簽元素?？梢赃@樣理解為什么在html5中新增header為標簽元素。

除了直接使用header標簽外，也可以對header設置class或id。

html5 header標簽的用法實例：

對主頁的介紹：

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

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

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

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

二、現(xiàn)在再來說說兼容性的問題了：

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

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

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

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

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

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

廣告

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

手機網(wǎng)站建設