لیست ها در html به دو صورت مرتب و نا مرتب می باشند.

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

لیست های نا مرتب با تگ Ul ایجاد گردیده و هر آیتم در این لیست بین دو تگ باز و بسته li قرار می‌گیرد.

<!DOCTYPE html>
<html>
<body>
<h2>یک لیست نا مرتب</h2>
<ul>
  <li>coffee</li>
  <li>tea</li>
  <li>milk</li>
</ul>  
</body>
</html>


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

یک لیست نا مرتب

  • coffee
  • tea
  • milk

در لیست های نا مرتب می توان علامت هر آیتم لیست را به اشکال دیگری نیز درآورد:

به شکل دایره تو خالی:

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  
</body>
</html>

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

لیست های نامرتب درhtml

به شکل مربعی:

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

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

لیست مربعی

بدون علامت:

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  
</body>
</html>

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

لیست بدون علامت

لیست های مرتب

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

<!DOCTYPE html>
<html>
<body>
<h2>یک لیست مرتب </h2>
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
</body>
</html>

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

یک لیست مرتب

  1. coffee
  2. tea
  3. milk

استفاده از type=A برای به کار بردن از حروف بزرگ انگلیسی

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
</body>
</html>

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

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

اگر در کد بالا بجای A از a استفاده نماییم حروف کوچک انگلیسی بجای حروف بزرگ در لیست ظاهر می گردد.

استفاده از type=I وبه کار بردن از حروف بزرگ رومی

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
</body>
</html>

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

لیست ها در html

اگر در کد بالا بجای I از i استفاده نماییم حروف کوچک رومی بجای حروف بزرگ در لیست ظاهر می گردد.

لیست توضیح در HTML

این لیست با تگ dl ایجاد می شود. در این تگ هر کدام از ایتم ها یک توضیحی را نیز در بر میگیرند که محتوای هر آیتم باید بین تگ باز و بسته dt و محتوای توضیح هر آیتم باید بین تگ باز و بسته dd قرار گیرد. برای درک بهتر این نوع لیست به کد و خروجی آن در زیر توجه فرمایید:

<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
</body>
</html>

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

لیست توضیحی در html

لیست های تو در تو

کد html زیر یک لیست تو در تو را ایجاد می نماید:

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

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

لیست تو در تو در html

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

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