القوائم

القوائم أكثر شيوعًا مما تعتقد. إذا كنت قد أخذت درسًا في البرمجة من قبل، فربما يكون المشروع الأول هو إنشاء قائمة التسوق أو قائمة المهام. دِي قَوَائِمْ. بشكل عام، تكون اختبارات الخيارات المتعدّدة هي قوائم مرقّمة من الأسئلة، وهي الإجابات المتعدّدة المحتملة. لكل سؤال هي قوائم متداخلة.

تقدم لنا لغة 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 ويوفر العديد من القيم الإضافية.

وكما هو موضّح في الترميز، تلغي السمة 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, &lt;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̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

يعد تضمين القوائم داخل القوائم أمرًا شائعًا جدًا أيضًا. لا يتضمّن هذا الموقع الإلكتروني أيّ قوائم متداخلة، على الرغم من أنّ MLW لا يحتوي على أيّ قوائم متداخلة. في الفصل الأول من هذه السلسلة، نظرة عامة على 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>) تفاصيل الوصف (<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>. لا تشتمل أي من عناصر قائمة الوصف على أي سمات خاصة بالعناصر.

الآن وبعد أن تعرَّفت على الروابط والقوائم، سنجمعهما معًا لإنشاء التنقّل.

التحقق من فهمك

اختبر معلوماتك عن القوائم.