溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下html5中header標簽怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一、首先我們來說說html5 header標簽元素基本介紹
header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題，但也可以包含其他的內容，比如在header里面放置logo圖片、搜索表單等等。
注意：一個頁面內并沒有限制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。
html5 header標簽的用法實例：
對主頁的介紹：
<header> <h2>億速云</h2> <p>專注于編程（億速云）</p> </header> <article> <header> <h2>億速云的html5語義化標簽之結構標簽</h2> <p>article、section、hgroup、aside、nav...</p> </header> <p>...這里面包含了很多東西...</p> </article>
這就是最基本的用法了。在上面的結構中，我們可以看到使用header我們定義了一篇文章的標題和內容。這里header標簽的使用并不是頁面的頁頭，而是文章的頁頭。
所以在HTML5中，header的使用更加靈活，你可以根據你的需要來定義和組織document結構。
同樣,在架構頁面時，header標簽一般都放在頁面的頂部，但是如果你想把他放在左側，右側甚至底部都沒有關系，標簽只定義了本身在頁面的角色，而不是位置。當然更具搜索引擎優化原則，重要內容最后在架構頁面的時候提前。
二、現在再來說說兼容性的問題了：
因為header標簽是HTML5新增標簽元素，所以舊版本瀏覽器均不支持，需要IE9+以上瀏覽器、最新谷歌Chrome等瀏覽器才支持。當然國內360瀏覽器、百度瀏覽器、遨游瀏覽器等瀏覽器均借用系統自帶IE內核，所以國內瀏覽器實際上與你系統自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然就兼容HTML5新增標簽元素。
現在我們升級一下上文的代碼：
<body> <header> <hgroup> <h2>HTML5教程億速云</h2> <a href=”/”>[手機版]</a> <a href=”/”>[億速云]</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標簽怎么用的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
