برچسب <summary> HTML

تعریف و استفاده

<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.

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

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

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

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

summary {
  display: block;
}

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0