HTML5 項目實戰(zhàn)

■實例設計

第1步，新建HTML5文檔，保存為testl.html。

第2步，根據上面各節(jié)介紹的知識，開始構建個人博客首頁的框架結構。在設計結構時，最大限度地選用HTML5新結構元素，所設計的模板頁面基本結構如下。

<header>

    <h1>[網頁標題]</h1>

    <h2>[次級標題]</h2>

    <h4>[標題提示]</h4>

</header>

<main>

    <nav>

        <h3>[導航欄]</h3>

        <a href="#">鏈接1</a> <a href="#">鏈接2</a> <a href="#">鏈接3</a>

    </nav>

    <section>

          <h2>[文章塊]</h2>

        <article>

            <header>

                <h1>[文章標題]</h1>

            </header>

            <p>[文章內容]</p>

            <footer>

                <h2>[文章腳注]</h2>

            </footer>

        </article>

    </section>

    <aside>

        <h3>[輔助信息]</h3>

    </aside>

    <footer>

        <h2>[網頁腳注]</h2>

    </footer>

</main>

    整個頁面包括兩部分：標題部分和主要內容部分。標題部分又包括：網站標題、副標題和提示性標題信息；主要內容部分包括4部分：導航、文章塊、側邊欄、腳注。文章塊包括3部分：標題部分、正文部分和腳注部分。

    第3步，在模板頁面基礎上，開始細化本示例博客首頁。下面僅給出本例首頁的靜態(tài)頁面結構，如果用戶需要后臺動態(tài)生成內容，則可以考慮在模板結構基礎上另外設計。把testl.html另存為 test2.html，細化后的靜態(tài)首頁效果如圖所示。