لیست ها در HTML

یادگیری HTML

تعداد بازدید : 7816

تاریخ و ساعت انتشار : سه شنبه 30 آذر 1395 11:23

مثال :

یک لیست مرتب :

1- اولین آیتم لیست
2- دومین آیتم لیست
3- سومین آیتم لیست

لیست نا مرتب :

- آیتم لیست
- آیتم لیست
- آیتم لیست

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

یک لیست نامرتب با یک تگ <ul> و هر کدام از آیتم های لیست با تگ <li> شروع می شود.
آیتم های لیست بوسیله بولت (معمولا یک دایره سیاه کوچک) مشخص می شوند.

مثال :

لیست نامرتب

<ul>
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>

مشاهده مثال

علامت آیتم ها در لیست های HTML

صفت list-style-type از CSS برای تعیین نوع علامت آیتم استفاده می شود :

- disc علامت آیتم را به شکل دایره تو پر نمایش می دهد
- circle علامت آیتم را به شکل دایره تو خالی نمایش می دهد
- square علامت آیتم را به شکل مربع تو پر نمایش می دهد
- none آیتم را بدون علامت نمایش می دهد

مثال دایره تو پر :

علامت لیست دایره ای

<ul style="list-style-type:disc">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>

مشاهده مثال

مثال دایره تو خالی :

علامت لیست حلقه ای

<ul style="list-style-type:circle">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>

مشاهده مثال

مثال مربع :

علامت لیست مربع

<ul style="list-style-type:square">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>

مشاهده مثال

مثال بدون علامت :

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

<ul style="list-style-type:none">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>

مشاهده مثال

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

یک لیست مرتب با یک تگ <ol> و هر کدام از آیتم های لیست با تگ <li> شروع می شود.
آیتم های لیست بطور پیش فرض بوسیله اعداد مشخص می شوند.

مثال :

لیست مرتب

<ol>
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>

مشاهده مثال

نوع شماره گذاری یا مرتب سازی لیست در HTML

صفت type از تگ <ol> تعیین کننده نوع علامت گذاری و مرتب سازی در لیست مرتب می باشد :

type="1" آیتم های لیست را با اعداد مرتب سازی می کند (پیش فرض)
type="A" آیتم های لیست را با حروف بزرگ مرتب می کند
type="a" آیتم های لیست را با حروف کوچک مرتب می کند.
type="I" آیتم های لیست را با اعداد رومی بزرگ مرتب می کند.
type="i" آیتم های لیست را با اعداد رومی کوچک مرتب می کند.

مثال اعداد :

لیست مرتب با اعداد

<ol type="1">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>

مشاهده مثال

مثال حروف بزرگ :

لیست مرتب با حروف انگلیسی بزرگ

<ol type="A">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>

مشاهده مثال

مثال حروف کوچک :

لیست مرتب با حروف انگلیسی کوچک

<ol type="a">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>

مشاهده مثال

مثال اعداد رومی بزرگ :

لیست مرتب با اعداد رومی بزرگ

<ol type="I">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>

مشاهده مثال

مثال اعداد رومی کوچک :

یک لیست مرتب با اعداد رومی کوچک

<ol type="i">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>

مشاهده مثال

لیست های تعریفی در HTML

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

مثال :

لیست تعریفی

<dl>
  <dt>قهوه</dt>
  <dd>نوشیدنی سیاه گرم</dd>
  <dt>شیر</dt>
  <dd>- نوشیدنی سفید سرد</dd>
</dl>

مشاهده مثال

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

لیست ها همچنین می توانند تو در تو ایجاد شوند.

مثال :

لیست تو در تو

<ul>
  <li>قهوه</li>
  <li>چای
    <ul>
    <li>چای سیاه</li>
    <li> چای سبز</li>
    </ul>
  </li>
  <li>شیر</li>
</ul>

مشاهده مثال

نکته ! آیتم های لیست می توانند حاوی لیست هاو عناصر دیگر HTML مانند تصویر و لینک و ... باشند.

لیست های افقی در HTML

لیست های HTML می توانند به حالت های مختلفی . با استفاده از CSS استایل دهی شوند. یکی از روش های محبوب استایل افقی لیست برای ایجاد منو می باشد

مثال :

لیست افقی

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #000000;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">ارتباط با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>

مشاهده مثال

خلاصه درس :

عنصر <ul> در HTML برای ایجاد لیست نامرتب
صفت list-style-type از CSS برای تعیین نوع علامت آیتم
عنصر <ol> در HTML برای ایجاد لیست مرتب
صفت type در HTML برای تعیین نوع مرتب سازی
عنصر <li> در HTML برای ایجاد یک آیتم لیست
عنصر <dl> در HTML برای ایجاد لیست تعریفی
عنصر <dt> در HTML برای ایجاد آیتم در لیست تعریفی
عنصر <dd> در HTML برای ایجاد توضیح آیتم در لیست تعریفی
لیست ها می توانند داخل لیست های دیگر قرار گیرند
آیتم های لیست می توانند حاوی عناصر دیگر HTML باشند
صفت float:left یا display:inline از CSS می توانند برای نمایش افقی لیست استفاده شوند

دانلود فایل PDF مقاله درس بعدی درس قبلی