HTML podpira sezname treh različni tipi, od katerih ima vsak svoje parametre:

• – oštevilčen (s številkami ali črkami) seznam, katerega vsak element ima zaporedno številko (črko);
  1. – označen (neoštevilčen) seznam, pri katerem je poleg vsakega elementa nameščena oznaka (namesto številk ali črk, ki označujejo serijsko številko);

     • – seznam definicij je sestavljen iz parov ime/vrednost, vključno z izrazi in definicijami.

     Oštevilčeni seznami

     V oštevilčen seznam brskalnik samodejno vstavi številke elementov po vrstnem redu, začenši z določeno vrednostjo (običajno 1). To vam omogoča vstavljanje in brisanje elementov seznama, ne da bi motili oštevilčevanje, saj bodo preostale številke samodejno preračunane.
     Oštevilčeni seznami so ustvarjeni z blok elementom

     (iz angleškega Ordered List - oštevilčen seznam). Poleg kontejnerja
     za vsako postavko seznama je postavljen element
     1. (iz angleškega seznama - element seznama). Privzeto je oštevilčen seznam z arabskimi številkami.
        Oznaka
        ima naslednjo sintakso:
        1. element 1
        2. element 2
        3. element 3

        Oštevilčeni elementi seznama morajo vsebovati več elementov seznama, kot je prikazano v naslednjem primeru:

        Primer: oštevilčen seznam

        • Poskusite sami"

        Navodila po korakih

        1. Pridobite ključ
        2. Vstavite ključ v ključavnico
        3. Obrnite ključ za dva obrata
        4. Vzemite ključ iz ključavnice
        5. Odpri vrata

        Navodila po korakih

        1. Pridobite ključ
        2. Vstavite ključ v ključavnico
        3. Obrnite ključ za dva obrata
        4. Vzemite ključ iz ključavnice
        5. Odpri vrata

        Včasih boste ob ogledu obstoječih kod HTML naleteli na argument vrsta v elementu

        , ki se uporablja za označevanje vrste oštevilčenja (črke, latinica in arabske številke in tako naprej.). Sintaksa:

        Tukaj: tip – seznam simbolov:

        • A - velike latinične črke (A, B, C...);
        • a - male latinične črke (a, b, c...);
        • I - velike rimske številke (I, II, III...);
        • i - majhne rimske številke (i, ii, iii ...);
        • 1 - arabske številke (1, 2, 3 . . .) (privzeto uporabljene).

        Če želite, da se seznam začne s številko, ki ni 1, morate to določiti z atributom začetek oznaka

        .
        Naslednji primer prikazuje oštevilčen seznam z velikimi rimskimi številkami in začetno vrednostjo XLIX:

        Številčenje lahko začnemo tudi z atributom vrednost, ki je dodan elementu

        1. na naslednji način:

        7. V tem primeru se zaporedno oštevilčenje seznama prekine in od te točke se oštevilčenje začne znova, v tem primeru od sedem.

           Primer uporabe atributa vrednost oznaka

        8. , ki vam omogoča spreminjanje številke danega elementa seznama:

           V tem primeru bi bila "Prva postavka seznama" številka 1, "Druga postavka seznama" bi bila številka 7 in "Tretja postavka seznama" bi bila številka 8.

           Oblikovanje oštevilčenih seznamov s CSS

           Če želite spremeniti številke seznama, morate uporabiti lastnost list-style-type Liste slogov CSS:

           Slogi oštevilčenih seznamov

           Primer	Pomen	Opis
           a, b, c	nižja alfa	Male črke
           A, B, C	zgornja alfa	Velike črke
           i, ii, iii	spodnje-rim	Rimske številke z malimi črkami
           I, II, III	zgornji roman	Rimske številke z velikimi tiskanimi črkami

           Primer: uporaba lastnosti CSS list-style-type

           Označeni seznami

           Označeni seznami so v bistvu podobni oštevilčenim seznamom, le da ne vsebujejo zaporednega številčenja elementov. Označeni seznami so ustvarjeni z uporabo elementa bloka

           (iz angleškega neurejenega seznama - neoštevilčen seznam). Vsak element seznama se, kot pri oštevilčenih seznamih, začne z oznako
           • . Brskalnik zamakne vsak element seznama in samodejno prikaže oznake.
             Oznaka
             ima naslednjo sintakso:
             • Prva točka
             • Druga točka
             • Tretja točka

             V naslednjem primeru lahko vidite, da je pred vsako postavko seznama privzeto dodan majhen označevalec v obliki zapolnjenega kroga:

             Znotraj oznake

             • Ni nujno, da postavite samo besedilo; sprejemljivo je, da postavite kateri koli element pretočne vsebine (povezave, odstavke, slike itd.)

               Ugnezdeni seznami

               Vsak seznam je lahko ugnezden znotraj drugega. Znotraj elementa
             • Dovoljeno je ustvariti ugnezdeni seznam ali seznam druge ravni. Če želite ugnezditi seznam, opišite nov seznam znotraj elementa
             • že obstoječi seznam. Ko ugnezdite en označeni seznam v drugega, brskalnik samodejno spremeni slog označevanja za drugonivojski seznam. Vsak seznam je lahko ugnezden znotraj drugega. Naslednji primer prikazuje strukturo označenega seznama, ugnezdenega znotraj drugega elementa oštevilčenega seznama.

               Primer: ugnezdeni seznami

               • Poskusite sami"
               • ponedeljek
                 1. Pošlji pošto
                 2. Obisk urednika
                    • Izbira teme
                    • Dekorativno oblikovanje
                    • Končno poročilo
                 3. Večerni ogled sporočil
               • torek
                 1. Popravi urnik
                 2. Pošlji slike
               • sreda...
               • ponedeljek
                 1. Pošlji pošto
                 2. Obisk urednika
                    • Izbira teme
                    • Dekorativno oblikovanje
                    • Končno poročilo
                 3. Večerni ogled sporočil
               • torek
                 1. Popravi urnik
                 2. Pošlji slike
               • sreda...

               Oblikovanje označenih seznamov

               Za spremembo videz uporabiti je treba lastnost označevalca seznama list-style-type Liste slogov CSS:

               Naslednji primer prikazuje različne sloge označenih seznamov:

               Primer: slogi seznama oznak

               • Poskusite sami"
               • Kava
               • Kava
               • Kava
               • Kava

               Disk:

               • Kava
               • Mleko

               Krog:

               • Kava
               • Mleko

               kvadrat:

               • Kava
               • Mleko

               Brez:

               • Kava
               • Mleko

               Grafični označevalci.

               V HTML je mogoče ustvariti seznam z grafični markerji. Ena stvar je, če so označevalci seznama standardni krogi ali kvadrati, in povsem druga stvar, ko razvijalec sam izbere oznako v skladu z zasnovo strani. Da bi bili elementi seznama lepi, se pogosto uporabljajo majhne slike.
               Če želite običajni označevalec zamenjati z grafičnim, zamenjajte lastnost list-style-type na nepremičnino seznam-slog-slika in navedite URL slike:

               Primer: Grafični označevalci

               • Poskusite sami"

               Zodiakalna znamenja

               • Bik
               • dvojčka

               Zodiakalna znamenja

               • Oven
               • Bik
               • dvojčka

               Seznami definicij (opisov)

               Seznami definicij so zelo uporabni za ustvarjanje, na primer, vašega osebnega slovarja izrazov. Vsaka postavka seznama definicij ima dva dela: izraz in njegovo definicijo.
               Celoten seznam postavite v element

               (iz angleškega seznama definicij - seznam definicij). Vključuje oznake

               (iz angleškega Definition Term - definirana beseda, izraz) in

               (iz angleškega Definition Description - opis definiranega pojma).
               Seznami definicij se pogosto uporabljajo v znanstvenih, tehničnih in izobraževalnih publikacijah, z njimi sestavljajo glosarji, slovarji, referenčne knjige itd.

               Splošna struktura seznama opisov je naslednja:

               Prvi mandat

               Opis prvega termina

               Drugi mandat

               Opis drugega termina

               Naslednji primer prikazuje enega od možne uporabe seznam definicij:

               Primer: Seznam definicij

               • Poskusite sami"

               Svetovni splet - iz angleščine. Svetovni splet (WWW) je porazdeljen sistem, ki omogoča dostop do povezanih dokumentov, ki se nahajajo na različnih računalnikih, povezanih z internetom. Internet je niz omrežij, ki za prenos informacij uporabljajo en sam protokol za izmenjavo. Spletna stran je skupek posameznih spletnih strani, ki so med seboj povezane s povezavami in enotno zasnovo.

               Svetovni splet

               - iz angleščine Svetovni splet (WWW) je porazdeljen sistem, ki omogoča dostop do povezanih dokumentov, ki se nahajajo na različnih računalnikih, povezanih z internetom.

               Internet

               — niz omrežij, ki za prenos informacij uporabljajo en sam protokol za izmenjavo.

               Spletna stran

               - nabor posameznih spletnih strani, ki so med seboj povezane s povezavami in enotno obliko.

               Privzeto je besedilo izraza pritisnjeno na levi rob okna brskalnika, opis pojma pa se nahaja spodaj in pomaknjen v desno.

               Ko je treba na spletni strani nekaj oštevilčiti, se najpogosteje uporablja urejen seznam (

               ). Smiselno je pričakovati, da obstaja želja po delu na oblikovanju teh številk. V CSS pa je uresničitev te želje precej problematična, a na srečo ne nemogoča. Roger Johansson v svoji vadnici pokaže, kako je to mogoče implementirati z uporabo psevdoelementa:before, ki lahko nastavi lastnost vsebine na counter.

               Psevdoelement:before se uporablja za prikaz želene vsebine pred elementom, ki mu je dodan. Deluje v povezavi z lastnostjo vsebine.

               Vendar je vredno pojasniti, da je oštevilčene števce mogoče uporabiti za več kot le urejene sezname. Denimo, da želite oštevilčiti seznam definicij (

               ), ki je sestavljen iz vprašanj in odgovorov na pogosta vprašanja.

               Oznaka bo videti nekako takole:

               Koliko lesa bi sekala lesna glava, če bi lesna glava lahko sekala les?

               1,000,000

               Kolikšna je zračna hitrost neobremenjene lastovke?

               kaj misliš Afriška ali evropska lastovka?

               Zakaj je piščanec prečkal cesto?

               Da pridem na drugo stran

               Vsako novo

               element je novo vprašanje, zato jih oštevilčimo. Videti bo zelo preprosto:

               Lastnost vsebine vam omogoča, da v besedilo spletne strani vstavite ustvarjeno vsebino, ki prvotno ni prisotna v besedilu.
               counter value Natisne vrednost števca, podanega z lastnostjo counter-reset.

               Lastnost ponastavitve števca nastavi identifikator za števec in nastavi začetno vrednost.
               Lastnost protipovišanja podaja korak, za katerega se poveča vrednost števca.

               Pogosta vprašanja ( ponastavitev števca: my-badass-counter; ) .faq dt:before ( content: counter(my-badass-counter); counter-increment: my-badass-counter; )

               Psevdoelementu :before je mogoče dodeliti poljuben slog. Na primer:

               

               Ko obvladate to lastnost, lahko številčite, kar želite. Pred dnevi sem na primer objavila enega svojih najljubših receptov in vsak korak/fotko oštevilčila z rimskimi številkami. To mi je služilo kot opomnik: ni nujno, da so števila decimalna.

               

               Številčna sorta je predstavljena kot vrednosti lastnosti tipa sloga seznama.
               namreč:

               

               Vse, kar je potrebno, je označiti želeno možnost v vrednosti števca.

               Vsebina: števec (moj-števec, spodnji-roman);

               Prihodnost CSS3

               Zgornji material je pomemben za danes, vendar je bled v primerjavi z možnostmi, ki se skrivajo v seznamih CSS3. Ko jih brskalniki podpirajo, bo na primer mogoče neposredno delati z označevalci seznamov.

               Li::marker (širina: 30 slikovnih pik; poravnava besedila: desno; desni rob: 10 slikovnih pik; prikaz: vstavljeni blok; ) ol (slog seznama: simboli ("*""2020""2021""A7"); ) ul ( list-style-type: "tu mora biti zvezdica)"; )

               Če ste kdaj poskušali spremeniti sloge CSS številk vrstic (števk) v urejenih seznamih

               , potem ste verjetno naleteli na težave. Nemogoče je doseči sloge teh elementov z uporabo izbirnikov CSS. Toda precej pogosto oblikovanje vmesnika vključuje spreminjanje njegove barve, ozadja, velikosti itd.

               Tukaj je najenostavnejši primer neslogovnega seznama:

               html

               1. Posaditi drevo
               2. Zgraditi hišo
               3. Vzgoji sina

               Oglejmo si več načinov za rešitev zgornje težave.

               Tradicionalno neroden način.

               Tradicionalni način za rešitev te težave je skrivanje številk vrstic, ki jih samodejno dodeli brskalnik. V tem primeru se uporabi lastnost sloga seznama: brez; .

               css

               li( list-style: none; ) .num( barva: bela; ozadje: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;)

               html

               1. 1 Posaditi drevo
               2. 2 Zgraditi hišo
               3. 3 Vzgoji sina

               Strinjam se, izgleda odvečno in neprilagodljivo. Avtomatsko postavljene zaporedne številke skrijemo in jih nadomestimo z ročno določenimi vrednostmi, zamašimo postavitev itd.

               Poglejmo, kako lahko dosežemo enak rezultat, ne da bi zamašili postavitev in uporabili psevdoelement::before in lastnosti CSS content, counter-increment, counter-reset.

               Lep in pravilen način.

               Najprej bomo zagotovili kodo in demo, nato pa bomo ugotovili, kaj je kaj.

               css

               ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); barva: bela; ozadje: #2980B9; display: inline-block; poravnava besedila: sredina; rob: 5px 10px; višina vrstice: 40px; širina: 40px; višina: 40px; )

               html

               1. Posaditi drevo
               2. Zgraditi hišo
               3. Vzgoji sina

               Kot lahko vidite, koda html ostaja čista in lepa. V tem primeru se vsi stili elementov seznama prenesejo v css.

               Poglejmo točko za točko:

               • li::prej– ustvari psevdoelement znotraj seznama, ki zavzame mesto prvega otroka.
               • ponastavitev števca:myCounter;– ponastavi števec css myCounter znotraj vsakega
                 .
                 1. protiporast: myCounter;– poveča števec css myCounter za vsak psevdoelement::before.
                 2. content:counter(myCounter);– natisne trenutno vrednost števca myCounter znotraj psevdoelementa::before.

               Več podrobnosti o števcih css najdete v

               
               

               Precej pogosto morate uporabiti oštevilčevanje: pri ustvarjanju različnih seznamov, seznamov, oblikovanju kazala ali kazala vsebine itd.

               CSS uporablja števce za avtomatizacijo postopka oštevilčevanja.

               Začnimo s preprostim primerom. Nato bomo na bolj zapleten način ustvarili ugnezdeni seznam s samodejnim številčenjem njegovih elementov in podpostavk.

               Identifikacija števca

               Najprej morate identificirati merilnik.

               Z uporabo lastnosti ponastavitve števca se števcu dodeli ime in začetna vrednost. Ime je lahko poljubno, vendar se ne sme začeti s številko.

               Delček kode:

               Ta vnos pravi, da za oznako nameščen je števec z imenom številka z začetno vrednostjo 3.

               Privzeto je začetna vrednost števca 0.

               Povečanje števca

               Za to se uporablja lastnost protiprirastka. Uporablja se tudi za določanje prirastkov števca – števila, za katerega se bo vrednost števca povečala.

               Delček kode:

               telo ( protiponastavitev : številka 3 ;)
               telo p ( protiprirast : številka 3 ; }

               Ta delček kode pravi, da odstavki ( oznaka

               ) v telesu dokumenta bo oštevilčen s števcem številk v korakih po 3.

               Prvi odstavek bo oštevilčen s 6, saj je začetna vrednost števca 3, njegov prirast pa 3.

               Privzeta vrednost za prirast števca je 1.

               Zdaj so nastavljeni vsi potrebni parametri števca: ime, začetna vrednost, prirast in element, ki bo oštevilčen. Nadalje....

               Prikaz števca

               Zdaj morate prikazati vrednost števca in nastaviti pravila za njegovo lokacijo. To se izvede z uporabo lastnosti vsebine ter psevdoelementov pred in po.

               Lastnost vsebine vstavi vsebino pred ( prej) ali po ( po) navedenega elementa.

               Delček kode:

               telo ( protiponastavitev : številka 3 ;)
               telo p:za (protiprirast: številka 3 ; vsebina : " je enako " števec (število) "." ;)

               Prejšnjemu delčku kode smo torej dodali lastnost vsebine, ki natisne besedo "je enako", ki ji sledi vrednost števila števca in pika "." . Vse to je vstavljeno na stran za vsebino odstavka ( oznaka

               ), kar pravi psevdoelement after.

               Končno...

               Spodaj je opisan primer.

               Delček kode:

               
               
               
               
               

               
               

               2 krat 3

               
               

               3 krat 3

               
               

               4 krat 3

               
               

               5 krat 3

               
               

               rezultat:

               Ugnezdeni seznami s samodejnim številčenjem

               Oglejmo si primer uporabe števcev za avtomatizacijo postopka oštevilčevanja ugnezdenih seznamov.

               Morali bi že vedeti, tako iz HTML kot iz preučevanja seznamov v CSS, da so elementi seznama oštevilčeni samodejno. Toda to številčenje je najpreprostejše.

               Kaj pa samodejno številčenje podčlenkov, kot so 1.1, 1.2, 2.1, 2.2 itd.?

               Ta problem je rešen s števci, ki vam omogočajo avtomatizacijo postopka oštevilčenja ugnezdenih seznamov.

               Delček kode:

               
               
               
               
               

               
               

               1. Prvi element seznama
               
               
               1. Prvi pododstavek 1. odstavka
               
               
               2. Drugi pododstavek 1. odst
               
               
               2. Drugi element seznama
               
               
               1. Prvi pododstavek 2. odstavka
               
               
               2. Drugi pododstavek 2. odstavka
               
               
               3. Tretji element na seznamu
               
               
               1. Prvi pododstavek 3. odstavka
               
               
               2. Drugi pododstavek 3. odst
               
               
               3. Tretji pododstavek 3. odst
               
               

               
               

               rezultat:

               Tako avtomatizirate postopek oštevilčenja ugnezdenih seznamov!

               Dober dan!

               V tem članku boste spoznali vse možnosti seznamov, razumeli, kako narediti oštevilčen seznam in obvladali oznake, ki vam bodo pomagale spremeniti preprost seznam z oznakami v bolj zanimivega in opaznega s poljubnimi točkami. Po zaključku lekcije boste razumeli, kje se seznami uporabljajo in v kakšnih okoliščinah se lahko uporabljajo.

               Ta članek je tretji v tem kratkem tečaju o osnovah HTML. Preden preberete to lekcijo, priporočam, da pregledate prejšnji dve:

               Članek se je šele začel in že lahko opazite uporabo standardnega seznama z oznakami. Na moji spletni strani je videti precej preprosto: na levi strani je majhna vdolbina s črto in kvadratnim markerjem. Kasneje v članku bomo podrobno preučili, katere vrste markerjev obstajajo, kako narediti številke in tudi, kako narediti svoj marker.

               V vsakem delu članka bo ustvarjanje določenih seznamov opremljeno s podrobnimi pojasnili za vstavljanje posameznega seznama.

               1. Označeni seznami v HTML

               Ta vrsta seznama se uporablja za navajanje niza elementov s podobnim pomenom v besedilu. To je lahko seznam povezav, ki so povezane z isto temo, podrobna razlaga za posamezne dele besedila. Toda poglejmo, kako so označeni seznami videti v kodi:

               In tako izgleda v brskalniku:

               riž. 1.1. Standardni pogled neurejenega seznama z oznakami HTML v brskalniku

               1.1 Standardne oznake za označene sezname

               Na zgornji sliki (slika 1.1.) lahko vidite krogce na začetku vsakega menijskega elementa. To je marker. Privzeto je v brskalniku prikazan kot izpolnjen krog. V HTML obstaja več vrst označevalcev: zapolnjen krog, prazen krog in kvadrat. Ne potrebujejo nobenih slik CSS ali slik tretjih oseb:

               1.2 Oznaka seznama v obliki praznega kroga

               Vrednosti atributov poznate, zdaj pa si poglejmo, kako v kodi narediti seznam z oznakami HTML. Iz zgornje tabele smo izbrali drugo vrednost "krog" za atribut vrste in jo nastavili na naš označeni seznam:

               <html > <glava > <naslov > Primer označenega seznama s praznim krogom</naslov> </glava> <telo > <p> zvezdice:</p> <ul type = "circle" > <li > Sirius</li> <li > Arktur</li> <li > Pollux</li> <li > Betelgeza</li> <li > sonce</li> </ul> </telo> </html>

               Poglejmo takoj, kako bo ta koda videti v brskalniku:

               riž. 1.2. Pogled označevalca seznama kot krog v brskalniku

               1.3 Označevalnik seznama v obliki kvadrata

               Poglejmo še zadnji primer s kvadratnim označevalcem za seznam HTML:

               Bodite pozorni na marker, postal je kvadraten:

               riž. 1.3. Pogled na označevalnik seznama kot kvadrat v brskalniku

               Pomembna opomba: Ta metoda se ne uporablja več za ustvarjanje slogov za označene sezname. Obstaja jasna ločitev med CSS (preberite, kaj je CSS) in HTML. HTML je za označevanje, CSS pa za ustvarjanje privlačnega videza.

               Koda, ki vsebuje ta atribut pri podajanju trenutne vrste dokumenta kot HTML5 (""), bo med preverjanjem povzročilo napako. Če še niste slišali, kaj je preverjanje, potem je to mesto za vas.

               Napaka bo naslednja:

               riž. 1.4. Napaka v validatorju pri uporabi atributa "type" seznama

               Razvrstili smo označene sezname. Zdaj pa pojdimo na oštevilčene sezname, nato pa si oglejmo ugnezdene sezname in druge že pripravljeni primeri, ki se najpogosteje uporabljajo na resničnih straneh.

               2. Oštevilčeni seznami v HTML

               Za razliko od prejšnje vrste seznamov imajo oštevilčeni seznami eno pomembno lastnost: samodejno so oštevilčeni. To je uporabno, ko morate oštevilčiti velik seznam. Če to storite ročno, boste potrebovali veliko časa in še vedno se lahko zmedete. Oštevilčen seznam je določen z oznako. Kako to izgleda v praksi:

               Primer oštevilčenega seznama:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <glava > <naslov > Primer standardnega oštevilčenega seznama</naslov> </glava> <telo > <p> Od ena do pet:</p> <ol > <li > najprej</li> <li > drugič</li> <li > Tretjič</li> <li >Četrtič</li> <li > Petič</li> </ol> </telo> </html>

               Tako izgleda oštevilčen seznam: standardne nastavitve v brskalniku:

               riž. 2.1. Oštevilčen seznam v brskalniku s standardnimi nastavitvami

               Tako kot njegov predhodnik (bullet list) ima svoje sloge za prikaz številk. Običajno oštevilčenje ni edina vrsta oznake za oštevilčen seznam v HTML.

               2.1 Standardne oznake za oštevilčene sezname

               Tukaj ne izbiramo med tremi vrstami markerjev, ampak med petimi:

               Ime markerja	vrednost atributa "type".	Primer seznama
               Oznake v obliki arabskih številk	1	Badminton Baseball
               Oznake v obliki malih latiničnih črk	a	Chomolungma Čogori Kančendzenga
               Označevalci v obliki velikih latiničnih črk	A	Summit Plummet Jezna ulica Insano
               Oznake z malimi črkami rimskih številk	jaz	Filipinsko morje Arabsko morje koralno morje
               Oznake z velikimi črkami rimskih številk	jaz	rdeča Zelena Modra

               2.2 Lastno številčenje v seznamu HTML

               Poleg običajnega izpisa oštevilčenega seznama lahko oštevilčenje začnemo tudi s poljubno številko. Če želite to narediti, morate nastaviti dodatni atribut "start" . To oštevilčenje deluje na vseh vrstah označevalcev za oštevilčene sezname. Kako to izgleda v praksi:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <glava > <naslov >Številčenje po meri za oštevilčen seznam</naslov> </glava> <telo > <p> Začnemo šteti od dvanajst:</p> <ol type = "a" start = "12" > <li > Dvanajst</li> <li > trinajst</li> <li >Štirinajst</li> <li > Petnajst</li> <li >Šestnajst</li> </ol> </telo> </html>

               Takole bo videti na pravem spletnem mestu:

               riž. 2.2. Številčenje iz poljubne številke v oštevilčenem seznamu

               Na zgornji sliki smo seznam oštevilčili od dvanajst, pri tem pa naredili oznake v obliki malih latiničnih črk. Zdaj mislim, da je postalo jasno, kako uporabiti te atribute v svojih projektih.

               No, zdaj pa pojdimo na ugnezdene sezname HTML.

               3. Kako narediti večnivojski (gnezdeni) seznam v HTML

               Večnivojski seznami se na spletnem mestu uporabljajo za izdelavo menijev. Ta meni je najpogosteje videti kot spustni meni navzdol (lekcija o) ali levi ali desni spustni meni. Takšni meniji omogočajo shranjevanje drugih elementov menija v kompaktni obliki.

               Z uporabo modelov avtomobilov kot primera bomo zgradili večnivojski seznam v HTML:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

               <html > <glava > <naslov > HTML ugnezdeni seznam z oznakami</naslov> </glava> <telo > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </telo> </html>

               Opazite, kako je večnivojski seznam videti v brskalniku:

               riž. 3.1. Primer večnivojskega seznama v HTML

               Naredili smo večnivojski seznam z uporabo označenih (tag

               ). Večnivojski seznam z modeli Citroen se je pojavil z drugimi oznakami. Glavni seznam ima zapolnjene oznake, seznam 2. stopnje pa prazne krogce. Ampak, kot se spomnite, lahko z uporabo atributa "type" ponovno definiramo oznake (bolje je nastaviti).

               Lahko pa se združimo večnivojski seznami oštevilčen in označen kot sledi:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

               <html > <glava > <naslov > Oštevilčeni, označeni in večnivojski seznami v HTML</naslov> </glava> <telo > <ul > <li > Prva skupina tulipanov<ol > <li > Prvi razred<ul > <li > Enostavni zgodnji tulipani</li> </ul> </li> <li > Drugi razred<ul > <li > Terry tulipani</li> </ul> </li> </ol> </li> </ul> </telo> </html>

               V zgornjem primeru imamo dvojno gnezdenje (2 ravni). Najprej je vključen seznam dveh razredov tulipanov; imamo ga oštevilčenega. Nato je označeni seznam ugnezden znotraj vsakega elementa na oštevilčenem seznamu.

               Poglejmo, kako izgleda v brskalniku:

               riž. 3.2. Primer večstopenjskega oštevilčenega seznama v označeni seznam v brskalniku

               4. Uporabni materiali na seznamih HTML

               To so informacije, ki zahtevajo razumevanje lastnosti CSS. Če želite to narediti, priporočam, da preučite naslednje lekcije: . Vsi primeri bodo takoj zraven izvorna koda in so razdeljeni na zavihke HTML (struktura), CSS (slogi) in Result (rezultat).

               4.1 Kako narediti seznam HTML v niz

               Pretvorba seznama HTML v niz bo morda potrebna pri ustvarjanju vodoravnega menija. To je zelo enostavno narediti:

               4.2 Kako narediti seznam HTML brez ikone

               Lastnost list-style-type v CSS je odgovorna za to (več podrobnosti):

               4.3 Kako centrirati seznam v HTML

               Element seznama je element bloka, zato ga je treba centrirati z oblazinjenjem. Ampak obstaja ena pomembna točka— izrecno moramo določiti širino, da bo poravnava delovala:

               4.4 Kako narediti seznam v HTML s slikami

               Samo ena lastnost CSS, list-style-image, je dovolj. Znotraj naslova URL navedite naslov pred ikono. Želim samo opozoriti, da je bolje takoj izbrati majhno sliko, ker je višina vrstice seznama odvisna od tega:

               4.5 Seznam z oznakami HTML svojo oznako

               V tem primeru morate vnaprej povezati ikone pisave (na primer FontAwesome). Nato lahko naredite katero koli ikono namesto standardnega označevalca:

               4.6 Kako narediti seznam v HTML v več stolpcih

               Za izdelavo seznama v več stolpcih bomo uporabili Lastnost CSS column-count (lastnost je podprta samo v naslednjih brskalnikih: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Prav tako morate nastaviti višino seznama, da vidite razdelitev na več stolpcev:

               5. Kombinirani seznam HTML

               Če želite ustvariti kombinirano polje HTML je boljši Samo uporabite pisave ikon. Na primer Flaticon ali Fontawesome.

               Te informacije so že za napredne ljudi, zato boste najprej potrebovali.

               6. Vadite delo s seznami

               V spodnjem videu si lahko ogledate celotno delo s seznami HTML v praksi:

               Za utrditev prejetih informacij priporočam, da vse korake opravite ročno. Preizkusite različne oznake za sezname, ustvarite oštevilčene sezname, nato pa nadaljujte z večnivojskimi (gnezdenimi) seznami in eksperimentirajte z njimi.

               Tu zaključimo s seznami in nadaljujemo z naslednjo lekcijo o slikah.

               Če potrebujete več kot le osnove izdelave spletnih strani, ampak želite obvladati poklic Front-end razvijalca, potem bodite pozorni na tečaj spletne šole Netology - "" in spletne šole Skillbox in tečaj "".

               Tečaj je dolgotrajen, vendar boste prejeli strukturirano znanje, s katerim se lahko takoj zaposlite, če vas to področje zanima.