html5新增的非主體結(jié)構(gòu)元素包含:header、footer、hgroup、address。接下來我們詳細介紹它們。
header元素
header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素,通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題,但是也可以包含其他內(nèi)容,例如數(shù)據(jù)表格,搜索表單或相關(guān)的logo圖片。header元素可以出現(xiàn)多次。并且header在html5中至少要包含一heading元素(h1~h5)或者新增的hgroup元素。代碼如下:
<!DOCTYPE html>
<html lang="en">
<body>
<!-- 單獨作為引導(dǎo)或者導(dǎo)航作用 -->
<header>
<h1>大標題</h1>
</header>
<article>
<!-- 作為內(nèi)容塊的標題 -->
<header><h1>文章內(nèi)容標題</h1></header>
<p>正文內(nèi)容</p>
</article>
</body>
</html>
footer元素
footer元素可以作為其上層父級內(nèi)容區(qū)塊或是一個根區(qū)塊的腳注。footer通常包括其相關(guān)區(qū)塊的腳注信息,如作者、相關(guān)閱讀鏈接及版權(quán)信息等。當(dāng)footer的父級元素是body時表示網(wǎng)頁的腳注,一般都是版權(quán)信息。代碼如下:
<!DOCTYPE html>
<html lang="en">
<body>
<article>
<header><h1>文章內(nèi)容標題</h1></header>
<p>正文內(nèi)容</p>
<footer>
作者:Miss
</footer>
</article>
<!-- 單獨作為網(wǎng)頁版權(quán)信息 -->
<footer>
? DIVCSS5.COM 版權(quán)所有<br />
學(xué)習(xí)CSS,找DIV+CSS資源上DIVCSS5!
</footer>
</body>
</html>
hgroup元素
hgroup元素是將標題及其子標題進行分組的元素。hgroup元素通常會將h1h6元素進行分組,比如一個內(nèi)容區(qū)塊的標題及其子元素算一組。修改hgroup樣式后,被他包圍的hn(h1h6)之類的標題元素就會同時繼承他設(shè)置的樣式。代碼如下:
<!DOCTYPE html>
<html lang="en">
<body>
<hgroup class="style1">
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
</hgroup>
<hgroup class="style2">
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
</hgroup>
</body>
</html>
address元素
address元素顧名思義是用來在文檔中呈現(xiàn)聯(lián)系信息,包括文檔作者或文檔維護者的名字,他們的網(wǎng)站鏈接,電子郵箱,真實地址,電話號碼等。address應(yīng)該不止用來呈現(xiàn)電子郵箱或真實地址,還用來展示文檔相關(guān)的聯(lián)系人的所有聯(lián)系信息。
<!DOCTYPE HTML>
<html>
<body>
<address>
Written by W3School.com.cn<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
</body>
</html>
html5的非主體結(jié)構(gòu)元素就講解到這里,歡迎評論交流! (●'?'●) 謝謝觀看!