آموزش اچ تی ام ال HTML

المان ol برای نشان دادن آیتم ها بصورت لیست های مرتب شده استفاده میشود. این لیست عموما بصورت عددی نمایش داده میشود.

مثال

 
<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In a separate bowl, mix eggs, milk, oil, and vanilla.</li>
  <li>Stir both mixtures together until just combined.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>
 

اتریبیوت ها

این المان از اتریبیوت های جهانی استفاده میکنند.

reversed

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

start

این اتریبیوت مشخص میکند که مقدار لیست با چه مقداری شروع میشود. با اینکه لیست میتواند با اعداد رومی یا حروف بیاید، ولی مقدار این اتریبیوت همیشه باید عدد باشد. برای مثال اگر میخواهید لیست شما با حرف C شروع شود مقدار این اتریبیوت را 3 تعیین کنید.

type

برای تعیین نوع اعداد لیست استفاده میشود:

a حروف کوچک را تعیین میکند

A حروف بزرگ را تعیین میکند

i حروف کوچک اعداد رومی را تعیین میکند

I حروف بزرگ اعداد رومی را تعیین میکند

1 اعداد را مشخص میکند (مقدار پیش فرض)

در لیست های تو در تو، مقدار تعیین شده برای اتریبیوت نوع برای کل لیست ها درنظر گرفته میشود، مگر آنکه برای یکی از لیست مقدار دیگری تعیین شده باشد.

نکاتی که باید در ذهن داشته باشید

• عموما، آیتم های لیست مرتب شده بصورت عددی نمایش داده میشوند و میتوانند به هر نوعی باشند؛ مانند عدد، اعداد رومی، یا حتی بولت. استایل این اعداد در HTML تعیین نمیشوند بلکه باید در CSS و توسط پراپرتی list-style-type تعریف شوند.
• هیچ محدودیتی در عمق و تناوب لیست ها وجود ندارد.
• هم ol و هم ul برای نمایش لیست استفاده میشوند. تنها تفاوت این دو در این است که ترتیب آیتم ها در ol مهم هستند. اگر با جابجا کردن آیتم ها معنای لیست تغییر میکند از المان ol استفاده کنید، در غیر اینصورت از ul

مثال اعداد رومی

 
<ol type="i">
  <li>foo</li>
  <li>bar</li>
  <li>spam</li>
</ol>
 

خروجی مثال بالا:

1. foo
2. bar
3. spam

مثال اتریبیوت start

 
<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>
 

خروجی مثال بالا:

7. first item
8. second item
9. third item

مثال لیست های تو در تو

 
<ol>
  <li>first item</li>
  <li>second item
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>    <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
 

خروجی مثال بالا:

1. first item
2. second item
   1. second item first subitem
   2. second item second subitem
   3. second item third subitem
3. third item