برای استفاده از همه امکانات سایت باید جاوا اسکریپت مرورگر خود را فعال کنید.

آموزش تگ figure در HTML - راهنمای کار با محتوای دارای توضیحات در html

با استفاده از تگ figure می توان محتواهایی مانند عکس ها، نمودارها، اشکال، لیست کد و... را در صفحه تعریف کرد. همچنین با استفاده از تگ figcaption می توان ...

با استفاده از تگ figure می توان محتواهایی مانند عکس ها، نمودارها، اشکال، لیست کد و... را در صفحه تعریف کرد. همچنین با استفاده از تگ figcaption می توان برای تعریف عنوان برای این محتوا استفاده کرد.


مثال تگ figure در HTML

مثال 1:

<figure style="text-align:center;">
 <img src="files/gol.jpg">
</figure>


مثال شماره ۲ : تعریف کپشن برای تگ figure با استفاده از تگ figcaption

<figure style="text-align:center;">
 <img src="files/gol.jpg">
 <figcaption>گل یاس</figcaption>
</figure>


مثال شماره ۳ : استایل دادن به تگ figure با استفاده از CSS

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<figure>
 <img src="files/gol.jpg">
 <figcaption>گل یاس</figcaption>
</figure>

</body>
</html>


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

تگ <figure> در مرورگرهای کروم 8، فایرفاکس 4، اپرا 11، سافاری 5.1، اینترنت اکسپلورر 9 به بالا پشتیبانی می شود.

مرورگر کروم فایرفاکس اپرا سافاری اینترنت اکسپلورر / اج
پشتیبانی 8 4 11 5.1 9


پشتیبانی از ویژگی ها و رویدادهای عمومی

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


دستورات CSS پیش فرض

معمولا مرورگرها تگ figure را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

 

موضوع: آموزش HTML
کلمات کلیدی: ، ، ، ، ، ، ، ، ، ، ،

نظرات نظرات تا اطلاع ثانوی غیر فعال است.