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