1.article 元素
解釋:代表文檔、頁面和應用程序中獨立的、完整的、可以被獨自引用的內容。
主要用途:博客中的文章、評論,貼吧中的帖子,或者獨立的插件等。
article中可以包含多種元素例如:
復制代碼
<article>
<header>日記隨筆</header>
<p>發表日期:
<time pubdate="pubdate">2014/09/18</time>
</p>
<p>今天早上下雨,天氣很冷需要加衣服</p>
<footer>我的博客</footer>
</article>
復制代碼
同時article中也可以嵌入article:
復制代碼
<html>
<head></head>
<body>
<article>
<h1>日志列表</h1>
<section>
<article>
<header>
日記隨筆
</header>
<p>發表日期: <time pubdate="pubdate">2014/09/18</time> </p>
<p>今天早上下雨,天氣很冷需要加衣服...</p>
</article>
<article>
<header>
日記隨筆
</header>
<p>發表日期: <time pubdate="pubdate">2014/09/18</time> </p>
<p>今天早上下雨,天氣很冷需要加衣服...</p>
</article>
</section>
</article>
</body>
</html>
復制代碼
2.section元素
解釋:用於網站或者應用程序中的內容進行分塊。一個section元素通常由標題和內容組成。
用途:劃分不同內容區塊。
section就是用於內容的分段,例如:
復制代碼
<article>
<h1>NBA 球隊</h1>
<p>NBA用東西區共有30支球隊組成</p>
<section>
<h2>金州勇士隊</h2>
<p>金州勇士隊位於美國奧克蘭。。。。。。</p>
</section>
<section>
<h2>洛杉矶湖人隊</h2>
<p>洛杉矶湖人隊位於美國娛樂中心洛杉矶。。。。。。</p>
</section>
</article>
復制代碼
NBA球隊介紹首先是一段獨立的內容,因而使用article元素,而每支球隊的介紹是彼此並列需要使用分段,所以使用section分隔。
其實這裡的article 和section就算互換使用也未嘗不可(article可以看做一種特殊的section),主要是看這段元素在你當前的網頁中強調的是什麼,強調獨立性使用article,強調分段使用section。
可以訪問https://gsnedders.html5.org/outliner/檢查你代碼結構中沒有section 標題的部分,不要為沒有標題的內容區塊使用section標簽。
注意:section並非一個普通的容器元素,當一個容器元素需要直接被定義樣式或者腳本定義行為時,推薦使用的是div。
3.nav元素
解釋:頁面導航的鏈接組
用途:頁面導航
nav元素就是用於包裹頁面導航元素,例如:
復制代碼
<nav>
<ul>
<li>主頁</li>
<li>我的博客</li>
<li>論壇</li>
.....
</ul>
</nav>
復制代碼
注意:不要使用menu元素代替nav
4.aside元素
解釋:用來表示當前頁面和文章的附屬信息部分
用途:用於與當前頁面相關的引用、邊側欄、廣告和導航條。
aside主要有兩種用法:
1.被包含在article中作為主要內容的分屬信息部分,其中內容可以是與當前文章相關的參考資料、名詞解釋。
例如:
復制代碼
<header>
<h1>HTML5新元素</h1>
</header>
<article>
<h1>aside標簽的使用</h1>
<p>aside標簽同article一樣都是HTML5中新加入的元素,但是一般用於與主體內容相關元素。如名詞解釋、引用等等。。。。。。。</p>
<aside>
<h1>名詞解釋</h1>
<dl>
<dt>article</dt>
<dd>HTML5新元素,用於表示獨立元素</dd>
</dl>
</aside>
</article>
復制代碼
2.在article元素之外使用,作為頁面或者站點全局的附屬信息部分使用。例如友情連接、廣告和其他文章列表。
復制代碼
<aside>
<h1>本周熱門文章</h1>
<ul>
<li>
<span>0</span><a href="....">iPhone6 回事目前技術上最先進的手機嗎?</a>
</li>
<li>
<span>1</span><a href="....">Git工作流指南:集中式工作流</a>
</li>
<li>
<span>2</span><a href="....">圖解KMP算法(Javascript實現)</a>
</li>
...
</ul>
</aside>