文章目錄

• • header元素
  • nav元素
  • article元素
  • aside元素
  • section元素
  • footer元素

結(jié)構(gòu)元素不具有任何樣式，只是使頁(yè)面元素的的語(yǔ)義更加明確

header元素

header元素是一種具有引導(dǎo)和導(dǎo)航作用的的結(jié)構(gòu)元素，該元素可以包含所有通常放在頁(yè)面頭部的內(nèi)容。header元素通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，也可以包含網(wǎng)站Logo圖片、搜索表單或者其他相關(guān)內(nèi)容。

<header><h1>網(wǎng)頁(yè)主題</h1> </header>

一個(gè)網(wǎng)頁(yè)中可以使用多個(gè)header元素，也可以為每一個(gè)內(nèi)容塊添加header元素。

nav元素

nav元素用于定義導(dǎo)航鏈接，是html5新增的元素。該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。

nav元素通常可以用于以下場(chǎng)合中：

傳統(tǒng)導(dǎo)航條
側(cè)邊欄導(dǎo)航
頁(yè)內(nèi)導(dǎo)航
翻頁(yè)操作

<nav><ul><li><a href="#">首頁(yè)</a></li><li><a href="#">公司概況</a></li><li><a href="#">產(chǎn)品展示</a></li><li><a href="#">聯(lián)系我們</a></li></ul> </nav>

article元素

article元素代表文檔、頁(yè)面或者應(yīng)用程序中與上下文不相關(guān)的獨(dú)立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評(píng)論等。article元素通常使用多個(gè)section元素進(jìn)行劃分，一個(gè)頁(yè)面中article元素可以出現(xiàn)多次。

<article><header><h1>第一章</h1></header><section><header><h2>第1節(jié)</h2></header></section><section><header><h2>第2節(jié)</h2></header></section> </article>

aside元素

aside元素用來(lái)定義當(dāng)前頁(yè)面或者文章的復(fù)數(shù)信息部分，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。

aside元素主要的用法分為兩種：

被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息。
在article元素之外使用，作為頁(yè)面或者站點(diǎn)全局的附屬信息部分。最常用的形式是側(cè)邊欄，其中的內(nèi)容可以使友情鏈接、廣告單元等。

<article><header><h1>標(biāo)題</h1></header><section>文章主要內(nèi)容</section><aside>其他相關(guān)內(nèi)容</aside> </article> <aside>右側(cè)菜單</aside>

section元素

section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。在使用section元素時(shí)，需要注意一下三點(diǎn)：

不要將section元素用作設(shè)置樣式的頁(yè)面容器，那是div的特性。
如果article元素、aside元素或nav元素更符合使用條件，那么不要使用section元素。
沒(méi)有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。

<article><header><h2>小張的個(gè)人介紹</h2></header><p>小張是一個(gè)好學(xué)生，是一個(gè)帥哥。。。</p><section><h2>評(píng)論</h2><article><h3>評(píng)論者：A</h3><p>小張真的很帥</p></article><article><h3>評(píng)論者：B</h3><p>小張是一個(gè)好學(xué)生</p></article></section> </article>

在html5中，article元素可以看作是一種特殊的section元素，它比section元素更具有獨(dú)立性，即section元素強(qiáng)調(diào)分段或分塊，而article元素強(qiáng)調(diào)獨(dú)立性。如果一塊內(nèi)容相對(duì)來(lái)說(shuō)比較獨(dú)立、完整時(shí)，應(yīng)該使用article元素；但是如果想要將一塊內(nèi)容分成多段時(shí)，應(yīng)該使用section元素。

footer元素

footer元素用于定義一個(gè)頁(yè)面或者區(qū)域的底部，它可以包含所有通常放在頁(yè)面底部的內(nèi)容。與header元素相同，一個(gè)頁(yè)面中可以包含多個(gè)footer元素。同時(shí)，也可以在article元素或者section元素中添加footer元素。

文章內(nèi)容 文章分頁(yè)列表

總結(jié)

以上是生活随笔為你收集整理的h5中的结构元素header、nav、article、aside、section、footer详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。