تگ figcaption در HTML

  /  Frontend   /  تگ figcaption در HTML

با استفاده از تگ figcaption در HTML می توانید برای عنصر <figure> یک عنوان یا کپشن تعریف کنید.

مثال

<figure>
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="Trulli" style="width:100%">
<figcaption>متین برونسی ، یک برنامه نویس ساکن ایران</figcaption>
</figure>


تعریف و کاربرد

تگ figcaption در HTML درون عنصر <figure> به کار میرود و برای ایجاد عنوان برای این عنصر استفاده می شود.

عنصر <figcaption> میتواند اول یا آخر عناصر فرزند تگ <figure> قرار بگیرد.


پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
<figcaption>8.09.04.05.111.0

خواص عمومی

تگ figcaption از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ figcaption از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر figcaption در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

figcaption {
  display: block;
}

مثال های بیشتر

در این مثال با استفاده از CSS ویژگی های سفارشی شده به تگ <figcaption> اضافه کرده ایم:

<!DOCTYPE html>
<html dir="rtl">
<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>

<h1>عنصر figure و figcaption به همراه CSS</h1>

<figure>
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="Matin Boronsi" style="width:100%">
<figcaption>متین برونسی ، یک برنامه نویس ساکن ایران</figcaption>
</figure>

</body>
</html>

من یک برنامه نویس خستگی ناپذیر هستم که رویا هاش رو کد نویسی میکنه...

ارسال یک نظر