深入的探討一下我對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>標籤,使代碼的層次更加的明顯,對於二次開發,或者是代碼修改,能增加工作效率。