ما هو الفرق بين علامات HTML <div> و <span>?

https://stackoverflow.com/questions/183532

html
tags

06-07-2019
|

سؤال

أود أن أسأل عن بعض الأمثلة البسيطة تبين الاستخدامات <div> و <span>.رأيت لهم على حد سواء لوضع علامة على قسم من صفحة مع id أو class, ولكن أنا مهتم في معرفة ما إذا كان هناك أوقات عندما واحد هو المفضل على الآخر.

المحلول

div هو كتلة العنصر ، span هو مضمن.

وهذا يعني أن استخدامها لغويا ، divs ينبغي أن تستخدم للالتفاف أقسام الوثيقة ، في حين يمتد ينبغي أن تستخدم في لف أجزاء صغيرة من النص ، الصور ، إلخ.

على سبيل المثال:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

علما أنه من غير القانوني لوضع كتلة مستوى عنصر داخل مضمنة عنصر لذا:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...غير قانوني.

تحرير:كما HTML5, بعض عناصر كتلة يمكن وضعها داخل بعض العناصر المضمنة.ترى مدن المرجعية هنا جدا واضحة قائمة.أعلاه لا يزال غير قانوني ، <span> لا يقبل إلا صياغة المحتوى ، <div> هو تدفق المحتوى.

طلبت بعض الأمثلة الملموسة ، لذلك هو أخذ من البولينج الموقع ، BowlSK:

<div id="header">
    <div id="userbar">
        Hi there, <span class="username">Chris Marasti-Georg</span> |
        <a href="/edit-profile.html">Profile</a> |
        <a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

حسنا, ما الذي يجري ؟ في الجزء العلوي من الصفحة ، لدي المنطقي قسم "رأس".لأن هذا هو القسم انا استخدم شعبة (مع مناسبة id).في غضون ذلك, لدي عدة أقسام:المستخدم شريط الفعلي صفحة العنوان.العنوان يستخدم العلامة المناسبة ، h1.على userbar ، كونه قسم ملفوفة في div.في غضون ذلك ، فإن اسم المستخدم هو ملفوفة في span, بحيث لا يمكن تغيير نمط.كما يمكنك أن ترى, أنا أيضا التفاف span 2 الحروف في العنوان - هذا يسمح لي بتغيير لونها في الأنماط.

نلاحظ أيضا أن HTML5 يشمل مجموعة واسعة من العناصر التي تحدد الصفحة المشتركة هياكل مثل المادة, القسم, الملاحة, الخ.القسم 4.4 من HTML 5 العامل مشروع قوائم لهم ، ويعطي تلميحات الاستخدام.HTML5 هي المواصفات, لذلك لا شيء "نهائي" بعد لكن فمن المشكوك فيه أن أي من هذه العناصر تسير في أي مكان.هناك سكريبت الإختراق التي سوف تحتاج إلى استخدام إذا كنت ترغب في نمط هذه العناصر في بعض نسخة قديمة من إنترنت إكسبلورر - تحتاج في الأساس إلى خلق واحدة من كل عنصر باستخدام document.createElement قبل أي تلك العناصر المحددة في المصدر.هناك مجموعة من المكتبات التي سوف تتخذ الرعاية من هذا لك - جوجل للبحث سريع تحولت html5shiv.

نصائح أخرى

فقط من أجل اكتمال أدعوكم إلى التفكير في مثل هذا:

وهناك الكثير من عناصر كتلة (linebreaks قبل وبعد) المحددة في HTML و الكثير من مضمنة الكلمات (لا linebreaks).
ولكن في الحديث HTML جميع العناصر من المفترض أن يكون المعاني:a <p> هو الفقرة ، <li> هو عنصر قائمة ، وما إلى ذلك ، ومن المفترض أن استخدام حق الوسم لهذا الغرض الصحيح ليس كما في الأيام الخوالي عندما كنا بادئة باستخدام <blockquote> إذا كان المحتوى هو اقتباس أو لا.
لذا ماذا تفعل عندما يكون هناك هو لا معنى شيء كنت تحاول أن تفعل ؟ لا يوجد معنى إلى 400px نطاق العمود ، هناك ؟ كنت ترغب فقط في العمود الخاص بك من النص 400px واسعة لأن ذلك يناسب التصميم الخاص بك.
ولهذا السبب فإنها إضافة إلى اثنين من أكثر عناصر HTML:العامة ، أو عناصر لا معنى لها <div> و <span>, لأن وإلا فإن الناس سوف تعود إلى استغلال العناصر التي لديك المعاني.

