کار با لیست ها در HTML | معرفی عناصر lists


نویسنده:
سه شنبه ۶ خرداد ۱۳۹۹
لیست ها در HTML

در این جلسه از آموزش گام به گام HTML و CSS می‌خواهیم به کار با عناصر list در HTML بپردازیم. با استفاده از لیست ها در HTML می‌توان گروهی از گزینه‌های مرتبط به‌هم را بصورت یک فهرست ایجاد کرد.

دو نوع لیست در HTML وجود دارد:

  • لیست نامرتب (unordered list)
  • لیست مرتب (ordered list)

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


لیست نامرتب در HTML

لیست‌ نامرتب یا همان Unordered List با استفاده از تگ <ul> ساخته می‌شود. همچنین گزینه‌های لیست یا همان List Item با استفاده از تگ <li> نوشته می‌شوند. به مثال زیر دقت کنید:

خروجی کد بالا:

  • قهوه
  • چای
  • شیر

چرا به لیست بالا می‌گوییم لیست نامرتب؟ چون ترتیب در گزینه‌های این لیست مهم نیست. یعنی اینکه قهوه را اول بنویسیم یا آخر اهمیتی ندارد.

ویژگی list-style-type در لیست نامرتب

در کنار گزینه‌های لیست نامرتب یک دایره سیاه (disc) نمایش داده می‌شود که به آن نشانگر گزینه‌ها می‌گویند. می‌توان با استفاده از ویژگی list-style-type در CSS نشانگر گزینه‌ها را به اشکال دیگر تغییر داد. در جدول زیر مقادیری که می‌توانید برای این ویژگی استفاده کنید را آورده‌ایم:

مقدارتوضیح
discنشانگر گزینه‌ها: دایره سیاه (حالت پیشفرض)
circleنشانگر گزینه‌ها: دایره توخالی
squareنشانگر گزینه‌ها: مربع سیاه
noneبدون هیچ نشانگری

در مثال زیر از نشانگر square استفاده کرده‌ایم:

خروجی کد بالا:

  • قهوه
  • چای
  • شیر


لیست مرتب در HTML

لیست مرتب یا Ordered List در HTML با استفاده از تگ <ol> ساخته می‌شود. گزینه‌های این لیست هم دقیقا مانند لیست نامرتب، با استفاده از تگ <li> ایجاد می‌شود.

خروجی کد بالا:

  1. قهوه
  2. چای
  3. شیر

خب همانطور که می‌بینید گزینه‌های درون لیست‌های مرتب بصورت شماره‌گذاری شده نمایش داده می‌شوند. این بیانگر اهمیت ترتیب در گزینه‌های لیست است.

صفت type در لیست مرتب

صفت type در لیست‌های مرتب، نوع شماره‌گذاری گزینه‌های لیست را تعیین می‌کند. در جدول زیر کل مقادیری که می‌توان برای صفت type درنظر گرفت را آورده‌ایم:

مقدارتوضیح
1شماره گذاری با استفاده از اعداد لاتین
Aشماره گذاری با استفاده از حروف بزرگ لاتین
aشماره گذاری با استفاده از حروف کوچک لاتین
Iشماره گذاری با استفاده از حروف بزرگ رومانی
iشماره گذاری با استفاده از حروف کوچک رومانی

در مثال زیر از حروف بزرگ رومانی استفاده شده:

خروجی کد بالا:

  1. قهوه
  2. چای
  3. شیر


صفت start در لیست مرتب

بصورت پیشفرض شمارش از عدد 1 شروع می‌شود. اما می‌توان عدد شروع شمارش را با استفاده از صفت start تنظیم کرد. در مثال زیر عدد 5 را برای شروع تنظیم کرده‌ایم:

خروجی کد بالا:

  1. قهوه
  2. چای
  3. شیر



به همین سادگی ساخت انواع لیست ها در HTML را یادگرفتید. در جلسات بعدی همراه ما باشید.

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *