گروه مقاله : HTML 4
تاريخ انتشار : 1394/02/21 - 12:40
كد :424

لیست ها در HTML

لیست های HTML  می توانند به صورت لیست های ترتیبی (Ordered lists) و غیر ترتیبی  (Unordered lists) و لیست های تعریفی (Description Lists) باشند.
 
لیست های نا مرتب (Unordered lists)
 
لیست نامرتب با تگ <ul> شروع می شود. هر آیتم لیست با تگ <li> شروع می شود.
آیتم های یک لیست به وسیله بولت نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)
 
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
نحوه نمایش کد بالا در مرورگر
 
  • Coffee
  • Tea
  • Milk
خصوصیت 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>
نحوه نمایش کد بالا در مرورگر:
  1. Coffee
  2. Tea
  3. Milk
لیست های تعریفی (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>

Horizontal List

 

 

کد بالا می تواند با کمی تغییر به صورت منو در آید 
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> برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*