تهیه لیست در HTML (و دوبار بررسی آن)

تهیه لیست در HTML (و دوبار بررسی آن)

دنیا پر از لیست است – لیست کارهایی که باید انجام دهید، لیست آرزوها، لیست های مواد غذایی. . . لیست فقط ادامه دارد و ادامه دارد.

جای تعجب نیست که توسعه دهندگان HTML5 راهی برای ارائه آسان لیست ها در صفحات وب ایجاد کرده اند. سه نوع اصلی از لیست ها برای شما وجود دارد استفاده در HTML5: لیست های نامرتب، لیست های مرتب شده و لیست های توضیحات.

این مقاله، نحوه استفاده از هر نوع لیست در صفحات وب را پوشش می دهد.

لیست های نامرتب :

برخی از لیست ها ترتیب خاصی برای اقلام موجود در آنها ندارند (مانند خواربارفروشی).

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

در HTML5 از آنها به عنوان لیست های نامرتب یاد می شود. استاندارد HTML5 از عنصر ul برای نمایش یک لیست نامرتب با استفاده از گلوله ها استفاده می کند.

عنصر ul یک عنصر دو طرفه است، بنابراین از تگ <ul> برای باز کردن لیست و از تگ </ul> برای بستن لیست استفاده می کنید.

شما باید هر مورد در لیست را با استفاده از عنصر li شناسایی کنید. عنصر li نیز یک عنصر دو طرفه است، بنابراین از تگ <li> برای باز کردن توضیحات هر مورد استفاده می کنید و تگ </li> برای بستن آن. ساختار کلی یک لیست نامرتب به این صورت است:

<ul>

<li>item1</li>

<li>item2</li>

<li>item3</li>

</ul>

از آنجایی که HTML5 به فضای سفید در کد اهمیتی نمی دهد، معمولاً تورفتگی در کد وجود دارد موارد موجود در تعریف را همانطور که در اینجا نشان داده شده است فهرست کنید تا به آسانی خواندن کد کمک کنید.

با این حال، تورفتگی لازم نیست. اکثر مرورگرها لیست های نامرتب را در صفحه وب نمایش می دهند.

علامت‌های گلوله نسبتاً عمومی هستند، مشابه آنچه در بیشتر پردازش‌های کلمه مشاهده می‌کنید. خوشبختانه، می‌توانید با استفاده از CSS، با تعریف انواع گلوله‌ها، چیزها را کمی تغییر دهید.

لیست های مرتب شده

برخی از لیست ها دارای ترتیب خاصی هستند که در آن موارد باید ظاهر شوند و پردازش شوند. در واژه پردازی به این لیست ها، لیست های شماره دار می گویند.

در HTML5، آنها نامیده می شوند لیست های سفارش داده شده استاندارد HTML5 از عنصر ol برای نمایش لیست مرتب شده استفاده می کند. لیست سفارش داده شده همچنین از عنصر li برای علامت گذاری آیتم های فردی موجود در لیست استفاده می کند:

<ol>

<li>Walk the dog.</li>

<li>Eat breakfast.</li>

<li>Read the paper.</li>

<li>Get ready for work.</li>

</ol>

به طور پیش‌فرض، مرورگرها به هر آیتم در لیست یک عدد اختصاص می‌دهند که از 1 و شروع می‌شود.

اگر می خواهید لیست به ترتیب معکوس باشد، ویژگی معکوس را اضافه کنید:

<ol reversed>

اگر می‌خواهید با شماره دیگری شروع کنید، ویژگی start را اضافه کنید و آن را مشخص کنید عدد شروع به عنوان مقدار:

<ol start=”10″>

اگر نمی خواهید از اعداد استفاده کنید، چند گزینه دیگر در دسترس است نوع ویژگی جدول زیر انواع مختلف لیست های مرتب شده موجود را نشان می دهد.

لیست عددی (پیش فرض)    =   1

فهرست حروف الفبا، با استفاده از حروف بزرگ   =   A

فهرست حروف الفبا، با استفاده از حروف کوچک   =   a

اعداد رومی با استفاده از حروف بزرگ   =   l

اعداد رومی با استفاده از حروف کوچک   =   l

همانطور که احتمالاً می توانید حدس بزنید، می توانید لیست ها را نیز در لیست ها جاسازی کنید:

<ol type=”I”>

<li>First item</li>

<ol type=”A”>

<li>Item 1, Subitem 1</li>

<li>Item 1, Subitem 2</li>

</ol>

<li>Second item</li>

<ol type=”A”>

<li>Item 2, Subitem 1</li>

<li>Item 2, Subitem 2</li>

</ol>

</ol>

هنگام استفاده از لیست‌های جاسازی شده، تطبیق تگ‌های باز و بسته برای هر آیتم در فهرست و همچنین خود فهرست‌ها بسیار مهم است. هرگونه عدم تطابق مرورگر را گیج می کند و نتایج غیر قابل پیش بینی ایجاد می کند.