وهناك جيدة بالفعل، إجابات مفصلة هنا، ولكن لا الأمثلة البصرية، وحتى هنا مثال سريع:

و<div> هو علامة كتلة، في حين <span> هو علامة المضمنة.

و<div> هو عنصر على مستوى الكتلة و<span> عنصر المضمنة.

إذا كنت تريد أن تفعل شيئا مع بعض النصوص المضمنة، <span> هو الطريق للذهاب لأنه لن يعرض يكسر خط أن <div> شأنه.

وكما لوحظ من قبل الآخرين، وهناك بعض دلالات ضمنية مع كل من هذه، وأهمها حقيقة أن <div> يعني تقسيم منطقي في الوثيقة، أقرب إلى ربما جزء من وثيقة أو أي شيء، على غرار:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

ويذكر الفرق المهم حقيقي بالفعل في الإجابة كريس. ومع ذلك، فإن آثار لا يكون واضحا للجميع.

وأما عنصر مضمنة، <span> قد تحتوي فقط على العناصر المضمنة الأخرى. التعليمة البرمجية التالية هي بالتالي الخطأ:

<span><p>This is a paragraph</p></span>

ورمز أعلاه غير صالح. إلى التفاف العناصر على مستوى الكتلة، يجب استخدام عنصر آخر على مستوى كتلة (مثل <div>). من ناحية أخرى، يمكن استخدام <div> فقط في الأماكن التي العناصر على مستوى الكتلة قانونية.

وعلاوة على ذلك، يتم إصلاح هذه القواعد في (X) HTML وهم <م> لا تغير من وجود قواعد CSS! حتى الرموز التالية هي <م> أيضا غير صحيح!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

أهمية "كتلة العنصر" هو ضمني لا صريح.إذا تجاهلنا كل نظرية (نظرية جيدة) ثم التالي هو عملية المقارنة.التالية:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

ينتج:

This paragraph has a span.

This paragraph

has
a div.

هذا يدل على أن ليس فقط يجب أن div لا تستخدم مضمنة ، فإنه ببساطة لن تنتج تؤثر على المطلوب.

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

واحدة من الأساليب المفيدة div هو inline-block

أمثلة:

لقد استخدمت inline-block إلى نجاح كبير في اللعبة مشاريع على شبكة الإنترنت.

والدرجة هي عنصر كتلة وتمتد عنصر مضمنة ويعتمد عرضه على محتوى منه النفس حيث شعبة لا

وأود أن أقول أنه إذا كنت تعرف قليلا من الأسبانية للنظر في هذا الصفحة، حيث أوضح بشكل صحيح.

ولكن، تعريف سريع سيكون ذلك div هو لأقسام تقسيم وspan هو لتطبيق بعض نوع من أسلوب لعنصر داخل عنصر كتلة أخرى مثل div.

فقط أريد أن أضيف بعض السياق التاريخي كيف جاء ليكون هناك span مقابل div

تاريخ span:

في 3 يوليو عام 1995 ، بنيامين C.W.Sittler ويقترح نص عام حاوية الوسم لتطبيق أنماط معينة كتل من النص.تقديم محايد إلا إذا استخدمت جنبا إلى جنب من الأنماط.هناك نقاش حول مقابل حوالي القراءة والمعنى.بيرت بوس هو الإشارة إلى التمدد الطبيعة العنصر من خلال سمة فئة (مع القيم مثل مدينة, شخص, تاريخ, الخ.). بول Prescod تشعر بالقلق من أن كل العناصر سوف يساء استخدامها.وقال انه يعارض النص mentionning أن "أي جديد عنصر يجب أن يكون على القديم" ، مضيفا "إذا أردنا خلق الوسم مع لا دلالات يمكن استخدامه anywehere بدون خطأ. نحن يجب أن القوة الكتاب بشكل صحيح الوسم دلالات من الوثيقة.نحن يجب أن القوة محرر البائعين لجعل هذا الخيار صريحة في واجهات."

