نحوه نمایش المان های HTML
نحوه نمایش المان های HTML دو نوع است :
- بلوکی ( block )
- درون خطی ( inline )
المان های HTML به صورت پیشفرض block-level و یا به صورت inline-level هستند.
block-level : المان هایی که نحوه نمایششان به صورت block-level است فضای تمام عرض را اشغال می کنند.
inline-level : المان هایی که نحوه نمایششان به صورت inline-level است، فقط به اندازه ی محتوای خود جا می گیرند.
این یک المان درون خطی است.
المان های بلوک(block) در HTML
المان هایی که عرض کامل بخش والد خود را اشغال می‌کنند را المان های بلوکی می‌گویند.
المان های بلوک همیشه از یک سطر جدید شروع می شوند.
نکته: دو المان بلوک رایج div و p هستند.
<div>PNLdev</div>
<p>PNLdev</p>در جدول زیر لیست برخی تگ های بلوکی را مشاهده می کنید :
| <section> | <ol> | <main> | <header> | <footer> | <fieldset> | <div> | <blockquote> | <address> |
|---|---|---|---|---|---|---|---|---|
| <table> | <p> | <nav> | <hr> | <figcaption> | <dl> | <canvas> | <article> | |
| <video> | <noscript> | <li> | <figure> | <dt> | <dd> | <aside> |
المان های درون خطی(inline)
المان هایی که به اندازه محتوای داخلی خود فضا را اشغال می‌کنند، المان های درون خطی می‌گویند.
المان های درون خطی بر خلاف المان های بلوکی از خط جدید شروع نمیشوند.
<i>PNLdev italic</i>
<b>PNLdev Bold</b>در جدول زیر لیست برخی تگ های درون خطی را مشاهده می کنید :
| <textarea> | <span> | <samp> | <map> | <code> | |||
|---|---|---|---|---|---|---|---|
| <time> | <strong> | <script> | <object> | <dfn> | <abbr> | ||
| <tt> | <sub> | <select> | <output> | <kbd> | <button> | <b> | |
| <var> | <sup> | <q> | <label> | <i> | <cite> | <bdo> |
خلاصه درس
در این درس با مباحث زیر آشنا شدید:
- المان های بلوکی و درون خطی
- لیست تگ های درون خطی و بلوکی
احسان اسلامی
