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 是一個特殊的 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提供的
<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 tempor incididunt ut labore et dolore magna aliqua.</p> <aside> <!-- Since this aside is contained within an article, a parser should understand that the content of this aside is directly related to 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 related to 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>
以上就是HTML5學習筆記簡明版(2):新元素之section,article,aside的內容,更多相關內容請關注PHP中文網(www .php.cn)!