این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ figcaption در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ figcaption در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Figcaption در HTML
تگ figcaption تگی است که باید داخل تگ figure استفاده شود و با استفاده از آن میتوان برای تگ <figure> یک عنوان یا کپشن مشخص کرد.
Free-Learn
مثال از این تگ در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ figcaption در حالت عادی ( بدون استایل )
|
1 2 3 4 5 6 7 8 |
<body> <figure style="text-align:center;"> <img src="files/ali-daei.jpg"> <figcaption>علی دایی در سال 2019</figcaption> </figure> </body> |
مثال شماره ۲ : استایل دادن به تگ figcaption با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> figure{ border:3px #000 solid; padding:4px; margin:10px auto; max-width:500px; overflow:auto; text-align:center; } figcaption{ background-color:#123456; color:#fff; font-style:italic; padding:5px; text-align:center; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ figcaption در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ figcaption از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ figcaption باید داخل تگ figure استفاده شود.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها این تگ figcaption را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
figcaption { display: block; } |
