HTML5學習_day11(1)--HTML新标簽

一.<article></article>

用法：定義了獨立的内容，内容通常是一篇文章，一篇部落格，一篇短文，雜志，新聞文章，一條完整的回複，評論等

内部可以使用header,footer,section,article标簽

提示：

每一個article标簽的内部結構應該是相似的。

<section></section>

用法：是界面進行分區，元素通常可由标簽和内容組成

注意：

内容一般寶航一個标簽h1-h6，可以包含article,嵌套section

section和article差別

1.article側重于一篇獨立的文章或一篇完整的文章

2.section側重于對一個頁面内容進行分區

如果想表達一塊獨立完整的文章我們就用article

如果想把一塊區域分成幾部分我們就用section

H5之前

<span style="white-space:pre">		</span><div>
			<img src="" alt="" />
			<h2></h2>
		</div>
           

H5之後

<span style="white-space:pre">		</span><section>
			<img src="" alt="" />
			<h2></h2>
		</section>
           

nav标簽

用法：定義頁面上的導覽列

<span style="white-space:pre">		</span><nav>
			<ui>
				<li>導航1</li>
				<li>導航2</li>
				<li>導航3</li>
			</ui>
		</nav>
           

aside标簽(非主要内容 類似左邊的左邊的連結  或者一些其他元素  類似淘寶物品展示時左邊的廣告)

用法：定義了目前頁面的附屬資訊，通常aside元素來渲染側邊欄。

使用範圍：

可以顯示廣告宣傳，作者介紹，WEB應用，相關連結，目前内容簡介

<span style="white-space:pre">		</span><article>
			<header>
				<h1>電影1</h1>
				<p>電影描素</p>
				插入無關内容
				<aside>電影介個多少等</aside>
			</header>
		</article>
           

header标簽

主要用于article元素定義的文檔頭部資訊(如文章标題)該元素内部可以包含h1-h6,hgroup,p,span等，還可以放一些logo資訊，導航類資訊

<header>
logo
</header>
           

hgroup标簽

組織多個h1-h6這樣标題元素，隻能放元素

<span style="white-space:pre">		</span><hgroup>
			<h1>藍歐</h1>
			<h3>讓教育回歸本質！</h3>
		</hgroup>
           

footer标簽

該元素定義文檔的頁腳資訊，通常包含文檔的版本資訊，作者授權資訊（作者資訊一般都放到address标簽裡面）

<span style="white-space:pre">		</span><fotter>
			版權資訊
			<address>作者資訊</address>
		</fotter>
           

figure标簽

它表示一個自我獨立的内容區域，通常包含一個标題說明(figcaption标簽)，内容可以使圖檔，圖示，代碼片段，或者是跟主内容相關的圖解，他可以放到主内容布局裡面，也可以放到外面

figcaption标簽

通常放在figure标簽裡面，用來定義相關内容的标題

<span style="white-space:pre">		</span><figure>
			<figcaption>圖2.風景畫</figcaption>
			<img src="" alt="" />
		</figure>
		
		<figure>
			<figcaption>代碼片段</figcaption>
			<pre>
				for(int i=0;i<10;)
			</pre>
		</figure>