7.1 元素 <figure>
在HTML中使用<figure>和<figcaption>標籤提供了一種語義化的方式
來添加圖片和其他多媒體元素並附上標題。這些標籤幫助改善內容的結構，
讓它對用戶和搜索引擎都更有可讀性和可理解性。我們來詳細了解這些元素。
元素<figure>用來標示獨立的內容，解釋或說明文檔的其餘部分。它可以包含圖片、圖表、影片、音頻、表格，甚至是代碼塊。
通常<figure>元素會和<figcaption>元素一起使用，
<figcaption>為<figure>內容添加標題。
語法
HTML
<figure>
<!-- 這裡可以是任何多媒體元素，例如圖片 -->
</figure>
使用範例：
範例1: 帶標題的圖片
HTML
<figure>
<img src="example.jpg" alt="示例圖片">
<figcaption>解釋圖片內容的標題</figcaption>
</figure>
範例2: 帶標題的表格
HTML
<figure>
<table>
<tr>
<th>標題1</th>
<th>標題2</th>
</tr>
<tr>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
<figcaption>表格的標題</figcaption>
</figure>
7.2 元素 <figcaption>
元素<figcaption>用於為<figure>元素內容添加標題。它可以放置在
<figure>內容的前面或後面，這取決於開發者或設計需求的偏好。
語法
HTML
<figure>
<!-- figure元素的內容 -->
<figcaption>內容的標題</figcaption>
</figure>
使用範例：
範例1: 圖片後的標題
HTML
<figure>
<img src="landscape.jpg" alt="風景">
<figcaption>美麗的山水風景</figcaption>
</figure>
範例2: 圖片前的標題
HTML
<figure>
<figcaption>美麗的山水風景</figcaption>
<img src="landscape.jpg" alt="風景">
</figure>
7.3 可訪問性和SEO
使用<figure>和<figcaption>元素可以提升網站的可訪問性和SEO。
使用讀屏器的人能更好理解圖片的上下文，因為有語義化的<figcaption>標籤。搜尋引擎也會考量HTML文檔的結構，這有助於改善頁面的索引和排名。
在不同上下文中的使用範例：
範例1: 嵌入圖表
HTML
<figure>
<img src="chart.png" alt="顯示銷售增長的圖表">
<figcaption>顯示上季度銷售增長的圖表</figcaption>
</figure>
範例2: 帶標題的視頻內容
HTML
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
您的瀏覽器不支持視頻。
</video>
<figcaption>演示產品工作的範例視頻</figcaption>
</figure>
範例3: 帶解釋的代碼
HTML
<figure>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<figcaption>JavaScript的示例函數, 在控制台輸出 "Hello, world!"</figcaption>
</figure>
7.4 使用CSS的樣式和設計
使用CSS為<figure>和<figcaption>元素設置樣式可以創建
吸引人的視覺效果並改善內容的感知。
應用樣式的範例：
CSS
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
HTML
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>美麗的自然風景</figcaption>
</figure>
HTML
<figure>
<img src="nature.jpg" alt="自然">
<figcaption>美麗的自然風景</figcaption>
</figure>
使用<figure>和<figcaption>元素提供了一種語義化
和結構化的方法來在網頁上添加帶有標題的多媒體內容。這些元素不僅改善了可訪問性和SEO，還使內容對用戶來說更加明確和有結構。
GO TO FULL VERSION