HTML podporuje zoznamy troch odlišné typy, z ktorých každý má svoje vlastné parametre:

• – očíslovaný (pomocou číslic alebo písmen) zoznam, ktorého každý prvok má poradové číslo (písmeno);
  1. – zoznam s odrážkami (nie očíslovaný), vedľa každého prvku je umiestnená značka (namiesto číselných alebo abecedných znakov označujúcich poradové číslo);

     • – zoznam definícií pozostáva z párov názov/hodnota vrátane termínov a definícií.

     Číslované zoznamy

     Do očíslovaného zoznamu prehliadač automaticky vkladá čísla prvkov v poradí, počnúc určitou hodnotou (zvyčajne 1). To vám umožní vkladať a mazať položky zoznamu bez narušenia číslovania, pretože zostávajúce čísla sa automaticky prepočítajú.
     Číslované zoznamy sa vytvárajú pomocou prvku bloku

     (z anglického Ordered List - číslovaný zoznam). Vedľa kontajnera
     pre každú položku zoznamu je umiestnený prvok
     1. (z anglického List Item – položka zoznamu). Predvolený je očíslovaný zoznam s arabskými číslami.
        Tag
        má nasledujúcu syntax:
        1. prvok 1
        2. prvok 2
        3. prvok 3

        Položky číslovaného zoznamu musia obsahovať viacero položiek zoznamu, ako je znázornené v nasledujúcom príklade:

        Príklad: Číslovaný zoznam

        • Skúste to sami"

        Pokyny krok za krokom

        1. Získajte kľúč
        2. Vložte kľúč do zámku
        3. Otočte kľúčom o dve otáčky
        4. Vytiahnite kľúč zo zámky
        5. Otvor dvere

        Pokyny krok za krokom

        1. Získajte kľúč
        2. Vložte kľúč do zámku
        3. Otočte kľúčom o dve otáčky
        4. Vytiahnite kľúč zo zámky
        5. Otvor dvere

        Niekedy pri pohľade na existujúce HTML kódy narazíte na argument typu v prvku

        , ktoré sa používa na označenie typu číslovania (písmená, rímske a arabské číslice a tak ďalej.). Syntax:

        Tu: typ – zoznam symbolov:

        • A - veľké latinské písmená (A, B, C...);
        • a - malé latinské písmená (a, b, c...);
        • I - veľké rímske číslice (I, II, III...);
        • i - malé rímske číslice (i, ii, iii...);
        • 1 - Arabské číslice (1, 2, 3 . . .) (štandardne používané).

        Ak chcete, aby zoznam začínal iným číslom ako 1, mali by ste to zadať pomocou atribútu začať tag

        .
        Nasledujúci príklad zobrazuje očíslovaný zoznam s veľkými rímskymi číslicami a počiatočnou hodnotou XLIX:

        Číslovanie je možné spustiť aj pomocou atribútu hodnotu, ktorý sa pridáva k prvku

        1. nasledujúcim spôsobom:

        7. V tomto prípade sa postupné číslovanie zoznamu preruší a od tohto bodu začne číslovanie znova, v tomto prípade od sedmičky.

           Príklad použitia atribútu hodnotu tag

        8. , ktorý vám umožňuje zmeniť číslo daného prvku zoznamu:

           V tomto príklade by „Prvá položka zoznamu“ mala číslo 1, „Druhá položka zoznamu“ by mala číslo 7 a „Tretia položka zoznamu“ by mala číslo 8.

           Formátovanie číslovaných zoznamov pomocou CSS

           Ak chcete zmeniť čísla zoznamu, mali by ste použiť vlastnosť list-style-type CSS štýly:

           Štýly číslovaného zoznamu

           Príklad	Význam	Popis
           a, b, c	nižšia-alfa	Malými písmenami
           A, B, C	horná alfa	Veľké písmená
           i, ii, iii	nižšia rímska	Rímske číslice malými písmenami
           I, II, III	horná romantika	Rímske číslice veľkými písmenami

           Príklad: Použitie vlastnosti CSS list-style-type

           Zoznamy s odrážkami

           Zoznamy s odrážkami sú v podstate podobné číslovaným zoznamom, len neobsahujú postupné číslovanie položiek. Zoznamy s odrážkami sa vytvárajú pomocou prvku bloku

           (z anglického Unordered List – nečíslovaný zoznam). Každý prvok zoznamu, rovnako ako v číslovaných zoznamoch, začína značkou
           • . Prehliadač odsadí každú položku zoznamu a automaticky zobrazí odrážky.
             Tag
             má nasledujúcu syntax:
             • Prvý bod
             • Druhý bod
             • Tretí bod

             V nasledujúcom príklade môžete vidieť, že v predvolenom nastavení sa pred každú položku zoznamu pridá malá značka vo forme vyplneného kruhu:

             Vo vnútri štítku

             • Nie je potrebné umiestniť iba text, je prijateľné umiestniť akýkoľvek prvok streamovaného obsahu (odkazy, odseky, obrázky atď.)

               Vnorené zoznamy

               Akýkoľvek zoznam môže byť vnorený do iného. Vo vnútri prvku
             • Je povolené vytvoriť vnorený zoznam alebo zoznam druhej úrovne. Ak chcete vnoriť zoznam, opíšte nový zoznam vo vnútri prvku
             • už existujúci zoznam. Keď vnoríte jeden zoznam s odrážkami do druhého, prehliadač automaticky zmení štýl odrážok pre zoznam druhej úrovne. Akýkoľvek zoznam môže byť vnorený do iného. Nasledujúci príklad ukazuje štruktúru zoznamu s odrážkami vnoreného do druhej položky číslovaného zoznamu.

               Príklad: Vnorené zoznamy

               • Skúste to sami"
               • pondelok
                 1. Poslať mail
                 2. Návšteva redakcie
                    • Výber témy
                    • Dekoratívny dizajn
                    • Posledná správa
                 3. Večerné prezeranie správ
               • utorok
                 1. Revidovať rozvrh
                 2. Posielajte obrázky
               • streda...
               • pondelok
                 1. Poslať mail
                 2. Návšteva redakcie
                    • Výber témy
                    • Dekoratívny dizajn
                    • Posledná správa
                 3. Večerné prezeranie správ
               • utorok
                 1. Revidovať rozvrh
                 2. Posielajte obrázky
               • streda...

               Formátovanie zoznamov s odrážkami

               Pre zmenu vzhľad mala by sa použiť vlastnosť značky zoznamu list-style-type CSS štýly:

               Nasledujúci príklad ukazuje rôzne štýly zoznamov s odrážkami:

               Príklad: Štýly zoznamu odrážok

               • Skúste to sami"
               • Káva
               • Káva
               • Káva
               • Káva

               disk:

               • Káva
               • Mlieko

               Kruh:

               • Káva
               • Mlieko

               Námestie:

               • Káva
               • Mlieko

               Žiadne:

               • Káva
               • Mlieko

               Grafické značky.

               V HTML je možné vytvoriť zoznam pomocou grafické značky. Jedna vec je, keď sú značkami zoznamu štandardné kruhy alebo štvorce, a iná vec, keď vývojár vyberie značku v súlade s dizajnom stránky. Aby boli položky zoznamu krásne, často sa používajú malé obrázky.
               Ak chcete nahradiť bežnú značku grafickou, nahraďte vlastnosť list-style-type na nehnuteľnosť list-style-image a uveďte adresu URL obrázka:

               Príklad: Grafické značky

               • Skúste to sami"

               Znamenia zverokruhu

               • Býk
               • Blíženci

               Znamenia zverokruhu

               • Baran
               • Býk
               • Blíženci

               Zoznamy definícií (popisy)

               Zoznamy definícií sú veľmi užitočné pri vytváraní napríklad vášho osobného slovníka pojmov. Každá položka zoznamu definícií má dve časti: pojem a jeho definíciu.
               Celý zoznam vložíte do prvku

               (z anglického Definition List - zoznam definícií). Obsahuje značky

               (z anglického Definition Term - definované slovo, pojem) a

               (z anglického Definition Description - popis definovaného pojmu).
               Zoznamy definícií sa často používajú vo vedeckých, technických a vzdelávacích publikáciách a používajú ich na zostavovanie slovníkov, slovníkov, referenčných kníh atď.

               Všeobecná štruktúra zoznamu popisov je nasledovná:

               Prvý termín

               Popis prvého termínu

               Druhý termín

               Opis druhého termínu

               Nasledujúci príklad ukazuje jeden z možné využitie zoznam definícií:

               Príklad: Zoznam definícií

               • Skúste to sami"

               World Wide Web – z angličtiny. World Wide Web (WWW) je distribuovaný systém, ktorý poskytuje prístup k súvisiacim dokumentom umiestneným na rôznych počítačoch pripojených k internetu. Internet je súbor sietí, ktoré na prenos informácií používajú jeden výmenný protokol. Webstránka je súbor jednotlivých webových stránok, ktoré sú navzájom prepojené odkazmi a jednotným dizajnom.

               Celosvetový web

               - z angličtiny World Wide Web (WWW) je distribuovaný systém, ktorý poskytuje prístup k súvisiacim dokumentom umiestneným na rôznych počítačoch pripojených k internetu.

               Internet

               — súbor sietí, ktoré na prenos informácií používajú jeden výmenný protokol.

               webové stránky

               - súbor jednotlivých webových stránok, ktoré sú navzájom prepojené odkazmi a jednotným dizajnom.

               Štandardne je text výrazu stlačený na ľavý okraj okna prehliadača a popis výrazu je umiestnený nižšie a posunutý doprava.

               Keď je potrebné na webe niečo očíslovať, najčastejšie sa používa usporiadaný zoznam (

               ). Je rozumné očakávať, že môže existovať túžba pracovať na návrhu týchto čísel. V CSS je však realizácia tejto túžby dosť problematická, no, našťastie, nie nemožná. Roger Johansson vo svojom návode ukazuje, ako sa to dá implementovať pomocou pseudoprvku:before, ktorý dokáže nastaviť vlastnosť content na counter .

               Pseudoprvok:before sa používa na zobrazenie požadovaného obsahu pred prvkom, do ktorého je pridaný. Funguje v spojení s vlastnosťou content.

               Je však potrebné objasniť, že očíslované počítadlá možno použiť aj na viac než len objednané zoznamy. Predpokladajme napríklad, že chcete očíslovať zoznam definícií (

               ), ktorý pozostáva z otázok a odpovedí na vaše často kladené otázky.

               Označenie bude vyzerať asi takto:

               Koľko dreva by skľučovadlo skľučovadlo, keby skľučovadlo na drevo dokázalo skľučovať drevo?

               1,000,000

               Aká je rýchlosť vzduchu nenaloženej lastovičky?

               Čo tým myslíte? Africká alebo európska lastovička?

               Prečo kura prešlo cez cestu?

               Aby som sa dostal na druhú stranu

               Každý nový

               prvok je nová otázka, preto na ne použijeme číslovanie. Bude to vyzerať veľmi jednoducho:

               Vlastnosť content umožňuje vložiť vygenerovaný obsah do textu webovej stránky, ktorý sa v texte pôvodne nenachádza.
               hodnota počítadla Vytlačí hodnotu počítadla zadanú vlastnosťou resetovania počítadla.

               Vlastnosť counter-reset nastavuje identifikátor pre počítadlo a nastavuje počiatočnú hodnotu.
               Vlastnosť counter-increment určuje krok, o ktorý sa zvýši hodnota počítadla.

               Faq ( counter-reset: my-badass-counter; ) .faq dt:before ( content: counter(my-badass-counter); counter-increment: my-badass-counter; )

               Pseudoprvku :before možno priradiť ľubovoľný štýl. Napríklad:

               

               Po zvládnutí tejto vlastnosti môžete číslovať, čo chcete. Na druhý deň som napríklad zverejnil jeden z mojich obľúbených receptov a každý krok/fotku som očísloval rímskymi číslicami. Toto mi slúžilo ako pripomienka: čísla nemusia byť desatinné.

               

               Číselná odroda je reprezentovaná ako hodnoty vlastnosti typu list-style.
               menovite:

               

               Všetko, čo je potrebné, je uviesť požadovanú možnosť v hodnote počítadla.

               Obsah: počítadlo (moje počítadlo, nižšie rímske);

               Budúcnosť CSS3

               Vyššie uvedený materiál je pre dnešok aktuálny, no v porovnaní s možnosťami, ktoré sú skryté v zoznamoch CSS3, bledne. Keď ich prehliadače podporia, bude možné napríklad priamo pracovať so značkami zoznamu.

               Li::marker ( šírka: 30px; zarovnanie textu: vpravo; okraj-vpravo: 10px; display: inline-block; ) ol ( list-style: symbols("*""2020""2021""A7"); ) ul ( list-style-type: "tu by mala byť hviezdička)"; )

               Ak ste sa niekedy pokúšali zmeniť štýly CSS čísel riadkov (číslic) v usporiadaných zoznamoch

               , potom ste pravdepodobne narazili na problémy. Nie je možné dosiahnuť štýly týchto prvkov pomocou selektorov CSS. Dizajn rozhrania však často zahŕňa zmenu farby, pozadia, veľkosti atď.

               Tu je najjednoduchší príklad neštylizovaného zoznamu:

               html

               1. Zasadiť strom
               2. Postaviť dom
               3. Vychovať syna

               Pozrime sa na niekoľko spôsobov, ako vyriešiť vyššie uvedený problém.

               Tradične neohrabaný spôsob.

               Tradičným spôsobom riešenia tohto problému je skrytie čísel riadkov, ktoré sú automaticky priradené prehliadačom. V tomto prípade sa použije vlastnosť list-style: none; .

               css

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

               html

               1. 1 Zasadiť strom
               2. 2 Postaviť dom
               3. 3 Vychovať syna

               Súhlasíte, vyzerá to nadbytočne a nepružne. Skryjeme automaticky pridelené poradové čísla a nahradíme ich ručne zadanými hodnotami, neporiadok v rozložení atď.

               Pozrime sa, ako môžeme dosiahnuť rovnaký výsledok bez upchania layoutu a použitia pseudoprvku::before a vlastností CSS content , counter-increment , counter-reset .

               Krásny a správny spôsob.

               Najprv poskytneme kód a demo a potom prídeme na to, čo je čo.

               css

               ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); farba: biela; pozadie: #2980B9; display: inline-block; zarovnanie textu: okraj: 5px 10px; výška riadku: 40px;

               html

               1. Zasadiť strom
               2. Postaviť dom
               3. Vychovať syna

               Ako vidíte, html kód zostáva čistý a krásny. V tomto prípade sa všetky štýly prvkov zoznamu prenesú do css.

               Pozrime sa bod po bode:

               • li::predtým– vytvorí vo vnútri zoznamu pseudoprvok, ktorý nahradí prvé dieťa.
               • counter-reset:myCounter;– vynuluje počítadlo css myCounter v každom z nich
                 .
                 1. protiprírastok: myCounter;– zvýši css počítadlo myCounter pre každý pseudoelement::before .
                 2. content:counter(myCounter);– vypíše aktuálnu hodnotu počítadla myCounter vnútri pseudoprvku::before.

               Viac podrobností o počítadlách css nájdete v

               
               

               Pomerne často musíte použiť číslovanie: pri vytváraní rôznych zoznamov, zoznamov, navrhovaní obsahu alebo obsahu atď.

               CSS používa počítadlá na automatizáciu procesu číslovania.

               Začnime jednoduchým príkladom. Potom zložitejším spôsobom vytvoríme vnorený zoznam s automatickým číslovaním jeho položiek a podpoložiek.

               Identifikácia merača

               Najprv musíte určiť merač.

               Pomocou vlastnosti counter-reset je počítadlu priradený názov a počiatočná hodnota. Názov môže byť ľubovoľný, ale nemôže začínať číslom.

               Útržok kódu:

               Tento záznam hovorí, že pre značku je nainštalované počítadlo s názvom číslo s počiatočnou hodnotou 3.

               Štandardne je počiatočná hodnota počítadla 0.

               Prírastok počítadla

               Používa sa na to vlastnosť counter-increment. Používa sa tiež na určenie prírastkov počítadla - čísla, o ktoré sa zvýši hodnota počítadla.

               Útržok kódu:

               telo ( counter-reset : číslo 3 ;)
               telo p ( protiprírastok : číslo 3 ; }

               Tento útržok kódu hovorí, že odseky ( tag

               ) v tele dokumentu bude očíslované počítadlom čísel v prírastkoch po 3.

               Prvý odsek bude očíslovaný 6, pretože počiatočná hodnota počítadla je 3 a jeho prírastok je 3.

               Predvolená hodnota pre prírastky počítadla je 1.

               Teraz sú nastavené všetky potrebné parametre počítadla: názov, počiatočná hodnota, prírastok a prvok, ktorý bude očíslovaný. Ďalej....

               Displej počítadla

               Teraz musíte zobraziť hodnotu počítadla a nastaviť pravidlá pre jej umiestnenie. Robí sa to pomocou vlastnosti content a pseudoprvkov pred a za.

               Vlastnosť content vloží obsah pred ( predtým) alebo po ( po) špecifikovaného prvku.

               Útržok kódu:

               telo ( counter-reset : číslo 3 ;)
               body p:after ( protiprírastok : číslo 3 ; obsah : " rovná sa " počítadlo (číslo) "." ;)

               Do predchádzajúceho útržku kódu sme teda pridali vlastnosť obsahu, ktorá vydáva slovo „rovná sa“ , potom hodnotu čísla počítadla a bodku „.“ . Toto všetko sa vkladá na stránku za obsah odseku ( tag

               ), čo hovorí pseudoprvok za.

               Nakoniec...

               Nižšie je popísaný príklad.

               Útržok kódu:

               
               
               
               
               

               
               

               2 krát 3

               
               

               3 krát 3

               
               

               4 krát 3

               
               

               5 krát 3

               
               

               výsledok:

               Vnorené zoznamy s automatickým číslovaním

               Pozrime sa na príklad použitia počítadiel na automatizáciu procesu číslovania vnorených zoznamov.

               Z HTML aj zo štúdia zoznamov v CSS by ste už mali vedieť, že položky zoznamu sa číslujú automaticky. Ale toto číslovanie je najjednoduchšie.

               A čo automatické číslovanie článkov ako 1.1, 1.2, 2.1, 2.2 atď.?

               Tento problém je vyriešený pomocou počítadiel, ktoré umožňujú automatizovať proces číslovania vnorených zoznamov.

               Útržok kódu:

               
               
               
               
               

               
               

               1. Prvá položka zoznamu
               
               
               1. Prvý pododsek odseku 1
               
               
               2. Druhý pododsek prvého odseku
               
               
               2. Druhá položka zoznamu
               
               
               1. Prvý pododsek odseku 2
               
               
               2. Druhý pododsek druhého odseku
               
               
               3. Tretia položka na zozname
               
               
               1. Prvý pododsek odseku 3
               
               
               2. Druhý pododsek tretieho odseku
               
               
               3. Tretí pododsek tretieho odseku
               
               

               
               

               výsledok:

               Takto automatizujete proces číslovania vnorených zoznamov!

               Dobrý deň!

               V tomto článku sa dozviete o všetkých možnostiach zoznamov, pochopíte, ako vytvoriť číslovaný zoznam, a osvojíte si hlavné značky, ktoré vám pomôžu zmeniť jednoduchý zoznam s odrážkami na zaujímavejší a nápadnejší s ľubovoľnými odrážkami. Po dokončení lekcie budete rozumieť tomu, kde sa zoznamy používajú a za akých okolností sa dajú použiť.

               Tento článok je tretí v tomto krátkom kurze o základoch HTML. Pred prečítaním tejto lekcie vám odporúčam prejsť si predchádzajúce dve:

               Článok sa práve začal a už si môžete všimnúť použitie štandardného zoznamu s odrážkami. Na mojej stránke to vyzerá celkom jednoducho: vľavo je malá zarážka s čiarou a štvorcovou značkou. Ďalej v článku sa podrobne pozrieme na to, aké typy značiek existujú, ako robiť čísla a tiež ako si vyrobiť vlastnú značku.

               V každej časti článku bude vytvorenie určitých zoznamov sprevádzané podrobnými vysvetleniami pre vloženie konkrétneho zoznamu.

               1. Zoznamy s odrážkami v HTML

               Tento typ zoznamu sa používa na vypísanie súboru prvkov s podobným významom v texte. Môže to byť zoznam odkazov, ktoré súvisia s rovnakou témou, podrobné vysvetlenie pre jednotlivé časti textu. Pozrime sa však, ako vyzerajú zoznamy s odrážkami v kóde:

               A takto to vyzerá v prehliadači:

               Ryža. 1.1. Štandardné zobrazenie HTML neusporiadaného zoznamu s odrážkami v prehliadači

               1.1 Štandardné odrážky pre zoznamy s odrážkami

               Na obrázku vyššie (obrázok 1.1.) môžete vidieť krúžky na začiatku každej položky ponuky. Toto je značka. V predvolenom nastavení sa v prehliadači zobrazuje ako vyplnený kruh. V HTML existuje niekoľko typov značiek: vyplnený kruh, prázdny kruh a štvorec. Nevyžadujú žiadne CSS ani obrázky tretích strán:

               1.2 Označte zoznam vo forme prázdneho kruhu

               Hodnoty atribútov poznáte, ale teraz sa pozrime, ako vytvoriť HTML zoznam s odrážkami v kóde. Z tabuľky vyššie sme pre atribút typu vybrali druhú hodnotu „kruh“ a nastavili sme ju na náš zoznam s odrážkami:

               <html > <hlava > <názov > Príklad zoznamu s odrážkami s prázdnou kruhovou značkou</title> </head> <telo > <p> hviezdy:</p> <ul typ = "kruh" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > slnko</li> </ul> </body> </html>

               Okamžite sa pozrime, ako bude tento kód vyzerať v prehliadači:

               Ryža. 1.2. Zobrazenie značky zoznamu ako kruhu v prehliadači

               1.3 Označte zoznam v tvare štvorca

               Pozrime sa tiež na posledný príklad so štvorcovou značkou pre zoznam HTML:

               Venujte pozornosť značke, stala sa štvorcovou:

               Ryža. 1.3. Zobrazenie značky zoznamu ako štvorca v prehliadači

               Dôležitá poznámka: Táto metóda sa už nepoužíva na vytváranie štýlov pre zoznamy s odrážkami. Medzi CSS (prečítajte si, čo je CSS) a HTML existuje jasné oddelenie. HTML je na značkovanie a CSS na vytváranie atraktívneho vzhľadu.

               Kód, ktorý obsahuje tento atribút pri zadávaní aktuálneho typu dokumentu ako HTML5 (""), zobrazí počas overovania chybu. Ak ste ešte nepočuli, čo je overenie, toto je miesto pre vás.

               Chyba bude nasledovná:

               Ryža. 1.4. Chyba na validátore pri použití atribútu „type“ zoznamu

               Zoradili sme zoznamy s odrážkami. Teraz prejdime k číslovaným zoznamom a potom sa pozrime na vnorené zoznamy a niekoľko hotové príklady, ktoré sa na reálnych stránkach používajú najčastejšie.

               2. Číslované zoznamy v HTML

               Na rozdiel od predchádzajúceho typu zoznamov majú číslované zoznamy jednu dôležitú vlastnosť: sú automaticky číslované. To je užitočné, keď potrebujete očíslovať veľký zoznam. Robiť to ručne zaberie veľa času a stále sa môžete zmiasť. Číslovaný zoznam sa špecifikuje pomocou značky. Ako to vyzerá v praxi:

               Príklad číslovaného zoznamu:

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

               <html > <hlava > <názov > Príklad štandardného číslovaného zoznamu</title> </head> <telo > <p> Od jedného do piatich:</p> <ol > <li > najprv</li> <li > Po druhé</li> <li > Po tretie</li> <li > Po štvrté</li> <li > Po piate</li> </ol> </body> </html>

               Takto vyzerá očíslovaný zoznam: štandardné nastavenia v prehliadači:

               Ryža. 2.1. Číslovaný zoznam v prehliadači so štandardnými nastaveniami

               Rovnako ako jeho predchodca (zoznam odrážok) má svoje vlastné štýly zobrazovania čísel. Pravidelné číslovanie nie je jediným typom odrážky pre číslovaný zoznam v HTML.

               2.1 Štandardné odrážky pre číslované zoznamy

               Tu máme na výber nie z troch typov značiek, ale z piatich:

               Názov značky	hodnotu atribútu „type“.	Príklad zoznamu
               Značky vo forme arabských čísel	1	bedminton Bejzbal
               Značky vo forme malých latinských písmen	a	Chomolungma Chogori Kančendžonga
               Značky vo forme veľkých latinských písmen	A	Summit Plummet Ulička hnevu Insano
               Značky s malými rímskymi číslicami	i	Filipínske more Arabské more koralové more
               Značky s veľkými rímskymi číslicami	ja	Červená zelená Modrá

               2.2 Vlastné číslovanie v HTML zozname

               Okrem bežného výstupu číslovaného zoznamu môžeme naše číslovanie začať aj z ľubovoľného čísla. Ak to chcete urobiť, musíte nastaviť dodatočný atribút "štart" . Toto číslovanie funguje na všetkých typoch značiek pre číslované zoznamy. Ako to vyzerá v praxi:

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

               <html > <hlava > <názov > Vlastné číslovanie pre číslovaný zoznam</title> </head> <telo > <p> Začíname číslovať od dvanástich:</p> <ol typ = "a" štart = "12" > <li > dvanásť</li> <li > Trinásť</li> <li >Štrnásť</li> <li > Pätnásť</li> <li >Šestnásť</li> </ol> </body> </html>

               Na skutočnej stránke sa zobrazí takto:

               Ryža. 2.2. Číslovanie z ľubovoľného čísla v číslovanom zozname

               Na obrázku vyššie sme zoznam očíslovali od dvanástich, pričom sme vytvorili značky vo forme malých latinských písmen. Teraz je, myslím, jasné, ako tieto atribúty využiť vo svojich projektoch.

               Teraz prejdime k vnoreným zoznamom HTML.

               3. Ako vytvoriť viacúrovňový (vnorený) zoznam v HTML

               Viacúrovňové zoznamy sa na stránke používajú na vytváranie ponúk. Toto menu sa najčastejšie javí ako rozbaľovacia ponuka smerom nadol (lekcia zapnutá) alebo ľavá alebo pravá rozbaľovacia ponuka. Takéto ponuky vám umožňujú uložiť ďalšie prvky ponuky v kompaktnej forme.

               Pomocou modelov áut ako príkladu vytvoríme viacúrovňový zoznam 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 > <hlava > <názov > Zoznam vnorených odrážok HTML</title> </head> <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> </body> </html>

               Všimnite si, ako vyzerá viacúrovňový zoznam v prehliadači:

               Ryža. 3.1. Príklad viacúrovňového zoznamu v HTML

               Vytvorili sme viacúrovňový zoznam pomocou odrážok (tag

               ). S ďalšími značkami sa objavil viacúrovňový zoznam s modelmi Citroen. Hlavný zoznam má vyplnené odrážky a zoznam 2. úrovne má prázdne krúžky. Ale ako si pamätáte, pomocou atribútu "type" môžeme predefinovať značky (je lepšie nastaviť ).

               Ale môžeme sa zjednotiť viacúrovňové zoznamy očíslované a označené takto:

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

               <html > <hlava > <názov >Číslované, odrážkové a viacúrovňové zoznamy v HTML</title> </head> <telo > <ul > <li > Prvá skupina tulipánov<ol > <li > Prvá trieda<ul > <li > Jednoduché skoré tulipány</li> </ul> </li> <li > Druhá trieda<ul > <li > Froté tulipány</li> </ul> </li> </ol> </li> </ul> </body> </html>

               Vo vyššie uvedenom príklade máme dvojité vnorenie (2 úrovne). Najprv je zahrnutý zoznam dvoch tried tulipánov, máme to očíslované. Potom sa do každej položky v číslovanom zozname vnorí zoznam s odrážkami.

               Pozrime sa, ako to vyzerá v prehliadači:

               Ryža. 3.2. Príklad viacúrovňového číslovaného zoznamu na zoznam s odrážkami v prehliadači

               4. Užitočné materiály na zoznamoch HTML

               Toto sú informácie, ktoré si vyžadujú pochopenie vlastností CSS. K tomu odporúčam preštudovať si nasledujúce lekcie: . Všetky príklady budú okamžite s zdrojový kód a sú rozdelené na záložky HTML (štruktúra), CSS (štýly) a Výsledok (výsledok).

               4.1 Ako urobiť zo zoznamu HTML reťazec

               Konverzia zoznamu HTML na reťazec môže byť potrebná pri vytváraní horizontálneho menu. Je to veľmi jednoduché:

               4.2 Ako vytvoriť HTML zoznam bez ikony

               Je za to zodpovedná vlastnosť typu list-style v CSS (viac podrobností):

               4.3 Ako vycentrovať zoznam v HTML

               Položka zoznamu je blokový prvok, preto je potrebné ju vycentrovať pomocou výplne. Ale je tu jeden dôležitý bod— musíme explicitne špecifikovať šírku, aby zarovnanie fungovalo:

               4.4 Ako vytvoriť zoznam v HTML s obrázkami

               Stačí jedna vlastnosť CSS, list-style-image . Vo vnútri adresy URL zadajte adresu pred ikonou. Chcem len poznamenať, že je lepšie okamžite vybrať malý obrázok, pretože od toho závisí výška riadku zoznamu:

               4.5 Zoznam s odrážkami HTML vaša odrážka

               V takom prípade musíte ikony písma pripojiť vopred (napríklad FontAwesome). Potom môžete namiesto štandardnej značky vytvoriť ľubovoľnú ikonu:

               4.6 Ako vytvoriť zoznam v HTML v niekoľkých stĺpcoch

               Na vytvorenie zoznamu v niekoľkých stĺpcoch použijeme Vlastnosť CSS column-count (vlastnosť je podporovaná iba v nasledujúcich prehliadačoch: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Musíte tiež nastaviť výšku zoznamu, aby ste videli rozdelenie do viacerých stĺpcov:

               5. Zoznam HTML Combo

               Ak chcete vytvoriť combo box in HTML je lepšie Stačí použiť písma ikon. Napríklad Flaticon alebo Fontawesome.

               Tieto informácie sú už pre pokročilých ľudí, takže najskôr ich budete potrebovať.

               6. Precvičte si prácu so zoznamami

               Vo videu nižšie si môžete pozrieť všetku prácu s HTML zoznamami v praxi:

               Ak chcete konsolidovať prijaté informácie, odporúčam vykonať všetky kroky manuálne. Vyskúšajte rôzne odrážky pre zoznamy, vytvorte očíslované zoznamy a potom prejdite na viacúrovňové (vnorené) zoznamy a experimentujte s nimi.

               Tu končíme so zoznamami a prejdeme na ďalšiu lekciu o obrázkoch.

               Ak potrebujete viac ako len základy tvorby webstránky, ale chcete ovládať profesiu Front-end developera, tak venujte pozornosť kurzu z online školy Netology – „“ a online školy Skillbox a kurz „“.

               Kurz trvá dlho, ale získate štruktúrované znalosti, s ktorými sa v prípade záujmu o túto oblasť môžete okamžite zamestnať.