لیست ها در Html به دو صورت می باشند . لیست های مرتب و نامرتب . یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند. آیتم های لیست نامرتب معمولا بوسیله یک دایره سیاه کوچک مشخص می شوند.یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند. آیتم های لیست مرتب بوسیله اعداد مشخص می شوند. کاربرد لیست ها در صفحات وب بسیار پر کاربرد و حائز اهمیت می باشد که در ادامه به طور کامل این قسمت را برای شما آموزش میدهم . تگ های مربوط به لیست در Html 3 تگ <ul>, <li>, <ol> می باشد .
لیست های نامرتب در HTML
یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند
یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند. آیتم های لیست مرتب بوسیله اعداد مشخص می شوند.
لیست های مرتب در HTML
یک لیست تعریفی لیستی از آیتم ها است، که به توضیح هر یک از آیتم ها می پردازد. لیست تعریف با تگ <dl> مشخص می شود.
تگ <dl> در ترکیب با تگ<dt> مورد استفاده قرار می گیرد. و تگ <dd> به توصیف آیتم در لیست می پردازد.
انواع مختلف لیست مرتب
انواع مختلف لیست نامرتب
نمونه لیست تو در تو
نمونه دوم لیست تو در تو
منبع: learning.asarayan.com
لیست های نامرتب در HTML
یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند
HTML:
<h3>HTML Unordered Lists</h3><ul><li>Coffee</li><li>Milk</li></ul>- خروجی کد به شکل زیر می باشد
- Coffee
- Milk
یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند. آیتم های لیست مرتب بوسیله اعداد مشخص می شوند.
لیست های مرتب در HTML
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
یک لیست تعریفی لیستی از آیتم ها است، که به توضیح هر یک از آیتم ها می پردازد. لیست تعریف با تگ <dl> مشخص می شود.
تگ <dl> در ترکیب با تگ<dt> مورد استفاده قرار می گیرد. و تگ <dd> به توصیف آیتم در لیست می پردازد.
HTML:
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>انواع مختلف لیست مرتب
HTML:
<!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>انواع مختلف لیست نامرتب
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>نمونه لیست تو در تو
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>نمونه دوم لیست تو در تو
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>منبع: learning.asarayan.com