صفحه نخست » مقالات » برنامه نویسی » آموزش HTML » عناصر بلوکی و درون خطی در HTML

عناصر بلوکی و درون خطی در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 4 دقیقه 20 آبان 1399
عناصر-بلوکی-و-درون-خطی-در-HTML

عناصر درون خطی HTML در همان خطی که در ابتدا قرار داده شده است نمایش داده می شوند. عناصر بلوک از یک خط جدید شروع می شوند و تمام عرض آن را می گیرند.

درک عناصر درون خطی HTML

عناصر HTML بر اساس نحوه نمایش آنها توسط مرورگر به طور پیش فرض به دو گروه تقسیم می شوند: عناصرinline ( درون خطی) و block-level  (سطح بلوک).

در حالی که block elements به یک خط جدید منتقل می شوند و کل عرض را می گیرند ،  inline elements  در خطی قرار می گیرند که می مانند و فضای بیشتری از آنچه برای محتوای آنها لازم است ، نمی گیرند:

عناصر بلوکی و درون خطی

مثال خوبی از عناصر درون خطی ، عناصر قالب بندی متن ، مانند <em> یا <strong> هستند. آنها فقط باید روی ظاهر متن تأثیر بگذارند. در همین حال ، عنوان ها و پاراگراف های HTML عناصر بلوک هستند ، زیرا به ایجاد ساختار صفحه کمک می کنند.

درک عناصر بلوکی HTML

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

<div> برای تعیین منطقه ای برای سایر عناصر در یک وب سایت استفاده می شود. به هیچ ویژگی نیاز ندارد ، اما اغلب شامل style ، id و class است:

<div style="background-color: lightpink;">
  This div is on the top.
</div>
<div style="background-color: cornsilk;">
  This div is on the bottom.
</div>

عناوین HTML عناصر بلوکی هستند که توسط تگ <h1> - <h6> تعریف می شوند:

<h1>This text in on the top.</h1>
<h2>This text is on the bottom</h2>

اگرچه ممکن است مانند عناصر درون خطی کوتاه باشد ، پاراگراف ها همچنین عناصر مسدود شده در HTML هستند. آنها با تگ <p> تعریف می شوند:

<p>Hi I'm a paragraph</p>
<p>I'm the paragraph under the first one</p>

یکی دیگر از عناصر بلوکی ، فرم HTML برای ورودی کاربر است که درتگ <form> تعریف شده است:

<form>
  <input type="text"></input>
  <input type="submit" value="Submit"></input>
</form>
<form>
  <input type="text"></input>
  This form is under the first form.
  <input type="submit" value="Submit"></input>
</form>

تعریف عناصر درون خطی

عناصر درون خطی HTML با یک خط جدید شروع نمی شوند. آنها همچنین فقط به اندازه محتوای خود جا می گیرند. تعدادی از آنها در صفحه کنار هم نمایش داده می شوند.

مبتدیان اغلب در مورد <span> در مقابل <div> گیج می شوند. در واقع ، <span> معادل عنصر <div> است :

<p><span style="background-color: bisque;">I will</span> stay on the line I was placed on.</p>

پیوندهای HTML نیز عناصر درون خطی هستند. آنها با استفاده از یک جفت تگ <a> (یا anchor) اضافه می شوند:

<p>This <a href="https://www.bitdegree.org">link</a> stays on the same line it was on.</p>

تصاویر HTML روی خط می مانند. برای افزودن آنها ، از یک تگ <img> استفاده کنید (نیازی نیست آن را ببندید زیرا یک عنصر خالی است):

<img src="image.png" alt="Space Doggo" width="50" height="50">

نکات مهم عناصر بلوکی و درون خطی در HTML

  • شانس سبک سازی عناصر درون خطی HTML با CSS محدود است. با این حال ، شما می توانید ارتفاع ، عرض ، حاشیه ، بالشتک و موارد دیگر را برای عناصر بلوک تنظیم کنید.
  • عناصر HTML به طور پیش فرض فقط به عنوان عناصر بلوک یا درون خطی در می آیند. با این حال ، در CSS ، ویژگی نمایش نیز یک مقدار بلوک درون خطی را می پذیرد. چنین عنصری در خطی که قرار داده شده باقی می ماند ، اما می توان آن را مانند یک عنصر بلوک سبک کرد.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts