Thẻ HTML <figure>
Đị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 code, v.v... Ví dụ sau 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>
Mặc dù nội dung của phần tử <figure>
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 phần tử <figure>
.
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ử.
Phần tử <figure> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
Thuộc tính Global
Thẻ <figure>
cũng hỗ trợ các thuộc tính Global 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
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ài đặt CSS mặc định
Hầu hết mọi trình duyệt sẽ hiển thị phần tử <figure>
với các giá trị mặc định sau:
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Bạn nên đọc
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/hoc-HTML-5-size-24x24-znd.png)
Cũ vẫn chất
-
Cách viết chữ màu Liên Quân Mobile
2 ngày 2 -
Cách quản lý mật khẩu đã lưu trên Microsoft Edge: Xem, xóa, sửa, xuất
Hôm qua -
Hướng dẫn cách kẻ chéo ô trong Excel
2 ngày -
Tổng hợp phím tắt Đấu Trường Chân Lý
Hôm qua -
44 phím tắt hữu dụng trên tất cả trình duyệt
Hôm qua 2 -
Hình nền mở khóa điện thoại hài hước, hình nền mở khóa troll bá đạo
Hôm qua -
Reset rank Liên Quân mùa 27
2 ngày -
Cách tạo sticker tùy chỉnh trên Telegram
Hôm qua -
URL là gì? Cấu trúc của URL
Hôm qua -
2 cách lặp lại thanh tiêu đề trong Word cho bảng
Hôm qua