برچسب div یک بخش در یک سند HTML تعریف می کند. با استفاده از این تگ میتوانید بخش های بزرگی از عناصر html را گروه بندی کرده و با css قالب بندی کنید.
تفاوت بین عنصر <div> و <span> در این است که <div> به همراه عناصر block-level استفاده میشود در حالی که <span> در عناصر درون خطی مورد استفاده قرار میگیرد.
بنابراین، به طور کلی عنصر <div> باید به عنوان یک مکانیسم توسعه یافته عمل کرده و فقط در صورتی استفاده شود که عنصر HTML مناسبی برای استفاده وجود نداشته باشد.
مثال ۱:
<div>
<p>Any kind of content here. Such as <p>, <table>. You name it!</p>
</div>
مثال۲:
<div style="background-color:orange;text-align:center">
<p>Bright Widget</p>
</div>
<div style="background-color:olive;text-align:center">
<p>Dull widget</p>
</div>
این مثال در مرورگر به شکل زیر نمایش داده میشود:
توجه: مرورگر همیشه به طور پیش فرض، یک شکست خط قبل و بعد از عنصر <div> قرار میدهد. با این حال، این حالت را می توان با CSS تغییر داد.
عنصر div و کاربرد آن در html
تفاوت بین HTML 4.01 و HTML5
خاصیت align در HTML5 پشتیبانی نمی شود.
در HTML 4.01 ، تگ <div> اغلب برای مشخص کردن بخش های ناوبری مختلف در یک سند HTML (مانند header ، footer ، content area ، side bars ، و غیره) مورد استفاده می گرفت.
HTML 5 عناصر جدیدی را معرفی کرده که باید به جای عنصر <div> استفاده شوند. نمونه هایی از این عناصر جدید شامل < article>، <aside>، <header> و <footer> و … هستند .
خاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
| خاصیت | مقدار | شرح | |
| align | left right center justify | این خاصیت در html5 پشتیبانی نمیشود | |
تراز محتوای یک عنصر div را مشخص میکند .
خاصیت های عمومی
تگ <div> از خاصیت های عمومی HTML پشتیبانی میکند
| accesskey | hidden | itemtype |
| class | id | lang |
| contenteditable | inert | spellcheck |
| contextmenu | itemid | style |
| dir | itemprop | tabindex |
| draggable | itemref | title |
| dropzone | itemscope | translate |
خاصیت های رویداد
تگ <div> از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
| onabort | onended | onmousewheel |
| oncancel | onerror | onpause |
| onblur | onfocus | onplay |
| oncanplay | onformchange | onplaying |
| oncanplaythrough | onforminput | onprogress |
| onchange | oninput | onratechange |
| onclick | oninvalid | onreadystatechange |
| oncontextmenu | onkeydown | onscroll |
| ondblclick | onkeypress | onseeked |
| ondrag | onkeyup | onseeking |
| ondragend | onload | onselect |
| ondragenter | onloadeddata | onshow |
| ondragexit | onloadedmetadata | onstalled |
| ondragleave | onloadstart | onsubmit |
| ondragover | onmousedown | onsuspend |
| ondragstart | onmousemove | ontimeupdate |
| ondrop | onmouseout | onvolumechange |
| ondurationchange | onmouseover | onwaiting |
| onemptied | onmouseup |
پشتیبانی مرورگر ها
برچسب <div> در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
هیچ نظری موجود نیست:
ارسال یک نظر