لیست html
آنچه در این مطلب میخوانید:
لیست html به چه صورت هایی نوشته می شود؟
آموزش html درس هفدهم
لیست نامرتب html
لیست html به صورت نامرتب با تگ <ul> شروع می شود. هر کدام از آیتم های لیست با تگ <li> شروع می شود. هر کدام از آیتم های لیست به طور پیش فرض با bullets (حلقه های کوچک سیاه و سفید) مشخص می شوند.
مثال:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
علامت آیتم های لیست نامرتب در html
Value | Description |
---|---|
disc | Sets the list item marker to a bullet (default) |
circle | Sets the list item marker to a circle |
square | Sets the list item marker to a square |
none | The list items will not be marked |
مثال disc
<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
مثال circle
<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
مثال square
<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
مثال none
<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
لیست مرتب html
لیست مرتب با تگ <ol> شروع می شود و هر کدام از آیتم های لیست با <li> شروع می شوند. آیتم های لیست به طور پیش فرض با عدد شروع می شوند.
مثال :
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
ویژگی type در لیست های مرتب html
Type | Description |
---|---|
type=”1″ | The list items will be numbered with numbers (default) |
type=”A” | The list items will be numbered with uppercase letters |
type=”a” | The list items will be numbered with lowercase letters |
type=”I” | The list items will be numbered with uppercase roman numbers |
type=”i” | The list items will be numbered with lowercase roman numbers |
اعداد
<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف بزرگ
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف کوچک
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف رومی بزرگ
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف رومی کوچک
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
فهرست توصیفات HTML
HTML نیز از لیست توضیحات پشتیبانی می کند.
فهرست توصیفی یک لیست از اصطلاحات با شرح هر اصطلاح است.
تگ <dl> فهرست توصیفی را مشخص می کند، تگ <dt> اصطلاح (نام) را تعریف می کند و تگ <dd> هر اصطلاح را شرح می دهد:
مثال :
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
لیست های تو در تو در html که nested نامیده می شوند.
مثال :
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
توجه: اقلام لیست می تواند شامل لیست جدید و دیگر عناصر HTML مانند تصاویر و لینک ها و غیره باشد.
لیست افقیلیست های HTML را می توان با بسیاری از روش های مختلف با CSS طراحی کرد.یکی از راه های محبوب این است که یک لیست را به صورت افقی بنویسید تا منو ایجاد کنید:
مثال :
<!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>
۱
۲
۳
۴
۵
میانگین امتیازات ۵ از ۵
از مجموع ۱ رای
برچسب ها:
HTML
دیدگاهتان را بنویسید