لیست ها در HTML

لیست ها در پروژه ها و طراحی قالب بکار می رود. لیست ها در HTML یکی از موارد پرکاربرد است.

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

کاربرد لیست‌ها در html :

کاربرد لیست‌ها در html متفاوت و متنوع است؛ برای ساخت منو یا در جاهای مختلف از لیست ها استفاده می شود . در html چند نوع لیست وجود دارد که با ذکر مثال به آنها خواهیم پرداخت .

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

unorderd list یا لیست نامرتب که کاربرد زیادی در صفحات وب دارد.

orderd list یا لیست مرتب و دارای ترتیب است. معمولا این لیست بر اساس اعداد یا حروف الفبا مرتب می‌شود.

لیست سوم نیز لیست توضیحات با تگ dl است که در آن عنوان و سپس توضیحات وجود دارد که در زیر با آن آشنا می شوید.

تگ ul :

یکی از تگ های مهم ul است. کاربرد تگ ul نمایش لیست ها می باشد. در پایین مثالی خواهیم آورد. مثلا برای ساخت منو از تگ ul بسیار استفاده میشود.

تگ li :

هر آیتم از لیست با تگ li مشخص می شود.

در کنار هر تگ li یک دایره توپر بصورت پیش فرض قرار می گیرد که می توانیم آن را تغییر دهیم.

یکی از ویژگی های تگ ul ، ویژگی type است.

انواع علائم در تگ ul :

Disc : دایره توپر که بصورت پیش فرض قرار می گیرد.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sh711.com</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

Circle : اگر نوع را بر روی circle قرار دهیم دایره توخالی در کنار تگ li قرار می گرد.

<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

square: اگر نوع را بر روی square قرار دهیم مربع توپر در کنار تگ li قرار می گرد.

<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

None : اگر نوع را بر روی none قرار دهیم هیچ گزینه ای در کنار تگ li قرار نمی گرد. در بیشتر موارد طراحی قالب این گزینه انتخاب می شود.

<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

تگ ol :

یکی دیگر از لیست ها با تگ ol ایجاد می شود. معمولا اگر بخواهیم در کنار محتوای تگ li عدد یا کاراکتر قرار گیرد از تگ ol استفاده می شود.

تگ ol انواع (type) مختلفی دارد :

1 : اگر این نوع انتخاب شود یعنی type را بر روی 1 تنظیم کنیم درکنار محتوای تگ li اعداد قرار می گیرد. در مثال پایین خواهید دید.

<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

A : اگر این نوع انتخاب شود یعنی type را بر روی A تنظیم کنیم درکنار محتوای تگ li حروف بزرگ قرار می گیرد.

<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

a : اگر این نوع انتخاب شود یعنی type را بر روی a تنظیم کنیم درکنار محتوای تگ li حروف کوچک قرار می گیرد.

<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

I : اگر این نوع انتخاب شود یعنی type را بر روی I تنظیم کنیم درکنار محتوای تگ li حروف لاتین بزرگ قرار می گیرد.

<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

i : اگر این نوع انتخاب شود یعنی type را بر روی i تنظیم کنیم درکنار محتوای تگ li حروف لاتین کوچک قرار می گیرد.

<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

لیست تو در تو در HTML :

لیست تو در تو در html وجود دارد و در جاهای مختلف مانند منوها می توانید از آن استفاده کنید و با css آنها را زیبا کنید.

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

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

در یک لیست تعریفی ، شرحی در مورد هر عبارت در زیر آن آورده شده باشد.تگ dl یک لیست تعریفی است.

مثال زیر در مورد تگ dl ببینید.

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

نویسنده : هدایت عباسی

تگ ها : آموزش html
ثبت نظر