خانه آموزش HTML آموزش تگ های HTML آموزش تگ figure در HTML

آموزش تگ figure در HTML

توسط

۱۳۹۸-۰۱-۰۵

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ figure در HTML با من همراه باشید.

آموزش تگ figure در HTML

Free-Learn

تگ Figure در HTML

تگ figure تگی است که با استفاده از آن میتوان محتوای مستقلی همچون (تصاویر،نمودارها،کدها،لیست ها و..) را در یک صفحه ی وب به نمایش گذاشت.

Free-Learn

مثال از تگ figure در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<figure>
  <img src="images/Ali-Daei.jpg" alt="ali_daei">
</figure>

</body>

<body>

</figure>

</body>

امتحان کنید

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

<body>
 
<figure>
  <img src="images/Ali-Daei.jpg">
  <figcaption>Ali Daei,Iranian Former Footballer And Coach</figcaption>
</figure>
 
</body>

<body>

<figcaption>Ali Daei,Iranian Former Footballer And Coach</figcaption>

</figure>

</body>

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ figure در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	۶٫۰	۴٫۰	۱۱٫۱	۵٫۰	۹٫۰

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

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

Free-Learn

نکات و توضیحات

تگ figure یک تگ جدید/اضافه شده در HTML5 می باشد.

با استفاده از تگ figcaption میتوان برای محتوای تگ figure یک عنوان/کپشن مشخص کرد.

Free-Learn

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

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

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

figure {

display: block;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 40px;

margin-right: 40px;

}