في لغة XHTML ، نعلم جميعًا أن علامة UL تحتوي على LI ، تحتوي علامة DL على قواعد DT و DD لتلك العلامات الثابتة واضحة للغاية. ومع ذلك ، هناك العديد من العلامات المستقلة وهي غير مرتبطة ببعضها البعض ، مثل H1 ، Div ، P ... إذن ما هي قواعد التعشيش لهذه العلامات؟ دعنا نتحدث عن هذا الموضوع اليوم.
عندما يتعلق الأمر بقواعد التعشيش لعلامات XHTML ، يجب أن نعلم أولاً أن هناك نوعين من علامات XHTML ، ويسمى أحدهما عنصر الكتلة ، والآخر يسمى العنصر المضمّن (المضمّن ، والذي يسميه الكثير من الناس: مضمّن ، مستوى الخط ، وما إلى ذلك).
معايير التقسيم للعناصر على مستوى الكتلة والعناصر المدمجة بسيطة للغاية. يرجى وضع سطرين التاليين من الكود في علامة الجسم:
<style div = الحدود: 1 بكسل صلب أحمر ؛> div1 </viv>
<النمط div = الحدود: 1 بكسل صلب أحمر ؛> div2 </viv>
تأثير عرض المتصفح:
div1div2يحتل الاثنان المقدمان على الصفحة صفين من الفضاء. ما لم يُسمح لهم بالتعويم أو إعداد إعدادات أخرى ، لا يوجد أحد بجوار بعضها البعض. انهم جميعا يشغلون صفوفهم الخاصة من المساحات بشكل كبير للغاية. إذا رأيت علامة معينة لها هذه الظاهرة ، فيمكنك تسميتها: عنصر الحظر (block) ؛
ثم ضع الخطين التاليين من الكود في علامة الجسم:
<span style = الحدود: 1 بكسل صلب أحمر ؛> span1 </span>
<span style = الحدود: 1 بكسل صلب أحمر ؛> span2 </span>
تأثير عرض المتصفح:
span1
هذه المرة ، يتم ترتيب اثنين من الفترتين جنبًا إلى جنب ، وهم ودودون وودودون وودودون ومتناغمون ... لوصف سلوكيات مثل هذا ، يمكننا أن نسميها: عناصر مضمنة ؛
الفرق بين العناصر على مستوى الكتلة والعناصر المدمجة: · تُستخدم العناصر على مستوى الكتلة عمومًا لإنشاء بنية موقع الويب ، والتخطيط ، وحمل المحتوى ... هذه الوظائف ذات الربط الكبير هي عناصر على مستوى الكتلة ، والتي تشمل العلامات التالية:Div ، UL ، LI ، DL ، DT ، DD ، H1 ~ H6 ، P ، العنوان ...
· يتم استخدام العناصر المضمنة عمومًا في بعض التفاصيل أو أجزاء من محتوى الموقع للتأكيد على الأنماط والتمييز بينها ، والطباقات الفوقية ، والاشتراكات ، ونقاط المرساة ، وما إلى ذلك. العلامات التالية كلها عناصر مضمنة:A ، تمتد ، قوي ، فرعي ، سوب ، IMG ...
· يمكن تحويل العناصر الحظر والعناصر المدمجة إلى بعضها البعض ، ويكون رمز التحويل كما يلي:العرض: كتلة ؛ /* تحويل إلى عنصر كتلة*/
العرض: مضمّن ؛ /* تحويل إلى عنصر مضمن*/
· قواعد الاتصال الخاصة بـ CSS بين عناصر الكتلة والعناصر المدمجة مختلفة (تناقش هذه المقالة تعشيش الملصقات ، لذلك لن أشرح نقطة المعرفة هذه).بعد فهم عناصر الحظر والعناصر المدمجة ، يمكنك سرد قواعد التعشيش لعلامات XHTML :
1. يمكن أن يحتوي عنصر الكتلة على عناصر مضمنة أو عناصر كتلة معينة ، ولكن لا يمكن أن يحتوي عنصر مضمّن على عناصر كتلة. يمكن أن تحتوي فقط على عناصر أخرى مضمنة :<viv> <h1> </h1> <p> </p> </viv> - نعم
<a href = #> <span> </span> </a> - نعم
<span> <viv> </viv> </span> - خطأ
2. لا يمكن وضع عناصر على مستوى الكتلة في <p> :<p> <ol> <li> </li> </ol> </p> - خطأ
<p> <viv> </viv> </p> - خطأ
3. هناك العديد من العناصر الخاصة على مستوى الكتلة التي يمكن أن تحتوي فقط على عناصر مضمنة ولا يمكن أن تحتوي على عناصر على مستوى الكتلة. هذه العلامات الخاصة هي:H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، P ، Dt.
4. يمكن تضمين علامة DIV في LI - لا يلزم إدراج هذه المقالة بشكل منفصل ، ولكن لدى العديد من الأشخاص على الإنترنت بعض الشكوك حول هذا الموضوع ، لذلك سأشرح ذلك باختصار هنا:علامات Li و Div هي حاويات للتحميل ، مع حالة متساوية ولا تمييز بين المستويات (على سبيل المثال: H1 و H2 مع التسلسل الهرمي الصارم^_^). يجب أن تعلم أن علامة LI يمكن أن تستوعب والدها UL أو OL. لماذا يعتقد بعض الناس أن لي لا يمكنه استيعاب Div التالي؟ لا تأخذ لي بخيل للغاية ، لا تنظر إلى لي رقيقة كما هي ، في الواقع لي لديه عقل كبير ...
5. العناصر على مستوى الكتلة وعناصر مستوى الكتلة متوازية ، وعناصر مضمنة وعناصر مضمنة متوازية:<viv> <h2> </h2> <p> </p> </viv> - نعم
<viv> <a href = #> </a> <span> </span> </viv> - نعم
<viv> <h2> </h2> <span> </span> </viv> - خطأ