網頁設計, 網頁資源

[HTML5教學] HTML5 網頁基本架構與範本(直接使用)

梅干2011/12/23
梅問題-html-html5基本架構與範本
  最近身旁好友的網站,像是男丁、教不落已陸續的的將網站更新佈景主題,並也都改採HTML5的架構,但梅干遲遲還尚未跟進,最主要的原因就在於,梅干的部落格架構有點小複雜,所以得花點時間重新打掉重來,而HTML5也炒了好一陣子,雖然目前還沒Final,但基本的架構已經八、九不離十了,而梅干花了點時間,整理了一下HTML5的網頁架構,供各位作點參考,若想用HTML5的朋友們,也先來了解一下HTML5的語法結構吧!

HTML5新標籤說明:
其實HTML5的標籤相當多,這邊梅干挑出幾個常用的來跟大家作解說。
<header>
版頭,可甩來包覆logo。
<nav>
導覽列。
ex:<nav>教學網 iAPP網 購物網</nav>
<article>
獨立區塊。
ex:
<article>
 <section>.....</section>
</article>
<section>
內容區塊,有點類似POST的,而此標籤可再包覆header與footer。
ex:
<section>
 <header>標題</header>
 <p>內容</p>
 <footer>張貼日期:2011/12/25</footer>
</section>
<aside>
補充性資訊標記(如:廣告、貼紙)
<figure>
用來標註圖片、圖表和程式碼....等。
ex:<figure><img src="https://www.minwt.com/logo.png"></figure>
<footer>
版尾用來放置一些版權宣告、 隱私條件 、合作提案...等訊息。
ex:<footer>copyright 2011 by minwt</footer>
ps.更多可見: http://www.w3schools.com/html5/default.asp
  其實這幾個是比較常用的標籤語法,而HTML5最主要是用來簡化一些標籤用法,以及讓標籤更具語意,其Html5還有其它更多的互動效果與影音標籤,同時梅干也製作了一個簡易的HTML5網頁架構範本,因此各位可以直接下載使用,希望對想用HTML5的朋友有所幫助。
[範例預覽]
UAG軍規iPhone防摔殼