تگ ol در HTML
این لیست ها به صورت منظم و شماره گذاری شده هستند.
برای نمایش این لیست ها از تگ ol استفاده می شود که مخفف ordered list است.
برای نمایش آیتم ها در لیست باید از تگ li استفاده کنیم که مخفف list item است.
ساختار تگ ol به صورت زیر است:
مثالی از تگ ol :
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
ویژگی type در تگ ol
همانطور که در مثال بالا می بینید این لیست از عدد یک تا سه مرتب شده است.
برای اینکه بتوانیم این لیست را به صورت های مختلف منظم کنیم، باید از ویژگی type استفاده کنیم.
مقدار هایی که ویژگی type دریافت می کند را در جدول زیر مشاهده می کنید:
مقدار | توضیحات |
---|---|
1 | مرتب شده بر اساس اعداد انگلیسی |
A | مرتب شده بر اساس حروف انگلیسی بزرگ |
a | مرتب شده بر اساس حروف انگلیسی کوچک |
I | مرتب شده بر اساس اعداد رومی بزرگ |
i | مرتب شده بر اساس اعداد رومی کوچک |
مثال لیست مرتب شده بر اساس اعداد انگلیسی :
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
مثال لیست مرتب شده بر اساس حروف انگلیسی بزرگ :
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
مثال لیست مرتب شده بر اساس حروف انگلیسی کوچک :
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
مثال لیست مرتب شده بر اساس اعداد رومی بزرگ :
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
مثال لیست مرتب شده بر اساس اعداد رومی کوچک :
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
ویژگی start در تگ ol
یکی دیگر از ویژگی های تگ ol ، ویژگی start است.
این ویژگی مشخص می کند که نقطه شروع لیست مورد نظر از کجا شروع شود.
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
در مثال بالا دیدید که لیست مورد نظر از عدد 5 شروع شده است.
این ویژگی برای تگ ol استفاده می شود و برای تگ های ul کاربردی ندارد.
لیست های تو در تو (Nested) در HTML
لیست های منظم HTML به صورت تو در تو نیز نوشته می شوند.
یعنی اینکه می توانیم در یک لیست منظم ، از لیست های منظم دیگر استفاده کنیم.
<ol>
<li>Motorcycle</li>
<li>Car
<ol>
<li>Benz</li>
<li>BMW</li>
</ol>
</li>
<li>bicycle</li>
</ol>
خلاصه درس
- در این بخش بررسی کاملی از لیست منظم انجام دادیم.
- با ویژگی type و start آشنا شدیم.
- همچنین لیست های تو در تو (nested) را مورد بررسی قرار دادیم.
تمرین
لیست زیر را به ترتیب حروف انگلیسی بزرگ کامل کنید.
<li>HTML</li>
<li>CSS<li>
< >JS< >
</ol>