DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> html5新增的非主體結構元素
html5新增的非主體結構元素
編輯:HTML5教程     
[html5]學習筆記一 新增的非主體結構元素

html新增加的非主體結構元素,主要是用來表示附加信息的,包括header,footer,hgroup,address元素。

1、header元素

header元素是一種具有引導和導航作用的結構元素,通常用來放置整個頁面或頁面內的一個區塊的標題,但是也可以包含其他內容,例如數據表格、搜索表單或相關的logo圖片。

過去常用div元素承載頭部、內容和底部,如下:

 <body>
     <div class="header"></div>
     <div class="content"></div>
     <div class="footer"></div>
 </body>

現在則改變寫法,如下:

 <body>
     <head></head>
     <article></article>
     <footer></footer>
 </body>

用來做導航,如下:

 <body>
     <header>
         <h1>IT new technology</h1>
         <a href="http://hovertree.com">何問起</a>
         <nav>
             <ul>
                 <li><a href="#">learn</li>
                 <li><a href="#">technology</li>
                 <li><a href="#">hacker</li>
             </ul>
         </nav>
     </header>
 </body>

 

2、footer元素

footer元素可以作為其上層父級內容區塊或是一個根區塊的腳注。footer通常包括其相關區塊的腳注信息,如作者、相關閱讀鏈接及版權信息等。

過去用div元素來承載內容,如下:

 <body>
     <div class="footer">
         <ul>
             <li><a href="#">版權信息</li>
             <li><a href="#">站點地圖</li>
             <li><a href="#">聯系方式</li>
         </ul>
     </div>
 </body>

 

現在則這樣寫,如下:

 <body>
     <footer>
         <ul>
             <li><a href="#">版權信息</li>
             <li><a href="#">站點地圖</li>
             <li><a href="#">聯系方式</li>
         </ul>
     </footer>
 </body>

 

3、hgroup元素

hgroup是將標題及子標題進行分組的元素,hgroup通常會將h1~h6的元素進行分組,譬如一個內容區塊的標題及其子元素算是一組。

 <body>
     <header>
         <hgroup>
             <h1>標題1</h1>
             <h2>標題1.1</h2>
         </hgroup>
         <hgroup>
             <h1>標題2</h1>
             <h2>標題2.2</h2>
         </hgroup>
     </header>
 </body>

 

4、address元素

address元素用來在文檔中呈現聯系信息,包括文檔作者或文檔維護者的名字、他們的網站鏈接、電子郵箱、真實地址、電話號碼等。address不止用來呈現這些內容,還用來展示跟文檔相關的聯系人的所有聯系信息。

 <body>
     <address>
         <a href="#">iwen</a>
         <a href="#">ime</a>
     </address>
 </body>

 

5、html5的大綱編排的規則

1)顯示編排內容區域塊

使用section等元素來創建結構

2)隱示編排內容區域塊

不使用section等元素,而是根據網頁要求,書寫h1~h6級標題來創建

3)標題分級

h1~h6,標題的級別是不同的;如果使用級別更低的h標簽,則生成下級的區域塊;如果使用同級或者更高級別的h標簽,則生成新的區域塊

4)不同區域塊使用相同標題 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved