001


002


003  
 

       

       上一回我們知道HTML5的語意標籤

       取代了不具意義Div所標記的區塊, 啦啦.gif  

       所以這一回KoKo要來為大家介紹,

       架構出整個HTML5最主要的幾個語意標籤


       <header>
       網頁頁面的頂部,通常都是放置網站的標題LOGO主要的資訊


       <nav>
       通常為網站的選單連結


       <aside>
       主要內容之外的其他內容,可以為網站的側邊欄


       <article>
       為頁面中的一個區塊,是獨立的內容,在一個文件中可以有很多個


       <section>
       用於章節等段落的區分,在一個文件中可以有很多個


       <footer>
       HTML5頁面的下方,用以顯示相關資訊著作權等等


       這些語意標簽所擺放的位置,都是可以自由的移動調配

       我們可以依照自己的需求,去組合出所需要的網頁架構。 

02.jpg  

       

     最後,下面是一個以HTML5語意標籤為基礎,

     最基本、簡潔的代碼,提供給大家做參考!!  

 
 

      <!DOCTYPE html>                                                             //簡短的檔頭聲明
       <html>
              <head>
              <title>HTML5 網頁範例</title>
              </head> 

       <body>
              <header>                                                                   //網站標題
              <h1><a href="#">Welcome 網頁範例</a></h1>
              </header>

              <nav>                                                                       //連結導覽
                     <ul>
                     <li><a href="#">關於</a></li>
                     <li><a href="#">最新消息</a></li>
                     <li><a href="#">產品</a></li>
                     <li><a href="#">聯絡我們</a></li>
                     </ul>
              </nav>       

              <section>

              <article>                                                                     //內容區塊1                                       
                     <header>                                                            //內容區塊1之標題
                     <h3><a href="#">主要內容 1</a></h3>                   
                     </header>

                     <section>
                     <p>.........</p>
                     </section>

              </article>

              <article>                                                                     //內容區塊2                                                                                                                                           
                     <header>                                                             //內容區塊2之標題
                     <h3><a href="#">主要內容 2</a></h3>
                     </header>

                     <section>
                     <p>.........</p>
                     </section>

              </article>

              </section>

       <aside>                                                                             //側邊欄位
              <h1><a href="#">aside</a></h1>
              <p>.........</p>
       </aside>

       <footer>                                                                            //頁尾資訊
              版權宣告
       </footer>

       </body>

       </html>




     

 

    KoKo 發表在 痞客邦 留言(0) 人氣()