تیک تم بازاریابی اینترنتی سئو و بهینه سازی وب سایت آموزش وردپرس 
"
قسمت هفدهم-لیست های HTML
| قدم قبلی > | < قدم بعدی |
لیست های HTML
در این آموزش html به لیست های HTML می پردازیم.
فهرست نامحدود HTML
یک فهرست غیر ارادی با برچسب <ul> آغاز می شود. هر آیتم لیست با برچسب <li> آغاز می شود.
آیتم های لیست به طور پیش فرض با گلوله (حلقه های کوچک سیاه و سفید) مشخص می شوند:
1 2 3 4 5 | <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
لیست عناصر مورد نظر را انتخاب کنید
ویژگی list-style-type برای تعیین استایل علامت لیست مورد استفاده می شود:
1 2 3 4 5 | <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
1 2 3 4 5 | <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
1 2 3 4 5 | <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
1 2 3 4 5 | <ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
مرتب سازی لیست HTML
یک لیست مرتب با برچسب <ol> شروع می شود. هر آیتم لیست با برچسب <li> آغاز می شود.
موارد لیست با عدد به طور پیش فرض مشخص می شوند:
1 2 3 4 5 | <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
تگ انتخاب نوع برچسب نشانگر لیست
خصیصه نوع برچسب <ol>، نوع برچسب نشانگر لیست را تعریف می کند:
1 2 3 4 5 | <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
1 2 3 4 5 | <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
1 2 3 4 5 | <ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
1 2 3 4 5 | <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
1 2 3 4 5 | <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
فهرست توضیحات HTML
HTML نیز از لیست توضیحات پشتیبانی می کند.
فهرست توصیفی یک لیست از اصطلاحات است، با شرح هر اصطلاح.
تگ <dl> فهرست توصیفی را مشخص می کند، تگ <dt> ترم (نام) را تعریف می کند و تگ <dd> هر اصطلاح را شرح می دهد:
1 2 3 4 5 6 | <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> |
لیست های حاوی HTML
لیست را می توان توزیع کرد (لیست داخل لیست ها):
1 2 3 4 5 6 7 8 9 10 | <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> |
نکته : اقلام لیست می تواند شامل لیست جدید و دیگر عناصر HTML مانند تصاویر و لینک ها و غیره باشد.
شمارش کنترل لیست
به طور پیش فرض یک لیست مرتب از شمارۀ ۱ آغاز می شود. اگر می خواهید شروع به شمارش از یک عدد مشخص شده، می توانید از ویژگی start استفاده کنید:
1 2 3 4 5 | <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
لیست افقی با CSS
لیست های HTML را می توان با بسیاری از روش های مختلف با CSS طراحی کرد.
یکی از راه های محبوب این است که لیستی را به صورت افقی بنویسید تا یک فهرست ناوبری ایجاد کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } 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">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> |
| گام قبلی > | < گام بعدی |
