مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

انوع لیست List ها در HTML و بررسی ویژگی های آن ها


HTML  برای توسعه دهندگان وب سه راه برای مشخص کردن لیست های اطلاعات، ارائه می دهد. تمام لیست ها باید شامل یک یا چند عنصر باشند. لیست ها ممکن است شامل موارد زیر باشند :

  • <ul> که ul مخفف (unordered list) یعنی لیست بدون ترتیب. در این نوع لیست، عناصر لیست با استفاده از bulletهای ساده ای فهرست می شوند.
  • <ol> که ol مخفف (ordered list) یعنی لیست مرتب شده. در این نوع لیست، از حالت های مختلفی از اعداد برای لیست کردن عناصر استفاده می شود.
  • <dl> که dl مخفف (definition list) یعنی یک لیست تعریفی. دراین نوع لیست عناصر همانگونه که در دیکشنری مرتب شده اند، در لیست قرار می گیرند و مرتب می شوند.

لیست های نامرتب در HTML (HTML Unordered Lists)

لیست های نامرتب، مجموعه ای از عناصر مرتبط هستند که، هیچ نظم یا دنباله ای خاص ندارند. این لیست ها با استفاده از برچسب <ul> در HTML ایجاد می شوند. هر آیتم در لیست با یک bullet مشخص شده است.

مثال:

<!DOCTYPE html>

<html>



   <head>

      <title>HTML Unordered List</title>

   </head>

           

   <body>

      <ul>

         <li>Beetroot</li>

         <li>Ginger</li>

         <li>Potato</li>

         <li>Radish</li>

      </ul>

   </body>

  

</html>

کد فوق نتیجه زیر را تولید می کند -

ویژگی type (type Attribute)

شما می توانید از ویژگی Type در تگ <ul> برای مشخص کردن نوع bullet ی که دوست دارید، استفاده کنید که به طور پیشفرض "disc"می باشد. در زیر گزینه های ممکن را می توانید مشاهده نمایید -

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

مثال:

در مثال زیر، ما از <ul type = "square"> استفاده کردیم :

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Unordered List</title>
   </head>

 
   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

 
</html>

کد فوق نتیجه زیر را تولید می کند -

مثال:

در مثال زیر ما از <ul type = "disk"> استفاده کردیم :

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Unordered List</title>
   </head>
            
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

 
</html>

کد فوق نتیجه زیر را تولید می کند -

مثال:

در مثال زیر، ما از <ul type = "circle"> استفاده کردیم :

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Unordered List</title>
   </head>

 
   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

لیست های مرتب شده در HTML (HTML Ordered Lists)

اگر شما به جای اینکه عناصر خود را در یک لیست bullet قرار دهید مجبور شدید آنها را دریک لیست عدد گذاری شده قرار دهید، می توانید برای این کار از تگ <ol> استفاده کنید.

شماره گذاری لیست از عدد یک آغاز می شود و برای هر عنصر لیست، یک تگ <li> اختصاص داده می شود، و شماره عنصر جاری نسبت به عنصر قبلی یک واحد افزایش می یابد.

مثال :

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Ordered List</title>
   </head>

 
   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

 
</html>

کد فوق نتیجه زیر را تولید می کند -

ویژگی type (type Attribute)

شما می توانید از ویژگی type برای تگ <ol> برای مشخص کردن نوع شماره گذاری مورد نظرتان در لیست استفاده کنید، که به طور پیشفرض، شماره گذاری به صورت عددی است. در زیر گزینه های ممکن را می توانید مشاهده کنید -

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

مثال:

در مثال زیر ما از <ol type = "1"> استفاده کردیم :

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Ordered List</title>
   </head>

 
   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

 
</html>

کد فوق نتیجه زیر را تولید می کند -

مثال :

در مثال زیر،  ما از <ol type = "I"> استفاده کردیم:

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Ordered List</title>
   </head>
            
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

مثال:

در مثال زیر، ما از نوع <ol type = "i"> استفاده کردیم :

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
            
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

مثال :

در مثال زیر ، ما از <ol type = "A"> استفاده کردیم :

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Ordered List</title>
   </head>
            
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

مثال

در مثال زیر، ما از <ol type = "a"> استفاده کردیم:

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
            
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

ویژگی start (start Attribute)

شما می توانید از ویژگی start برای برچسب <ol> برای تعیین نقطه شروع شماره گذاری استفاده کنید.

در زیر می توانید گزینه های مختلف را مشاهده نمایید -

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

مثال

در مثال زیر، ما از <ol type = "i" start = "4" > استفاده کردیم :

<html>

 
   <head>
      <title>HTML Ordered List</title>
   </head>
            
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

لیست های تعریف در HTML (HTML Definition Lists)

HTML و XHTML از یک list style ی پشتیبانی می کنند که در آن عناصر مانند یک فرهنگ لغت یا دایره المعارف مرتب شده و نظم گرفته اند. لیست تعریفی (definition list) بهترین راه برای ارائه یک واژه نامه، لیستی از اصطلاحات و یا لیست نام / مقدار می باشد.

لیست تعریفی (definition list) از سه برچسب زیر استفاده می کند:

  • <dl> - آغاز لیست را تعریف می کند
  • <dt> - یک عنصر یا term از لیست را تعریف می کند
  • <dd> - برای ارائه ی توضیحاتی برای یک عنصر یا term استفاده می شود
  • </ dl> - پایان لیست را تعریف می کند

مثال :

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Definition List</title>
   </head>
            
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

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

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید