type: تُستخدم هذه الخاصية مع القوائم المرقمة لتغيير الأرقام إلى حروف أو إلى ترقيم روماني، كما تستخدم مع القوائم غير المرقمة لتغيير شكل العناصر إلى دوائر، أو مربعات، أو نقاط، أو بدون علامات.
start: تُستخدم هذه الخاصية مع الترقيم ليبدأ العد من رقم معين، وليس من الضروري أن يبدأ العد من الرقم [1] أو من الحرف [A].
value: تُستخدم لتعيين قيمة أو ترقيم مختلف تمامًا عن الترتيب التسلسلي للقائمة.
reversed: تُستخدم لعكس الترقيم الافتراضي ليكون من الأكبر إلى الأصغر، حيث يكون الترقيم في الحالة الافتراضية من الأصغر إلى الأكبر.

</> Type Attribute with Order List in HTML
خاصية type مع القوائم المرقمة في لغة HTML

القيم التي يمكن تعيينها داخل خاصية type مع القوائم المرقمة هي:

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

a Lower Case Value with Ordered List

مثال على القيمة [a] مع الخاصية [type] داخل القائمة المرقمة.

<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>

جربها بنفسك

A Uppercase Case Value with Ordered List

مثال على استخدام القيمة [A] مع الخاصية [type] داخل القائمة المرقمة.

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>

جربها بنفسك

i Lowercase Roman Numerals with Ordered List

مثال على استخدام القيمة [i] مع الخاصية [type] داخل القائمة المرقمة، حيث يكون الترقيم بأرقام رومانية بحروف صغيرة.

<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>

جربها بنفسك

I Uppercase Roman Numerals with Ordered List

مثال على استخدام القيمة [I] مع الخاصية [type] داخل القائمة المرقمة، حيث يكون الترقيم بأرقام رومانية بحروف كبيرة.

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>

جربها بنفسك

ملاحظات

خاصية [type] ما زالت مدعومة في HTML5، على الرغم من أنه قد يُفضل استخدام CSS للتحكم في تصميم القوائم.
وضع القيمة [none] داخل قائمة مرتبة [ordered list] ليس مدعومًا في HTML ضمن خاصية [type]. وتَكونُ القيمة داخل القائمة المُرتبة هي الوضع الافتراضي والذي هو الترتيب الرقمي.
للتحكم في بادئة عناصر القوائم وتغييرها يمكنك استخدام لغة CSS.

</> Type Attribute with Unordered List in HTML
خاصية type مع القوائم غير المرقمة في لغة HTML

القيم التي يمكن تعيينها داخل خاصية [type] مع القوائم غير المرقمة هي:

disc: تعني أن التعداد يكون في الوضع الافتراضي كشكل نقاط دائرية سوداء.
circle: تعني أن التعداد يكون على شكل نقاط دائرية بيضاء لها إطار أسود صغير.
square: تعني أن التعداد يكون على شكل مربعات سوداء.
none: تلغي هذه القيمة علامة التعداد لتكون القائمة بدون علامات.

disc Value with Unordered List

مثال على استخدام القيمة [disc] مع الخاصية [type] داخل القائمة غير المرقمة.

<ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
  </ul>

جربها بنفسك

circle Value with Unordered List

مثال على استخدام القيمة [circle] مع الخاصية [type] داخل القائمة غير المرقمة.

<ul type="circle">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

جربها بنفسك

square Value with Unordered List

مثال على استخدام القيمة [square] مع الخاصية [type] داخل القائمة غير المرقمة.

<ul type="square">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

جربها بنفسك

none Value with Unordered List

مثال على القيمة [none] مع الخاصية [type] داخل القائمة غير المرقمة.

<ul type="none">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

جربها بنفسك

</> Ordered List Attributes in HTML
خصائص القوائم المرقمة في لغة HTML

يمكن التحكم في شكل الترقيم في القائمة المرقمة [ordered list] في لغة HTML عن طريق مجموعة من الخصائص، وهي:

start: تُستخدم هذه الخاصية لجعل الترقيم يبدأ من رقم محدد، بدلاً من البدء الافتراضي بالرقم واحد 1.
value: تقوم هذه الخاصية بتعيين قيمة معينة لعنصر محدد في القائمة واستثنائه من ترتيب [ترقيم] القائمة.
reversed: تُستخدم هذه الخاصية لعكس الترتيب من تصاعدي إلى تنازلي، حيث يبدأ الترقيم من الرقم الأكبر إلى الرقم الأصغر.

Start Attribute

مثال على استخدام الخاصية [start] داخل القائمة المرتبة.

<ol start="20">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
   <li>Cappuccino</li>
</ol>

جربها بنفسك

Value Attribute

مثال على استخدام الخاصية [value] داخل القائمة المُرتبة.

<ol start="20">
    <li>Coffee</li>
    <li>Tea</li>
    <li value="30">Milk</li>
   <li>Cappuccino</li>
   <li>water</li>
</ol>

جربها بنفسك

Reversed Attribute

مثال على استخدام الخاصية [reversed] داخل القائمة المُرتبة.

<ol start="20" reversed>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
   <li>Cappuccino</li>
</ol>

جربها بنفسك

ملاحظة

عن طريق لغة CSS، يمكنك التحكم بشكل كبير في تصميم القوائم المرتبة، لكن لا يمكن الاستغناء عن بعض خصائص HTML التي تتحكم في الترقيم مثل [start] و [reversed].
يجب أن تكون القيم المستخدمة مع خاصية [start] وخاصية [value] أرقامًا صحيحة، وليست أرقامًا بكُسور عشرية أو فواصل.
تحقق من دعم المتصفحات لخاصية [reversed]، فهي مدعومة في معظم المتصفحات الحديثة، لكن من المهم التأكد من توافقها مع المتصفحات التي تستهدفها.

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML List Attributes
خصائص القوائم في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML List Attributes HTML