لیست ها

لیست ها بیشتر از آنچه فکر می کنید رایج هستند. اگر تا به حال در کلاس برنامه نویسی شرکت کرده اید، اولین پروژه ممکن است ایجاد یک لیست خرید یا یک لیست کارهای انجام شده باشد. اینها لیست هستند. آزمون‌های چند گزینه‌ای عموماً فهرست‌هایی از سؤالات شماره‌دار هستند: پاسخ‌های متعدد ممکن برای هر سؤال، فهرست‌های تودرتو هستند.

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> s. هر کدام شامل یک تصویر، یک بلوک نقل قول، و یک پاراگراف سه خطی با دو شکست خط است.

<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) را به حذف سوق دهد. معناشناسی ضمنی در سافاری این یک ویژگی است نه یک اشکال . به طور کلی، هنگام استفاده از عناصر معنایی نباید ویژگی نقش را اضافه کنید زیرا لازم نیست. و به طور کلی نیازی به افزودن یکی به لیست نیز ندارید، مگر اینکه کاربر واقعاً نیاز داشته باشد که بداند یک لیست است، مانند زمانی که کاربر از دانستن تعداد موارد موجود در لیست سود می برد.

لیست های توضیحات

لیست توضیحات یک عنصر لیست توصیفی ( <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> مجاز است. هیچ یک از عناصر لیست توضیحات هیچ ویژگی خاص عنصر را ندارد.

اکنون که درک درستی از پیوندها و لیست ها دارید، بیایید این دو را با هم قرار دهیم تا پیمایش ایجاد کنیم.

درک خود را بررسی کنید

دانش خود را از لیست ها تست کنید.