Thẻ <figcaption> HTML

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

<figcaption> Thẻ <figure> Phần tử định nghĩa tiêu đề.

<figcaption> Phần tử có thể được đặt ở <figure> Vị trí của phần tử con đầu tiên hoặc cuối cùng của phần tử.

Xin xem thêm:

Tài liệu tham khảo HTML DOM:Đối tượng Figcaption

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="tulip.jpg" alt="Cúc tường" style="width:300px">
  <figcaption>Hình 1 - Cúc tường, họ Cúc, thực vật thân thảo nhiều năm.</figcaption>
</figure>

Thử nghiệm trực tiếp

Ví dụ 2

Sử dụng CSS để thiết lập giao diện <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="tulip.jpg" alt="Cúc tường" style="width:300px">
  <figcaption>Hình 1 - Cúc tường, họ Cúc, thực vật thân thảo nhiều năm.</figcaption>
</figure>
</body>
</html>

Thử nghiệm trực tiếp

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

<figcaption> Nhãn cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<figcaption> Nhãn 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ị giá trị mặc định sau đây <figcaption> Thành phần:

figcaption {
  display: block;
}

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ yếu 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