HTML แบบตัวแทน <figure>
- หน้าก่อนหน้า <figcaption>
- หน้าต่อไป <font>
คำนิยามและการใช้งาน
<figure> ตามกฎหมายแบบฉบับเดี่ยว สำหรับเนื้อหาที่มีความหมายเดียวกัน เช่น ภาพที่แสดงในแผนภูมิ ตาราง ภาพถ่าย รายการรหัสซอร์ซ์ และอื่นๆ
ถึงแม้ว่า <figure> เนื้อหาขององค์ประกอบเกี่ยวข้องกับเนื้อหาหลัก แต่ตำแหน่งของมันอิสระจากกระแสเนื้อหาหลัก หากลบมันออก จะไม่ส่งผลกระทบต่อกระแสเอกสาร
คำเตือน:ใช้ <figcaption> องค์ประกอบ สำหรับ <figure> เพิ่มหัวข้อให้กับองค์ประกอบ
ดูเพิ่มเติมที่:
คู่มืออ้างอิง HTML DOM:วัตถุ Figure
ตัวอย่าง
ตัวอย่าง 1
ใช้สิ่งที่มีความหมายเดียวกันกับ <figure> สำหรับตัวแทนภาพในเอกสาร และใช้ <figcaption> สำหรับกำหนดหัวข้อภาพ:
<figure> <img src="trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>ภาพ 1 - Trulli ในภูมิภาค Puglia ของอิตาลี。</figcaption> </figure>
ตัวอย่าง 2
ตั้งค่ารูปแบบสำหรับ <figure> และ <figcaption> ด้วย CSS:
<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>ภาพ 1 - Trulli ในภูมิภาค Puglia ของอิตาลี。</figcaption>
</figure>
</body>
</html>
คุณสมบัติโลกาล
<figure> แบบภาพยังสนับสนุน คุณสมบัติโลกาลใน HTML.
คุณสมบัติเหตุการณ์
<figure> แบบภาพยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML.
การตั้งค่า CSS โดยเริ่มต้น
โปรแกรมบราวเซอร์ส่วนใหญ่จะแสดงค่าเริ่มต้นตามต่อไปนี้ <figure> องค์ประกอบ:
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
การสนับสนุนโดยบราวเซอร์
ตัวเลขในตารางนี้ระบุสำหรับเวอร์ชั่นบราวเซอร์ที่สนับสนุนองค์ประกอบนี้เต็มที่
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
หมายเหตุ：<figure> แบบภาพ คือแบบภาพใหม่ใน HTML 5
- หน้าก่อนหน้า <figcaption>
- หน้าต่อไป <font>
