HTML အကိုးအကား

အက္ခရာဖြင့် HTML HTML အမျိုးအစားအလိုက် HTML Browser ပံ့ပိုးမှု HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML အက္ခရာအစုံများ HTML Doctypes HTML URL ကုဒ် HTML ဘာသာစကားကုဒ်များ HTML နိုင်ငံကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ


HTML <ol> Tag


ဥပမာ

မတူညီသော မှာယူထားသောစာရင်းနှစ်ခု (ပထမစာရင်းသည် 1 မှစတင်သည်၊ ဒုတိယသည် 50 တွင်စတင်သည်)

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။


အဓိပ္ပါယ်နှင့် အသုံးပြုမှု

တက်ဂ်သည် မှာ <ol>ယူထားသောစာရင်းကို သတ်မှတ်သည်။ မှာယူထားသောစာရင်းသည် ဂဏန်း သို့မဟုတ် အက္ခရာစဉ်ဖြစ်နိုင်သည်။

စာရင်း အကြောင်းအရာတစ်ခုစီကို သတ်မှတ်ရန် <li> tag ကို အသုံးပြုသည်။

အကြံပြုချက်- ပုံစံစာရင်း များအတွက် CSS ကိုသုံး ပါ

အကြံပြုချက်- အစီအစဥ်မတင်ရသေးသောစာရင်းအတွက်၊ <ul> တက်ဂ်ကို အသုံးပြုပါ ။ 


Browser ပံ့ပိုးမှု

Element
<ol> Yes Yes Yes Yes Yes


ဂုဏ်တော်

Attribute Value Description
reversed reversed Specifies that the list order should be reversed (9,8,7...)
start number Specifies the start value of an ordered list
type 1
A
a
I
i
Specifies the kind of marker to use in the list

ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ

<ol>tag သည် HTML တွင် Global Attributes ကို ပံ့ပိုး ပေးပါသည်။


ဖြစ်ရပ်ဂုဏ်တော်များ

<ol>tag သည် HTML ရှိ Event Attributes များကိုလည်း ပံ့ပိုး ပေးပါသည်


နောက်ထပ် ဥပမာများ

ဥပမာ

မတူညီသောစာရင်းအမျိုးအစားများကို သတ်မှတ်ပါ (CSS ဖြင့်)

<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

ဥပမာ

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>

ဥပမာ

စာရင်းများတွင် လိုင်းအမြင့်ကို လျှော့ချပြီး ချဲ့ပါ (CSS ဖြင့်)

<ol style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ဥပမာ

မှာယူထားသောစာရင်းတစ်ခုအတွင်း မှာထားခြင်းမရှိသောစာရင်းကို စုစည်းထားပါ-

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>

ဆက်စပ်စာမျက်နှာများ

HTML သင်ခန်းစာ- HTML စာရင်းများ

HTML DOM ရည်ညွှန်း- Ol Object

CSS ကျူတိုရီရယ်- ပုံစံရေးဆွဲခြင်းစာရင်းများ


မူရင်း CSS ဆက်တင်များ

ဘရောက်ဆာအများစုသည် <ol>အောက်ဖော်ပြပါ ပုံသေတန်ဖိုးများဖြင့် အစိတ်အပိုင်းကို ပြသလိမ့်မည်-

ဥပမာ

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