معرفی تگ iframe در آموزش ساخت سایت

در این گزارش تفاوت عناصر block و inline در HTML با بررسی چند مثال شرح داده شده است.

کد خبر : 548102

به گزارش گروه رسانه‌های دیگر خبرگزاری آنا، در این گزارش تفاوت عناصر block و inline در HTML با بررسی چند مثال شرح داده شده است.

تفاوت عناصر block و inline در HTML - بررسی چند مثال

بلاک ها در html :

تمام عناصر HTML را می توان به دو دسته طبقه بندی کرد:
(الف) بلوک ها (blocks)
(ب) عناصر درون خطی (یا عناصر inline)

بلاک ها :

بلاک ها در html بر روی صفحه نمایش ظاهر می شوند به صورت تمام عرض ادامه می یابد . به عنوان مثال
<p>، <h1>، <h2>، <h3>، <h4>، <h5>، <h6>، <ul>، <ol>، <dl>، <pre>، <hr />، <blockquote>، و <address>
همگی جزو بلاک ها دسته بندی می شوند . همه تگ های یاد شده از خط جدید شروع می کنند و در ادامه خواهیم دید که چگونه سایت درست کنیم ؟

و هر چیزی که آنها را دنبال کند از خط جدید شروع میکند.
عناصر بلاک ها همیشه از یک خط جدید شروع می شوند.
به زبان ساده تر عناصری که یک خط را به صورت کامل اشغال می کنند Block می گوییم ؛ چه داخل عنصر محتوا بصورت کامل قرار بگیره چه در حد چند کلمه ی کوتاه باشد ، در هر صورت یک خط رو به صورت کامل در بر میگیرد و محتوای عنصر بعدی به خط بعد منتقل میشود .

Inline عناصر

به زبان ساده ، عناصر inline ، به اندازه محتوای خود فضا را اشغال می کنند .
اگر دو عنصر inline ، کنار هم قرار بگیرند در خروجی نیز در کنار هم خواهند بود و هر کدام به خط جداگانه منتقل نمیشوند .
از سوی دیگر، عناصر درونی می توانند در جملات ظاهر شوند و مجبور به ظاهر شدن در خط جدید نیستند. این عناصر از جایی که شروع شده اند و تا جایی که پایان می بایند ادامه دارند.
<i>، <u>، <em>، <strong>، <sup>، <sub>، <big>، <small>، <li>، <ins>، <del>، <cite>، <dfn>، <kbd>، و <var>
عناصر فوق همگی عناصر درون خطی هستند.

گروه بندی عناصر در HTML

دو تگ مهم وجود دارد که ما اغلب برای گروه بندی تگ های HTML از آن استفاده میکنیم:
- تگ span
تگ div

آشنایی با تگ div

این تگ ، تگ مهمی است که نقش به سزایی در گروه بندی تگ های دیگر HTML و استفاده از CSS در تگ های دیگر دارد. حتی امروزه تگ div می تواند برای ایجاد طرح بندی (لایه بندی) صفحه وب استفاده شود که در طراحی به این سبک قسمت های مختلف صفحه را (چپ، راست، بالا و غیره) با استفاده از تگ div دسته بندی می کنیم. این تگ هیچ تغییر ظاهری در بلوک ارائه نمی دهد ، اما در عوض مزایای فراوانی هنگام استفاده از CSS عاید شما خواهد کرد.
مثال زیر یک مثال ساده از نوع کارکرد تگ <div> است. ما CSS را در یک فصل جداگانه آموزش خواهیم داد ، اما برای نشان دادن نوع کارکرد تگ <div> ، از CSS در قطعه کد زیر استفاده کردیم:

<head> <title>HTML div Tag</title> </head>  <div style = "color:red"> <h4>This is first group</h4> <p>Following is a list of vegetables</p> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </div>  <div style = "color:green"> <h4>This is second group</h4> <p>Following is a list of fruits</p> <ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> <li>Strawberry</li> </ul> </div>

خروجی زیر را در صفحه ی خروجی خواهید دید:

This is first group
Following is a list of vegetables
Beetroot
Ginger
Potato
Radish
This is second group
Following is a list of fruits
Apple
Banana
Mango
Strawberry

آشنایی با تگ <span> :

تگ span در آموزش ساخت سایت یک تگ درون خطی است و می تواند برای گروه بندی عناصر inline در یک سند HTML استفاده شود.
این تگ نیز هیچ تغییر بصری (قابل مشاهده) در بلوک ارائه نمی دهد، کارکرد اصلی آن هنگام کار با CSS است.
این تگ نیز هیچ تغییر بصری (قابل مشاهده) در بلوک ارائه نمی دهد، کارکرد اصلی آن هنگام کار با CSS است.

چه تفاوتی بین تگ <span> و <div> وجود دارد ؟

سوالی که اکثرا برای دانش آموختگان زبان html پیش می آید این است که چه تفاوتی بین div و span وجود دارد ؟
تفاوت بین تگ span و تگ div این است که تگ <span> با عناصر inline استفاده می شود در حالی که تگ div با عناصر بلوک مورد استفاده قرار می گیرد.
مثال:
در مثال زیر یک نمونه ساده از کارکرد تگ <span> ارائه کردیم . CSS در فصول بعدی به طور کامل بررسی خواهد شد اما برای تفهیم مفهوم تگ span
ناچارا در کد زیر از CSS استفاده می کنیم.

<head> <title>HTML span Tag</title> </head> <body> <p>This is <span style = "color:red">red</span> and this is <span style = "color:green">green</span></p>

نتیجه حاصله در خروجی به صورت زیر خواهد بود:

This is red and this is green

منبع : کلیک سایت

انتهای پیام/ر

انتهای پیام/