在HTML5之前拳锚,我們都是通過div加上屬性來區(qū)分導(dǎo)航、內(nèi)容以及頁腳等寻行,比如<div??class="nav"></div>表示導(dǎo)航霍掺、<div class="container"></div>表示內(nèi)容區(qū)域、<div class="footer"></div>表示頁腳拌蜘。
上面這種方式雖然可以用來區(qū)分一個網(wǎng)頁的各個部分杆烁,但是有一個缺點(diǎn):網(wǎng)頁的各個區(qū)域都用div標(biāo)簽來表示,太單調(diào)了简卧!試想一下连躏,如果要你做一個非常復(fù)雜的網(wǎng)頁,而且你把網(wǎng)頁的所有部分都用div來表示贞滨,那將會導(dǎo)致整個網(wǎng)頁的HTML代碼全部都是div標(biāo)簽入热∨淖兀可能你當(dāng)時寫出來并且按照你預(yù)料的結(jié)果顯示出來了,但是如果你以后要添加一些新內(nèi)容進(jìn)去勺良,你就會發(fā)現(xiàn)問題了绰播。當(dāng)你回去再看這些代碼的時候,絕對會頭暈眼花尚困,因?yàn)槟憧吹降氖且淮蠖裠iv標(biāo)簽蠢箩,你可能要找半天才能找到你要添加新內(nèi)容的地方,再說過了這么久你也不可能還記得清清楚楚事甜。用一句專業(yè)的話來說就是語義不清晰谬泌,會給后期維護(hù)帶來很大的麻煩。
為了避免以后再這種情況逻谦,你應(yīng)該使用HTML5提供的新語義元素來劃分整個網(wǎng)頁的區(qū)域掌实。HTML5 提供了定義頁面不同部分的新語義元素有:
1. <article>
2. <aside>
3. <details>
4.??<figcaption>
5. <figure>
6. <footer>
7.?<header>
8.??<main>
9.??<mark>
10.??<nav>
11.??<section>
12.??<summary>
13.??<time>
關(guān)于這些新語義元素的簡單用法可以參考W3school教程中的HTML5 語義元素,我覺得多實(shí)踐才會理解得更深刻邦马,所以多敲敲代碼吧贱鼻!