2.9 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| How to Use Lists | كيفية استخدام القوائم |
كيفية استخدام القوائم
تستخدم القوائم لتحديد مجموعة من العناصر المتتالية أو المعلومات ذات الصلة بطريقة محكمة التشكيل والدلائل ، مثل قائمة المكونات أو قائمة بالخطوات الإجرائية. يحتوي ترميز HTML على ثلاثة أنواع مختلفة من القوائم - قوائم مرتبة وغير مرتبة والوصف .
القوائم المطلوبة
يتم استخدام قائمة مرتبة لتجميع مجموعة من العناصر ذات الصلة ، بترتيب معين. يتم إنشاء هذه القائمة مع العلامة <ol> . كل عنصر قائمة محاط بعلامة <li> .
الشفرة
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
مثال
- مزيج المكونات
- يُخبز في الفرن لمدة ساعة
- السماح للوقوف لمدة عشر دقائق
قوائم غير مرتبة
يتم استخدام قائمة غير مرتبة لتجميع مجموعة من العناصر ذات الصلة ، دون ترتيب معين. يتم إنشاء هذه القائمة مع العلامة <ul> . كل عنصر قائمة محاط بعلامة <li> .
الشفرة
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
مثال
- كعكة الشوكولاتة
- كيكة الغابة السوداء
- كعكة الأناناس
وصف القوائم
يتم استخدام قائمة وصف لتحديد قائمة من العبارات وأوصافها. يتم إنشاء هذه القائمة بعلامة <dl> . كل عنصر قائمة محاط بعلامة <dd> .
الشفرة
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
انتاج |
خبز
طعام مخبوز مصنوع من الطحين.
قهوة
مشروب مصنوع من حبوب البن المحمص.
قائمة التصميم
يمكنك أيضا التحكم في نمط القائمة. يمكنك استخدام خاصية القوائم على list-style القائمة. يمكن أن تكون قائمتك نقطية أو مربعة أو في numearls رومانية أو يمكن أن تكون الصور التي تريدها.
الخاصية على list-style هي اختصار list-style-type ، list-style-position list-style-image ، list-style-image .
معلومات اكثر:
[HTML lists · WebPlatform Docs] (https://webplatform.github.io/docs/guides/html_lists/ )