المصدر (w3 ويكي)

من RFC مشروع أن يدخل span:

الأولى عام يخدع tainer هناك حاجة إلى تحمل لانج و BIDI الصفات في الحالات التي لا يوجد فيها عنصر آخر هو الاقتضاء ؛ فترة ال- منة هو عرض لهذا الغرض.

المصدر (IETF) ،

تاريخ div:

DIV عناصر يمكن استخدام هيكل HTML الوثائق حسب التسلسل الهرمي من الانقسامات.

...

مركز عرضه Netscape قبل إضافة دعم HTML 3.0 عنصر DIV.فإنه يتم الاحتفاظ في HTML 3.2 على حساب من على نطاق واسع الانتشار.

HTML 3.2 المواصفات

باختصار, كل العناصر نشأت من الحاجة إلى أكثر لغويا-عام الحاوية.Span وقد اقترح أكثر عمومية بديلا <text> عنصر إلى نمط النص.Div اقترح عام طريقة لتقسيم الصفحات التي تم التوصل استبدال <center> الوسم على مركز محاذاة المحتوى.Div دائما كتلة العنصر بسبب التاريخ صفحة مقسم.Span دائما مضمنة عنصر لأن الغرض الأصلي هو نص التصميم و اليوم div وتمتد يكون كل من وصل في عام العناصر الافتراضية كتلة مضمنة خصائص العرض على التوالي.

في HTML هناك العلامات التي تضيف هيكل أو دلالات على المحتوى. على سبيل المثال يستخدم العلامة <p> لتحديد فقرة. مثال آخر هو العلامة <ol> لقائمة مرتبة.

وعندما يكون هناك أي علامة مناسبة متاحة في HTML كما هو مبين أعلاه، وعادة ما تكون لجأت <div> و<span> العلامات ل.

يتم استخدام العلامة <div> لتحديد القسم blocklevel / تقسيم مستند يحتوي على فاصل أسطر قبل وبعد على حد سواء.

وأمثلة من حيث علامات شعبة يمكن استخدامها هي الرؤوس والتذييلات والملاحة وما إلى ذلك في سبق أن قدمت HTML 5 هذه العلامات.

ويستخدم العلامة <span> لتحديد قسم مضمنة / تقسيم وثيقة.

وعلى سبيل المثال علامة تمتد يمكن استخدامها لإضافة التصويرية مضمنة إلى عنصر.

تذكر أساسا و ذاتي لهم لا تؤدي أي وظيفة سواء.هم لا محددة عن وظيفة فقط عن طريق الكلمات.

إلا أنها يمكن أن تكون مخصصة مع مساعدة من CSS.

والآن يأتي السؤال:

SPAN الوسم جنبا إلى جنب مع بعض التصميم من شأنها أن تكون مفيدة على وجود عقد داخل الخط يقول في فقرة في html.هذا هو نوع من مستوى خط أو بيان مستوى في HTML.

على سبيل المثال:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

DIV وظائف كما قلت يمكن أن تكون مرئية فقط المدعومة مع التصميم يمكن أن يكون عقد من قطع كبيرة من التعليمات البرمجية HTML.

DIV مستوى كتلة

على سبيل المثال:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

على حد سواء لديهم الوقت و الحال عند استخدامها ، استنادا إلى الشرط الخاص بك.

أتمنى أن أكون واضحا مع الجواب.شكرا لك.

و<div> هو عنصر كتلة. كما كل ما الفقرات أو أي محتوى كتب داخل شعبة، يمكننا تطبيق المغلق على العناصر كلها في شعبة. فقط عن طريق إعطاء النمط في شعبة وحده.

و<span> عنصر المضمنة.

ما يتم إجراء جميع التغييرات CSS تعكس فقط لذلك العنصر.

<div style="color:green;">

 <h1>Example of div and span</h1>
   <p>
    This is a paragraph within a div
     <span style="color: red;"> Paragraph with in span. </span>
   </p>
 </div>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow