HTML القوائم
قائمة غير مرتبة:
- بند
- بند
- بند
- بند
قائمة مرتبة:
- البند الأول
- البند الثاني
- البند الثالث
- البند الرابع
قائمة HTML غير مرتبة
تبدأ القائمة الغير مرتبة بالعلامة <ul> . يبدأ كل عنصر قائمة بالعلامة <li>
سيتم تمييز عناصر القائمة (دوائر سوداء صغيرة) افتراضيًا:
<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
قائمة HTML غير مرتبة – اختر علامة عنصر القائمة
list-style-typeيتم استخدام خاصية CSS لتحديد نمط علامة عنصر القائمة:
| القيمة | الوصف |
|---|---|
| القرص | ضبط علامة عنصر القائمة على رمز نقطي (افتراضي) |
| دائرة | يضبط علامة عنصر القائمة على دائرة |
| مربع | يضبط علامة عنصر القائمة على مربع |
| لا شيء | لن يتم وضع علامة على عناصر القائمة |
مثال – القرص
<ul style="list-style-type:disc;"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
مثال – الدائرة
<ul style="list-style-type:circle;"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
مثال – مربع
<ul style="list-style-type:square;"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
مثال – لا شيء
<ul style="list-style-type:none;"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
ترتيب قائمة HTML
تبدأ قائمة مرتبة بالعلامة <ol> يبدأ كل عنصر قائمة بالعلامة.<li>
سيتم وضع علامة على عناصر القائمة بشكل افتراضي:
<ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
قائمة HTML المطلوبة – سمة النوع
تحدد السمة type للعلامة <ol> ، نوع علامة عنصر القائمة:
| النوع | الوصف |
|---|---|
| type=”1″ | سيتم ترقيم عناصر القائمة بأرقام (افتراضي) |
| type=”A” | سيتم ترقيم عناصر القائمة بأحرف كبيرة |
| type=”a” | سيتم ترقيم عناصر القائمة بأحرف صغيرة |
| type=”I” | سيتم ترقيم عناصر القائمة بأرقام رومانية كبيرة |
| type=”i” | سيتم ترقيم عناصر القائمة بأرقام رومانية صغيرة |
أعداد:
<ol type="1"><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
الأحرف الكبيرة:
<ol type="A"><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
أحرف صغيرة:
<ol type="a"><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
الأرقام الرومانية الكبيرة:
<ol type="I"><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
الأرقام الرومانية الصغيرة:
<ol type="i"><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
قوائم وصف HTML
HTML يدعم أيضا قوائم الوصف.
قائمة الوصف هي قائمة بالمصطلحات ، مع وصف لكل مصطلح.
تحدد العلامة <dl> قائمة الوصف ، وتعرّف العلامة <dt> المصطلح (الاسم) ، وتصف العلامة <dd> كل مصطلح:
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
قوائم HTML المتداخلة
يمكن تداخل القائمة (القوائم داخل القوائم):
<ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea</li></ul></li><li>Milk</li></ul>
ملاحظة: يمكن أن تحتوي عناصر القائمة على قائمة جديدة وعناصر HTML أخرى ، مثل الصور والروابط ، إلخ.
قائمة التحكم العد
افتراضيًا ، ستبدأ القائمة المرتبة بالعد من 1. إذا كنت تريد بدء العد من رقم محدد ، يمكنك استخدام start:
<ol start="50"><li>Coffee</li><li>Tea</li><li>Milk</li></ol>
قائمة أفقية مع CSS
يمكن تصميم قوائم HTML بعدة طرق مختلفة باستخدام CSS.
تتمثل إحدى الطرق الشائعة في تصميم قائمة أفقية لإنشاء قائمة التنقل:
<!DOCTYPE html><html><head><style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body></html>
ملخص الفصل
- استخدم
<ul>لتحديد قائمة غير مرتبة - استخدم
list-style-typeلتحديد علامة عنصر القائمة - استخدم
<ol>لتحديد قائمة مرتبة - استخدم
typeلتعريف نوع الترقيم - استخدم
<li>لتعريف عنصر قائمة - استخدم
<dl>لتحديد قائمة وصف - استخدم
<dt>لتعريف مصطلح الوصف - استخدم
<dd>لوصف المصطلح في قائمة الوصف - يمكن تداخل القوائم داخل القوائم
- يمكن أن تحتوي عناصر القائمة على عناصر HTML أخرى
- استخدم خاصية CSS
float:leftأوdisplay:inlineلعرض قائمة أفقياً
العلامات
| السمة | الوصف |
|---|---|
| <ul> | يحدد قائمة غير مرتبة |
| <ol> | يحدد قائمة مرتبة |
| <li> | يحدد عنصر القائمة |
| <dl> | يحدد قائمة الوصف |
| <dt> | يحدد المصطلح في قائمة الوصف |
| <dd> | يصف المصطلح في قائمة الوصف |
One Comment