HTML <figure> thẻ

Định nghĩa và cách sử dụng

<figure> thẻ quy định nội dung tự bao gồm, như minh họa, biểu đồ, hình ảnh, danh sách mã vạch, v.v.

Mặc dù <figure> Nội dung của yếu tố liên quan đến nội dung chính, nhưng vị trí của nó tách biệt với dòng chính của nội dung, nếu xóa nó, không nên ảnh hưởng đến dòng chính của tài liệu.

Lưu ý:Vui lòng sử dụng <figcaption> yếu tố Để <figure> Thêm tiêu đề cho yếu tố.

Xin xem thêm:

Hướng dẫn tham khảo HTML DOM:Object Figure

Mô hình

Ví dụ 1

Sử dụng yếu tố <figure> để đánh dấu hình ảnh trong tài liệu, sử dụng yếu tố <figcaption> để định nghĩa tiêu đề của hình ảnh:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Ảnh 1 - Trulli ở vùng Puglia, Ý.</figcaption>
</figure>

Thử ngay

Ví dụ 2

Sử dụng CSS để thiết lập樣式 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="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Ảnh 1 - Trulli ở vùng Puglia, Ý.</figcaption>
</figure>
</body>
</html>

Thử ngay

Thuộc tính toàn cục

<figure> Thẻ cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<figure> Thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị các giá trị mặc định sau: <figure> Phần tử:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Thử ngay

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ phần tử này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Ghi chú: Thẻ <figure> là thẻ mới trong HTML 5.