HTML <li> علامة
مثال
قائمة HTML مرتبة (<ol>) وواحدة غير مرتبة (<ul>):
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد العلامة <li>عنصر قائمة.
يتم <li>استخدام العلامة داخل القوائم المرتبة ( <ol> ) ، والقوائم غير المرتبة ( <ul> ) ، وفي قوائم القوائم ( <القائمة> ).
في <ul> و <Menu> ، ستُعرض عناصر القائمة عادةً بنقاط نقطية.
في <ol> ، عادةً ما يتم عرض عناصر القائمة بأرقام أو أحرف.
نصيحة: استخدم CSS لتصميم القوائم .
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
صفات
| Attribute | Value | Description |
|---|---|---|
| value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
السمات العالمية
تدعم <li>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <li>العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
استخدام سمة القيمة في قائمة مرتبة:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
مثال
قم بتعيين أنواع أنماط قائمة مختلفة (باستخدام CSS):
<ol>
<li>Coffee</li>
<li
style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li
style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
مثال
قم بإنشاء قائمة داخل قائمة (قائمة متداخلة):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
مثال
قم بإنشاء قائمة متداخلة أكثر تعقيدًا:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
الصفحات ذات الصلة
دروس HTML: قوائم HTML
مرجع DOM HTML: Li Object
دروس CSS: قوائم التصميم
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <li>العنصر بالقيم الافتراضية التالية:
li {
display: list-item;
}