تفاوت عناصر 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 در قطعه کد زیر استفاده کردیم:
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<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>
<!-- Second group of tags -->
<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>
</body>
</html>
خروجی زیر را در صفحه ی خروجی خواهید دید:
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 است.
چه تفاوتی بین تگ <span> و <div> وجود دارد ؟
سوالی که اکثرا برای دانش آموختگان زبان html پیش می آید این است که چه تفاوتی بین div و span وجود دارد ؟
تفاوت بین تگ span و تگ div این است که تگ <span> با عناصر inline استفاده می شود در حالی که تگ div با عناصر بلوک مورد استفاده قرار می گیرد.
مثال:
در مثال زیر یک نمونه ساده از کارکرد تگ <span> ارائه کردیم . CSS در فصول بعدی به طور کامل بررسی خواهد شد اما برای تفهیم مفهوم تگ span
ناچارا در کد زیر از CSS استفاده می کنیم.
<!DOCTYPE html>
<html>
<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>
</body>
</html>
نتیجه حاصله در خروجی به صورت زیر خواهد بود:
This is red and this is green
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشنها محسوب میشود. در واقع HTML را عنصر کلیدی صفحات وب می…این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …