HTML - <figure> 標籤

HTML <figure> 標籤用於建立自包含的內容。自包含的內容包括圖表、影像、程式碼示例等等。

<figure> 標籤的內容與主流程的內容相關聯。它被視為一個獨立的單元。HTML <figcaption> 標籤可以用來為<figure> 標籤的內容新增標題或解釋。

語法

<figure>
   ...
</figure>

屬性

HTML figure 標籤支援全域性和事件屬性。

HTML figure 標籤示例

下面的例子將演示 figure 標籤的使用方法、使用場景以及如何使用 CSS 樣式化 figure 元素。

使用 figure 標籤建立 figure 元素

在下面我們將使用 HTML <figure> 標籤。

<!DOCTYPE html>
<html>
<body>
   <figure>
      <img src=
"https://tutorialspoint.tw/cg/images/logo.png" 
           alt="LOGO" />
   </figure>
</body>
</html>

樣式化 figure 元素

在這個例子中，我們將為 figure 設定一個圓角邊框，以及元素的內邊距和外邊距。

<!DOCTYPE html>
<html>

<head>
    <style>
        figure {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #fff;
            display: inline-block;
        }
    </style>
</head>

<body>
    <figure>
            <img src="https://tutorialspoint.tw/cg/images/logo.png" 
                 alt="LOGO" />
    </figure>
</body>

</html>

figure 元素的標題

讓我們看看下面的例子，我們將觀察<div> 標籤和<figure> 標籤之間的區別。

<!DOCTYPE html>
<html>

<head>
    <style>
    .child {
        display: inline-block;
    }
    .child, img{
        border: 1px solid black;
    }
    </style>
</head>

<body>
    <div>
        <div class="child">
            <p>Using div Tag:</p>
            <div>
                <img src=
"https://tutorialspoint.tw/cg/images/logo.png" 
                     alt="logo">
                <p>TutorialsPoint Logo</p>
            </div>
        </div>
        <div class="child">
            <p>Using figure Tag:</p>
            <figure>
                <img src=
"https://tutorialspoint.tw/cg/images/logo.png" 
                     alt="Logo">
                <figcaption>TutorialsPoint Logo</figcaption>
            </figure>
        </div>
    </div>
</body>

</html>

支援的瀏覽器

標籤
figure	支援 8.0	支援 9.0	支援 4.0	支援 5.1	支援 11.0

html_tags_reference.htm

列印頁面