HTML5版面排版-網頁設計教學

HTML5已經是目前網頁開發必備的標籤語法，想要讓網頁設計的技術不落人後，就必須先從基本的版型結構標籤開始。

在早期HTML4之前我們都是使用DIV標籤進行版型編排，但自從HTML 5之後就增加了版型專有的的標籤，其標籤內容如下：

以下我們將使用Sublime的Emmet的外掛，那麼我們該如何構成這樣的結構呢？

一起來看一下結構的組成。

header,nav,aside,article,footer都屬於同一個層級，而section屬於article裡的層級。

因此簡碼表示法為：html5:(header+nav+aside+article+footer)

按下「Tab」鍵後，得到的結果如下。

如果加上section的減碼表示法如下：

html5:(header+nav+aside+(article>section)+footer)

按下「Tab」鍵後，得到的結果如下。

所以透過簡碼的指令就可以加快我們的前置作業了。

延伸學習：
Sublime Text 3 教學-必要的安裝與設定教學
Sublime Text 3 教學-使用 Emmet 快速建立HTML標簽1
Sublime Text 3 教學-使用 Emmet 快速建立HTML標簽2-網頁設計教學
Sublime Text 3 教學-使用Emmet 快速建立CSS文字樣式-網頁設計教學