HTML stöder listor med tre olika typer, som var och en har sina egna parametrar:

• – en numrerad (med siffror eller bokstäver) lista, vars varje element har ett serienummer (bokstav);
  1. – en punktlista (ej numrerad) bredvid varje element som en markör är placerad på (i stället för numeriska eller alfabetiska tecken som anger ett serienummer);

     • – en definitionslista består av namn/värdepar, inklusive termer och definitioner.

     Numrerade listor

     I en numrerad lista infogar webbläsaren automatiskt elementnummer i ordning, med början med ett visst värde (vanligtvis 1). Detta gör att du kan infoga och ta bort listobjekt utan att störa numreringen, eftersom de återstående siffrorna kommer att räknas om automatiskt.
     Numrerade listor skapas med hjälp av ett blockelement

     (från den engelska beställda listan - numrerad lista). Bredvid containern
     för varje listobjekt placeras ett element
     1. (från det engelska listobjektet - listobjekt). Standard är en numrerad lista med arabiska siffror.
        Märka
        har följande syntax:
        1. element 1
        2. element 2
        3. element 3

        Numrerade listobjekt måste innehålla flera listobjekt, som visas i följande exempel:

        Exempel: Numrerad lista

        • Prova själv "

        Steg-för-steg-instruktion

        1. Hämta nyckeln
        2. Sätt in nyckeln i låset
        3. Vrid nyckeln två varv
        4. Ta ut nyckeln ur låset
        5. Öppna dörren

        Steg-för-steg-instruktion

        1. Hämta nyckeln
        2. Sätt in nyckeln i låset
        3. Vrid nyckeln två varv
        4. Ta ut nyckeln ur låset
        5. Öppna dörren

        Ibland när du tittar på befintliga HTML-koder kommer du att stöta på argumentet typ i element

        , som används för att ange typen av numrering (bokstäver, romerska och Arabiska siffror och så vidare.). Syntax:

        Här: typ – listsymboler:

        • A - stora latinska bokstäver (A, B, C...);
        • a - latinska små bokstäver (a, b, c...);
        • I - stora romerska siffror (I, II, III...);
        • i - små romerska siffror (i, ii, iii...);
        • 1 - Arabiska siffror (1, 2, 3 . . .) (används som standard).

        Om du vill att listan ska börja med ett annat tal än 1 bör du ange detta med attributet Start märka

        .
        Följande exempel visar en numrerad lista med stora romerska siffror och ett startvärde på XLIX:

        Numrering kan också startas med attributet värde, som läggs till elementet

        1. på följande sätt:

        7. I det här fallet kommer den sekventiella numreringen av listan att avbrytas och från denna punkt börjar numreringen igen, i detta fall från sju.

           Exempel på attributanvändning värde märka

        8. , som låter dig ändra numret på ett givet listelement:

           I det här exemplet skulle "första listobjektet" vara nummer 1, "andra listobjektet" skulle vara nummer 7 och "tredje listobjektet" skulle vara nummer 8.

           Formatera numrerade listor med CSS

           För att ändra listnummer bör du använda egenskapen list-stil-typ CSS-formatmallar:

           Numrerade liststilar

           Exempel	Menande	Beskrivning
           a, b, c	lägre alfa	Små bokstäver
           A, B, C	övre alfa	Stora bokstäver
           i, ii, iii	lägre-romersk	Romerska siffror med små bokstäver
           I, II, III	övre-roman	Romerska siffror med versaler

           Exempel: Tillämpa en CSS-egenskap list-stil-typ

           Punktlistor

           Punktlistor liknar i huvudsak numrerade listor, bara de innehåller inte sekventiell numrering av objekt. Punktlistor skapas med hjälp av ett blockelement

           (från den engelska unordered list - unnumbered list). Varje listelement, som i numrerade listor, börjar med en tagg
           • . Webbläsaren drar in varje listobjekt och visar automatiskt punkter.
             Märka
             har följande syntax:
             • Första punkten
             • Andra punkten
             • Tredje punkten

             I följande exempel kan du se att en liten markör i form av en fylld cirkel som standard läggs till före varje listobjekt:

             Inuti en tagg

             • Det är inte nödvändigt att endast placera text; det är acceptabelt att placera alla delar av strömmande innehåll (länkar, stycken, bilder, etc.)

               Kapslade listor

               Vilken lista som helst kan kapslas in i en annan. Inuti ett element
             • Det är tillåtet att skapa en kapslad lista eller en lista på andra nivån. För att kapsla en lista, beskriv den nya listan inuti elementet
             • redan befintlig lista. När du kapslar en punktlista i en annan ändrar webbläsaren automatiskt punktstilen för den andra nivån. Vilken lista som helst kan kapslas in i en annan. Följande exempel visar strukturen för en punktlista kapslad i det andra objektet i en numrerad lista.

               Exempel: kapslade listor

               • Prova själv "
               • måndag
                 1. Skicka brev
                 2. Besök hos redaktören
                    • Att välja ett tema
                    • Dekorativ design
                    • Slutrapport
                 3. Kvällsvisning av meddelanden
               • tisdag
                 1. Revidera schemat
                 2. Skicka bilder
               • onsdag...
               • måndag
                 1. Skicka brev
                 2. Besök hos redaktören
                    • Att välja ett tema
                    • Dekorativ design
                    • Slutrapport
                 3. Kvällsvisning av meddelanden
               • tisdag
                 1. Revidera schemat
                 2. Skicka bilder
               • onsdag...

               Formatera punktlistor

               För förändring utseende listmarkeringsegenskapen ska användas list-stil-typ CSS-formatmallar:

               Följande exempel visar olika stilar av punktlistor:

               Exempel: Bullet List Styles

               • Prova själv "
               • Kaffe
               • Kaffe
               • Kaffe
               • Kaffe

               Skiva:

               • Kaffe
               • Mjölk

               Cirkel:

               • Kaffe
               • Mjölk

               Fyrkant:

               • Kaffe
               • Mjölk

               Ingen:

               • Kaffe
               • Mjölk

               Grafiska markörer.

               I HTML är det möjligt att skapa en lista med grafiska markörer. Det är en sak när listmarkörerna är standardcirklar eller fyrkanter, och en helt annan när utvecklaren själv väljer markören i enlighet med siddesignen. För att göra listobjekt vackra används ofta små bilder.
               För att ersätta en vanlig markör med en grafisk, byt ut egenskapen list-stil-typ per fastighet list-stil-bild och ange webbadressen till bilden:

               Exempel: Grafiska markörer

               • Prova själv "

               stjärntecken

               • Oxen
               • Tvillingarna

               stjärntecken

               • Väduren
               • Oxen
               • Tvillingarna

               Listor med definitioner (beskrivningar)

               Definitionslistor är mycket användbara för att skapa, till exempel, din personliga ordbok över termer. Varje definitionslista har två delar: termen och dess definition.
               Du lägger hela listan i ett element

               (från den engelska definitionslistan - definitionslista). Den innehåller taggar

               (från den engelska Definition Term - ett definierat ord, term) och

               (från den engelska Definition Description - beskrivning av termen som definieras).
               Listor med definitioner används ofta i vetenskapliga, tekniska och pedagogiska publikationer och använder dem för att sammanställa ordlistor, ordböcker, uppslagsböcker, etc.

               Den allmänna strukturen för listan med beskrivningar är som följer:

               Första terminen

               Beskrivning av den första termen

               Andra terminen

               Beskrivning av den andra termen

               Följande exempel visar en av möjliga användningsområden lista över definitioner:

               Exempel: Definitionslista

               • Prova själv "

               World Wide Web - från engelska. World Wide Web (WWW) är ett distribuerat system som ger tillgång till relaterade dokument som finns på olika datorer anslutna till Internet. Internet är en uppsättning nätverk som använder ett enda utbytesprotokoll för att överföra information. En webbplats är en uppsättning individuella webbsidor som är sammanlänkade med länkar och en enhetlig design.

               World Wide Web

               - från engelska World Wide Web (WWW) är ett distribuerat system som ger tillgång till relaterade dokument som finns på olika datorer anslutna till Internet.

               Internet

               — En uppsättning nätverk som använder ett enda utbytesprotokoll för att överföra information.

               Hemsida

               - en uppsättning individuella webbsidor som är sammanlänkade med länkar och en enhetlig design.

               Som standard trycks termens text till vänster kant av webbläsarfönstret, och beskrivningen av termen finns nedan och flyttas till höger.

               När det är nödvändigt att numrera något på en webbplats används oftast en ordnad lista (

               ). Det är rimligt att förvänta sig att det kan finnas en önskan att arbeta med utformningen av dessa siffror. I CSS är det dock ganska problematiskt att förverkliga denna önskan, men lyckligtvis inte omöjligt. I sin handledning visar Roger Johansson hur detta kan implementeras med hjälp av pseudoelementet:before, som kan ställa in innehållsegenskapen till att motverka .

               Pseudoelementet:before används för att visa det önskade innehållet innan elementet det läggs till. Fungerar tillsammans med innehållsegenskapen.

               Det är dock värt att klargöra att numrerade räknare kan tillämpas på mer än bara ordnade listor. Anta till exempel att du ville numrera en lista med definitioner (

               ), som består av frågor och svar för dina vanliga frågor.

               Markeringen kommer att se ut ungefär så här:

               Hur mycket ved skulle en vedchuck chuck om en ved chuck kunde chuck ved?

               1,000,000

               Vad är lufthastigheten för en olastad svala?

               Vad menar du? En afrikansk eller europeisk svala?

               Varför gick kycklingen över vägen?

               För att komma till andra sidan

               Varje ny

               element är en ny fråga, så vi tillämpar numrering på dem. Det kommer att se extremt enkelt ut:

               Med innehållsegenskapen kan du infoga genererat innehåll i texten på en webbsida som inte ursprungligen finns i texten.
               räknare värde Skriver ut värdet på räknaren som anges av egenskapen counter-reset.

               Egenskapen för återställning av räknaren ställer in en identifierare för räknaren och ställer in initialvärdet.
               Egenskapen counter-increment specificerar steget med vilket räknarvärdet ökas.

               Faq ( counter-reset: my-badass-counter; ) .faq dt:before ( innehåll: counter(my-badass-counter); counter-increment: my-badass-counter; )

               Pseudoelementet :before kan tilldelas vilken stil som helst. Till exempel:

               

               Efter att ha bemästrat den här egenskapen kan du numrera vad du vill. Häromdagen lade jag till exempel upp ett av mina favoritrecept och numrerade varje steg/bild med romerska siffror. Detta fungerade som en påminnelse för mig: siffror behöver inte vara decimaler.

               

               Den numeriska varianten representeras som värden för egenskapen liststilstyp.
               Nämligen:

               

               Allt som krävs är att ange önskat alternativ i räknarvärdet.

               Innehåll: counter(min-disk, lägre-romersk);

               Framtiden för CSS3

               Ovanstående material är relevant för idag, men det bleknar i jämförelse med de möjligheter som är gömda i CSS3-listor. När webbläsare har stöd för dem kommer det till exempel att vara möjligt att arbeta med listmarkörer direkt.

               Li::marker ( width: 30px; text-align: right; margin-right: 10px; display: inline-block; ) ol ( list-style: symbols("*""2020""2021""A7"); ) ul ( list-style-type: "det borde finnas en asterisk här)"; )

               Om du någonsin har försökt ändra CSS-stil för radnummer (siffror) i ordnade listor

               , då har du förmodligen stött på problem. Det är omöjligt att nå stilarna för dessa element med hjälp av CSS-väljare. Men ganska ofta innebär gränssnittsdesign att ändra dess färg, bakgrund, storlek, etc.

               Här är det enklaste exemplet på en lista utan stil:

               html

               1. Att plantera ett träd
               2. Bygga ett hus
               3. Uppfostra en son

               Låt oss titta på flera sätt att lösa ovanstående problem.

               Traditionellt ett klumpigt sätt.

               Det traditionella sättet att lösa detta problem är att dölja radnumren som automatiskt tilldelas av webbläsaren. I det här fallet används egenskapen list-style: none;. .

               css

               li( list-style: none; ) .num( färg: vit; bakgrund: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;)

               html

               1. 1 Att plantera ett träd
               2. 2 Bygga ett hus
               3. 3 Uppfostra en son

               Håller med, det ser överflödigt och oflexibelt ut. Vi döljer automatiskt placerade sekvensnummer och ersätter dem med manuellt angivna värden, rörig layout osv.

               Låt oss se hur vi kan uppnå samma resultat utan att blockera layouten och använda pseudoelementet::before och CSS-egenskaperna content , counter-increment , counter-reset .

               Ett vackert och korrekt sätt.

               Först kommer vi att tillhandahålla koden och demon, och sedan kommer vi att ta reda på vad som är vad.

               css

               ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); färg: vit; bakgrund: #2980B9; display: inline-block; text-align: center; marginal: 5px 10px; linjehöjd: 40px; bredd: 40px; höjd: 40px;)

               html

               1. Att plantera ett träd
               2. Bygga ett hus
               3. Uppfostra en son

               Som du kan se förblir html-koden ren och vacker. I det här fallet överförs all styling av listelementen till css.

               Låt oss titta punkt för punkt:

               • li::förut– skapar ett pseudoelement i listan, som ersätter det första barnet.
               • counter-reset:myCounter;– återställer myCounter css-räknaren inuti varje
                 .
                 1. counter-increment: myCounter;– ökar css-räknaren myCounter för varje pseudoelement::before .
                 2. content:counter(myCounter);– skriver ut det aktuella värdet på myCounter-räknaren inuti::before-pseudoelementet.

               Mer information om css-räknare finns i

               
               

               Ganska ofta måste man använda numrering: när man skapar olika listor, listor, utformar en innehållsförteckning eller innehållsförteckning, etc.

               CSS använder räknare för att automatisera numreringsprocessen.

               Låt oss börja med ett enkelt exempel. Sedan, på ett mer komplicerat sätt, skapar vi en kapslad lista med automatisk numrering av dess objekt och underobjekt.

               Mätaridentifiering

               Först måste du identifiera mätaren.

               Genom att använda counter-reset-egenskapen tilldelas räknaren ett namn och ett initialt värde. Namnet kan vara vad som helst, men kan inte börja med en siffra.

               Kodavsnitt:

               Det här inlägget säger det för taggen en räknare med namnet nummer med ett initialt värde på 3 är installerat.

               Som standard är det initiala värdet för räknaren 0.

               Räknarökning

               Egenskapen counter-increment används för detta. Den används också för att ange räknarsteg - talet med vilket räknarvärdet kommer att öka.

               Kodavsnitt:

               kropp (mot-återställning: nummer 3 ;)
               body p (motökning: nummer 3 ; }

               Det här kodavsnittet säger att stycken ( märka

               ) i dokumentets brödtext kommer att numreras med nummerräknaren i steg om 3.

               Det första stycket kommer att vara numrerat 6, eftersom det initiala värdet på räknaren är 3 och dess ökning är 3.

               Standardvärdet för räknarsteg är 1.

               Nu är alla nödvändiga räknarparametrar inställda: namn, initialvärde, inkrement och element som kommer att numreras. Ytterligare....

               Räknardisplay

               Nu måste du visa räknarvärdet och ställa in reglerna för dess plats. Detta görs med hjälp av innehållsegenskapen och pseudoelementen före och efter.

               Innehållsegenskapen infogar innehållet före ( innan) eller efter ( efter) av det angivna elementet.

               Kodavsnitt:

               kropp (mot-återställning: nummer 3 ;)
               body p:after (motökning: nummer 3 ; content : " är lika med " counter(number) "." ;)

               Så till det föregående kodavsnittet lade vi till en innehållsegenskap som skriver ut ordet "lika med" följt av värdet på räknarens nummer och en punkt "." . Allt detta infogas på sidan efter styckeinnehållet ( märka

               ), vilket är vad pseudoelementet efter säger.

               Så småningom...

               Nedan följer det beskrivna exemplet.

               Kodavsnitt:

               
               
               
               
               

               
               

               2 gånger 3

               
               

               3 gånger 3

               
               

               4 gånger 3

               
               

               5 gånger 3

               
               

               Resultat:

               Kapslade listor med automatisk numrering

               Låt oss titta på ett exempel på hur man använder räknare för att automatisera processen för numrering av kapslade listor.

               Du bör redan veta, både från HTML och från att studera listor i CSS, att listobjekt numreras automatiskt. Men denna numrering är den enklaste.

               Hur är det med automatisk numrering av undersatser som 1.1, 1.2, 2.1, 2.2, etc.?

               Det här problemet löses med hjälp av räknare som låter dig automatisera processen för numrering av kapslade listor.

               Kodavsnitt:

               
               
               
               
               

               
               

               1. Första listobjektet
               
               
               1. Första stycket i punkt 1
               
               
               2. 1 å andra stycket
               
               
               2. Andra listpunkten
               
               
               1. Första stycket i punkt 2
               
               
               2. Andra stycket i andra stycket
               
               
               3. Tredje punkten på listan
               
               
               1. Första stycket i punkt 3
               
               
               2. 3 å andra stycket
               
               
               3. Tredje stycket tredje stycket
               
               

               
               

               Resultat:

               Så här automatiserar du processen att numrera kapslade listor!

               God dag!

               I den här artikeln kommer du att lära dig om alla möjligheter med listor, förstå hur man gör en numrerad lista och behärska taggar som hjälper dig att förvandla en enkel punktlista till en mer intressant och märkbar med godtyckliga punkter. Efter avslutad lektion kommer du att ha en förståelse för var listor används och under vilka omständigheter de kan användas.

               Den här artikeln är den tredje i denna korta kurs om grunderna i HTML. Innan du läser den här lektionen rekommenderar jag att du går igenom de två föregående:

               Artikeln har precis börjat, och du kan redan märka användningen av en vanlig punktlista. På min hemsida ser det ganska enkelt ut: till vänster finns ett litet indrag med en linje och en fyrkantig markör. Senare i artikeln kommer vi att titta i detalj på vilka typer av markörer som finns, hur man gör siffror och även hur man gör din egen markör.

               I varje del av artikeln kommer skapandet av vissa listor att åtföljas av detaljerade förklaringar för att infoga en viss lista.

               1. Punktlistor i HTML

               Denna typ av lista används för att i texten lista en uppsättning element med liknande betydelser. Detta kan vara en lista med länkar som är relaterade till samma ämne, detaljerad förklaring för enskilda delar av texten. Men låt oss se hur punktlistor ser ut i kod:

               Och så här ser det ut i webbläsaren:

               Ris. 1.1. Standardvy av HTML-punkterad oordnad lista i webbläsare

               1.1 Standardpunkter för punktlistor

               I bilden ovan (Figur 1.1.) kan du se cirklarna i början av varje menyalternativ. Det här är markören. Som standard visas den som en fylld cirkel i webbläsaren. Det finns flera typer av markörer i HTML: fylld cirkel, tom cirkel och kvadrat. De kräver inga CSS eller tredjepartsbilder:

               1.2 Listmarkör i form av en tom cirkel

               Du känner till attributvärdena, men nu ska vi se hur man gör en HTML-punktlista i kod. Från tabellen ovan valde vi det andra värdet "cirkel" för typattributet och satte det till vår punktlista:

               <html > <huvudet > <titel > Exempel på en punktlista med en tom cirkelmarkör</titel> </huvud> <kroppen > <p> Stjärnor:</p> <ul typ = "cirkel" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Sol</li> </ul> </kropp> </html>

               Låt oss omedelbart se hur den här koden kommer att se ut i webbläsaren:

               Ris. 1.2. Visa en listmarkör som en cirkel i webbläsaren

               1.3 Listmarkör i form av en kvadrat

               Låt oss också titta på det sista exemplet med en fyrkantig markör för en HTML-lista:

               Var uppmärksam på markören, den har blivit fyrkantig:

               Ris. 1.3. Visa en listmarkör som en kvadrat i webbläsaren

               Viktig notering: Den här metoden används inte längre för att skapa stilar för punktlistor. Det finns en tydlig åtskillnad mellan CSS (läs vad CSS är) och HTML. HTML är för uppmärkning och CSS är för att skapa ett attraktivt utseende.

               Koden som innehåller detta attribut när den aktuella dokumenttypen specificeras som HTML5 (""), ger ett felmeddelande under valideringen. Om du inte har hört vad validering är, då är det här platsen för dig.

               Felet blir följande:

               Ris. 1.4. Fel på validatorn när du använder "type"-attributet för en lista

               Vi har sorterat ut punktlistorna. Låt oss nu gå vidare till numrerade listor och sedan titta på kapslade listor och flera färdiga exempel, som används oftast på riktiga webbplatser.

               2. Numrerade listor i HTML

               Till skillnad från den tidigare typen av listor har numrerade listor en viktig egenskap: de numreras automatiskt. Detta är användbart när du behöver numrera en stor lista. Att göra det manuellt kommer att ta mycket tid, och du kan fortfarande bli förvirrad. En numrerad lista anges med taggen. Hur det ser ut i praktiken:

               Exempel på en numrerad lista:

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

               <html > <huvudet > <titel > Exempel på en standard numrerad lista</titel> </huvud> <kroppen > <p> Från ett till fem:</p> <ol > <li > Först</li> <li > Andra</li> <li > Tredje</li> <li > Fjärde</li> <li > Femte</li> </ol> </kropp> </html>

               Så här ser en numrerad lista ut: standardinställningar i webbläsaren:

               Ris. 2.1. Numrerad lista i webbläsare med standardinställningar

               Liksom sin föregångare (punktlista) har den sina egna stilar för att visa siffror. Vanlig numrering är inte den enda typen av punkt för en numrerad lista i HTML.

               2.1 Standardpunkter för numrerade listor

               Här har vi ett val inte av tre typer av markörer, utan av fem:

               Markörens namn	"type" attributvärde	Listexempel
               Markörer i form av arabiska siffror	1	Badminton Baseboll
               Markörer i form av små latinska bokstäver	a	Chomolungma Chogori Kanchenjunga
               Markörer i form av stora latinska bokstäver	A	Summit plummet Tantrum Alley Insano
               Romerska siffror med små bokstäver	i	Filippinska havet arabiska havet korallhavet
               Romerska siffror med stora bokstäver	jag	Röd Grön Blå

               2.2 Egen numrering i HTML-listan

               Förutom den vanliga utmatningen av en numrerad lista kan vi också börja vår numrering från vilket nummer som helst. För att göra detta måste du ställa in det extra attributet "start" . Denna numrering fungerar på alla typer av markörer för numrerade listor. Hur det ser ut i praktiken:

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

               <html > <huvudet > <titel > Anpassad numrering för en numrerad lista</titel> </huvud> <kroppen > <p> Vi börjar numrera från tolv:</p> <ol typ = "a" start = "12"> <li > Tolv</li> <li > Tretton</li> <li > Fjorton</li> <li > Femton</li> <li > Sexton</li> </ol> </kropp> </html>

               Så här kommer det att se ut på den riktiga webbplatsen:

               Ris. 2.2. Numrering från ett godtyckligt nummer i en numrerad lista

               I bilden ovan numrerade vi listan med start från tolv, samtidigt som vi gjorde markörer i form av små latinska bokstäver. Nu tror jag att det har blivit tydligt hur man använder dessa attribut i sina projekt.

               Nåväl, låt oss nu gå vidare till kapslade HTML-listor.

               3. Hur man gör en flernivålista (kapslade) i HTML

               Listor på flera nivåer används på webbplatsen för att bygga menyer. Den här menyn verkar oftast vara antingen en nedåtgående rullgardinsmeny (lektion på) eller en rullgardinsmeny till vänster eller höger. Sådana menyer låter dig lagra andra menyelement i en kompakt form.

               Med hjälp av bilmodeller som exempel kommer vi att bygga en flernivålista i HTML:

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

               <html > <huvudet > <titel > HTML kapslade punktlista</titel> </huvud> <kroppen > <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> </kropp> </html>

               Lägg märke till hur flernivålistan ser ut i webbläsaren:

               Ris. 3.1. Exempel på en flernivålista i HTML

               Vi gjorde en lista på flera nivåer med hjälp av punktlista (tag

               ). En lista på flera nivåer med Citroen-modeller dök upp med andra markörer. Huvudlistan har fyllda punkter och listan på andra nivån har tomma cirklar. Men som du kommer ihåg, med hjälp av "type"-attributet kan vi omdefiniera markörer (det är bättre att ställa in ).

               Men vi kan enas listor på flera nivåer numrerade och märkta enligt följande:

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

               <html > <huvudet > <titel > Numrerade, punktlista och flernivålistor i HTML</titel> </huvud> <kroppen > <ul > <li > Första gruppen tulpaner<ol > <li > Första klass<ul > <li > Enkla tidiga tulpaner</li> </ul> </li> <li > Andra klass<ul > <li > Terry tulpaner</li> </ul> </li> </ol> </li> </ul> </kropp> </html>

               I exemplet ovan har vi dubbla kapslingar (2 nivåer). Först ingår en lista över två klasser av tulpaner, vi har den numrerad. Sedan kapslas en punktlista inom var och en av objekten i den numrerade listan.

               Låt oss se hur det ser ut i webbläsaren:

               Ris. 3.2. Exempel på en numrerad lista med flera nivåer till en punktlista i webbläsaren

               4. Användbart material på HTML-listor

               Detta är information som kräver förståelse för CSS-egenskaper. För att göra detta rekommenderar jag att du studerar följande lektioner: . Alla exempel kommer omedelbart med källkod och är indelade i HTML (struktur), CSS (stilar) och Resultat (resultat) flikar.

               4.1 Hur man gör en HTML-lista till en sträng

               Att konvertera en HTML-lista till en sträng kan vara nödvändigt när du skapar en horisontell meny. Det är väldigt enkelt att göra:

               4.2 Hur man gör en HTML-lista utan ikon

               Egenskapen liststilstyp i CSS är ansvarig för detta (mer information):

               4.3 Hur man centrerar en lista i HTML

               Listobjektet är ett blockelement, så det måste centreras med utfyllnad. Men det finns en viktig poäng— vi måste uttryckligen ange bredden för att justeringen ska fungera:

               4.4 Hur man gör en lista i HTML med bilder

               Bara en CSS-egenskap, list-style-image , räcker. Inuti webbadressen, ange adressen före ikonen. Jag vill bara notera att det är bättre att omedelbart välja en liten bild, eftersom höjden på listraden beror på den:

               4.5 Punktlista HTML din punkt

               I det här fallet måste du ansluta teckensnittsikoner i förväg (till exempel FontAwesome). Sedan kan du göra vilken ikon som helst istället för en standardmarkör:

               4.6 Hur man gör en lista i HTML i flera kolumner

               För att göra en lista i flera kolumner kommer vi att använda CSS-egenskap kolumnantal (egenskapen stöds endast i följande webbläsare: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Du måste också ställa in höjden på listan för att se uppdelningen i flera kolumner:

               5. HTML Combo List

               Att göra en kombinationsbox i HTML är bättre Använd bara ikonteckensnitt. Till exempel Flaticon eller Fontawesome.

               Denna information är redan för avancerade personer, så först behöver du.

               6. Träna på att arbeta med listor

               I videon nedan kan du se allt arbete med HTML-listor i praktiken:

               För att konsolidera den mottagna informationen rekommenderar jag att du gör alla steg manuellt. Prova olika punkter för listor, skapa numrerade listor och gå sedan vidare till flernivålistor (kapslade) och experimentera med dem.

               Det är här vi avslutar med listorna och går vidare till nästa lektion om bilder.

               Om du behöver mer än bara grunderna för webbplatsbyggande, men vill behärska yrket som frontend-utvecklare, var uppmärksam på kursen från onlineskolan Netology - "" och onlineskolan Skillbox och kurs "".

               Kursen varar länge men du får strukturerade kunskaper som du direkt kan få jobb med om du är intresserad av detta område.