HTML megrendelhető lista - Attribútumok típusai szintaxissal és példák

Tartalomjegyzék:

Anonim

Bevezetés a HTML rendelt listába

Ebben a szakaszban megtanuljuk, hogyan lehet a Rendezett listákat HTML-ben végrehajtani. Hogyan lehet leírni vagy megjeleníteni a rendezett listát? Nagyon egyszerű és könnyű, ezeket használják a tartalomban szereplő információk listájának leírására. És egy másik módszer az, hogy egyetlen lista több listáselemet tartalmazhat. A HTML-formátumú listákat három típusba lehet sorolni:

  1. Rendezett lista
  2. Rendezetlen lista
  3. Meghatározási lista

Ebben a cikkben egy példával áttekintjük a megrendelt lista specifikációt. A rendezett lista meghatározza a konkrét rendezett információkat, amikor egy listát létrehoznak, például a koordináták információit vagy az információk számozását jeleníti meg.

Rendezett lista szintaxisa

A rendezett listát egy elnevezett címkével hozzuk létre

    elemmel végződik:
címke.

Példák a megrendelt listára

Nézzünk meg néhány alább említett példát:

1. példa



HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines



HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines



HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines


    HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  1. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    2. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  2. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    3. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  3. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    4. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  4. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    5. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  5. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


    6. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


  6. HTML Ordered List

    There are 6 different airlines:
    Jet Blue Airlines
    Frontier Airlines
    South West Airlines
    Spirit Airlines
    United Airlines
    America Airlines


HTML Ordered List

There are 6 different airlines:
Jet Blue Airlines
Frontier Airlines
South West Airlines
Spirit Airlines
United Airlines
America Airlines

Kimenet:

Ez megadja az eredményt, mint például

2. példa

Rendezett lista színekkel. A következő példában az adott számláló tulajdonságot használtuk, meghatározza az automatikus számláló lista elemeit a

  • . Ez csak egy CSS belső változó, amely lehetővé teszi a számlálási funkciókat.



    HTML Ordered List with colors

    ol li (
    counter-increment: list;
    list-style-type: none;
    position: relative;
    )
    ol li:before (
    color: #ff0000;
    content: counter(list) ".";
    left: -22px;
    position: absolute;
    text-align: center;
    width: 24px;
    )
    Norway is a Scandinavian Country
    Oslo is the capital city
    norway is known for its beauty, hiking, fishing
    Ranked among the toppest country in europe



      HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    1. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      2. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    2. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      3. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    3. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      4. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe


    4. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



      5. HTML Ordered List with colors

      ol li (
      counter-increment: list;
      list-style-type: none;
      position: relative;
      )
      ol li:before (
      color: #ff0000;
      content: counter(list) ".";
      left: -22px;
      position: absolute;
      text-align: center;
      width: 24px;
      )
      Norway is a Scandinavian Country
      Oslo is the capital city
      norway is known for its beauty, hiking, fishing
      Ranked among the toppest country in europe



    HTML Ordered List with colors

    ol li (
    counter-increment: list;
    list-style-type: none;
    position: relative;
    )
    ol li:before (
    color: #ff0000;
    content: counter(list) ".";
    left: -22px;
    position: absolute;
    text-align: center;
    width: 24px;
    )
    Norway is a Scandinavian Country
    Oslo is the capital city
    norway is known for its beauty, hiking, fishing
    Ranked among the toppest country in europe

    Kimenet:

    A HTML-vel rendezett lista attribútumainak típusai

    A rendezett lista ábrázolásához ennek a címkének öt fontos típusa van. Mivel a HTML

      a tag a rendezett listában szereplő elemek listáját képviseli, ezek lehetnek alfanumerikus, numerikus vagy egyszerűen ábécé sorrendben, feltéve, hogy a sorrend az elsődleges. Itt vannak a Rendezett lista lehetséges attribútumai:

      1. A Type attribútum

      Ez az attribútum megadja a listában használni kívánt számozás típusát.

      • type = 'a' - ábécé sorrendet ad
      • type = 'A'- A nagybetűket ábécé sorrendben adja meg
      • type = 'i' - Római szám kisbetűt ad
      • type = 'Én- Nagybetűs római számokat adok

      Az ilyen típusú számozást az alábbiakban említjük:

      1. Attribútum típusa = 'a'

      A lista kisbetűs betűkészítéshez ezt a típust használjuk. A következő példa a megrendelt listát mutatja be a kisbetűkkel és dőlt betűvel.

      Példa:



      HTML Ordered List types

      ol li span (
      font-weight: normal;
      )

      Tudtad, hogy:

      Adattudóssá válásához szükséges készségek


      1. lépések
      2. Előzetes ismeretekkel kell rendelkeznie a SAS és az R programozásban.
      3. Erős színvonalúnak kell lenniük a kreativitás és az elemzés terén

      Kimenet:

      2. Attribútumtípus = 'A'

      A rendezett lista tartalmazhat egy attribútumtípust ábécé kisbetűvel. Az alábbi példa bemutatja, hogyan lehet ezt az attribútumot használni a listaszerkezetben, és hogyan lehet betűket félkövér betűkkel készíteni. Ha a megrendelt listát félkövér betűvel látja el, akkor azt címkével kell deklarálni.

      Példa:



      Example for Nested list

      Az egyesült államok államfővárosai

      ol (
      font-weight: merészebb;
      )
      ol li span (
      betűsúly: normál;
      )

      1. Alabama
        • Montgomery
      2. Arizona
        • Főnix
      3. Kalifornia
        • Sacramento
      4. New Jersey
        • Trenton
      5. Washington
        • Olympia
      6. Pennsylvannia
        • Harrisburg

      Kimenet:

      3. Attribútum típusa: 'i'

      Ez a funkcionalitás kisbetűs római betűket jelöl.

      Példa:



      HTML Ordered List types

      EDUCBA HTML lista bemutatója:


      1. Rendezett lista
      2. rendezetlen lista
      3. Meghatározási lista

        1. Bevezetés a listába
        2. Lista szintaxisa
        3. Típusok egy példával
      4. Pillanatképek

      Kimenet:

      4. Attribútum típusa: 'I'

      Ez a funkció a felső római számokkal adja meg a kimenetet.

      Példa:



      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears



      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears

      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears


        HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      1. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        2. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      2. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        3. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      3. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        4. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



      HTML Ordered List Demo

      List of Vegetables
      Carrot
      Radish
      Sweet Corn

      Fruits List
      Pomegrante
      Bananas
      Pears


        HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


      1. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears


          HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears


        1. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



          2. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears


        2. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



          3. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears


        3. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



          4. HTML Ordered List Demo

          List of Vegetables
          Carrot
          Radish
          Sweet Corn

          Fruits List
          Pomegrante
          Bananas
          Pears



        HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears



        2. HTML Ordered List Demo

        List of Vegetables
        Carrot
        Radish
        Sweet Corn

        Fruits List
        Pomegrante
        Bananas
        Pears

        Kimenet:

        2. A kezdő attribútum

        A start attribútum meghatározza a rendezett listaszámok kezdő értékét. Bármelyik számmal kezdheti a kezdetektől, nem csak az alapértelmezett '1' számtól. Példa: kezdés = 6. Most már használták a HTML5-ben.

        Példa:

        A következő példában stílustípust használtam a felső_alfa számára, a = 3-tól kezdődővel, ezért a kimenetet a 'C' jelzi.



        Example for Nested list

        A világ leggazdagabb országai

        ol (list-style-type: felső alfa;
        font-weight: merészebb;
        )
        ol li span (
        betűsúly: normál;)

        1. Kvarr az olaj- és petrolkémiai készleteiről ismert
        2. Norvégia a természet szépségéről ismert, kőolajtermelővel
        3. Szingapúr a globális kereskedelmi központtal

        Kimenet:

        3.A fordított attribútum

        Ez a HTML5-be bevezetett új attribútum, amely jelzi, hogy az elemek fordított sorrendben jelennek meg a böngészőkben. Használni,

          ez egy logikai attribútum, amely bármilyen értéket felvesz a számláló megfordításához. bevallott
            ban, -ben
              címke.

              Példa:



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever


                HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              1. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                4. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever

              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever


                HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              1. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              2. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              3. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                4. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              4. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                5. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever


              5. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



                6. HTML Ordered List

                How to do Balle Technique
                Turn out
                Alignment
                Pointed Toes

                Balle Steps
                Seven Movements
                Plier
                Etendre
                Glisser
                Eliever



              HTML Ordered List

              How to do Balle Technique
              Turn out
              Alignment
              Pointed Toes

              Balle Steps
              Seven Movements
              Plier
              Etendre
              Glisser
              Eliever

              Kimenet:

              Következtetés

              Ezért a végén összefoglaltam, mit tett a megrendelt lista, és szinte minden böngészőben támogatott. Természetesen tetszőleges számú listát hozhat létre a HTML tag elemben, ebben a cikkben csak a kiválasztott példákra összpontosítottunk, hogy megértsük az alapvető megvalósítást. Ezért a téma tanulása nem talán a legnehezebb munka, mint a

              1. Az itt használt címke nagyon egyszerű megjegyezni.

                Ajánlott cikkek

                Ez egy útmutató a HTML-rendelt listához. Itt megvizsgáljuk a típusokat a HTML különböző attribútumaival és példákkal. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -

                1. HTML keretek
                2. HTML stílus attribútum
                3. Mi a HTML5?
                4. HTML szövegszerkesztők