如報紙、雜誌、報告等其他媒介上看到過圖。通常,圖是由頁面上的文本引述出。 在HTML5出現之前,沒有專門實現這個目的的元素,因此一些開發人員想出了他們自己的解決辦法(通常會使用不那麼理想的、沒有語義的div元素)。 通過引入figure和figcaption,HTML5改變了這種情況。 圖可以是圖表 ...
如報紙、雜誌、報告等其他媒介上看到過圖。通常,圖是由頁面上的文本引述出。
在HTML5出現之前,沒有專門實現這個目的的元素,因此一些開發人員想出了他們自己的解決辦法(通常會使用不那麼理想的、沒有語義的div元素)。
通過引入figure和figcaption,HTML5改變了這種情況。
圖可以是圖表、照片、圖形 、插圖、代碼片段,以及其他類似的獨立內容。
可以由頁面上的其他內容引出figure,figcaption是figure的標題,可選,出現在figure內容的開頭或結尾處。
創建圖及其標題的步驟:
(1) 輸入<figure>。
(2) 作為可選步驟,輸入<figcaption>開始圖的標題。
(3) 輸入標題文字。。
(4) 添加圖像、視頻、數據表格等內容的代碼創建圖。
(5) 輸入</figure>。
例如:
1 <body> 2 3 <article> 4 <h1>2013 Revenue by Industry</h1> 5 6 <p>. . . [report content] . . .</p> 7 8 <figure> 9 <figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption> 10 11 <img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" /> 12 </figure> 13 14 <p>As Figure 3 illustrates, . . . </p> 15 16 <p>. . . [more report content] . . .</p> 17 </article> 18 19 </body>
******************************************************************************************************************
提示:
figure元素可以包含多個內容塊。
如圖中可以包含兩個圖表:一個表示收入 ,一個表示利潤。
不過要記住,不管figure里有多少內容,只允許有一個figcaption。
*******************************************************************************************************************
******************************************************************************************************************
提示:
不要簡單地將figure作為在文本中嵌入獨立內容實例的方法。
這種情況下,通常更適合用aside元素。
************************************************************************************
******************************************************************************************************************
提示:
可選的figcaption必須與其他內容一起包含在figure裡面,不能單獨出現在其他位置。
************************************************************************************