لیست ها در Html به دو صورت می باشند . لیست های مرتب و نامرتب . یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند.
آیتم های لیست نامرتب معمولا بوسیله یک دایره سیاه کوچک مشخص می شوند.یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند.
آیتم های لیست مرتب بوسیله اعداد مشخص می شوند. کاربرد لیست ها در صفحات وب بسیار پر کاربرد و حائز اهمیت می باشد که در ادامه به طور کامل این قسمت را برای شما آموزش میدهم .
تگ های مربوط به لیست در Html 3 تگ <ul>, <li>, <ol> می باشد .
لیست های نامرتب در HTML
یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند
<h3>HTML Unordered Lists</h3> <ul> <li>Coffee</li> <li>Milk</li> </ul>
- خروجی کد به شکل زیر می باشد
- Coffee
- Milk
یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند. آیتم های لیست مرتب بوسیله اعداد مشخص می شوند.
لیست های مرتب در HTML
<p></p> <p style="text-align: left;" dir="ltr"><h3>HTML Ordered Lists</h3> <ol> <li>Coffee</li> <li>Milk</li> </ol> </p>
- خروجی کد به شکل زیر می باشد
- Coffee
- Milk
لیست تعریفی در HTML
یک لیست تعریفی لیستی از آیتم ها است، که به توضیح هر یک از آیتم ها می پردازد. لیست تعریف با تگ <dl> مشخص می شود.
تگ <dl> در ترکیب با تگ<dt> مورد استفاده قرار می گیرد. و تگ <dd> به توصیف آیتم در لیست می پردازد.
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
انواع مختلف لیست مرتب
<!DOCTYPE html> <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type='A'> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type='a'> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type='I'> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type='i'> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html>
انواع مختلف لیست نامرتب
<!DOCTYPE html> <html> <body> <h4>Disc bullets list:</h4> <ul type='disc'> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type='circle'> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type='square'> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>
نمونه لیست تو در تو
<!DOCTYPE html> <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
نمونه دوم لیست تو در تو
<!DOCTYPE html> <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html>
