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:
Apples Tasty, delicious fruit! The apple is the pomaceous fruit of the apple tree.
Red Delicious These bright red apples are the most common found in many supermarkets.
Granny Smith These juicy, green apples make a great filling for apple pies.
登入後複製
可以看到,在section裡可以任意使用h1元素,而不用考慮這個section是頂級的,還是二級或三級元素。 下面的程式碼是一個畢業典禮的頁面,包含2個section,一個是顯示將要畢業人的名單,一個是顯示畢業典禮的形式。
Graduation Ceremony Summer 2022
Graduation Ceremony Opening Procession
Speech by Validactorian
Speech by Class President
Presentation of Diplomas
Closing Speech by Headmaster
Graduates Molly Carpenter Anastasia Luccio Ebenezar McCoy Karrin Murphy Thomas Raith Susan Rodriguez
登入後複製
article
article代表了一個文檔內容的獨立片段,例如,部落格條目或報紙文章,
標籤的內容獨立於文件的其餘部分。
article 是一個特殊的 section 標籤,它比 section 具有更明確的語義, 它代表一個獨立的、完整的相關內容區塊。一般來說, article 會有標題部分(通常包含在 header 內),有時也會 包含 footer 。雖然 section 也是帶有主題性的一塊內容,但無論從結構上或內容上來說,article 本身就是獨立的、完整的。
當 article 內嵌 article 時,原則上來說,內部的 article 的內容是和外層的 article 內容是相關的。例如,一篇部落格文章中,包含用戶提交的評論的 article 就應該潛逃在包含部落格文章 article 之中。
Safari 5 released 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......
登入後複製
aside
HTML5提供的
元素標籤用來表示當前頁面或文章的附屬資訊部分,可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素群組,以及其他類似的有別與主要內容的部分。
根據目前的規範,
元素有兩種使用方法:
n 被包含在
中作為主要內容的附屬資訊部分,其中的內容可以是與當前文章有關的引用、詞彙列表等。
n 在
之外使用,作為頁面或網站全域的附屬資訊部分;最典型的形式是側邊欄(sidebar),其中的內容可以是友情連結、附屬導覽或廣告單元等。
下面的程式碼範例綜合了以上兩種使用方法:
My Blog Post Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Glossary Lorem ipsum dolor sit amet
登入後複製
以上就是HTML5學習筆記簡明版(2):新元素之section,article,aside的內容,更多相關內容請關注PHP中文網(www .php.cn)!