HTML5學習筆記簡明版（2）：新元素之section,article,aside-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5學習筆記簡明版（2）：新元素之section,article,aside

黄舟

Jan 21, 2017 pm 04:30 PM

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提供的

元素標籤用來表示當前頁面或文章的附屬資訊部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素群組，以及其他類似的有別與主要內容的部分。

根據目前的規範，

元素有兩種使用方法：

n 被包含在

中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的引用、詞彙列表等。

n 在

之外使用，作為頁面或網站全域的附屬資訊部分；最典型的形式是側邊欄(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 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）！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn