HTML5 項目實(shí)戰(zhàn)

■實(shí)例設(shè)計

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

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

<header>

    <h1>[網(wǎng)頁標(biāo)題]</h1>

    <h2>[次級標(biāo)題]</h2>

    <h4>[標(biāo)題提示]</h4>

</header>

<main>

    <nav>

        <h3>[導(dǎo)航欄]</h3>

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

    </nav>

    <section>

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

        <article>

            <header>

                <h1>[文章標(biāo)題]</h1>

            </header>

            <p>[文章內(nèi)容]</p>

            <footer>

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

            </footer>

        </article>

    </section>

    <aside>

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

    </aside>

    <footer>

        <h2>[網(wǎng)頁腳注]</h2>

    </footer>

</main>

    整個頁面包括兩部分：標(biāo)題部分和主要內(nèi)容部分。標(biāo)題部分又包括：網(wǎng)站標(biāo)題、副標(biāo)題和提示性標(biāo)題信息；主要內(nèi)容部分包括4部分：導(dǎo)航、文章塊、側(cè)邊欄、腳注。文章塊包括3部分：標(biāo)題部分、正文部分和腳注部分。

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