آشنایی با لیست ها در HTML

لیست ها در HTML به دو نوع لیست ترتیبی و غیر ترتیبی تقسیم میشوند. در این فصل با نحوه ی ایجاد آنها در اسناد HTML آشنا خواهیم شد.


 لیست های ترتیبی و غیر ترتیبی

ترتیبی :

  1. آیتم اول
  2. آیتم دوم
  3. آیتم سوم
  4. آیتم چهارم

غیر ترتیبی :

  • آیتم
  • آیتم
  • آیتم
  • آیتم

 

خودتان امتحان کنید


لیست غیر ترتیبی در HTML

یک لیست غیر ترتیبی با تگ <ul> آغاز میشود. هر آیتمی در لیست با تگ <li> آغاز میشود.

آیتم ها در لیست به صورت پیشفرض با بولت هایی(دایره های مشکی کوچک) نشان دار میشوند.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
خودتان امتحان کنید

خاصیت list-style-type در لیست ها

از خاصیت list-style-type برای مشخص کردن نوع نشانه های(دایره ، مربع و ..) آیتمها در لیست استفاده میشود.

مقدار         توضیح
disc  از بولت برای نشان دار کردن آیتم های لیست استفاده میشود(مقدار پیشفرض)
circle  از دایره های تو خالی برای نشان دار کردن آیتم های لیست استفاده میشود
square  از مربع های توپر برای نشان دار کردن آیتم های لیست استفاده میشود
none  از هیچ نشانه ای برای نشان دار کردن آیتم های لیست استفاده نمیشود

مثال برای مقدار 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 در لیست های ترتیبی

خاصیت type لیست های ترتیبی نوع نشانه های آیتم ها در لیست را مشخص میکند.

نوع توضیح
 "type="1  آیتم های لیست به ترتیب از مقدار 1 نشانه گذاری میشوند
 "type="A  آیتم های لیست به ترتیب حروف الفبا از مقدار A (حروف بزرگ) مقدار دهی میشوند.
 "type="a  آیتم های لیست به ترتیب حروف الفبا از مقدار a (حروف کوچک) مقدار دهی میشوند.
 "type="I  آیتم های لیست به ترتیب اعداد یونانی از مقدار I (اعداد بزرگ) مقدار دهی میشوند.
 "type="i  آیتم های لیست به ترتیب اعداد یونانی از مقدار i (اعداد کوچک) مقدار دهی میشوند.

مثالی برای اعداد :

<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

لیست ها در HTML  میتوانند داخل هم قرار بگیرند.

<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>
خودتان امتحان کنید

 

منتشر شده در ۱۲ خرداد ۱۳۹۶ حمید رضا ملکی ۷۶۷ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده