این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ ol در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ ol در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Ol در HTML
تگ ol که از کلمه Ordered List گرفته شده، تگی است که با استفاده از آن میتوان یک لیست مرتب شده ( لیستی که آیتم های آن دارای شماره گذاری باشد ) را ایجاد نمود.
برای ایجاد آیتم های لیست باید از تگ <li> استفاده نماییم.
پیشنهاد میکنم آموزش کار با لیست ها در HTML را مشاهده نمایید.
Free-Learn
مثال از تگ ol در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ ol
|
1 2 3 4 5 6 7 8 9 |
<body> <ol> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
مثال شماره ۲ : استفاده از صفت type ( برای مشخص کردن نوع شماره گذاری آیتم ها )
|
1 2 3 4 5 6 7 8 9 |
<body> <ol type="A"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
مثال شماره ۳ : استفاده از صفت start ( نقطه شروع شماره گذاری آیتم هارو مشخص میکنه )
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <ol start="10"> <li>Salam</li> <li>Khobi</li> <li>Man</li> <li>Sadegh</li> <li>Hastam</li> </ol> </body> |
مثال شماره ۴ : استفاده از صفت reversed ( شماره گذاری آیتم هارو معکوس میکنه )
|
1 2 3 4 5 |
<ol reversed> <li>Salam</li> <li>Khobi?</li> <li>Free-Learn</li> </ol> |
مثال شماره ۵ : استفاده از CSS برای مشخص کردن نوع شماره گذاری آیتم ها
|
1 2 3 4 5 6 7 8 9 |
<body> <ol style="list-style-type:upper-alpha;"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ol> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ ol در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ ol در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| reversed | reversed | شماره گذاری آیتم هارو بصورت معکوس نمایش میدهد |
| start | number | نقطه شروع شماره گذاری آیتم هارو مشخص میکند |
| type | ۱ A a I i |
نوع شماره گذاری آیتم های لیست را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ ol از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- صفات start و type متعلق به نسخه HTML4.01 می باشند و عملا در نسخه HTML5 این صفات منسوخ شده حساب میشن، ولی خب مرورگرها ازشون پشتیبانی میکنند و نشون میدن.
- همونطور که گفتم صفت type یه صفت منسوخ شده بحساب میاد، پس باید از CSS بجای این صفت استفاده نمایید. ( همانند مثال شماره ۵ )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ ol را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 8 9 |
ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; } |
