新元素之section,article,aside
section
section元素描繪的是一個文檔或者程序里的普通的section節，一般來說一個section包含一個head和一個content內容塊。section可以表示成一個小節，或者tab頁面里的一個tab下的box塊。一個頁面里可以拆分成多個section，分別代表introduction, news items和contact information。
如果元素的內容集中到一起顯示可以表達相應的意思的話，那就可以定義成article元素，而沒必要使用section元素。
section元素不是一般的容器元素，所以如果一個元素需要定義相應的style或者script腳本的話，那推薦使用div元素，section的使用條件是確保這個元素的內容能夠明確地展示在文檔的大綱里。
下面的例子代碼來自蘋果網站頁面的一部分，代碼里包含了2個短小的section：
<article><hgroup><h1>Apples</h1><h2>Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section><h1>Red Delicious</h1><p>These bright red apples are the most common found in many supermarkets.</p></section><section><h1>Granny Smith</h1><p>These juicy, green apples make a great filling for apple pies.</p></section> </article>?
可以看到，在section里可以任意使用h1元素，而不用考慮這個section是頂級的，還是二級或者三級元素。
下面的代碼是一個畢業典禮的頁面，包含2個section，一個是顯示將要畢業人的名單，一個是顯示畢業典禮的形式。
<!DOCTYPE Html> <html> <head><title>Graduation Ceremony Summer 2022</title> </head> <body><h1>Graduation</h1><section><h1>Ceremony</h1><p>Opening Procession</p><p>Speech by Validactorian</p><p>Speech by Class President</p><p>Presentation of Diplomas</p><p>Closing Speech by Headmaster</p></section><section><h1>Graduates</h1><ul><li>Molly Carpenter</li><li>Anastasia Luccio</li><li>Ebenezar McCoy</li><li>Karrin Murphy</li><li>Thomas Raith</li><li>Susan Rodriguez</li></ul></section> </body> </html>?
article
article代表了一個文檔內容的獨立片段，例如，博客條目或報紙文章，<article>標簽的內容獨立于文檔的其余部分。
article 是一個特殊的 section 標簽，它比 section 具有更明確的語義, 它代表一個獨立的、完整的相關內容塊。一般來說， article 會有標題部分(通常包含在 header 內)，有時也會 包含 footer 。雖然 section 也是帶有主題性的一塊內容，但是無論從結構上還是內容上來說，article 本身就是獨立的、完整的。
當 article 內嵌 article 時，原則上來說，內部的 article 的內容是和外層的 article 內容是相關的。例如，一篇博客文章中，包含用戶提交的評論的 article 就應該潛逃在包含博客文章 article 之中。
<article> <a href="http://www.apple.com">Safari 5 released</a><br /> 7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac...... </article>?
aside
HTML5提供的<aside>元素標簽用來表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。
根據目前的規范，<aside>元素有兩種使用方法：
n? 被包含在<article>中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的引用、詞匯列表等。
n? 在<article>之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。
下面的代碼示例綜合了以上兩種使用方法：
<body><header><h1>My Blog</h1></header><article><h1>My Blog Post</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.</p><aside><!-- Since this aside is contained within an article, a parsershould understand that the content of this aside is directly relatedto the article itself. --><h1>Glossary</h1><dl><dt>Lorem</dt><dd>ipsum dolor sit amet</dd></dl></aside></article><aside><!-- This aside is outside of the article. Its content is relatedto the page, but not as closely related to the above article --><h2>Blogroll</h2><ul><li><a href="#">My Friend</a></li><li><a href="#">My Other Friend</a></li><li><a href="#">My Best Friend</a></li></ul></aside> </body>總結
以上是生活随笔為你收集整理的新元素之section,article,aside的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5中aside标签的两种使用方法
- 下一篇： 新元素之hgroup,header,fo