Thẻ <figure> HTML
Thí dụ
Sử dụng phần tử <figure> để đánh dấu ảnh trong tài liệu và phần tử <figcaption> để xác định chú thích cho ảnh:
<figure>
<img src="pic_trulli.jpg" alt="Trulli"
style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia,
Italy.</figcaption>
</figure>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <figure>chỉ định nội dung độc lập, như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v.
Mặc dù nội dung của <figure>phần tử có liên quan đến luồng chính, nhưng vị trí của nó độc lập với luồng chính và nếu bị loại bỏ nó sẽ không ảnh hưởng đến luồng của tài liệu.
Mẹo: Phần tử <figcaption> được sử dụng để thêm chú thích cho <figure>phần tử.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.
| Element | |||||
|---|---|---|---|---|---|
| <figure> | 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
Thuộc tính toàn cầu
Thẻ <figure>cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <figure>cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Các ví dụ khác
Thí dụ
Sử dụng CSS để tạo kiểu cho <figure> và <figcaption>:
<html>
<head>
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style:
italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1
- Trulli, Puglia, Italy</figcaption>
</figure>
</body>
</html>
Các trang liên quan
Tham chiếu DOM HTML: Đối tượng Hình
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị <figure>phần tử với các giá trị mặc định sau:
Thí dụ
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}