لیست های HTML
نمونه لیست های HTML
لیست نامرتب:
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
لیست مرتب شده:
- نکته اول
- نکته دوم
- نکته سوم
- نکته چهارم
لیست نامرتب HTML
لیست نامرتب با برچسب <ul> شروع می
شود. هر مورد از لیست با برچسب <li>
شروع می شود.
موارد لیست به صورت پیش فرض با گلوله (دایره های سیاه کوچک) مشخص می شوند:
لیست HTML نامرتب - Bullet Item List را انتخاب کنید
ویژگی list-style-type در CSS برای تعریف سبک نشانگر مورد list استفاده می
شود. این می تواند یکی از مقادیر زیر را داشته باشد:
| مقدار | توضیح |
|---|---|
| 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>
- کافه
- چایی
- شیر
خودتان آزمایش کنید »
لیست مرتب
لیست مرتب شده با برچسب <ol> شروع می
شود. هر مورد از لیست با برچسب <li>
شروع می شود.
موارد لیست با شماره های پیش فرض برچسب گذاری می شوند:
لیست 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
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 مانند تصاویر و پیوندها و غیره باشند.
شمارش چک لیست
به طور پیش فرض ، یک لیست مرتب شده از 1 شروع به شمارش می کند. اگر می خواهید از مشخص شده شروع به
شمارش کنید
اعداد ، شما
می توانید از ویژگی شروع استفاده کنید:
مثال
<ol start="50">
<li>کافه</li>
<li>چایی</li>
<li>شیر</li>
</ol>
- کافه
- چایی
- شیر
خودتان آزمایش کنید »
لیست افقی با CSS
با استفاده از CSS می توان به لیست های HTML به روش های مختلف استایل داد.
یک روش محبوب سبک سازی افقی لیست برای ایجاد یک منوی ناوبری است:
مثال
<!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: #111111;
}
</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>
خودتان آزمایش کنید »
نکته: می توانید در آموزش CSS ما درباره CSS بیشتر بیاموزید .
خلاصه درس
-
از المان
<ul>در HTML برای تعریف یک لیست غیر مرتب استفاده کنید -
از ویژگی
list-style-typeبرای تعریف نشانگر مورد لیست استفاده کنید -
برای تعریف یک مورد از المان
<ol>در HTML استفاده کنید -
از ویژگی
typeHTML برای تعریف نوع شماره گذاری استفاده کنید -
برای تعریف مورد لیست از عنصر
<li>در HTML استفاده کنید -
برای تعریف لیست توضیحات از عنصر
<dl>در HTML استفاده کنید -
از عنصر
<dt>در HTML برای تعریف اصطلاح توصیف استفاده کنید -
برای توصیف اصطلاح در لیست توصیف از عنصر
<dd>در HTML استفاده کنید - لیست ها می توانند تو در تو قرار بگیرند
- موارد لیست می تواند شامل سایر المان های HTML باشد
-
برای نمایش لیستی به صورت افقی از
float:leftوdisplay:inlineخاصیت CSS استفاده کنید:
تمرینات HTML
برچسب های لیست HTML
| برچسب | توضیحات |
|---|---|
| <ul> | لیست نامرتبی را تعریف می کند |
| <ol> | لیست مرتب شده ای را تعریف می کند |
| <li> | یک مورد لیست را تعریف می کند |
| <dl> | لیست شرح را تعریف می کند |
| <dt> | اصطلاحی را در لیست توضیحات تعریف می کند |
| <dd> | این اصطلاح را در یک لیست توصیف توصیف می کند |
برای مشاهده لیست کامل تمام برچسب های مرجع برچسبHTML موجود ، از HTML ما دیدن کنید .
سایت توسط چارچوب farsiw3.ir طراحی شده است.
