HTML <li> العلامة

  • الصفحة السابقة <legend>
  • الصفحة التالية <link>

التعريف والاستخدام

<li> الوسم يحدد عنصر القائمة.

<li> الوسم يستخدم في القائمة المرتبة (<ol>)، القائمة غير المرتبة (<ul>) و قائمة القائمة (<menu>).

في <ul> و <menu>، تُعرض عناصر القائمة عادةً بالأشرطة.

في <ol>، تُعرض عادةً عناصر القائمة بالأرقام أو الأحرف.

نصيحة:استخدم CSS لـإعداد أنماط القائمة.

انظر أيضًا:

دليل HTML:قائمة HTML

دليل مرجع HTML DOM:مفهوم Li

دليل CSS:إعداد أنماط القائمة

مثال

مثال 1

قائمة مرتبة (<ol>) و قائمة غير مرتبة (<ul>قائمة HTML:)

<ol>
  <li>القهوة
  <li>الشاي</li>
  <li>الزبدة</li>
</ol>
<ul>
  <li>القهوة
  <li>الشاي</li>
  <li>الزبدة</li>
</ul>

جرب بنفسك

مثال 2

استخدام خاصية value في القائمة المرتبة:

<ol>
  <li value="100">القهوة</li>
  <li>الشاي</li>
  <li>الزبدة</li>
  <li>الماء العذب</li>
  <li>الشراب</li>
  <li>البيرة</li>
</ol>

جرب بنفسك

مثال 3

إعداد أنواع أنماط القائمة المختلفة (باستخدام CSS):

<ol>
  <li>القهوة
  <li style="list-style-type:lower-alpha">الشاي</li>
  <li>الزبدة</li>
</ol>
<ul>
  <li>القهوة
  <li style="list-style-type:square">الشاي</li>
  <li>الزبدة</li>
</ul>

جرب بنفسك

مثال 4

إنشاء قائمة داخل قائمة (قائمة متداخلة):

<ul>
  <li>القهوة
  <li>الشاي
    <ul>
      <li>الشاي البورلي
      <li>الشاي الأخضر</li>
    </ul>
  </li>
  <li>الزبدة</li>
</ul>

جرب بنفسك

مثال 5

إنشاء قائمة متداخلة معقدة:

<ul>
  <li>القهوة
  <li>الشاي
    <ul>
      <li>الشاي البورلي
      <li>الشاي الأخضر
        <ul>
          <li>الشاي الأحمر</li>
          <li>الشاي الأخضر</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>الزبدة</li>
</ul>

جرب بنفسك

الخصائص

الخصائص القيمة الوصف
value رقم تنطبق فقط على قائمة <ol>. تحدد القيمة الافتراضية للبند الأول في القائمة. سيتم زيادة القيم اللاحقة من هذا الرقم.

خصائص العالمية

<li> يدعم العلامة خصائص العالمية في HTML.

خصائص الحدث

<li> يدعم العلامة خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعمل باستخدام القيم الافتراضية التالية للعرض <li> العنصر:

li {
  display: list-item;
}

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <legend>
  • الصفحة التالية <link>