تگ summary در HTML

  /  فرانت اند   /  HTML   /  تگ summary در HTML

تگ summary در HTML درون عنصر <details> قرار میگیرد و نام یا عنوان این عنصر را مشخص می کند.

مثال

<details>
<summary>فیزیک کوانتوم</summary>
<p>مکانیک کوانتومی (به انگلیسی: Quantum mechanics) شاخه‌ای بنیادی از فیزیک نظری است که با پدیده‌های فیزیکی در مقیاس میکروسکوپی سر و کار دارد. </p>
</details>


تعریف و کاربرد

تگ summary در HTML درون تگ <details> جهت مشخص کردن یک نام یا عنوان برای عنصر <details> مورد استفاده قرار میگیرد.

نکته: تگ <summary> باید اولین عنصر فرزند تگ <details> باشد.


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

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

عنصر
<summary>12.079.049.06.015.0

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

اکثر مرورگر ها عنصر summary در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

summary {
  display: block;
}

مثال های بیشتر

<!DOCTYPE html>
<html dir="rtl">
<head>
<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>
</head>
<body>

<h1>عناصر details و summary به همراه CSS</h1>

<details>
<summary>روی من کلیک کن !</summary>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
</details>

</body>
</html>

5/5 - (1 امتیاز)

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر