ساخت لیست (فهرست)، در HTML

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

انواع فهرست ها در html :

در html ، دو نوع فهرست داریم که تفاوت آنها در نحوه علامت گذاری بخش های مختلف فهرست می باشد . نوع اول ، فهرست های شماره دار و نوع دوم ، فهرست های بدون شماره می باشد . تگ هایی که برای این دو نوع فهرست به کار می روند ، متفاوت می باشند . برای فهرست های شماره دار از زوج تگ <ol> و <ol/> و برای فهرست های بدون شماره از زوج تگ <ul> و <ul/> استفاده می کنیم .

فهرست های بدون شماره در html :

تگ <ul> در html برای ساخت فهرست های بدون شماره به کار می رود . در واقع شروع یک فهرست بدون شماره را با تگ <ul> و پایان فهرست را با تگ <ul/> اعلام می کنیم . برای تعریف هر بخش فهرست ، باید از تگ <li> استفاده کنیم ، یعنی عبارت مربوط به آن بخش از فهرست را باید در میان زوج تگ <li> و <li/> قرار بدهیم . به مثال زیر توجه کنید :

مثال

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

مشاهده می کنید که در کنار هر بخش فهرست ، یک علامت به شکل دایره توپر نمایش داده شده است .

فهرست های شماره دار در html :

تگ <ol> در html برای ساخت فهرست های شماره دار به کار می رود . در واقع شروع یک فهرست شماره دار را با تگ <ol> و پایان فهرست را با تگ <ol/> اعلام می کنیم . برای تعریف هر بخش فهرست ، باید از تگ <li> استفاده کنیم ، یعنی عبارت مربوط به آن بخش از فهرست را باید در میان زوج تگ <li> و <li/> قرار بدهیم . به مثال زیر توجه کنید :

مثال

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

مشاهده می کنید که در کنار هر بخش فهرست ، شماره ای متناسب با ترتیب قرارگیری آن بخش در فهرست ، نمایش داده شده است .

  • فهرست مباحث
نویسنده علیرضا گلمکانی
شماره کلید 510
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 2 2 0
البان
۱۳۹۹/۰۲/۱۰
۱۰:۵۰

سلام و وقت بخیر
من امیر هستم از تیم elbaan.com  .
ما در تیم توسعه زیر ساخت نرم افزاری البان ، به یک مشکل پایه ای برخورد کرده ایم.
کسی از دوستان در این زمینه تمایل داره به ما کمک بده؟
توضیحات پروژه البان در گیت هاب ارائه شده است.

رضا
۱۴۰۰/۰۶/۱۷
۱۶:۵۵

سلام خیلی خسته نباشید و ممنون از مطالب خوبتون 
می خوایتم بدونم اگر بخوایم اعدا فارسی باشن و تغییر رنگ و سایز توش به وجود بیاریم چه کدی باید وارد کنیم ؟

با سپاس

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)