DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML 5結構排版布局
HTML 5結構排版布局
編輯:HTML5教程     

進行總體布局時候,具體可以用的方法。

1.大綱:文檔中各內容區塊的結構編排。

     內容區塊可以使用標題元素來展示各級內容區塊的標題。

     關於內容區塊的編排可以分為“顯示編排”和“隱式編排”。

     顯示編排:明確使用section等元素創建文檔結構,在每個內容區塊內使用標題(h1-h6、hgroup)。更加清晰、易讀。

     隱式編排:不明確使用section等元素,而是根據頁面中所書寫的各級標題(h1-h6、hgroup)等把內容區塊自動創建出來。(容易讓自動生成的結構與想要的不一樣,易引起結構混亂,盡量使用顯示編排。)

      標題分級:h1的級別最高,h6的級別最低。隱式編排時按以下規則自動生成內容區塊:如果新出現的標題比上一個標題級別低,生成下級內容區塊;如果新出現的標題比上一個標題級別高或級別相等,生成新的內容區塊。

      不同的內容區塊可以使用相同級別的標題:如父內容區塊與子內容區塊可以使用相同級別的標題,好處是每個級別的標題都可以單獨設計,對於既需要“整個網頁的標題”,又需要“文章的標題”(如書寫文檔時)會帶來很大的便利。

2.對新的結構元素使用樣式

       在css中追加如下聲明,通知浏覽器頁面中使用的HTML 5新增元素都是以塊方式顯示的:

       article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}   

       在IE 8及之前的浏覽器中,需要使用JS腳本來使浏覽器可以正常使用這些結構:

       <script>

       document.createElement("header");
       document.createElement("nav");
       document.createElement("article");
       document.createElement("footer");
       </script>

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved