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)不同區域塊使用相同標題