PricingLoginStart free
HTML Academy · Oppitunti

Järjestetyt listat: ol, start, reversed ja type

Luo numeroituja listoja ja mukauta niiden järjestystä.

Oppitunti 2/413 vaihetta

Järjestetyt listat: ol, start, reversed ja type on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on järjestetty luettelo

Järjestetty luettelo näyttää kohteet järjestyksessä, jolla on merkitystä:

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

ol-elementti

<ol>-elementti (järjestetty luettelo) näyttää luettelokohteet oletusarvoisesti peräkkäisin numeroin:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

start-attribuutti

start-attribuutti määrittää aloitusnumeron:

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

reversed-attribuutti

reversed-attribuutti saa numeroinnin etenemään alaspäin ylöspäin laskemisen sijaan:

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

type-attribuutti

type-attribuutti vaihtaa luettelomerkin tyyliä:

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

type CSS:ssä ja HTML:ssä

Suosikaa CSS:n list-style-type-ominaisuutta HTML:n type-attribuutin sijaan:

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

li-elementin value-attribuutti

Voitte ohittaa yksittäisten luettelokohteiden numeroinnin value-attribuutilla:

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

Sisäkkäiset ol- ja ul-elementit

Luetteloita voi sijoittaa sisäkkäin — järjestettyjä ja järjestämättömiä luetteloita voi yhdistää:

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

Semanttiset käyttötapaukset

Käyttäkää <ol>-elementtiä, kun järjestyksellä on merkitystä:

  • Vaiheittaiset ohjeet
  • Sijoitetut tulokset (kymmenen parasta -luettelot)
  • Oikeudellisten asiakirjojen osiot
  • Reseptin vaiheet
  • Numeroituja osioita sisältävä sisällysluettelo

CSS:n counter-reset

CSS-laskureilla voitte hallita luettelon numeroinnin tyyliä kattavasti:

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ol-elementti murupolkunavigaatiossa

Murupolkunavigaatio on semanttisesti järjestetty luettelo:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

Pikatarkistus

Mikä attribuutti saa ol-elementin laskemaan taaksepäin?

Vastaa interaktiivisessa oppitunnissa

Kertaus: järjestetyt luettelot

Järjestetyn luettelon perusteet:

  • <ol> — järjestyksellä on merkitystä ja kohteet ovat peräkkäisessä järjestyksessä
  • start — aloita numerointi mukautetusta numerosta
  • reversed — laske alaspäin
  • type — vaihda luettelomerkkiä: 1, a, A, i, I
  • value <li>-elementissä — ohita yksittäisen kohteen numero
  • Käyttäkää CSS:n list-style-type-ominaisuutta ja laskureita, kun tarvitsette enemmän hallintaa
Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
40
Oppitunnit
159
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Järjestetyt listat: ol, start, reversed ja type” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Järjestetyt listat: ol, start, reversed ja type”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Järjestetyt listat: ol, start, reversed ja type”?

Luo numeroituja listoja ja mukauta niiden järjestystä. Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Järjestetyt listat: ol, start, reversed ja type”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Järjestämättömät listat: ul ja li
  2. Järjestetyt listat: ol, start, reversed ja type
  3. Kuvauslistat: dl, dt ja dd
  4. Sisäkkäiset listat ja listojen tyylittely
← Takaisin: HTML Academy