في هذا الدرس 6تصفّح المواضيع
توفر خصائص قوائم HTML آليات برمجية أصيلة للتحكم في سلوك الترقيم، وقيمة البداية، واتجاه العد في القوائم المرقمة. على خلاف قواعد التنسيق البصرية في CSS، تؤثر خصائص القوائم مباشرة على القيم الترتيبية الدلالية المسجلة في شجرة DOM وقارئات الشاشة.
في معيار HTML5 الحديث، تُطبق الخصائص وفق غايات دلالية محددة: فتعديلات العدادات الهيكلية تُضبط عبر خصائص وسمي
<ol> و <li>، بينما يُترك ضبط المظهر الشكلي للنقاط في <ul> لشيفرات CSS حصرياً.تحدد خاصية
type على وسم <ol> نظام الترقيم المستخدم في العد. تشمل القيم القياسية المعتمدة: 1 للأرقام العشرية، و A للحروف اللاتينية الكبيرة، و a للحروف الصغيرة، و I للأرقام الرومانية الكبيرة، و i للأرقام الرومانية الصغيرة.عند الجمع بين خاصية
type وخاصية start، تُكتب قيمة start دائماً كرقم عشري مجرد (على سبيل المثال: <ol type="I" start="4"> يولد تلقائياً الأرقام الرومانية IV ثم V ثم VI).| قيمة خاصية type | نظام الترقيم الناتج | أمثلة المخرجات المتسلسلة | أبرز حالات الاستخدام |
|---|---|---|---|
| type="1" | الأرقام العشرية القياسية (الافتراضي) | 1, 2, 3, 4 |
الخطوات التقنية والإجراءات العامة |
| type="A" | الحروف الأبجدية الكبيرة | A, B, C, D |
الأقسام الرئيسية والخيارات المتعددة |
| type="a" | الحروف الأبجدية الصغيرة | a, b, c, d |
البنود الفرعية داخل الشروط والفقرات |
| type="I" / "i" | الأرقام الرومانية الكبيرة والصغيرة | I, II, III / i, ii, iii |
فهارس المراجع القانونية والأكاديمية |
تحدد خاصية
start على عنصر <ol> القيمة الرقمية الترتيبية التي يبدأ منها العد. تبدأ القوائم المرقمة افتراضياً من الرقم 1، وتتيح خاصية start بدء الترقيم من أي رقم صحيح سواء كان موجباً أو صفراً أو حتى سالباً.من أهم التطبيقات العملية لخاصية
start تقسيم دليل إرشادي طويل عبر عدة صفحات أو إقحام فقرات شروحات خارجية بين أجزاء القائمة دون إعادة تصفير الترقيم والبدء من 1 مجدداً.Resuming Alphabetic List With Startاستئناف الترقيم الأبجدي بخاصية start
بدء قائمة أبجدية من الحرف الثالث C عبر الجمع بين type="A" و start="3".
HTML
<ol type="A" start="3">
<li>Database Indexing Strategy</li>
<li>Query Execution Plan Caching</li>
<li>Read Replica Load Balancing</li>
</ol>Alphabetic Offset Sequence Outputمعاينة بدء الترقيم الأبجدي من C
عرض متصفح يظهر بدء الترقيم الأبجدي من الحرف C ثم D ثم E.
تُعد خاصية
reversed خاصية منطقية (Boolean Attribute) أضافها معيار HTML5 لعنصر <ol>. عند وجودها، يوجه المتصفح للعد التنازلي لبنود القائمة من الأعلى إلى الأدنى (مثل: 3، 2، 1).يقوم المتصفح بحساب رقم البداية تلقائياً استناداً إلى إجمالي عدد بنود
<li> الموجودة (ما لم يتم تحديد قيمة start يدوياً)، ثم يتناقص تدريجياً حتى يصل إلى آخر بند في القائمة.Top Three Ranking Countdown Listقائمة تصنيف تنازلية بخاصية reversed
ترقيم تنازلي تلقائي من 3 إلى 1 باستخدام خاصية reversed المنطقية.
HTML
<h4>Top 3 Performance Bottlenecks</h4>
<ol reversed>
<li>Unindexed SQL Join Queries</li>
<li>Uncompressed Raster Images</li>
<li>Render-Blocking Third-Party Scripts</li>
</ol>Reversed Countdown List Renderمعاينة العد التنازلي التلقائي
عرض متصفح يوضح ترقيم البنود تنازلياً من 3 إلى 1.
تُطبق خاصية
value حصرياً على عناصر <li> الفردية داخل القائمة المرقمة. تعمل الخاصية على تجاوز الترقيم التلقائي المحسوب وتعيين رقم مخصص لذلك البند، مع استئناف الترقيم التلقائي مما يليه استناداً إلى الرقم الجديد.
لاحظ بدقة أن العنصر الذي يلي
<li value="10"> يحصل تلقائياً على الرقم 11 دون الحاجة لترقيمه يدوياً. تقبل خاصية value الأرقام الصحيحة الموجبة والسالبة والصفر، مما يمنح تحكماً مطلقاً في العداد.يرسم معيار HTML فصلاً دقيقاً بين الخصائص الدلالية المعتمدة وخصائص التنسيق القديمة المهملة. فالخصائص مثل
start و reversed و value معيارية وصالحة تماماً في HTML5؛ بينما تم إهمال الخصائص التزيينية مثل compact أو استخدام type على وسم <ul> لصالح CSS.
يوضح الجدول التالي المقارنة بين خصائص HTML5 المعيارية والخصائص القديمة المهملة وبدائلها في CSS الحديث:
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس نظرة شاملة على خصائص القوائم، وخاصية type، وبدء الترقيم بـ start، والترقيم التنازلي بـ reversed، وقفزات البنود بـ value، ومقارنة الخصائص القديمة بتنسيقات CSS. الخطوة التالية تتوج إتمامك الكامل لفصل قوائم HTML بالانتقال إلى بناء العناصر الدلالية المتقدمة في الويب.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Start Attribute خاصية البداية start
- خاصية في HTML تُكتب على وسم ol لتحديد الرقم الصحيح الذي يبدأ منه ترقيم عناصر القائمة.
- للمراجعة
- 02 Reversed Attribute خاصية الترقيم التنازلي reversed
- خاصية منطقية في HTML5 توجه المتصفح لترقيم بنود القائمة المرقمة بترتيب تنازلي من الأعلى للأدنى.
- للمراجعة
- 03 Value Attribute on LI خاصية القيمة value على li
- خاصية تُكتب على عنصر li لتعيين رقمه الترتيبي يدوياً، مما يغير ترقيم كافة البنود اللاحقة تلقائياً.
- للمراجعة
- 04 Boolean Attribute خاصية منطقية
- خاصية في HTML يعبر مجرد وجودها في الوسم عن القيمة صواب، ويمثل غيابها خطأ، مثل خاصية reversed.
- للمراجعة
- 05 Legacy Attribute خاصية قديمة
- خاصية تاريخية في HTML حلت محلها قواعد تنسيق CSS الحديثة مثل خاصية compact أو type على ul.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 HTML5 HTML5
- HyperText Markup Language Revision 5
- الإصدار الرئيسي لمعيار HTML الذي أدخل خصائص عصرية مثل reversed وتجميع div داخل dl.
- للمراجعة
- 02 WHATWG WHATWG
- Web Hypertext Application Technology Working Group
- المجموعة المعنية بإدارة وتطوير مواصفات معيار لغة HTML الحي وتحديثاته المستمرة.
- للمراجعة
- 03 CSS3 CSS3
- Cascading Style Sheets Level 3
- المعيار الحديث لتنسيق صفحات الويب الذي حل محل الخصائص التزيينية القديمة في لغة HTML.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ قائمة مرقمة باستخدام start="5" لتمثيل خطوات إجرائية مستأنفة من قسم سابق.
-
اكتب قائمة مرقمة باستخدام الخاصية المنطقية reversed للعد التنازلي من 3 إلى 1 لمراتب منصة التتويج.
-
طبق الخاصية value="10" على عنصر li في منتصف القائمة وتحقق من ترقيم العنصر التالي بالرقم 11 تلقائياً.
-
أعد صياغة شيفرة قديمة تستخدم ul type="square" إلى HTML دلالي نظيف منسق بـ list-style-type في CSS.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
3أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.