HTML <summary> تاگ

تعریف اور استعمال

<summary> تگ کا نام: <details> عنصر ایک دیکھ بھال کی سرورتبہ تعین کی گئی ہے۔ سرورتبہ پر کلک کرکے تفصیلات دیکھ سکتے ہیں/پنهان کرسکتے ہیں۔

توجہ دیں:<summary> عنصر کا <details> عنصر پہلے بیٹی عنصر کا。

مزید دیکھیئے:

HTML DOM مرجع دستنوشت:مختصر اشاریہ

مثال

مثال 1

استفادہ کریں <summary> عنصر:

<details>
  <summary>مرکز دنیای آینده (Epcot Center)</summary>
  <p>Epcot است یک پارک موضوعی در دیزنی لند، دارای جاذبه‌های هیجان‌انگیز، نمایشگاه‌های بین‌المللی، فایروورک‌های برنده و فعالیت‌های فصلی.</p>
</details>

آزمایش کنید

مثال 2

CSS کا استفادہ کرکے <details> اور <summary> کاوش کری:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>مرکز دنیای آینده (Epcot Center)</summary>
  <p>Epcot است یک پارک موضوعی در دیزنی لند، دارای جاذبه‌های هیجان‌انگیز، نمایشگاه‌های بین‌المللی، فایروورک‌های برنده و فعالیت‌های فصلی.</p>
</details>
</body>
</html>

آزمایش کنید

ویژگی‌های جهانی

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

ویژگی‌های رویداد در HTML

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

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

بیشتر مرورگرها از ارزش‌های پیش‌فرض زیر برای نمایش استفاده می‌کنند <summary> عنصر:

summary {
  display: block;
}

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

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

کروم Edge افراد سافاری آپرا
کروم Edge افراد سافاری آپرا
12.0 79.0 49.0 6.0 15.0