分別說明article、aside、section、nav元素。
article元素：
<!DOCTYPE html> <html> <head lang="en"> <title>article元素</title> <meta charset="utf-8"> </head> <body> <!-- article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨立被外部引用的內容。它可以是一篇博客或者報刊中的一篇文章，一篇論壇帖子、一段用戶評論或獨立的插件，或其他任何獨立的內容。 article元素可以嵌套使用，也可以用來表示插件。 --> <article> <header> <h1>這是一個標題</h1> <p>Hello</p> </header> <article> <header> 作者 </header> <p>評論</p> <footer> time </footer> </article> <footer> <p>這是底部</p> </footer> </article> <article> <h1>這是一個內嵌頁面</h1> <object> <embed src="#" width="800" height="400"></embed> </object> </article> </body> </html>
aside元素：
<!DOCTYPE html> <html> <head lang="en"> <title>aside元素</title> <meta charset="utf-8"> </head> <body> <!-- aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含於當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有區別於主要內容的部分。 --> <header> <h1>這就是一個頭部</h1> </header> <article> <h1>html的故事</h1> <p>這里面是正文。</p> <aside> <h1>html的解釋</h1> <p>它是一種超文本標記語言。</p> </aside> </article> <aside> <nav> <h2>評論</h2> <ul> <li><a href="#">評論的時間</a></li> <li><a href="#">評論的內容</a></li> </ul> </nav> </aside> </body> </html>
section元素：
<!DOCTYPE html> <html> <head lang="en"> <title>section元素</title> <meta charset="utf-8"> </head> <body> <!-- section元素用於對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由其內容及標題組成。但section元素並非一個普通的容器元素；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素。 --> <section> <h1>蘋果</h1> <p>這是一種水果，吃起來脆脆的、甜甜的。</p> </section> <br/><br/> <article> <h1>蘋果</h1> <p>這是一種水果，吃起來脆脆的、甜甜的。</p> <section> <h2>紅富士</h2> <p>個大、圓潤、富有色澤感</p> </section> <section> <h2>某品牌</h2> <p>個小、灰暗、無色澤</p> </section> </article> <br/><br/> <!-- section與article的區別 section的作用強調對文章或頁面進行分段、分塊，而article元素強調獨立性 --> <section> <h1>水果</h1> <article> <h2>香蕉</h2> <p>成熟時外表多為黃色</p> </article> <article> <h2>橙子</h2> <p>富含維生素C</p> </article> <article> <h2>木瓜</h2> <p>據說可以豐胸</p> </article> </section> <!-- section使用總結：1、不要將section元素作為設置樣式的頁面容器，那是div的工作。2、如果使用article、aside、nav元素更符合使用條件，那就不要使用section元素。3、沒有標題內容，不要使用section元素。 --> </body> </html>
nav元素：
<!DOCTYPE html> <html> <head lang="en"> <title>nav元素</title> <meta charset="utf-8"> </head> <body> <!-- nav元素是一個可以用作頁面導航的連接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。並不是所有的連接組都要被放進nav元素，只需要將主要的、基本的連接組放進nav元素即可。nav的應用場景：傳統導航欄、側邊導航欄、頁內導航、翻頁操作。 --> <nav> <ul> <li><a href="#">主頁</a></li> <li><a href="#">開發文檔</a></li> </ul> </nav> <article> <header> <h1>HTML5和CSS3的歷史</h1> <nav> <ul> <li><a href="#">HTML5的歷史</a></li> <li><a href="#">CSS3的歷史</a></li> </ul> </nav> </header> </article> <section> <h1>HTML5的由來</h1> <p>這里面是內容</p> </section> <section> <h1>CSS3的由來</h1> <p>這里面是內容</p> </section> <footer> <a href="#">刪除</a> <a href="#">修改</a> </footer> <footer> <p><small>版權聲明</small></p> </footer> <!-- HTML5中不能使用menu元素代替nav元素 --> </body> </html>