PHP中文网的html5语义化标签之结构标签
article、section、hgroup、aside、nav...
...这里面包含了很多东西...
本篇文章主要的向大家介紹了關於html5 header標籤的元素的基本介紹,和header標籤的用法實例解析。下面就讓我們一起來看看這篇關於html5 header標籤的文章吧
一、首先我們來說說html5 header標籤元素基本介紹
header元素是一種具有引導和導航作用的結構元素,通常用來放置整個頁面或頁面內的一個內容區塊的標題,但也可以包含其他的內容,例如在header裡面放置logo圖片、搜尋表單等等。
注意:一個頁面內並沒有限制header的出現次數,也就是說我們可以在同一頁內,不同的內容區塊上分別加上一個header元素。
在HTML5版本之前習慣使用div標籤版面網頁,並在HTML5在DIV標籤基礎上新增header標籤元素。也叫「
正應為大家公認html版面配置中對「header」為常用命名,所以在HTML5新增了個header標籤元素。可以這樣理解為什麼在html5中新增header為標籤元素。
除了直接使用header標籤外,也可以對header設定class或id。
html5 header標籤的用法實例:
#對主頁的介紹:
PHP中文网
专注于编程(PHP中文网)
PHP中文网的html5语义化标签之结构标签
article、section、hgroup、aside、nav...
...这里面包含了很多东西...
程式碼效果如圖:
這就是最基本的用法了。在上面的結構中,我們可以看到使用header我們定義了一篇文章的標題和內容。這裡header標籤的使用並不是頁面的頁頭,而是文章的頁頭。
所以在HTML5中,header的使用更加靈活,你可以根據你的需求來定義和組織document結構。
同樣,在架構頁面時,header標籤一般都放在頁面的頂部,但是如果你想把他放在左側,右側甚至底部都沒有關係,標籤只定義了本身在頁面的角色,而不是位置。當然更具搜尋引擎優化原則,重要內容最後在架構頁面的時候提早。
二、現在再來說相容性的問題了:
因為header標籤是HTML5新增標籤元素,所以舊版瀏覽器皆不支持,需要IE9 以上瀏覽器、最新谷歌Chrome等瀏覽器才支援。當然國內360瀏覽器、百度瀏覽器、遨遊瀏覽器等瀏覽器均借用系統自帶IE內核,所以國內瀏覽器實際上與你係統自帶瀏覽器IE版本相同,所以你IE瀏覽器在IE9或以上版本自然相容於HTML5新增標籤元素。
現在我們升級上文的程式碼:
效果如圖:
以上就是關於HTML5 header標籤的用法介紹,這篇文章就介紹這麼多了,想看更多的,歡迎來PHP中文網,有問題在下方留言。
【小編推薦】
關於html5中的section標籤與div標籤的差異(內有實例)
html article標籤有什麼用? html article標籤的使用方法介紹
以上是html5 header標籤是什麼意思? html5 header標籤的用法詳解(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!