3.4　案例實戰

本節將借助HTML5新元素設計一個博客首頁。

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

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

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

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

圖3.7　細化后的首頁頁面效果

第4步，設計頁面樣式部分代碼。這里主要使用了CSS3的一些新特性，如圓角（border-radius）和旋轉變換等，通過CSS設計的頁面顯示效果如圖3.8所示。相關CSS3技術介紹請參閱后面的章節內容。

圖3.8　博客首頁的頁面完成效果

第5步，對于早期版本的瀏覽器，或者不支持HTML5的瀏覽器，需要添加一個CSS樣式，因為未知元素默認為行內顯示（display:inline），對于HTML5結構元素來說，我們需要讓它們默認為塊狀顯示。

    article, section, nav, aside, main, header, hgroup, footer {
        display: block;
    }

第6步，一些瀏覽器不允許樣式化不支持的元素。這種情形出現在IE8及以前的瀏覽器中，因此還需要使用下面的JavaScript腳本進行兼容。

第7步，如果瀏覽器禁用了腳本，則不會顯示，可能會出問題。因為這些元素定義整個頁面的結構。為了預防這種情況，可以加上<noscript>標簽進行提示。