سبد (0)

تبلیغات

لیست ها در HTML

لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.

لیست ها در HTML

لیست های مرتب

  1. The first list item
  2. The second list item
  3. The third list item

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

  • List item
  • List item
  • List item

مثال - خودتان امتحان کنید

Wiki

Unordered list
نحوه ایجاد لیست نامرتب در سند HTML.

Ordered list
نحوه ایجاد لیست مرتب در HTML.

(شما می توانید مثال های بیشتر را در پایین این صفحه مشاهده کنید.)


لیستهای نامرتب (Unorder List)

Wiki

یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)

آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

نحوه نمایش کد بالا در مرورگر:

  • Coffee
  • Milk

لیست های مرتب (Order List)

Wiki

یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.

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

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

نحوه نمایش کد بالا در مرورگر:

  1. Coffee
  2. Milk

لیست های تعریفی (Description List)

Wiki

یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.

لیست های تعریفی با تگ <dl> نوشته می شوند.

تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.

<dl>
<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

نکات مهم و اساسی

Wiki

نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ 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>

برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.

دیدگاه‌ها  

+1 # hmaid 1396-03-18 11:39
مرسی از توضیحات خوبتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # hmaid 1396-03-18 11:37
سلام عالی بود همه چیز
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # 8learn.ir 1395-10-25 16:18
آموزش لییست ها در HTML عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # علیرضا باهوش 1395-07-23 20:04
لیست آبشاری بدون استفاده از سی اس اس (البته منظورم استفاده از خاصیت استایل تگها به صورت این لاین نیست) را توضیح دهید نیاز مبرم به آن دارم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-23 21:05
با سلام.
متوجه منظور شما نمیشم دوست عزیز. لیست آبشاری به صورت Inline خیلی حجیم میشه و بعضی از موارد هم امکانش نوشتنش نیست.

بیشتر توضیح بدید منظورتون چیه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # حسین 1394-12-05 11:14
با عرض سلام و خسته نباشی و تشکر خدمت شما دوست عزیز
میتونیم به لیست لین بدیم که با کلیک روی مثلا خط دوم لیست بریم به فلان صفحه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Tara2 1394-06-26 00:55
با سلام و سپاس. در لیست های تعریفی کلمه Difinition list نادرسته و باید از کلمه Description Lists استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-07-23 21:12
با سلام و سپاس از حسن توجه شما.
تصحیح گردید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # نیلوفر 1393-11-16 09:28
سلام .در مثال Nested list 2 قسمت خودتان امتحان کنید .چرا از خصوصیت type برای تعیین شکل آیتم استفاده نشده ولی با این حال شکل همه ی آیتم ها درست نشون داده شده منظورم اینه که مثلا برای coffee از دایره و برای africa از مربع استفاده شده در حالی که خصوصیت type برای هیچ کدوم نوشته نشده ؟ممنون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # امیر پهلوان صادق 1393-11-16 10:11
سلام، مرورگر بصورت پیش فرض برای لیست هایی که در سطح 1 قرار دارند از دایره ی توپور و برای سطح دو از دایره تو خالی و ... استفاده می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیرکیان 1393-11-09 16:19
وقتی که می شود از خاصیت list-style-type استفاده کنیم ؛آنگاه آیا فرقی می کند که از کدام یک از لیست ها استفاده کنیم آیا؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-11-10 11:50
با خصوصیت 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) انتظار می رود را با دیگری جابه جا کنیم.
http://beyamooz.com/try_it_yourself/tryit.php?filename=trycss_list-style-type_ex
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی