結構元素不具有任何樣式,只是使頁面元素的的語義更加明確。 header元素 header元素是一種具有引導和導航作用的的結構元素, 該元素可以包含所有通常放在頁面頭部的內容 。header元素通常用來放置整個頁面或頁面內的一個內容區塊的標題,也可以包含網站Logo圖片、搜索表單或者其他相關內容。 一 ...
結構元素不具有任何樣式,只是使頁面元素的的語義更加明確。
header元素
header元素是一種具有引導和導航作用的的結構元素,該元素可以包含所有通常放在頁面頭部的內容。header元素通常用來放置整個頁面或頁面內的一個內容區塊的標題,也可以包含網站Logo圖片、搜索表單或者其他相關內容。
<header>
<h1>網頁主題</h1>
</header>
一個網頁中可以使用多個header元素,也可以為每一個內容塊添加header元素。
nav元素
nav元素用於定義導航鏈接,是html5新增的元素。該元素可以將具有導航性質的鏈接歸納在一個區域中,使頁面元素的語義更加明確。
nav元素通常可以用於以下場合中:
- 傳統導航條
- 側邊欄導航
- 頁內導航
- 翻頁操作
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">公司概況</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>
</nav>
article元素
article元素代表文檔、頁面或者應用程式中與上下文不相關的獨立部分,該元素經常被用於定義一篇日誌、一條新聞或用戶評論等。article元素通常使用多個section元素進行劃分,一個頁面中article元素可以出現多次。
<article>
<header>
<h1>第一章</h1>
</header>
<section>
<header>
<h2>第1節</h2>
</header>
</section>
<section>
<header>
<h2>第2節</h2>
</header>
</section>
</article>
aside元素
aside元素用來定義當前頁面或者文章的複數信息部分,它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等其他類似的有別於主要內容的部分。
aside元素主要的用法分為兩種:
- 被包含在article元素內作為主要內容的附屬信息。
- 在article元素之外使用,作為頁面或者站點全局的附屬信息部分。最常用的形式是側邊欄,其中的內容可以使友情鏈接、廣告單元等。
<article>
<header>
<h1>標題</h1>
</header>
<section>文章主要內容</section>
<aside>其他相關內容</aside>
</article>
<aside>右側菜單</aside>
section元素
section元素用於對網站或應用程式中頁面上的內容進行分塊,一個section元素通常由內容和標題組成。在使用section元素時,需要註意一下三點:
- 不要將section元素用作設置樣式的頁面容器,那是div的特性。
- 如果article元素、aside元素或nav元素更符合使用條件,那麼不要使用section元素。
- 沒有標題的內容區塊不要使用section元素定義。
<article>
<header>
<h2>小張的個人介紹</h2>
</header>
<p>小張是一個好學生,是一個帥哥。。。</p>
<section>
<h2>評論</h2>
<article>
<h3>評論者:A</h3>
<p>小張真的很帥</p>
</article>
<article>
<h3>評論者:B</h3>
<p>小張是一個好學生</p>
</article>
</section>
</article>
在html5中,article元素可以看作是一種特殊的section元素,它比section元素更具有獨立性,即section元素強調分段或分塊,而article元素強調獨立性。如果一塊內容相對來說比較獨立、完整時,應該使用article元素;但是如果想要將一塊內容分成多段時,應該使用section元素。
footer元素
footer元素用於定義一個頁面或者區域的底部,它可以包含所有通常放在頁面底部的內容。與header元素相同,一個頁面中可以包含多個footer元素。同時,也可以在article元素或者section元素中添加footer元素。
<article>
文章內容
<footer>
文章分頁列表
</footer>
</article>
<footer>
頁面底部
</footer>