این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش کار با عناصر Block و Inline در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با عناصر Block و Inline در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
عناصر Block و Inline در HTML
در این بخش از آموزش های زبان HTML میخواهیم با عناصر یا تگ های بلاکی یا Block و اینلاینی یا Inline در زبان HTML آشنا شویم، لطفا در ادامه و تا پایان این بخش با من همراه باشید.
بطور کلی حالت نمایش تگ های HTML به ۲ صورت میتونه باشه :
- نمایش بلاکی یا Block یا تمام عرضی
- نمایش درون خطی یا Inline یا بین تگی
که در ادامه میخواهیم با این حالت های نمایش آشنا شویم و همچنین در ادامه میتوانید لیست تمام تگ های HTML که بصورت اینلاینی یا بلاکی هستند را مشاهده نمایید.
Free-Learn
عناصر بلاکی یا Block در HTML
یک عنصر که دارای حالت نمایش بلاکی یا Block می باشد یعنی اینکه کل عرض یک سطر رو به خودش اختصاص میده و دیگه نمیزاره عنصر یا تگ دیگه ای در کنارش قرار بگیره، یعنی اگر یک تگ دیگه در کنارش قرار گرفت اون تگ به سطر جدید منتقل میشه.
مثال شماره ۱ : مثلا تگ های H1 تا H6 و تگ P در دسته تگ های بلاکی هستن
|
1 2 3 4 5 6 |
<body> <h2>سایت آموزشی فری لرن</h2> <p>سایت آموزشی فری لرن</p> </body> |
مثال شماره ۲ : استفاده از تگ بلاکی ( تگ P ) در کنار تگ اینلاینی ( Span )
|
1 2 3 4 5 6 7 8 |
<body> <p>سایت آموزشی فری لرن</p> <span>Free-Learn</span> <span>Free-Learn</span> <span>Free-Learn</span> </body> |
Free-Learn
لیست کامل تگ های بلاکی یا block در HTML
در جدول زیر میتوانید تمام تگ های HTML که حالت نمایش بلاکی یا Block دارند را مشاهده نمایید:
| article | aside | blockquote | canvas |
| dl | div | dd | address |
| figure | figcaption | fieldset | dt |
| header | h1-h6 | form | footer |
| ol | ul | li | hr |
| output | noscript | nav | main |
| table | section | pre | p |
| – | – | video | tfoot |
Free-Learn
عناصر دورن خطی یا Inline در HTML
خب ما با عناصر بلاکی آشنا شدیم حال میخواهیم با عناصر درون خطی یا اینلاین یا Inline نیز آشنا شویم، این عناصر برخلاف عناصر بلاکی کل عرض یک سطر رو به خودشون اختصاص نمیدن بلکه فضارو تاجایی که مورد نیازشون هست اشغال میکنند و بقیه فضای سطر آزاد میماند.
مثال شماره ۱ : استفاده از چندین تگ اینلاینی ( تگ های a و span و i و b ) ( همونطور که گفتیم تگ های اینلاینی همشون در یک سطر درکنار همدیگه قرار میگیرند )
|
1 2 3 4 5 6 7 8 |
<body> <a href="https://free-learn.ir/">سایت آموزشی فری لرن</a> <span>Free-Learn</span> <i>Free-Learn</i> <b>Free-Learn</b> </body> |
Free-Learn
لیست کامل تگ های اینلاینی یا Inline در HTML
در جدول زیر میتوانید تگ هایی که در HTML دارای حالت نمایش درون خطی یا Inline هستند را مشاهده نمایید.
| b | acronym | abbr | a |
| button | br | big | bdo |
| em | dfn | code | cite |
| kbd | input | img | i |
| q | object | map | label |
| small | select | script | samp |
| sup | sub | strong | span |
| var | tt | time | textarea |
Free-Learn
مثال های بیشتر از عناصر بلاکی و اینلاینی در HTML
مثال شماره ۱ : استفاده از تگ اینلاینی در داخل تگ بلاکی ( یعنی استفاده از span در داخل p )
|
1 2 3 4 5 6 7 8 |
<body> <p> WebSite <span class="mysite cr">Free-Learn</span> Is Free </p> <p> WebSite <span class="mysite cb">Free-Learn</span> Is Free </p> <p> WebSite <span class="mysite cg">Free-Learn</span> Is Free </p> <p> WebSite <span class="mysite cs">Free-Learn</span> Is Free </p> </body> |
مثال شماره ۲ : تغییر حالت نمایش یک تگ با استفاده ویژگی display در CSS ( مثلا تگ Span اینلاینی هستش ولی میخوایم با استفاده از CSS به بلاکی تبدیلش کنیم )
|
1 2 3 4 5 6 7 |
<style> .mysite{ display:block; } </style> |
خب دوستان امیدوارم که خسته نشده باشید، به پایان این بخش یعنی آموزش کار با عناصر Block و Inline در HTML رسیدیم. لطفا در بخش های بعدی همچنان با بنده همراه باشید.
