برچسب <ol> HTML

تعریف و استفاده

<ol> برچسب‌ها برای تعریف لیست‌های نام‌گذاری شده استفاده می‌شوند. لیست‌های نام‌گذاری شده می‌توانند به ترتیب اعداد یا حروف باشند.

<li> برچسب‌ها برای تعریف هر علامت لیست استفاده می‌شوند.

توضیح:برای تنظیم نوع لیست از CSS استفاده کنید.

توضیح:برای لیست‌های بدون نام‌گذاری، از این استفاده کنید: <ul> برچسب.

لطفاً به اینجا نیز نگاه کنید:

آموزش HTML:لیست HTML

دستنوشت HTML DOM:عنصر Ol

آموزش CSS:نوع لیست‌ها را تنظیم کنید

مثال

مثال 1

دو لیست نام‌گذاری شده مختلف (لیست اول از 1 شروع می‌شود، لیست دوم از 50):

<ol>
  <li>قهوه
  <li>چای
  <li>شیر
</ol>
<ol start="50">
  <li>قهوه
  <li>چای
  <li>شیر
</ol>

به طور مستقیم امتحان کنید

مثال 2

نوع مختلف لیست‌ها را تنظیم کنید (از CSS استفاده کنید):

<ol style="list-style-type:upper-roman">
<li>قهوه
<li>چای
<li>شیر
</ol>
<ol style="list-style-type:lower-alpha">
<li>قهوه
<li>چای
<li>شیر
</ol>

به طور مستقیم امتحان کنید

مثال 3

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

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

به طور مستقیم امتحان کنید

مثال 4

افزایش و کاهش ارتفاع خطوط در لیست (با استفاده از CSS):

<ol style="line-height:80%">
  <li>قهوه
  <li>چای
  <li>شیر
</ol>
<ol style="line-height:180%">
  <li>قهوه
  <li>چای
  <li>شیر
</ol>

به طور مستقیم امتحان کنید

مثال 5

لیست‌های غیرمرتب درون لیست‌های مرتب قرار می‌گیرند:

<ol>
  <li>قهوه
  <li>چای
    <ul>
      <li>لونگ جینگ
      <li>پایور
    </ul>
  </li>
  <li>شیر
</ol>

به طور مستقیم امتحان کنید

ویژگی

ویژگی مقدار توضیح
معکوس معکوس تعیین کنید که ترتیب لیست باید معکوس باشد (9,8,7 ...).
شروع عدد مقدار اولین علامت در لیست مرتب تعیین می‌شود.
نوع
  • 1
  • A
  • a
  • I
  • i
 نوع برچسبی که باید در لیست استفاده شود را مشخص می‌کند.

ویژگی‌های جهانی

<ol> این برچسب همچنین از ویژگی‌های رویداد پشتیبانی می‌کند ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<ol> این برچسب همچنین از ویژگی‌های رویداد پشتیبانی می‌کند ویژگی‌های رویداد در HTML.

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها از تنظیمات پیش‌فرض زیر برای نمایش استفاده می‌کنند <ol> عنصر:

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

به طور مستقیم امتحان کنید

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی