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
ນຳໃຊ້ 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="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>
