انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 27
دورة لغة HTML

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

في هذا الدرس، ستتعلم جميع الخصائص المتعلقة بالقوائم في HTML وكيفية استخدامها بفاعلية لتحقيق الأهداف التصميمية المختلفة.

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
4
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,325
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

تُستخدم خصائص القوائم [lists attributes] في لغة HTML للتحكم في ترتيب وترقيم وشكل القوائم.

وأهم خصائص القوائم في لغة HTML هي:

  • type: تُستخدم هذه الخاصية مع القوائم المرقمة لتغيير الأرقام إلى حروف أو إلى ترقيم روماني، واستُخدمت تاريخيًا مع ul لتغيير شكل علامات التعداد؛ السمة type على ul مهجورة، ويستخدم CSS list-style-type في الشفرة الحديثة.

  • start: تُستخدم هذه الخاصية مع الترقيم ليبدأ العد من رقم معين، وليس من الضروري أن يبدأ العد من الرقم [1] أو من الحرف [A].

  • value: تُستخدم لتعيين قيمة أو ترقيم مختلف تمامًا عن الترتيب التسلسلي للقائمة.

  • reversed: تُستخدم لعكس الترقيم الافتراضي ليكون من الأكبر إلى الأصغر، حيث يكون الترقيم في الحالة الافتراضية من الأصغر إلى الأكبر.

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

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

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

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

  • i: تعني أن الترقيم يكون بالحروف الرومانية بحروف صغيرة.

  • I: تعني أن الترقيم يكون بالحروف الرومانية بحروف كبيرة.

تقبل type أيضًا القيمة 1 للترقيم العشري، وهي القيمة الافتراضية. شكل العلامة لا يغيّر ترتيب العناصر في المصدر.

a Lower Case Value with Ordered List

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

HTML 
<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] داخل القائمة المرقمة.

HTML 
<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] داخل القائمة المرقمة، حيث يكون الترقيم بأرقام رومانية بحروف صغيرة.

HTML 
<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] داخل القائمة المرقمة، حيث يكون الترقيم بأرقام رومانية بحروف كبيرة.

HTML 
<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ol>
جرّب بنفسك

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

القيم التاريخية لسمة type على ul هي disc وcircle وsquare. تعرض الأمثلة الثلاثة هذا الاستخدام القديم، وبديله الحديث CSS list-style-type. من أشكال العلامات في CSS:

  • disc: تعني أن التعداد يكون في الوضع الافتراضي كشكل دوائر ممتلئة.

  • circle: تعني أن التعداد يكون على شكل دوائر مجوفة.

  • square: تعني أن التعداد يكون على شكل مربعات ممتلئة.

  • none: تلغي هذه القيمة علامة التعداد لتكون القائمة بدون علامات.

لون العلامات يتأثر بالتنسيق، وليس ثابتًا على الأسود أو الأبيض. القيمة none تخص CSS؛ ليست قيمة قياسية لسمة type على ul.

disc Value with Unordered List

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

HTML 
<ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
  </ul>
جرّب بنفسك

circle Value with Unordered List

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

HTML 
<ul type="circle">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>
جرّب بنفسك

square Value with Unordered List

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

HTML 
<ul type="square">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>
جرّب بنفسك

none Value with Unordered List

مثال على list-style-type:none في CSS لإخفاء العلامات مع الاحتفاظ بالقائمة. يضاف role="list" للمحافظة على تعرف Safari عليها في شجرة الإتاحة.

HTML 
<ul style="list-style-type:none" role="list">
  <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: تكتب value على li داخل ol لتعيين رقم هذا العنصر؛ تواصل العناصر التالية العد من القيمة الجديدة، ولا يقتصر أثرها على العنصر وحده.

  • reversed: تُستخدم هذه الخاصية لعكس الترتيب من تصاعدي إلى تنازلي، حيث يبدأ الترقيم من الرقم الأكبر إلى الرقم الأصغر.

تكتب start على ol وvalue على li بأعداد صحيحة حتى عند استخدام الحروف أو الأرقام الرومانية؛ مثل start="4" مع type="a" للبدء بالحرف d. reversed سمة منطقية: وجودها يعكس العد، حتى لو كتبت reversed="false"؛ احذفها لإيقاف العكس. وعند غياب start تبدأ القائمة المعكوسة بعدد عناصرها.

Start Attribute

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

النتيجة المتوقعة في هذا المثال: 20، 21، 22، 23.

HTML 
<ol start="20">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
   <li>Cappuccino</li>
</ol>
جرّب بنفسك

Value Attribute

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

النتيجة المتوقعة: 20، 21، 30، 31، 32؛ تتابع العناصر التالية العد بعد Milk.

HTML 
<ol start="20">
    <li>Coffee</li>
    <li>Tea</li>
    <li value="30">Milk</li>
   <li>Cappuccino</li>
   <li>water</li>
</ol>
جرّب بنفسك

Reversed Attribute

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

النتيجة المتوقعة: 20، 19، 18، 17؛ تنعكس الأرقام، ولا تنعكس مواقع العناصر في DOM.

HTML 
<ol start="20" reversed>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
   <li>Cappuccino</li>
</ol>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…