Thẻ HTML <figcaption>

Định nghĩa và cách sử dụng thẻ <figcaption>

Thẻ <figcaption> xác định phụ đề cho phần tử <figure>. Phần tử <figcaption> có thể được đặt làm phần tử con đầu tiên hoặc cuối cùng của phần tử <figure>.

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>

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ử
<figcaption>
Google ChromeMS EdgeFirefoxSafariOpera
8.09.04.05.111.0

Thuộc tính Global

Thẻ <figcaption> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

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

Một số ví dụ khác

Sử dụng CSS để tạo kiểu cho <figure><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ử <figcaption> với các giá trị mặc định sau:

figcaption {
  display: block;
}
Chủ Nhật, 18/09/2022 10:02
58 👨 52
0 Bình luận
Sắp xếp theo