HTML แบบฟอร์ม <figcaption>

การใช้งานและการกำหนด

<figcaption> แสดงโดย <figure> องค์ประกอบกำหนดหัวข้อ

<figcaption> องค์ประกอบสามารถถูกจัดตั้งใน <figure> ตำแหน่งขององค์ประกอบแรกหรือสุดท้ายขององค์ประกอบ

ดูเพิ่มเติมที่:

คู่มือ HTML DOMเป้าหมาย Figcaption

ตัวอย่าง

ตัวอย่าง 1

ใช้ประกาย <figure> ในการจำลองภาพในเอกสาร และใช้ประกาย <figcaption> ในการกำหนดหัวข้อของภาพ:

<figure>
  <img src="tulip.jpg" alt="ทุลิพปัส" style="width:300px">
  <figcaption>ภาพ 1 - ทุลิพปัส วงศ์ลิลิ (Liliaceae), พืชหญ้าที่ดิ้นราบตลอดทั้งปี。</figcaption>
</figure>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ CSS ตั้งรูปแบบสำหรับ <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="tulip.jpg" alt="ทุลิพปัส" style="width:300px">
  <figcaption>ภาพ 1 - ทุลิพปัส วงศ์ลิลิ (Liliaceae), พืชหญ้าที่ดิ้นราบตลอดทั้งปี。</figcaption>
</figure>
</body>
</html>

ทดลองด้วยตัวเอง

คุณสมบัติโลกะลังกา

<figcaption> แทร็กยังสนับสนุน คุณสมบัติโลกะลังกาใน HTML。

คุณสมบัติเหตุการณ์

<figcaption> แทร็กยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML。

การตั้งค่า CSS โดยเริ่มต้น

ส่วนใหญ่แล้วบราวเซอร์จะแสดงค่าเริ่มต้นดังนี้ <figcaption> องค์ประกอบ：

figcaption {
  display: block;
}

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางบอกว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนองค์ประกอบนี้

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