جستجو در دورآموز

خانه / وبگاه / لیستها در HTML
170 برگشت

لیستها در HTML

فاطمه خوش‌گفتارماهر
فاطمه خوش‌گفتارماهر

مهندس طراحی سایت - سابقه 10 سال تدریس در جهاددانشگاهی مشهد - مدرس نرم افزارها و برنامه های کامپیوتری - عضو تیم برنامه نویسی جی وب

جمعه، 13 تیر 1399 ساعت 14:22:17
لیستها در HTML

لیستها در HTML

لیستها در HTML بسیار کاربردی هستند.

در واقع دو نوع لیست وجود دارد :

  1. لیست علامتدار یا نامرتب نامحدود
  2. لیست شمارهدار

علاوه بر علامت یا عدد دو تورفتگی نیز برای هر پاراگراف ایچاد میشود :

  1. تورفتگی علامت یا عدد
  2. تورفتگی ابتدای خط اول پاراگراف ، که به طور پیش فرض با خطوط بعدی برابر است .اما میتوان آن را به دلخواه تغییر داد.

شما می‌توانید نمونه‌ای از این لیستها را به صورت زیر مشاهده کنید.

 

 

 لیستهای علامتدار یا نامرتب نامحدود در HTML

 

 

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

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

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

مثال :

 

1

2

3

4

5

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

نتیجه مثال بالا به صورت زیر است :

 

 

خصوصیت  list-style-type  در تگ <ul> :

برای تعیین نوع علامت مربوط به لیست علامتدار یا نامرتب نامحدود از خصوصیت  list-style-type  استفاده کنید.

این علامات به شرح زیر می‌باشند:

  • disc : ایجاد علامت دایره توپر ابتدای هر پاراگراف .
  • circle :  ایجاد علامت دایره توخالی ابتدای هر پاراگراف .
  • square : ایجاد علامت مستطیل  توپر ابتدای هر پاراگراف .
  • none : ایجاد یک لیست بدون علامت .

نکته : یک لیست شامل چند پاراگراف می‌باشد ، که ابتدای هر پاراگراف علامت قرار می‌گیرد .

نکته : با هر بار زدن کلید enter یک پاراگراف جدید ایچاد می‌شود .

مثال برای disc :

 

1

2

3

4

5

<ul style="list-style-type:disc">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

نتیجه دستورات فوق به صورت زیر است :

 

 

مثال برای circle :

 

1

2

3

4

5

<ul style="list-style-type:circle">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

نتیجه دستورات فوق به صورت زیر است :

 

 

مثال برای square :

 

1

2

3

4

5

<ul style="list-style-type:square">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

نتیجه دستورات فوق به صورت زیر است :

 

 

مثال برای none :

 

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 type="1">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

نتیجه دستورات فوق به صورت زیر است :

 

 

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

انواع لیست شماره‌دار یا مرتب به شرح زیر می‌باشند:

  1.  نوع  اعداد ۱ : موارد لیست با اعداد (به طور پیش فرض) تعیین میشوند.
  2.  نوع  حروف لاتین بزرگ “A” : موارد لیست با حروف بزرگ ، تعیین میشوند.
  3.  نوع حروف لاتین کوچک “a” : موارد لیست با حروف کوچک ، تعیین میشوند.
  4.  نوع حروف رمی بزرگ “I” :  آیتم های لیست با شماره های بزرگ رمی شماره ، تعیین میشوند.
  5.  نوع  حروف رمی کوچک “i” : آیتم های لیست با شماره های رمی کوچک ، تعیین میشوند.

مثال اعداد “۱” :

 

1

2

3

4

5

<ol type="1">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

نتیجه دستورات فوق به صورت زیر است :

 

 

مثال حروف لاتین بزرگ “A” :

 

1

2

3

4

5

<ol type="A">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

نتیجه دستورات فوق به صورت زیر است :

 

 

مثال حروف لاتین کوچک “a” :

 

1

2

3

4

5

<ol type="a">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

نتیجه دستورات فوق به صورت زیر است :

 

 

مثال حروف رمی بزرگ “I”:

 

1

2

3

4

5

<ol type="I">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

نتیجه دستورات فوق به صورت زیر است :

 

 

مثال حروف رمی کوچک “i”:

 

1

2

3

4

5

<ol type="i">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

نتیجه دستورات فوق به صورت زیر است :

 

 

 

جهت برقراری ارتباط با نویسنده پست و یا ارسال نظر اطلاعات زیر را وارد نمایید
تصویر کپچا دورآموز
سوالات متداول دورآموز