HTML5學(xué)習(xí)筆記簡(jiǎn)明版（2）：新元素之section,article,aside
2011-12-07 10:39 湯姆大叔 閱讀(16306) 評(píng)論(3) 收藏 舉報(bào)
本章節(jié)主要介紹的是HTML5的三個(gè)新元素：section,article,aside。section元素描繪的是一個(gè)文檔或者程序里的普通的section節(jié)，一般來說一個(gè)section包含一個(gè)head和一個(gè)content內(nèi)容塊。section可以表示成一個(gè)小節(jié)，或者tab頁(yè)面里的一個(gè)tab下的box塊。一個(gè)頁(yè)面里可以拆分成多個(gè)section，分別代表introduction, news items和contact information。
section
section元素描繪的是一個(gè)文檔或者程序里的普通的section節(jié)，一般來說一個(gè)section包含一個(gè)head和一個(gè)content內(nèi)容塊。section可以表示成一個(gè)小節(jié)，或者tab頁(yè)面里的一個(gè)tab下的box塊。一個(gè)頁(yè)面里可以拆分成多個(gè)section，分別代表introduction, news items和contact information。
如果元素的內(nèi)容集中到一起顯示可以表達(dá)相應(yīng)的意思的話，那就可以定義成article元素，而沒必要使用section元素。
section元素不是一般的容器元素，所以如果一個(gè)元素需要定義相應(yīng)的style或者script腳本的話，那推薦使用div元素，section的使用條件是確保這個(gè)元素的內(nèi)容能夠明確地展示在文檔的大綱里。
下面的例子代碼來自蘋果網(wǎng)站頁(yè)面的一部分，代碼里包含了2個(gè)短小的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元素，而不用考慮這個(gè)section是頂級(jí)的，還是二級(jí)或者三級(jí)元素。
下面的代碼是一個(gè)畢業(yè)典禮的頁(yè)面，包含2個(gè)section，一個(gè)是顯示將要畢業(yè)人的名單，一個(gè)是顯示畢業(yè)典禮的形式。
<!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代表了一個(gè)文檔內(nèi)容的獨(dú)立片段，例如，博客條目或報(bào)紙文章，<article>標(biāo)簽的內(nèi)容獨(dú)立于文檔的其余部分。
article 是一個(gè)特殊的 section 標(biāo)簽，它比 section 具有更明確的語(yǔ)義, 它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。一般來說， article 會(huì)有標(biāo)題部分(通常包含在 header 內(nèi))，有時(shí)也會(huì) 包含 footer 。雖然 section 也是帶有主題性的一塊內(nèi)容，但是無(wú)論從結(jié)構(gòu)上還是內(nèi)容上來說，article 本身就是獨(dú)立的、完整的。
當(dāng) article 內(nèi)嵌 article 時(shí)，原則上來說，內(nèi)部的 article 的內(nèi)容是和外層的 article 內(nèi)容是相關(guān)的。例如，一篇博客文章中，包含用戶提交的評(píng)論的 article 就應(yīng)該潛逃在包含博客文章 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>元素標(biāo)簽用來表示當(dāng)前頁(yè)面或文章的附屬信息部分，可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類似的有別與主要內(nèi)容的部分。
根據(jù)目前的規(guī)范，<aside>元素有兩種使用方法：
n 被包含在<article>中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。
n 在<article>之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(cè)邊欄(sidebar)，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。
下面的代碼示例綜合了以上兩種使用方法：
<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>
浙公網(wǎng)安備 33010602011771號(hào)