如何用HTML5編寫頁面?

在介紹HTML5佈局以前，咱們先了解一下幾個名詞的概念。

　　大綱：

　　所謂大綱簡單說就是文檔中各內容區塊的結構編排。內容區塊可使用標題元素(h1~h6)來表示各級內容區塊的標題，綜合運用各級內容區塊的標題建立好文檔的目錄後，該目錄就是一個大綱了。

　　顯示編排：

　　是指明確使用section等元素建立文檔結構，在每一個內容區塊內使用標題(h1~h6)。

　　隱式編排：

　　是指不明確使用section等元素，而是根據頁面中所書寫的各級標題(h1~h六、hgroup)等把內容區塊自動建立出來。

　　下面介紹在HTML5中幾種在頁面佈局時注意的細節：

　　1)顯示編排內容區塊

　　對於顯示編排的概念，上面已經解釋過了。下面咱們舉例說明：

　　2)隱式編排內容區塊

　　舉例說明：

　　從上面兩種方式對比，顯示編排更加清晰、易讀。

　　3)標題分級

　　不一樣的標題有不一樣的級別，h1級別最高，h6級別最低。隱式編排時按下面規則自動生成內容區塊：

　　▪ 若是新出現的標題比上一個標題級別低，生成下級內容區塊。上面的例子已經說明。

　　▪ 若是新出現的標題比上一個標題級別高或級別相等，生成新的內容區塊。下面舉例：

　　若是將結構都改爲顯示編排，那麼分析器就會自動按照編寫的結構實現了。

　　由於隱式編排容易讓自動生成的整個文檔結構與想要的文檔結構不一致，並且很容易引發文檔結構的混亂，因此儘可能使用顯示編排的方法進行頁面佈局。

　　4)不一樣的內容區塊可使用相同級別的標題

　　父內容區塊與子內容區塊可使用相同級別的標題h1。這樣的好處是：每一個級別的標題均可以單獨設計，若是既須要「網頁級的標題」，又須要「文章的標題」，這樣作將會帶來很大的便利性。舉例：

　　5)新的結構元素樣式調用

　　因爲目前不少瀏覽器不支持HTML5中的多數新增元素，並且咱們也不清楚客戶端使用的瀏覽器類別，因此在編寫CSS時追加以下聲明：

　　目的是通知瀏覽器頁面中使用的HTML5新增元素都是以塊方式顯示的。

　　其次，因爲IE8及以前版本的瀏覽器是不支持CSS的方法來使用這些還沒有支持的結構元素，爲了在IE中能正常使用這些結構元素，須要使用JS來完成，以下代碼：

　　若是瀏覽器支持HTML5中的結構元素，那麼上面的這段JS腳本是沒有必要的，可是它並不會對這些瀏覽器形成不良影響。

　　6)HTML5中，推薦使用article嵌套article的方式

　　一個頁面中能夠有多個獨立的article元素，每個article元素都容許有本身的標題和腳註等從屬元素，並容許對本身的從屬元素單獨設置樣式。如：

　　經過上面的講解，你是否是對HTML5頁面佈局有了全新的認識?繼續關注咱們的教程，學習更多關於HTML5的內容。但願咱們的教程爲你在製做頁面的道路走的更遠!