RWD網頁切版(一){HTML5網頁框架}

html5_frame
 

HTML5框架結構:
HTML從初版到現在有過很多版本,由於目前流行的版本是HTML5,所以這裡就直接以HTML5來介紹。
一般網頁會分成幾個部份

  • 頁首 – 通常放logo跟選單
  • 主體 – 網頁內容主體
  • 側欄 – 通常放第二層選單或補充訊息
  • 頁尾 – 通常放版權或聯絡訊息

下面這就是HTML5的網頁架構
html5_frame

<header>頁首</header>
<aside>側欄</aside>
<main>主體
  <article>主體
    <section>段落區塊</section>
    <section>段落區塊</section>
  </article>
</main>
<footer>頁尾(頁腳)</footer>

<header> <aside> <main> <article> <section> <footer>這些標籤都是HTML5才有的,所以在HTML5盛行之前也有另一種只用<div>(區塊標籤)配合CSS的ID選取器的方法。

<div id="header"></div>
<div id="side"></div>
<div id="main">
  <div class="article">
    <div class="section"></div>
    <div class="section"></div>
  </div>
</div>
<div id="footer"></div>

 
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *