این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ figure در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ figure در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Figure در HTML
تگ figure تگی است که با استفاده از آن میتوان عکس ها، نمودارها ، شکل ها و.. را در یک صفحه ی وب تعریف نمود.
با استفاده از تگ figcaption در درون تگ figure میتونیم یه عنوان یا کپشن برای figure مون مشخص کرد.
Free-Learn
مثال از تگ figure در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده خالی از figure
|
1 2 3 4 5 6 7 |
<body> <figure style="text-align:center;"> <img src="files/ali-daei.jpg"> </figure> </body> |
مثال شماره ۲ : مشخص کردن کپشن برای تگ figure با استفاده از تگ 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> |
مثال شماره ۳ : استایل دادن به تگ figure با استفاده از 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
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ figure در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ figure از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- با استفاده از تگ figcaption میتوان برای محتوای تگ figure یک عنوان یا کپشن مشخص کرد.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ figure را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 |
figure { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; } |
