گروه مقاله : HTML 4
تاريخ انتشار : 1394/02/21 - 12:40
كد :424
لیست های HTML می توانند به صورت لیست های ترتیبی (Ordered lists) و غیر ترتیبی (Unordered lists) و لیست های تعریفی (Description Lists) باشند.
لیست های نا مرتب (Unordered lists)
لیست نامرتب با تگ <ul> شروع می شود. هر آیتم لیست با تگ <li> شروع می شود.
آیتم های یک لیست به وسیله بولت نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
نحوه نمایش کد بالا در مرورگر
خصوصیت Style در لیست های نامرتب
|
Style |
توضیحات |
|
list-style-type:disc |
آیتم های لیست به صورت پیش فرض به وسیله علامت بولت نشانه گذاری می شوند |
|
list-style-type:circle |
آیتم های لیست به وسیله دایره های و خالی نشانه گذاری می شوند |
|
list-style-type:square |
آیتم های لیست به وسیله مربع نشانه گذاری می شوند |
|
list-style-type:none |
آیتم های لیست نشانه گذاری نمی شوند |
لیست های مرتب (Ordered lists)
یک لیست مرتب با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.
آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
نحوه نمایش کد بالا در مرورگر:
لیست های تعریفی (Description lists)
یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.
لیست های تعریفی با تگ <dl> نوشته می شوند.
تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
A Description List
-
Coffee
-
- black hot drink
-
Milk
-
- white cold drink
نمایش لیست های تو در تو
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
نکته : آیتم های یک لیست می توانند خود شامل لیست جدید و عناصر دیگر HTML مثل تصاویر یا لینک ها باشند.
لیست افقی
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
کد بالا می تواند با کمی تغییر به صورت منو در آید
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
تگ های لیست در HTML
|
تگ |
توضیحات |
|
<ul> |
لیست نامرتب تعریف می کند |
|
<ol> |
لیست مرتب تعریف می کند |
|
<li> |
آیتم لیست را تعریف می کند |
|
<dl> |
لیست تعریفی ایجاد می کند |
|
<dt> |
برای ساخت یک آیتم در لیست تعریفی استفاده می شود |
|
<dd> |
برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود |