HTML5系列：HTML5結構

libingql發表於2015-04-06
HTML

1. 主體結構元素

　　在HTML5中，為了使文件的結構更加清晰明確，增加幾個與頁首、頁尾、內容區塊等文件結構相關聯的結構元素。

1.1 article元素

　　article元素表示文件、頁面或應用程式中獨立、完整、可以獨立被外部引用的內容。可以是一篇部落格或文章，或其他的任何獨立的內容。

　　除了內容部分，一個article元素可以有header元素、footer元素。

<article>
    <header>
        <h1>Title</h1>
        <div><time>2015-04-09</time></div>
    </header>
    <div></div>
    <footer>
        <small>Copywrite</small>
    </footer>
</article>

　　article元素是可以巢狀使用的，內層的內容在原則上需要與外層的內容相關聯。如一篇部落格文章中，評論可以使用巢狀article元素，用來顯示評論的article元素被巢狀包含在表示整體內容的article元素中。

<article>
    <header>
        <h1>Title</h1>
        <div><time>2015-04-09</time></div>
    </header>
    <div></div>
    <section>
        <h2>Comments</h2>
        <article>
            <header>
                <h3></h3>
                <div></div>
            </header>
        </article>
        <article>
            <header>
                <h3></h3>
                <div></div>
            </header>
        </article>
    </section>
    <footer>
        <small>Copywrite</small>
    </footer>
</article>

1.2 section元素

　　section元素用於對頁面內容進行分塊，一個section元素通常由內容及其標題組成。通常不在沒有標題的內容區域使用section。

<article>
    <h1></h1>
    <section>
        <h2></h2>
        <div></div>
    </section>
    <section>
        <h2></h2>
        <div></div>
    </section>
</article>
<section>
    <h1></h1>
    <article>
        <h2></h2>
        <div></div>
    </article>
    <article>
        <h2></h2>
        <div></div>
    </article>
</section>

1.3 nav元素

　　nav元素是一個可以用作頁面導航的連結組，其中的導航元素連結到其他頁面或當前頁面的其他部分。一個頁面可以有多個nav元素，作為頁面整體或不同部分的導航。

　　示例

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

1.4 aside元素

　　aside元素用來表示當前頁面或文章的附屬資訊部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、導航條，以及其他類似的有別於主要內容的部分。

　　aside元素的兩種主要用法:

　　1>、被包含在article元素中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的參考資料、名稱解釋等。

<article>
    <aside>
        <h1>名稱解釋</h1>
        <p></p>
    </aside>
</article>

　　2>、在article元素之外使用，作為頁面或站點全域性的附屬資訊部分。最典型的是側邊欄，其中的內容可以是友情連結、部落格中其他文章列表或評論等。

<aside>
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</aside>

1.5 time元素

　　time元素代表24小時中的某個時刻或某個日期，可以定義多種格式的日期和時間。

<time datetime="2015-04-18">2015年04月18日</time>

　　編碼時機器讀到的部分在datetime屬性裡，元素在網頁顯示的是開始標記與結束標記之間的部分。

　　pubdate屬性

　　pubdate屬性是一個可選的、boolean值的屬性，用於time元素上表示釋出日期。

<time datetime="2015-04-18" pubdate>2015年04月18日</time>

2. 非主體結構元素

2.1 header元素

　　header元素是具有引導和導航作用的結構元素，常用來放置整個頁面或頁面內的一個內容區塊的標題。一個網頁內並未限制header元素的個數，可以有多個，為每個內容區塊新增header元素。

<header>
    <h1>標題</h1>
</header>
<article>
    <header>
        <h1>標題</h1>
    </header>
</article>

　　在HTML5中，一個header元素通常包括至少一個heading元素(h1-h6)。

2.2 footer元素

　　footer元素可以作為一個區塊的腳註，通常包括腳註資訊，如作者、相關閱讀連結及版權資訊等。

<footer>
    <ul>
        <li></li>
        <li></li>
    </ul>
</footer>

　　可以為article元素或section元素新增footer元素。

<article>
    <footer>
        <p></p>
    </footer>
</article>
<section>
    <footer>
        <p></p>
    </footer>
</section>

2.3 address元素

　　address元素用來在文件中呈現聯絡資訊，包括文件作者、連結、郵箱等。

<footer>
    <address>作者</address>
    <time datetime="2015-04-18" pubdate>2015年4月18日</time>
</footer>

相關文章