DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> html5新標簽figure、figcaption應用實例
html5新標簽figure、figcaption應用實例
編輯:HTML和Xhtml     

本來想分兩篇文章來解釋說明figure、figcaption的,但是這倆個標簽都是定義圖文的,所以我們合起來講解,大家更能容易接受。

大家在寫xhtml、html中常常用到一種圖片列表,圖片+標題或者圖片+標題+簡單描述。以前的常規寫法:

<li>
<img src="" /><p>title</P>
</li>

而在html5中有了新標簽更能語義化的定義出這中圖片列表,那就是figure標簽。

w3c賦予的定義:figure標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)。figure 元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。

實例代碼:

<figure>
<p>黃浦江上的的盧浦大橋</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figure用來代替原來li標簽,P標簽誰來取代呢?答案就是:figcaption


w3c賦予的定義:figcaption 標簽定義 figure 元素的標題(caption)。"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。

那麼上面的代碼就變成了:

<figure>
<figcaption>黃浦江上的的盧浦大橋</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

這是個非常易於理解的標簽,其用法也非常清楚。即便是簡單,這裡也建議大家親自動手寫下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved