الفرق بين المراجعتين لصفحة: «HTML/li»

المراجعة الحالية بتاريخ 07:10، 18 فبراير 2018

يستعمل العنصر <li> لتمثيل عنصر في قائمة، ويجب أن يحتوى هذا العنصر في عنصر أب الذي يكون قائمة مرتبة <ol> أو قائمة غير مرتبة <ul> أو قائمة <menu>.

تُعرَض عناصر القوائم العادية <menu> والقوائم غير المرتبة وقبلها نقطة (bullet point)، أما في القوائم المرتبة فتعرض عناصرها بترتيبٍ تصاعدي وقبلها رقم أو حرف يدل على ترتيبها.

مثال عن قائمة مرتبة <ol> عادية فيها ثلاثة عناصر:

<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

مثال عن قائمة مرتبة <ol> يبدأ الترقيم فيها من الرقم 3، وسيُعرَض الترتيب بالأرقام الرومانية ذات الحالة الكبيرة:

<ol type="I">
  <li value="3">العنصر الثالث</li>
  <li>العنصر الرابع</li>
  <li>العنصر الخامس</li>
</ol>

قائمة غير مرتبة <ul> فيها ثلاثة عناصر:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ul>

لأمثلة أكثر تعقيدًا عن القوائم فانظر صفحة العنصر <ul> و <ol>.

بطاقة العنصر

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	محتوى تنظيمي.
الوسم المختصر	يمكن حذف وسم النهاية إذا أتى بعد العنصر عنصر `<li>` آخر، أو لم يعد هنالك محتوى إضافي في العنصر الأب.
واجهة DOM	`HTMLLIElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`value`

قيمة هذه الخاصية يجب أن تكون رقمًا صحيحًا الذي يُشير إلى ترتيب عنصر القائمة إذا كان ضمن قائمة مرتبة <ol>، لا يُسمَح إلا بالقيم العددية لهذه الخاصية حتى لو كانت القائمة مرتبة باستخدام الأحرف أو الأرقام الرومانية، والعناصر التي تلي العنصر الذي تُستعمَل تلك الخاصية عليه ستتابع الترقيم من القيمة المحددة في هذه الخاصية.

لن يكون لهذه الخاصية أي معنى إذا استعملت في القوائم غير المرتبة (مثل <ul> أو <menu>).

يجدر بالذكر أنَّ هذه الخاصية كانت مهملة في HTML 4، لكن أعيد استخدامها في HTML5.

`type`

تُحدِّد هذه الخاصية نوع الترقيم:

a: الأحرف اللاتينية بالحالة الصغيرة
A: الأحرف اللاتينية بالحالة الكبيرة
i: الأرقام الرومانية بالحالة الصغيرة
I: الأرقام الرومانية بالحالة الكبيرة
1: الأرقام العادية

ضبط هذه الخاصية سيؤدي إلى تجاهل القيمة المضبوطة في عنصر <ol> إن وجدت.

لاحظ أنَّ هذه الخاصية أصبحت مهملة، ويجدر بك استخدام خاصية list-style-type في CSS بدلًا منها، لكن ذكرناها هنا لتعلم بوجودها.

التنسيق الافتراضي

أغلبية المتصفحات تعرض العنصر <li> مع ضبط الخاصية display إلى list-item:

li {
  display: list-item;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01، أهملت هذه المواصفة الخاصية type.

@@ سطر 6: / سطر 6: @@
 مثال عن قائمة مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> عادية فيها ثلاثة عناصر:<syntaxhighlight lang="html">
 <ol>
-    <li>first item</li>
+  <li>العنصر الأول</li>
-    <li>second item</li>
+  <li>العنصر الثاني</li>
-    <li>third item</li>
+  <li>العنصر الثالث</li>
 </ol>
 </syntaxhighlight>مثال عن قائمة مرتبة <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> يبدأ الترقيم فيها من الرقم 3، وسيُعرَض الترتيب بالأرقام الرومانية ذات الحالة الكبيرة:<syntaxhighlight lang="html">
 <ol type="I">
-    <li value="3">third item</li>
+  <li value="3">العنصر الثالث</li>
-    <li>fourth item</li>
+  <li>العنصر الرابع</li>
-    <li>fifth item</li>
+  <li>العنصر الخامس</li>
 </ol>
 </syntaxhighlight>قائمة غير مرتبة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code> فيها ثلاثة عناصر:<syntaxhighlight lang="html">
 <ul>
-    <li>first item</li>
+  <li>العنصر الأول</li>
-    <li>second item</li>
+  <li>العنصر الثاني</li>
-    <li>third item</li>
+  <li>العنصر الثالث</li>
 </ul>
 </syntaxhighlight>لأمثلة أكثر تعقيدًا عن القوائم فانظر صفحة العنصر <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code> و <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code>.
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 73: / سطر 75: @@
 لاحظ أنَّ هذه الخاصية أصبحت مهملة، ويجدر بك استخدام خاصية <code>list-style-type</code> في CSS بدلًا منها، لكن ذكرناها هنا لتعلم بوجودها.
+== التنسيق الافتراضي ==
+أغلبية المتصفحات تعرض العنصر <code><nowiki><li></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>list-item</code>:<syntaxhighlight lang="css">
+li {
+  display: list-item;
+}
+</syntaxhighlight>
 == مصادر ومواصفات ==
@@ سطر 78: / سطر 87: @@
 *مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-li-element HTML5].
 *مواصفة [http://www.w3.org/TR/html401/lists.html#h-10.2 HTML 4.01]، أهملت هذه المواصفة الخاصية <code>[[#type|type]]</code>.
-[[تصنيف:HTML]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:Text Content]]
+[[تصنيف:HTML Text Content|{{SUBPAGENAME}}]]