إنّ القوائم أكثر شيوعًا مما قد تظن. إذا كنت قد أخذت درسًا في البرمجة من قبل، فقد يكون المشروع الأول هو إنشاء قائمة تسوق أو قائمة مهام. هَذِهِ هِيَ الْقَوَائِمْ. تعد اختبارات الخيارات المتعددة قوائم أسئلة مرقّمة بشكل عام: الإجابات المتعددة المحتملة لكل سؤال هي قوائم متداخلة.
توفر لنا لغة HTML بعض الطرق المختلفة لترميز القوائم. هناك قوائم مرتَّبة (<ol>) وقوائم غير مرتَّبة (<ul>) وقوائم وصف (<dl>).
يتم دمج عناصر القائمة (<li>) في القوائم المرتبة وقوائم غير مرتَّبة. داخل قائمة الوصف، ستجد مصطلحات الوصف (<dt>) وتفاصيل الوصف. <dd>. سنتناول كل ذلك هنا.
في نماذج HTML، تشكّل قوائم عناصر <option> محتوى <datalist> و<select> و<optgroup> ضمن <select>. وتتم مناقشة ذلك في نماذج HTML.
في القوائم والقوائم غير المرتبة، يتم عرض عناصر القائمة عادةً باستخدام الرموز النقطية. في القوائم المرتبة، عادةً ما تكون مسبوقة بعدّاد تصاعدي مثل رقم أو حرف. يمكن التحكم في التعداد النقطي وترتيب الترقيم أو عكسه باستخدام HTML أو CSS أو كليهما.
بشكل تلقائي، تكون عناصر القائمة المرتبة وغير المرتبة مسبوقة بأرقام أو رموز نقطية. ولكن حتى عندما لا تريد أن تبدو القوائم مثل القوائم، فأنت لا تزال تريد قائمة بالعناصر، مثل أشرطة التنقل، أو قائمة مهام مع مربعات اختيار بدلاً من الرموز النقطية، أو أسئلة الصواب والخطأ في اختبار الخيارات من متعدد. بالنسبة لجميع هذه القوائم بدون رموز نقطية، من المناسب استخدام عناصر قائمة HTML.
القوائم غير المرتبة
العنصر <ul> هو العنصر الرئيسي لقوائم العناصر غير المرتبة. العناصر الثانوية الوحيدة لـ <ul> هي عنصر واحد أو أكثر من عناصر قائمة <li>. لنقم بإنشاء قائمة بالأجهزة. ونحن نستخدم قائمة غير مرتبة لأن الترتيب لا يهم (لا تخبره بذلك):
يكون كل عنصر من عناصر القائمة غير المرتَّبة مسبوقًا برمز نقطي بشكل تلقائي. لا تضم القائمة التي لم يتم ترتيبها أي سمات خاصة بالعناصر.
يجب إغلاق القوائم باستخدام </ul>.
قوائم مع ترتيب
العنصر <ol> هو العنصر الرئيسي لقوائم العناصر المرتبة. العناصر الثانوية الوحيدة لـ <ol> هي عنصر <li> واحد أو أكثر، أو عناصر قائمة.
ومع ذلك، فإن "الرموز النقطية" في هذه الحالة هي أرقام من أنواع متعددة. يمكن تحديد النوع في CSS باستخدام السمة list-style-type أو من خلال السمة type.
تتضمّن <ol> ثلاث سمات خاصة بالعناصر، وهي type وreversed وstart.
تحدّد السمة type العددية نوع الترقيم. هناك خمس قيم صالحة لـ type، ويكون القيمة التلقائية 1 للأرقام، ولكن يمكنك أيضًا استخدام a أو A أو i أو I للأحرف الصغيرة والكبيرة أو الأرقام الرومانية. توفّر السمة list-style-type
العديد من القيم الإضافية.
وكما هو موضّح في Codepen، تلغي السمة list-style-type قيمة السمة type، ولكن عند كتابة المستندات التي يكون فيها النوع الرقمي مهمًا، كما هو الحال مع المستندات القانونية، عليك تضمين type.
إنّ السمة reversed المنطقية، في حال تضمينها، ستعكس ترتيب الأرقام، بدءًا من أكبر رقم إلى أدنى رقم.
تحدّد السمة start القيمة الأولية. والقيمة التلقائية هي 1.
على غرار </ul>، يجب إدخال قيمة الإغلاق </ol>.
يمكننا دمج القوائم، لكن يجب أن تكون متداخلة داخل عنصر قائمة. تذكَّر أنّ العنصر الوحيد الذي يمكن أن يكون ثانويًا للسمة <ul> أو <ol> هو عنصر <li> واحد أو أكثر.
عناصر القائمة
لقد استخدمنا العنصر <li>، لكن لم نعُد نعرّفه رسميًا بعد. يمكن أن يكون العنصر <li> عنصرًا ثانويًا مباشرًا لقائمة غير مرتّبة (<ul>) أو قائمة مرتّبة (<ol>) أو قائمة (<menu>). ويجب أن يكون العنصر <li> مدمجًا كعنصر ثانوي لأحد هذه العناصر،
وليس صالحًا في أي مكان آخر.
لا تتطلّب المواصفات إغلاق عنصر القائمة لأنّه سيتم إغلاقه ضمنيًا عندما يواجه المتصفِّح علامة فتح <li> التالية أو علامة إغلاق القائمة المطلوبة: </ul> أو </ol> أو </menu>. إنّ المواصفات لا تتطلّب هذه الميزة، وتقترح بعض
أفضل الممارسات الداخلية للشركة عدم إغلاق عناصر القائمة لتوفير بعض وحدات البايت، ولكن ننصحك بإغلاق علامات <li>. إنه يجعل التعليمة البرمجية أسهل في القراءة
وستشكرك نفسك في المستقبل. من الأسهل إغلاق جميع العناصر بدلاً من تذكر العلامات التي يجب إغلاقها والعلامات التي تحتوي على علامة إغلاق اختيارية.
هناك سمة <li> واحدة فقط خاصة بالعناصر، وهي value، وهي عدد صحيح. لا يكون value مفيدًا في <li> إلا عند دمج <li> في قائمة مرتَّبة ولا يكون له معنى للقوائم أو القوائم غير المرتبة. يتم إلغاء قيمة البداية في <ol> إذا كان هناك تعارض.
تمثّل السمة value رقم عنصر القائمة ضمن قائمة مرتّبة. مع عناصر القائمة اللاحقة، واصِل الترقيم من مجموعة القيم، ما لم يتم أيضًا ضبط سمة value لهذا العنصر. لا يلزم أن تكون القيمة مرتبة؛ على الرغم من أنه إذا لم تكن مرتبة،
فيجب أن يكون هناك سبب وجيه.
عند دمج reversed في <ol> مع سمات value في عناصر القائمة، سيضبط المتصفّح القيمة <li> على القيمة المقدَّمة، ثم يحتسب القيم خلال <li> التي تسبقها، وسيعدّ تنازليًا للقيم اللاحقة. إذا كان عنصر القائمة الثاني يحتوي على سمة قيمة،
ستتم إعادة ضبط العدّاد على عنصر القائمة الثاني هذا وستنخفض القيمة اللاحقة بمقدار واحد.
يمكن أيضًا التحكّم في كل ذلك من خلال عدّادات CSS التي توفّر المحتوى الذي تم إنشاؤه للعنصر الصوري ::marker.
إذا كان الرقم عرضيًا بحت، استخدم CSS. إذا كان الترقيم مهمًا من الناحية الدلالية، أو له معنى آخر، فاستخدم هذه السمات.
حتى الآن، ألقينا نظرة على عناصر القائمة التي تحتوي على عُقد نصية فقط. يمكن أن تحتوي عناصر القائمة على كل محتوى التدفق، ما يعني أي عنصر
يمكن دمجه كعنصر ثانوي مباشر في <body>، بما في ذلك العناوين، ما يؤدي إلى تقسيم المحتوى.
لدينا بعض القوائم غير المرتبة في MLW. يمثل المعلمون في قسم المدربين قائمة، وكذلك أجهزة الطلاب في قسم المراجعات. لدى المعلّم "<ul>" نوعان <li>: واحدة لكل معلّم. وفي كل <li>، لدينا صورة وفقرة:
<ul>
<li>
<img src="svg/hal.svg" alt="hal">
<p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, <NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
</li>
<li>
<img src="images/eve2.png" alt="Eve">
<p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
</li>
</ul>
يتضمّن قسم المراجعات ثلاث مراجعات، وبالتالي ثلاث <li>. ويحتوي كل منها على صورة، واقتباس كتلة، وفقرة من ثلاثة أسطر مع فاصل من سطرين.
<ul>
<li>
<img src="images/blender.svg" alt="Blender">
<blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
<p>
--Blendan Smooth,<br/>
Former Margarita Maker, <br/>
Aspiring Load Balancer
</p>
</li>
<li>
<img src="images/vaccuum.svg" alt="Vaccuum"/>
<blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
<p>
--Hoover Sukhdeep,<br/>
Former Sucker, <br/>
Aspiring DDoS Cop
</p>
</li>
<li>
<img src="images/toaster.svg" alt="Toaster">
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
يُعد أيضًا دمج القوائم داخل القوائم أمرًا شائعًا جدًا. ويُرجى العِلم أنّ هذا الموقع الإلكتروني لا يتضمّن أي قوائم متداخلة. في الفصل الأول من هذه السلسلة، بعنوان "نظرة عامة على HTML"، يحتوي قسم العناصر الرئيسية على قسمين فرعيين. في جدول المحتويات، وهو قائمة غير مرتبة، توجد قائمة مدمجة غير مرتبة تحتوي على روابط إلى هذين القسمين:
<ul role="list">
<li>
<a href="#e">Elements</a>
<ul>
<li>
<a href="#nr">Non-replaced elements</a>
</li>
<li>
<a href="#rave">Replaced and void elements</a>
</li>
</ul>
</li>
<li>
<a href="#a">Attributes</a>
</li>
<li>
<a href="#aoe">Appearance of elements</a>
</li>
<li>
<a href="#e2">Element, attributes, and JavaScript</a>
</li>
</ul>
بما أنّ العنصر الثانوي الوحيد <ul> هو <li>، يتم العثور على قائمة مدمجة مدمجة في <li>، ولا يمكن العثور عليها مباشرةً في <ol> أو <ul>.
في هذا المثال الأخير، ربما لاحظت أنّ role="list" مضمَّنة في <ul>. على الرغم من أنّ الدور الضمني لكل من
<ul> و<ol> هو list، فإنّ إزالة مظهر القائمة باستخدام CSS، بما في ذلك الإعدادdisplay: grid أو list-style-type: none
يمكن أن تؤدي إلى قيام VoiceOver (قارئ الشاشة لنظامَي التشغيل iOS وMacOS) بإزالة الدلالات الضمنية في Safari. هذه ميزة وليست خطأً.
بشكل عام، يجب عدم إضافة سمة الدور عند استخدام العناصر الدلالية لأنها ليست ضرورية. وعمومًا لا تحتاج إلى إضافة واحد إلى القائمة أيضًا، ما لم يحتاج المستخدم حقًا إلى معرفة أنها قائمة، مثل الوقت الذي سيستفيد فيه المستخدم من معرفة عدد العناصر الموجودة في القائمة.
قوائم الأوصاف
قائمة الوصف هي عنصر من قائمة الأوصاف (<dl>) يحتوي على سلسلة من عبارات الوصف (<dt>) (<dt>) وتفاصيل الوصف الخاصة بها (<dd>). وكانت الأسماء الأصلية لهذه العناصر الثلاثة "قائمة التعريف" و"مصطلح التعريف" و "تعريف التعريف".
تم تغيير الاسم في مستوى المعيشة.
وعلى غرار القوائم المرتبة وغير المرتبة، يمكن أن تكون متداخلة. على عكس القوائم المرتبة وغير المرتبة، تتكون من أزواج المفتاح/القيمة.
على غرار <ul> و<ol>، تُعدّ <dl> الحاوية الرئيسية. العنصران <dt> و<dd> هما العناصر الثانوية لـ <dl>.
يمكننا إنشاء قائمة بالآلات مع تاريخ حياتهم المهنية وتطلعاتهم. تحتوي قائمة الوصف للطلاب، التي يرمز إليها <dl>،
على مجموعة من المصطلحات، في هذه الحالة، "العبارات" هي أسماء الطلاب، يتم تحديدها باستخدام العنصر <dt>، بالإضافة إلى وصف لكل مصطلح، وفي هذه الحالة، الأهداف المهنية لكل طالب، يتم تحديدها من خلال عناصر <dd>.
قائمة الوصف هذه ليست جزءًا من صفحة MLW. قوائم الوصف ليست فقط للمصطلحات والتعريفات، وهذا هو السبب في جعل أسماء العناصر أكثر عمومية.
عند إنشاء قائمة بالمصطلحات وتعريفاتها أو أوصافها، أو قوائم مشابهة لأزواج المفتاح/القيمة، يتضمن الوصف العناصر
التي توفر المعنى المناسب. الدور الضمني لـ <dt> هو term، مع العِلم أن listitem هو دور آخر مسموح به. الدور الضمني لجهاز <dd> هو "definition"، ولا يُسمَح بأدوار أخرى. على عكس <ul> و<ol>، لا يتوفّر لـ <dl> دور ARIA ضمني.
وهذا أمر منطقي لأنّ السمة <dl> ليست دائمًا قائمة. ولكن في هذه الحالة، يتم قبول الدورَين list وgroup.
ستصادف غالبًا قوائم أوصاف بأعداد متساوية من عنصرَي <dt> و<dd>. لكن قوائم الوصف ليست دائمًا ولا يلزم أن تكون مطابقة
للأزواج من العبارة إلى الوصف؛ حيث يمكن أن يكون لديك من متعدد إلى واحد، أو واحد إلى متعدد، مثل مصطلح من المعجم
لديه أكثر من تعريف واحد.
لكل <dt> ما لا يقل عن <dd> مرتبط واحد، ولكل <dd> سمة <dt> مرتبطة واحدة على الأقل. على الرغم من أنّه من الممكن استخدام أداة الدمج التابعة المجاورة أو أداة الاختيار العلائقي :has() لاستهداف أعداد متغيّرات هذه العناصر باستخدام لغة CSS، يمكنك تضمين <div> باعتباره عنصرًا ثانويًا في <dl>، ويُسمح باستخدام عنصر رئيسي واحد أو أكثر من عناصر <dt> أو <dd> (أو كليهما). يمكن أن يكون للعنصر <dl> بضعة أطفال آخرين، فيُسمح بدمج <div> أو <template> أو <script>. لا يحتوي أي من عناصر قائمة الوصف على أي سمات خاصة بالعناصر.
الآن بعد أن تعرّفت على الروابط والقوائم، لنتمكّن من تجميعهما معًا لإنشاء التنقّل.
التحقق من فهمك
اختبر معلوماتك عن القوائم.
هل يمكن تضمين <h2> داخل عنصر قائمة؟
حدد العناصر الثلاثة التي تحدد أنواع القائمة.
<il><ol><ul><dl>