لیست ها

باسلام
این قسمت میخوایم درباره لیست ها آشنا بشیم پس با بنده همراه باشید.
لیست ها همانطورکه میدونید لیست از مقادیر رو به ما در صفحه مرورگرمون به مانشون میدن.
مثال:

• لیست اول
• لیست اول
• لیست اول
• لیست اول
• لیست اول
• لیست اول
• لیست اول
• لیست اول
• لیست اول
• لیست اول

ما کلا سه نوع لیست داریم:

 

• Order List

• Unorder List

• Defention List

Order List

از دو جفت تگ یا همان المنت <ol></ol> که مخفف order list و معنی لیست ترتیبی هستند.
برای اضافه کردن آیتم به لیست از المنت <li></li> اشتفاده میکنیم .
مثال:

<ol>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
<li>آیتم چهارم</li>
<li>آیتم پنجمم</li>
<li>آیتم ششم</li>
<ol>

1. آیتم اول
2. آیتم دوم
3. آیتم سوم
4. آیتم چهارم
5. آیتم پنجمم
6. آیتم ششم

به این سادگی تونستیم یک لیست ترتیبی بسازیم.
میتونیم اون عددهای کناریش رو هم حذف یاعوض کنیم :
برای عوض کردن اون شمارشگر ها ی باید از css استفاده کنیم البته میتوانیم از html استفاده کنیم ولی اصلا توصیه نمیکنم .
پس این مورد رو به آموزش CSS میسپاریم و رد میشیم .

 لیست های Unorder List

 این لیست ها که خیلی هم استفاده میشوند لیست های غیر ترتیبی هستند و بجای عداد کنار آیتم ها از دایره های توپر یا <b>بولت </b> کنارشون دارند.
برای تعریف این لیست ها از المنت <ul> </ul> استفاده میکنیم .
برای تعریف ایتم هم مثل قبل از المنت <li> </li> که مخفف List Item هست استفاده میکنیم.
مثال:

<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
<li>آیتم چهارم</li>
<li>آیتم پنجمم</li>
<li>آیتم ششم</li>
<ul>

• آیتم اول
• آیتم دوم
• آیتم سوم
• آیتم چهارم
• آیتم پنجمم
• آیتم ششم

لیست های  Defention List

این لیست ها که کمتر استفاده میشوند و میتوان با اونها زیر مجموعه یا لیست های تودر تو ساخت.
برای تعریف اینگونه لیست ها از المنت <dl></dl> که مخفف defention list هست استفاده میکنیم.
برای تعریف آیتم از المنت <dt></dt> استفاده میکنیم که مخفف Defention Terms هست.
برای تعریف توضیح یا زیر مجموعه از المنت <dd></dd> استفاده میکنیم که مخفف Defention Description.
مثال:

<dl>
<dt>Boing</dt>
<dd>747</dd>
<dt>AirBus</dt>
<dd>A-A</dd>
</dl>

Boing

747

AirBus

A-A

تا اینجا گفتیم که لیست ها سه نوع  هستند و توضیحاتی رو دادیم اما میخوایم الان درباره لیست های تو در تو صحبت کنیم .
لیست های تو در تو همانطور که از اسمشوم مشخصه لیست های معمولی که بالا گفتیم هستند که داخل لیست دیگری قرار میدیمشون.
مثال:

<ul>
  <li>سه نوع لیست داریم:
    <ol>
    <li>order list</li>
    <li>Unorder list</li>
    <li>Defention list</li>
    </ol>
   </li>
  <li>رنگ ها فلت:
    <ul>
        <li>قرمز</li>
        <li>نارنجی</li>
        <li>آبی</li>
        <li>سبز</li>
        <li>خاکستری</li>
    </ul>
  </li>
</ul> 

 

 

• سه نوع لیست داریم:         
  1.     
     • order list
     •     
       • Unorder list
       •     
         • Defention list
         •     
•  
  • رنگ ها فلت:     
    •         
      • قرمز
      •         
        • نارنجی
        •         
          • آبی
          •           
            • سبز
            •           
              • خاکستری
              •     

همانطور که در مثال بالا نوشتیم داخل li یک لیست دیگه ساختیم و استفاده کردیم.

اما در بالا گفتم که برای تغییر اون بولت ها یا اعداد باید از css استفاده کنیم اما اینجا  در مورد اون یک اشاره ایی میکنم تا کسایی که اول کار هستند
بتوند یک لیست زیبا براخودشون داشته باشن.
برای کنترل بولت ها از اتریبیوت type داخل ul استفاده میکنیم.
بدین صورت

<ul type="circle">

و مقادیر آن :
عدد : که با وارد کردن عدد از اون عدد شروع به استارت میکنه البته در defention list ها با اتریبیوت start اینکار رو میکنیم:
مثال:

<ul type="1">
<li>List</li>
<li>List</li>
<li>List</li>
</ul>

• List
• List
• List

در Defention List ها :

<dl start="50">
<dt>Terms</dt>
<dd>Description</dd>
<dt>Terms</dt>
<dd>Description</dd>
<dl>

Terms

Description

Terms

Description

حرف اول بزرگ یا کوچک:

میتونید حرف اول بزرگ یا کوچک این کارو بکنید .
مثال:

<ul type="A">...

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

<ul type="I">...

خب دست به کار بشید این هارو تست بکنید در مورد این بحث آخر هم همونطور که گفتم باید از Css بجای html استفاده بکنید یعنی استانداردش اینه.
چون اگه با استاندارد این زبان پیش نرید مجبورید برگردید به نسخه های قبل این زبان و به مرورگر بفهمانید که از نسخه مثلا 4 استفاه میکنم که گفتم اصلا اصلا توصیه نمیشه.
ممنونم که تا آخر خوندید و نظر تون رو میدید.
اگه سوالی انتقادی ، پیشنهادی ، سفارشی ویا هر چیز دیگه ایی داشتید حتما در بخش نظرات مطرحش کنید.
یادتون نره از بخش موضوعات آموزشhtml رو دنبال کنید.