خانه آموزش HTML آموزش تگ های HTML آموزش تگ ol در HTML

آموزش تگ ol در HTML

توسط

۱۳۹۸-۰۲-۱۶

آموزش تگ ol در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ ol در HTML با من همراه باشید.

آموزش تگ ol در HTML

Free-Learn

در این جلسه میخوانیم

1 تگ Ol در HTML
2 مثال از تگ ol در HTML
3 پشتیبانی مرورگرها
4 جدول صفات تگ ol در HTML
5 پشتیبانی از صفات و رویدادهای عمومی
6 نکات و توضیحات
7 دستورات CSS پیش فرض

تگ Ol در HTML

تگ ol تگی است که با استفاده از آن میتوان یک لیست مرتب شده (لیستی که آیتم های آن دارای شماره گذاری باشد) را ایجاد نمود.

برای ایجاد آیتم ها/گزینه های یک لیست مرتب شده باید از تگ <li> استفاده نماییم.

پیشنهاد میکنم آموزش کار با لیست ها در HTML را مشاهده نمایید.

Free-Learn

مثال از تگ ol در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<ol>
  <li>Sadegh</li>
  <li>Reza</li>
  <li>Fateme</li>
</ol>

</body>

<body>

<ol>

<li>Sadegh</li>

<li>Fateme</li>

</ol>

</body>

امتحان کنید

مثال شماره ۲ : یک لیست مرتب شده با شماره گذاری حروف بزرگ انگلیسی (…,A,B)

<body>

<ol type="A">
 <li>Salam</li>
 <li>Man</li>
 <li>Sadegh</li>
 <li>Hastam</li>
</ol>

</body>

<body>

<li>Salam</li>

<li>Sadegh</li>

<li>Hastam</li>

</ol>

</body>

امتحان کنید

مثال شماره ۳ : یک لیست مرتب شده با آیتم های معکوس

<body>

<h3>لیست معکوس شده</h3>
<ol reversed>
  <li>سلام</li>
  <li>خوبی</li>
  <li>من</li>
  <li>صادق</li>
  <li>هستم</li>
</ol>

</body>

<body>

<h3>لیست معکوس شده</h3>

</ol>

</body>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ ol در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

Free-Learn

جدول صفات تگ ol در HTML

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

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

(علامت یعنی در HTML5 اضافه شده است)

نام صفت	مقدار	توضیح
compact	compact	آیتم های لیست را بصورت فشرده نمایش میدهد. ()
reversed	reversed	آیتم های لیست مرتب شده را بصورت معکوس نمایش میدهد. ()
start	number	نقطه/مقدار شروع شماره گذاری آیتم های لیست مرتب شده را مشخص میکند.
type	۱ A a I i	نوع شماره گذاری آیتم های لیست مرتب شده را مشخص میکند.

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ ol از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

صفات start و type متعلق به نسخه HTML4.01 می باشند و عملا در نسخه HTML5 این صفات منسوخ شده حساب می شوند ولی خب با این حال بازم در HTML5 میشه از این صفات استفاده کرد و مانعی ندارد.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ ol را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

ol {

display: block;

list-style-type: decimal;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

padding-left: 40px;

}