در HTML و CSS، مفهوم بلوک‌ها (Blocks) به تشخیص نحوی و نحوه نمایش عناصر HTML در صفحه می‌پردازد. هر عنصر HTML می‌تواند به یکی از دو نوع بلوک یا غیربلوک تعلق داشته باشد.
- 1. بلوک (Block):
– عناصر بلوک از طریق CSS به صورت پیش‌فرض عرضی کلی و ارتفاعی کلی دارند.
– هر عنصر بلوک از یک خط جدید شروع می‌شود و تا انتهای خط فعلی ادامه داده می‌شود.
– عناصر بلوک می‌توانند دیگر عناصر بلوک یا غیربلوک را درون خود قرار دهند.
– نمونه‌هایی از عناصر بلوک عبارتند از <div>، <p>، <h1> تا <h6>، <ul>، <ol>، <li> و بسیاری دیگر. - 2. غیربلوک (Inline):
– عناصر غیربلوک برخلاف بلوک‌ها از طریق CSS به صورت پیش‌فرض عرض و ارتفاع خود را از محتوای داخلی خود کسب می‌کنند.
– این عناصر روی هم قرار می‌گیرند و بدون شروع یک خط جدید در کنار یکدیگر قرار می‌گیرند.
– برخی از مثال‌های عناصر غیربلوک شامل <span>، <a>، <strong>، <em>، <img> و بسیاری دیگر هستند.
برای نمونه، در زیر یک مثال از یک بلوک (<div>) و یک غیربلوک (<span>) نشان داده شده است:
<div>This is a block element.</div>
<span>This is an inline element.</span>در این مثال، <div> به عنوان یک بلوک عمل می‌کند و هر دو خط جداگانه شروع می‌شوند، در حالی که <span> به عنوان یک عنصر غیربلوک عمل می‌کند و در همان خط با متن دیگری قرار می‌گیرد.
عناصر بلوکی (Block Elements)
عناصر بلوک در HTML عناصری هستند که به طور پیش‌فرض در سند HTML یک خط جدید را شروع می‌کنند و به طور کلی به عرض و ارتفاع خود کنترل کاملی دارند. عناصر بلوک معمولاً برای ساختاردهی اصلی صفحه وب و گروه‌بندی عناصر استفاده می‌شوند. برخی از مثال‌های عناصر بلوک شامل <div>، <p>، <h1> تا <h6>، <ul>، <ol>، <li> و بسیاری دیگر هستند.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Elements Example</title>
<style>
.block {
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="block">This is a block element.</div>
<p class="block">This is another block element.</p>
</body>
</html>
عناصر درون خطی (Inline Elements)
عناصر غیربلوک در HTML عناصری هستند که درون خط متن قرار می‌گیرند و به طور پیش‌فرض عرض و ارتفاع خود را از محتوای داخلی خود کسب می‌کنند. این عناصر برای نمایش اطلاعات فرعی و تغییرهای استایل متن استفاده می‌شوند. برخی از مثال‌های عناصر غیربلوک شامل <span>، <a>، <strong>، <em>، <img> و بسیاری دیگر هستند.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Elements Example</title>
<style>
.inline {
background-color: lightyellow;
padding: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<p>This is an <span class="inline">inline</span> element within a paragraph.</p>
<span class="inline">This is another inline element.</span>
</body>
</html>
گروه‌بندی عناصر (Grouping HTML Elements)
روه‌بندی عناصر HTML به معنی قرار دادن چندین عنصر HTML درون یک عنصر مشترک است. این کار برای استفاده از CSS و جاوااسکریپت به عنوان یک واحد برای اعمال استایل یا عملیات جاوااسکریپتی بر روی گروهی از عناصر مفید است. دو عنصر معروف برای گروه‌بندی عناصر HTML <div> و <span> هستند.
تگ div
تگ <div> در HTML برای تعریف یک بخش یا بلوک مستقل از سایر عناصر استفاده می‌شود. این عنصر به عنوان یک کانتینر برای عناصر دیگر (به عنوان مثال، متن، تصاویر، جداول و غیره) استفاده می‌شود و به آن اجازه می‌دهد تا بر روی این عناصر استایل‌های CSS یا افزودن کلاس‌ها و IDها اعمال شود.
مثال:
<div style="background-color: lightblue; padding: 10px;">
<h2>This is a div element</h2>
<p>This is some content inside the div.</p>
</div>
تگ span
تگ <span> برای تعریف یک بخش کوچک از متن یا عنصر درون متن استفاده می‌شود. عنصر <span> تغییراتی در معنی متن ایجاد نمی‌کند و فقط برای اعمال استایل‌ها یا تغییرات ظاهری در متن مورد استفاده قرار می‌گیرد.
مثال:
<p>This is a <span style="color: red;">red</span> word.</p>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام