建立圖 figure & figcaption

時間 2019-12-09

標籤建立 figure figcaption 简体版

原文原文鏈接

如報紙、雜誌、報告等其餘媒介上看到過圖。一般，圖是由頁面上的文本引述出。ide

在HTML5出現以前，沒有專門實現這個目的的元素，所以一些開發人員想出了他們本身的解決辦法（一般會使用不那麼理想的、沒有語義的div元素）。spa

經過引入figure和figcaption，HTML5改變了這種狀況。code

圖能夠是圖表、照片、圖形、插圖、代碼片斷，以及其餘相似的獨立內容。orm

能夠由頁面上的其餘內容引出figure，figcaption是figure的標題，可選，出如今figure內容的開頭或結尾處。視頻

建立圖及其標題的步驟：blog

(1) 輸入<figure>。開發

(2) 做爲可選步驟，輸入<figcaption>開始圖的標題。io

(3) 輸入標題文字。。form

(4) 添加圖像、視頻、數據表格等內容的代碼建立圖。class

(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裏面，不能單獨出如今其餘位置。

************************************************************************************

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。