تهران ، میدان ولیعصر جنب مترو کوی شاهد پلاک 8 واحد 3
88895790
بازگشت به لیست مقالات » | شنبه 15 آبان 1395 در ساعت 20 : 17 دقیقه | نظرات کاربران ( 1 )
تفاوت تگ های inline level با block level در HTML

تفاوت تگ های inline level   و  block level  :

بصورت کلی عناصر HTML  به دو نوع تقسیم می شوند :

Inline Level  و  Block Level

تگ ها و یا عناصر Block Level   :

این المان ها ( elements )  تمام فضای خط را به خود اختصاص میدهند  و در صورتی که یک تگ در کنار آنها قرار گیرد آنرا به خط بعد منتقل میکند .به عناصر و یا تگ هایی که یک خط را بصورت کامل اشغال کنند عناصر  Block Level می گویند . این تگ ها بدون در نظر گرفتن محتوا و فضای اشغال شده به سایر تگ ها و المان ها اجازه نمیدهند که در کنار آنها قرار بگیرند و سایر تگ ها به زیر خود منتقل خواهند کرد . ممکن است متن و یا محتوای درون این تگ ها چند حرف و یا یک خط کامل باشد .

مثال :

 

<DOCTYPE html!> 

  <html>

    <head></head>

    <body>

         <h1> این تگ بلاک لول می باشد </h1> <p>این تگ نیز بلاک لول می باشد </p> 

    </body>

  </html>

 

مروگر سند HTML  بالا را بصورت زیر برایمان نمایش خواهد داد

 

 

این تگ بلاک لول می باشد

این تگ نیز بلاک لول می باشد

 

 

همانطور که در مثال بالا مشاهده نمودید دو تگ  h1  و p   هر دو بلاک لول بودند و در کنار یکدیگر نوشته شده بودند اما با دلیل بلاک لول بودن اولین تگ عنصر بعدی خود را به خط بعدی منتقل کرد .

 

تگ ها و عناصر Inline Level   :

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

با دیدن مثال زیر مفهوم این نوع عناصر برایتان ساده تر خواهد شد :

 

<DOCTYPE html!> 

  <html>

    <head></head>

    <body>

         <span> تگ این لاین </span> <span> دومین  تگ این لاین </span> <a href="http://int-net.ir"> طراحی سایت  </a>

    </body>

  </html>

 

بعد از اجرای سند اچ تی ام ال بالا   مرورگر بدین صورت به نمایش در خواهد آمد :

 

 

تگ این لاین دومین تگ این لاین طراحی سایت

 

 

در مثال بالا تگ a   و دو تگ span  در کنار یکدیگر نوشته شده و در نهایت با توجه به محتوای آنها در کنار یکدیگر نیز قرار گرفته اند .   

نکات مهم :

تگ های Inline level  میتوانند درون تگ های inline level  دیگر قرار گیرند

تگ های Inline level  میتوانند درون تگ های Block level  قرار گیرند

تگ های Block level  نمیتوانند درون تگ های inline level  قرار گیرند

تگ های Block level  میتوانند درون تگ های Block level  دیگر قرار گیرند

 

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

 

 

 

ارسال نظر

حسین : متشکرم
0 0
عالی بود مرسی.
عنوان نظر :
نام شما :
ایمیل :