لیست‌ها

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷نقشه‌های تصویری
۱۸تصاویر پس‌زمینه
۱۹عنصر Picture
۲۰جداول
۲۱لیست‌ها
۲۲بلوک‌ها
۲۳کلاس‌ها
۲۴شناسه
۲۵Iframeها
۲۶جاوا اسکریپت
۲۷مسیرهای فایل
۲۸Head
۲۹چیدمان‌ها
۳۰واکنش‌گرا
۳۱کد کامپیوتری
۳۲معنایی‌ها
۳۳موجودیت‌ها
۳۴نماد‌ها
۳۵ایموجی‌ها
۳۶مجموعه کاراکترها
۳۷رمزگذاری URL
۳۸HTML X
۳۹راهنمای استایل
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML


مثال لیست HTML

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مشاهدهٔ نتیجه


لیست نامرتب HTML

یک لیست نامرتب با تگ <ul> آغاز می شود. هر آیتم لیست با تگ <li> آغاز می شود.[۱]

آیتم‌های لیست بطور پیش فرض با bulletها (دایره‌های کوچک سیاه) نشانه گذاری می‌شوند:

مثال

1 <ul>
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ul>


مشاهدهٔ نتیجه


لیست نامرتب HTML - انتخاب نشانگر آیتم لیست

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

مقدار توصیف
disc نشانگر آیتم لیست را bullet تنظیم می‌کند (پیش فرض)
circle نشانگر آیتم لیست را دایره تبدیل می‌کند
square نشانگر آیتم لیست را مربع تبدیل می‌کند
none نشانگر آیتم‌های لیست را حذف می‌کند

مثال - Disc

1 <ul style="list-style-type:disc;">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ul>


مشاهدهٔ نتیجه


مثال - Circle

1 <ul style="list-style-type:circle;">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ul>


مشاهدهٔ نتیجه


مثال - Square

1 <ul style="list-style-type:square;">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ul>


مشاهدهٔ نتیجه


مثال - None

1 <ul style="list-style-type:none;">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ul>


مشاهدهٔ نتیجه


لیست مرتب HTML

لیست مرتب با تگ <ol> آغاز می شود. هر آیتم لیست با تگ <li> آغاز می شود.

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

مثال

1 <ol>
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>


مشاهدهٔ نتیجه


لیست مرتب - ویژگی نوع

ویژگی type تگ <ol> نوع نشانگر آیتم لیست را مشخص می کند:

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

Numbers (به فارسی: اعداد)

1 <ol type="1">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>


مشاهدهٔ نتیجه


Uppercase Letters (به فارسی: حروف بزرگ)

1 <ol type="A">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>


مشاهدهٔ نتیجه


Lowercase Letters (به فارسی: حروف کوچک)

1 <ol type="a">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>


مشاهدهٔ نتیجه


Uppercase Roman Numbers (به فارسی: اعداد رومی بزرگ)

1 <ol type="I">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>


مشاهدهٔ نتیجه


Lowercase Roman Numbers (به فارسی: اعداد رومی کوچک)

1 <ol type="i">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>


مشاهدهٔ نتیجه


لیست های توصیفی HTML

HTML لیست‌های توصیفی را نیز پشتیبانی می‌کند.

یک لیست توصیفی، لیستی از عبارت‌ها با توصیف هر عبارت است.

تگ <dl> لیست توصیفی را مشخص می کند، تگ <dt> عبارت را مشخص می کند (نام)، و تگ <dd> هر عبارت را توصیف می کند:

مثال

1 <dl>
2   <dt>Coffee</dt>
3   <dd>- black hot drink</dd>
4   <dt>Milk</dt>
5   <dd>- white cold drink</dd>
6 </dl>


مشاهدهٔ نتیجه


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

لیست‌ها می‌توانند تودرتو باشند (لیستی در لیست دیگر):

مثال

 1 <ul>
 2   <li>Coffee</li>
 3   <li>Tea
 4     <ul>
 5       <li>Black tea</li>
 6       <li>Green tea</li>
 7     </ul>
 8   </li>
 9   <li>Milk</li>
10 </ul>


مشاهدهٔ نتیجه

توجه: آیتم‌های لیست خود می‌توانند شامل لیست جدید، و عنصرهای دیگر HTML باشند مانند تصویر، لینک و غیره.

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

بطور پیش فرض، یک لیست مرتب با شمارش از ۱ شروع می‌شود. اگر می‌خواهید از عدد خاصی آغاز شود، می‌توانید از ویژگی start استفاده کنید:

مثال

1 <ol start="50">
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>


مشاهدهٔ نتیجه


لیست افقی با CSS

لیست‌های HTML با روش‌های مختلفی توسط CSS استایل دهی می‌شوند.

یک روش معروف استایل دهی افقی به لیست برای ایجاد منوی راهبری (به انگلیسی: Navigation Menu) است:

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 ul {
 6   list-style-type: none;
 7   margin: 0;
 8   padding: 0;
 9   overflow: hidden;
10   background-color: #333333;
11 }
12 
13 li {
14   float: left;
15 }
16 
17 li a {
18   display: block;
19   color: white;
20   text-align: center;
21   padding: 16px;
22   text-decoration: none;
23 }
24 
25 li a:hover {
26   background-color: #111111;
27 }
28 </style>
29 </head>
30 <body>
31 
32 <ul>
33   <li><a href="#home">Home</a></li>
34   <li><a href="#news">News</a></li>
35   <li><a href="#contact">Contact</a></li>
36   <li><a href="#about">About</a></li>
37 </ul>
38 
39 </body>
40 </html>


مشاهدهٔ نتیجه

نکته: می‌توانید در مورد CSS در آموزش CSS ما بیشتر مطالعه کنید.

خلاصه بخش

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

تمرین‌های HTML

تگ های لیست HTML

تگ تعریف
<ul> یک لیست نامرتب را تعریف می‌کند
<ol> یک لیست مرتب را تعریف می‌کند
<li> یک آیتم لیست را تعریف می‌کند
<dl> یک لیست توصیفی را تعریف می‌کند
<dt> یک عبارت را در لیست توصیفی را مشخص می‌کند
<dd> یک عبارت را در لیست توصیفی را توصیف می‌کند
برای دستیابی به لینک کامل همهٔ تگ‌های HTML، از مرجع تگ HTML ما بازدید کنید.


منابع آموزشی