الفرق بين العناصر span و div في لغة html الدرس |19| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الاثنين، 21 سبتمبر 2020

الفرق بين العناصر span و div في لغة html الدرس |19|


الفرق بين span و div

يتم استخدام span و div لإضافة العناصر مثل img و audio و video ...الخ ضمنها, لكن يوجد اختلاف بسيط بينهما.

 

مثال 1

لنفترض لدينا الوسم h1 كما يلي :

<body>
    <h1>Programmer <div>Tech</div></h1>
    <h1>Programmer <span>Tech</span></h1>
</body>


صورة للكود من المحرر


 

ونتيجة فتحه في المتصفح تكون


شرح المثال السابق 1

عندما نقوم بإستخدام العنصر div ضمن العناصر دائماً سوف يبدأ بسطر جديد كما هي في السطرين الأول و الثاني, دقق في الكود السابق جيداً حتى تفهم جيداً, أما عندما نقوم بإستخدام العنصر span سيبقى بنفس السطر كما في السطر الثالث.


مثال 2

سوف نرفق صورة ضمن الكود بدل الكلمة Tech سيكون بالشكل

<body>
    <h1>Programmer <div><img src="https://www8.0zz0.com/2020/09/21/17/405871970.jpg" alt="t"></div></h1>
    <h1>Programmer <span><img src="https://www8.0zz0.com/2020/09/21/17/405871970.jpg" alt="t1"></span></h1>
</body>


صورة للكود من داخل المحرر

 

و نتيجة المتصفح هي


شرح المثال السابق 2

كما شاهدنا الفرق أنه في div الصورة بدأت بسطر جديد بعكس العنصر span بقيت الصورة في السطر نفسه طالما توجد مساحه في السطر.


ملاحظة

العناصر h و p يكونوا بنفس مبدأ العنصر div يبدأ بسطر جديد أما العنصر label بنفس العنصر span يبقى بنفس السطر.


مثال 3

<body>
    <div>Programmer <h2>Tech</h2></div>
    <span>Programmer <h2>Tech</h2></span>
</body>

 

صورة من المحرر


 

و نتيجة المتصفح


شرح المثال 3

كما لاحظنا في المثال السابق أنه عندما استخدمنا الوسوم h و p بدأ بسطر جديد و كأنه مثل div.


مثال 4

<body>
    <div>Programmer <label>Tech</label></div>
    <span>Programmer <label>Tech</label></span>
</body>

 صورة من المحرر

 

و النتيجة في المتصفح تكون


شرح المثال 4

كما لاحظنا في المثال السابق أنه عندما استخدمنا الوسم label بقي بنفس السطر و كأنه مثل span.


الخلاصة

الفرق بين div و span عندما نقوم بإستعمال div و h و p ينزل سطر جديد للأسفل, اما عند استعمال span و label يبقى بنفس السطر.

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام