＜figure＞ ＜figcaption＞筆記

介紹

     <figure>標籤代表一段獨立的內容，<figure>中的內容雖然和附近的主內容 (main flow) 有關聯，但 <figure>區塊的排版是可以被隨意移動位置或整個區塊直接移除而不會影響上下文中主要內容的意思。

     <figure>作為一個容器 (container)，常用來引用「文字段落」、「圖片」、「圖表」或「程式碼片段」等內容。

     <figure>中有一個叫做<figcaption>的標籤，該標籤可以用來描述 figure 區塊的內容，有助於搜尋引擎了解區塊內容。

範例

figure裡面放圖片

<figure>
        <img src="https://picsum.photos/200/200/?random=1">
        <figcaption>這是一張圖片</figcaption>
        <img src="https://picsum.photos/200/200/?random=2">
        <figcaption>這也是一張圖片</figcaption>
    </figure>

figure裡面放程式碼

<figure>
	<figcaption>這是一段CSS程式碼</figcaption>
    	<pre>
        	<code>
	            p { 
	                color: #000; 
	                font-size: 16px;
	            } 
	        </code> 
	    </pre> 
</figure>