深入瞭解html5新標籤應用及感悟

深入的探討一下我對html5的瞭解和我的感悟 ,分享給小夥伴們,廢話不多說開始:
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

一整個頁面的代碼就是這樣<header>標籤表示頁面的頭部,<footer>標籤表示頁面的底部,<main>是主內容標籤,這樣層次是不是很清楚。

在介紹下<header>標籤裏面放什麼內容:

<header>
  <div class="xx">頭部背景或者什麼
  </div>
  <nav>
    導航
  </nav>
</header>

可以把導航標籤<nav>放到<header>中,如果你想分出頁面頭部和導航標籤也可以分開,我自己寫電商平臺首頁的時候還是放在<header>標籤中會比較規整。

介紹一下<main>標籤,首頁頁面一般都是分三大部分,多一些宣傳廣告用<div>標籤包含爲第四大部分:

<main>
  <article>版塊內容一</article>
  <div>版塊內容二</div>
  <section>版塊內容三</section>
  <aside>版塊內容四</aside>
<main>
這樣就能在組內容分出那個版塊是幹什麼的,層次是不是很明顯啊!

在介紹下底部<footer>用於底部的版權所屬,或者合作企業網站等等一些東西:

<footer>
  <div>版權所屬xxx</div>
</footer>

整體介紹完了 ,在介紹<main>標籤裏的幾大部分的標籤,<article>標籤是放的第一大版塊的內容,裏面可以分成幾個小版塊內容:

<article>
  <section>
    <article></article>
    <aside></aside>
  </section>
</article>
這樣層次能分的相當明確。<aside>標籤是用來標識側邊欄的標籤,也可以用來當做頁腳上最後一個大版塊的標籤:

<aside>
  <section>
    <div></div>
    <article></article>
    <aside></aside>
  <section>
</aside>
中心內容我就是用的<section>標籤:

<section>
  <article></article>
</section>
如果組內容有側邊欄再加一個,側邊欄的標籤。以上就介紹到這裏,做一下總結:

html5去除了傳統的<div>標籤,使代碼的層次更加的明顯,對於二次開發,或者是代碼修改,能增加工作效率。






發佈了31 篇原創文章 · 獲贊 8 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章