首頁 > web前端 > H5教程 > 主體

HTML5中新標籤與常用標籤詳解_html5教學技巧

WBOY
發布: 2016-05-16 15:48:18
原創
1364 人瀏覽過

今天先介紹下html5 新增的結構元素,有的經常使用到,有的用不上,雖然說它們的出現是更促進頁面更有語義,更好的seo,但其實當頁面禁用樣式後,它們的展現跟div 是沒撒差別,有同學可能會說,既然一樣,又不影響頁面的最終展現,不管是article 還是section 能用就好了。如果考慮實際項目的針對用戶,我也是這麼認為的,但作為一個重構仔,我們還是得專業點,再考慮到無障礙這塊,那麼 html5 標籤的作用就更明顯了。於是複習下內容並記錄在部落格上,順便分享給大家,也方便自己以後找。

HTML5 新增結構元素分為主體結構元素與非主體結構元素

1.主體結構元素包括article、section、nav、aside、time
2.非主體結構元素包括header、hgroup、footer、address
一、主體結構元素
article
article 標籤,從語意化上看為文件、頁面,其用法如下:

通常是一篇文章、一個頁面、一個獨立完整的內容模組
一般會帶個標題,並放在header 標籤中
article 元素可以互相嵌套
使用頻率極高,強調獨立性,多注意下與header 標籤的使用。


複製代碼
代碼如下:

是我標籤



我是段落



我的內容 div>




section
section 標籤,從語意化來看為部分,其用法如下:
用於頁面內容的獨立分塊,往往是文章的一段

通常由內容和標題組成,沒有標題的內容不推薦使用 section
使用頻率低,強調分段分塊。

註:《HTML5與CSS3權威指南》這本書中說明:一個容器需要被定義樣式或腳本定義行為時,建議用div而非section,不要將section用作設定樣式的容器。


複製程式碼程式碼如下:


水果

蘋果


蘋果是撒?



桔子


桔子是撒?





中國人物


三國、兩晉、南北朝



三國

猛將猛將猛將




兩晉

猛將猛將猛將猛將





nav
nav 標籤,從語義化來看為導航,其用法如下:

通常作為頁面導航的連結群組
側邊欄導航
使用頻率高。


複製程式碼
程式碼如下:

aside
aside 標籤,從語義化上看為在旁邊、側邊,其用法如下:

在 article 標籤中使用時,作為主要內容的附屬資訊部分,如有關的參考資料、名詞解釋等。
在 article 標籤外使用時,作為頁面或網站全域的附屬資訊部分,如側邊欄、部落格的友情連結部分、廣告區域等。
使用頻率低。


複製程式碼
程式碼如下:



馬雲是誰


馬雲,男,1964年10月15日出生於浙江省杭州市,中國著名企業家,阿里巴巴集團、淘寶網、支付寶創辦人..........






time
time標籤,從語意化來看為時間,其用法如下:

代表 24 小時中的某個時刻或某個日期
表示時刻時允許帶時間差
可定義很多格式的日期和時間
使用頻率低。

複製程式碼
程式碼如下:






二、非主體結構元素
header
header 標籤,從語意化上看為文件的頁眉,其用法如下:

一種具有引導和導航作用的結構元素
通常放置在整個頁面或頁面內的一個內容區塊的標題
一個網頁內並沒有限制header 標籤的個數
使用頻率極高,比較容易理解。


複製程式碼
程式碼如下:






我是脖子



我是身體


hgroup
hgroup 標籤,從語義化上看為標題組,其用法如下:

作為 header 標籤的子元素
一個內容模組中包括了主標題和至少一個子標題才使用 hgroup
通常會將 h1~h6 元素進行分組
使用頻率高。


複製代碼
代碼如下:


我是劉備


我是關羽


我是張飛




呂布驚呆了





footer
footer 標籤,從語義化上看為文檔的腳註,其用法如下:

一個內容區塊區的註腳
通常內容為聯絡資訊、相關閱讀、版權資訊等
使用頻率高,比較容易理解。


複製程式碼
程式碼如下:




  • 關於三國

  • 地圖資訊

  • 遊戲攻略






address
address 標籤,從語意化上看為地址,其用法如下:
用於文件中呈現的聯絡資訊

通常內容為作者、網站連結、電子郵件信箱、地址、電話號碼等
使用頻率低。


複製程式碼程式碼如下:

希望本文對大家在 html5 結構標籤上的運用有一定的指導,如果發現內容有錯誤的地方,歡迎大家指正~
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!