تگ details و کاربرد آن در html

تگ details و کاربرد آن در html

برچسب <details> جزئیاتی به متن اضافه میکند که کاربر می تواند برای اطلاعات بیشتر به دلخواه آن را مشاهده یا پنهان کند. از این برچسب می توان برای ایجاد ویجت های تعاملی که کاربر می تواند آن را باز و بسته کند استفاده کرد. هر نوع محتوایی را می توان در داخل برچسب <details> قرار داد.

تگ details و کاربرد آن در html

تگ details و کاربرد آن در html

محتوای عنصر details نباید قابل مشاهده باشد مگر این که خاصیت open استفاده شده باشد.

نکته: از تگ <summary> برای تعیین یک عنوان قابل مشاهده برای details استفاده می شود. با کلیک بر روی عنوان ، details مشاهده یا پنهان میشود.

مثال :

 

تگ details و کاربرد آن در html

تگ details و کاربرد آن در html

تگ details و کاربرد آن در html

تفاوت بین HTML 4.01 و HTML5

عنصر details یک تگ جدید در HTML5 است.

خاصیت ها

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد

خاصیت ویژه عنصر

خاصیتمقدارشرح
openopenاین خاصیت Boolean تعیین میکند که details باید برای کاربر نشان داده شود. مقدار آن به طور پیش فرض  false است که در این صورت، details پنهان خواهد بود

 

خاصیت های عمومی

تگ details از خاصیت های عمومی HTML پشتیبانی میکند

accesskeyhiddenitemtype
classidlang
contenteditableinertspellcheck
contextmenuitemidstyle
diritemproptabindex
draggableitemreftitle
dropzoneitemscopetranslate

خاصیت های رویداد

تگ  details از خاصیت های رویداد در HTML نیز پشتیبانی میکند.

onabortonendedonmousewheel
oncancelonerroronpause
onbluronfocusonplay
oncanplayonformchangeonplaying
oncanplaythroughonforminputonprogress
onchangeoninputonratechange
onclickoninvalidonreadystatechange
oncontextmenuonkeydownonscroll
ondblclickonkeypressonseeked
ondragonkeyuponseeking
ondragendonloadonselect
ondragenteronloadeddataonshow
ondragexitonloadedmetadataonstalled
ondragleaveonloadstartonsubmit
ondragoveronmousedownonsuspend
ondragstartonmousemoveontimeupdate
ondroponmouseoutonvolumechange
ondurationchangeonmouseoveronwaiting
onemptiedonmouseup

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

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

عنصرگوگل کروماینترنت اکسپلوررفایرفاکسسافاریاپرا
<details>۱۲٫۰پشتیبانی نمی کندپشتیبانی نمی کند۶٫۰۱۵٫۰
پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *