قوائم متداخلة
جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 14 من 60.
يمكنك وضع قائمة داخل أخرى—وهذا ما يسمى قائمة متداخلة. هذا مفيد لإنشاء هياكل هرمية، مثل المخططات التفصيلية أو القوائم متعددة المستويات.
لإنشاء قائمة متداخلة، ما عليك سوى وضع عنصر <ul> أو <ol> داخل عنصر <i><li></i> في قائمة أخرى.
إليك مثال على قائمة غير مرتبة متداخلة:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>يحتوي العنصر الثاني على قائمة متداخلة مع عنصرين فرعيين. في المتصفح، ستظهر بهذا الشكل:
- العنصر 1
- العنصر 2
- العنصر الفرعي 2.1
- العنصر الفرعي 2.2
- العنصر 3
يمكنك أيضاً تضمين القوائم المرتبة أو المزج بينهما.
التحدي
سهلأنشئ مستند HTML بقائمة متداخلة. يجب أن تبدو القائمة كما يلي:
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
ورقة مرجعية
يتم إنشاء قائمة متداخلة عن طريق وضع عنصر <ul> أو <ol> داخل عنصر <li> من قائمة أخرى:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>يمكنك تداخل القوائم المرتبة أو دمج كل من القوائم المرتبة وغير المرتبة داخل بعضها البعض.
جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footer