لیست ها در HTML
لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.
لیست ها در HTML
لیست های مرتب
|
لیست های نامرتب
|
Unordered list
نحوه ایجاد لیست نامرتب در سند HTML.
Ordered list
نحوه ایجاد لیست مرتب در HTML.
(شما می توانید مثال های بیشتر را در پایین این صفحه مشاهده کنید.)
لیستهای نامرتب (Unorder List)
یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)
آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)
<li>Coffee</li>
<li>Milk</li>
</ul>
نحوه نمایش کد بالا در مرورگر:
- Coffee
- Milk
لیست های مرتب (Order List)
یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.
آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.
<li>Coffee</li>
<li>Milk</li>
</ol>
نحوه نمایش کد بالا در مرورگر:
- Coffee
- Milk
لیست های تعریفی (Description List)
یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.
لیست های تعریفی با تگ <dl> نوشته می شوند.
تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
نحوه نمایش کد بالا در مرورگر:
- Coffee
- - black hot drink
- Milk
- - white cold drink
نکات مهم و اساسی
نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.
مثال بیشتر - خودتان امتحان کنید
Different types of ordered lists
نمایش انواع دیگر لیست های ترتیبی.
Different types of unordered lists
نمایش انواع دیگر لیست های غیر ترتیبی.
Nested list
نمایش لیست های تو در تو.
Nested list 2
نمایش لیست های تو در توی پیچیده تر.
Description list
نمایش لیست تعریفی.
تگ های لیست در HTML
| Tag | Description |
|---|---|
| <ol> |
یک لیست ترتیبی تعریف می کند. |
| <ul> |
یک لیست غیر ترتیبی تعریف می کند. |
| <li> |
آیتم های یک لیست را تعریف می کند. |
| <dl> |
برای ساخت یک لیست تعریفی استفاده می شود. |
| <dt> |
برای ساخت یک آیتم در لیست تعریفی استفاده می شود. |
| <dd> |
برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 49692
دیدگاه‌ها
عالی بود
مرسی از توضیحات خوبتون
سلام عالی بود همه چیز
آموزش لییست ها در HTML عالی بود.
لیست آبشاری بدون استفاده از سی اس اس (البته منظورم استفاده از خاصیت استایل تگها به صورت این لاین نیست) را توضیح دهید نیاز مبرم به آن دارم.
با سلام.
متوجه منظور شما نمیشم دوست عزیز. لیست آبشاری به صورت Inline خیلی حجیم میشه و بعضی از موارد هم امکانش نوشتنش نیست.
بیشتر توضیح بدید منظورتون چیه.
با عرض سلام و خسته نباشی و تشکر خدمت شما دوست عزیز
میتونیم به لیست لین بدیم که با کلیک روی مثلا خط دوم لیست بریم به فلان صفحه؟
با سلام و سپاس. در لیست های تعریفی کلمه Difinition list نادرسته و باید از کلمه Description Lists استفاده کنید.
با سلام و سپاس از حسن توجه شما.
تصحیح گردید.
سلام .در مثال Nested list 2 قسمت خودتان امتحان کنید .چرا از خصوصیت type برای تعیین شکل آیتم استفاده نشده ولی با این حال شکل همه ی آیتم ها درست نشون داده شده منظورم اینه که مثلا برای coffee از دایره و برای africa از مربع استفاده شده در حالی که خصوصیت type برای هیچ کدوم نوشته نشده ؟ممنون.
سلام، مرورگر بصورت پیش فرض برای لیست هایی که در سطح 1 قرار دارند از دایره ی توپور و برای سطح دو از دایره تو خالی و ... استفاده می کند.
وقتی که می شود از خاصیت list-style-type استفاده کنیم ؛آنگاه آیا فرقی می کند که از کدام یک از لیست ها استفاده کنیم آیا؟!
با خصوصیت list-style-type می توان، نوع علامتگذاری لیست ها را مشخص نمود. به کد زیر توجه کنید:ulul.a {list-style-typ e: circle;}
ul.b {list-style-typ e: square;}
ol.c {list-style-typ e: upper-roman;}
ol.d {list-style-typ e: lower-alpha;}
در اینجا برای علامتگذاری آیتم های لیست های ul و ol از اشکال مختلفی استفاده شده است.
حالا منظور آقا کیان این است که می توانیم، علامت گذاری های مربوط به ul را برای ol و یا برعکس بکار ببریم، بله حق با آقا کیان است و این نشان می دهد که ایشان در یادگیری مسائل خیلی ریز شده اند. اما در کل درست نیست که کاربردی که از لیست های مرتب (ol) انتظار می رود را با دیگری جابه جا کنیم.
beyamooz.com/try_it_yourself/tryit.php?filename=trycss_list-style-type_ex