En punktuppsättning och numrerade lista med HTML

I HTML finns två typer av listor: numrerade och unnumberedda. Deras skapelse är nästan densamma. Även taggarna skiljer sig åt med ett tecken. Du kan även skapa listor på flera nivåer, som kan innehålla både numrerade och markörslistor.

Dessa listor kan konverteras som du vill. Allt beror på din fantasi. Först kommer vi att titta på standardlistorna, samma som i Word-redigeraren, och då kommer vi att förbättra dem och klara sig utöver erkännande.

Nummerad HTML-lista

Den vanliga numrerade HTML-listan kan skapas med följande taggar:

1. Det första föremålet på listan

2. Det andra föremålet i listan

3. Den tredje föremålet på listan

   Enkla listor ser ut så här

   Enligt standarderna måste varje föremål på listan vara inuti öppnings- och stängningsreglaget. Men om du inte lägger stängningskoden kommer resultatet att vara exakt detsamma. Processorn är väldigt smart. Under omvandlingen av listan analyserar den öppningsetiketterna. Om han ser en ny

4. lägger han automatiskt framför honom.

   Listorna kan således göras enligt nedan.

   Men ur professionell synvinkel är detta felaktigt.

   Bulleted listor

   Oordnade (eller markör) listor skapas exakt på samma sätt, bara i stället för ol-taggen, ul är skrivet.

   I punktrubrikerna finns inga nummer eller bokstäver - endast olika symboler, som kallas markörer.

   Höjdlistad numrerade HTML-lista

   Många användare är intresserade av denna möjlighet. Därför bör det noteras att någon numrerad lista med HTML kan göras på flera nivåer. Ytterligare nivåer kan vara samma eller markerade.

   För att skapa listan som anges i exemplet ovan måste du skriva följande.

   Observera att i denna kod, till skillnad från de första exemplen, läggs typattributet till. Tack vare det kan du ange sorteringstypen för både numrerade och markörslistor.

   För numrerade anger vi alfabetet eller typen av siffror, och för andra fall - markörstypen.

   Lista sorteringsalternativ

   Om du använder en särskild HTML-tagg kan den numrerade listan vara allt du vill ha.

   Du kan ange ett typattribut med valfritt värde från tabellen. Eller i css-stilklassen, ange liststypstyp med önskad sorteringstyp.

   Översättningen av värdena är ganska enkel. Några av grundläggande kunskaper i engelska. Men även om du inte kan översätta orden "cirkel", "kvadrat" etc. kan du visuellt förstå vad resultatet kommer att bli när du anger dessa värden i typattributet.

   För nummererade listor måste du använda följande alternativ:

   • 1 - arabiska siffror;
   • A - huvudstad latinska bokstäver ;
   • A - små bokstäver latinska bokstäver;
   • I - kapital romerska siffror;
   • I - små bokstäver romerska siffror.

   Som standard används en lista med arabiska siffror. Det vill säga, om du inte angav något, motsvarar det typ = "1".

   Dessutom kan numrerade listor startas från valfritt önskat läge. Som standard - utgången från 1. Men om du vill kan du börja med minst ett hundra. För att göra detta måste du ange startattributet med valfritt värde.

   Dessutom kan det utläsas i omvänd ordning. För att göra detta, skriv omvänd.

   Registrering av listor

   Den numrerade listan med HTML kan utformas så vackert att du inte omedelbart kan gissa att det här är en vanlig lista, och inte en bild som gjorts i Photoshop.

   Här är exempel på vackra listor.

   Som du kan se från exemplet kan du ändra utseendet på numreringen och elementen själva.

   Du kan skapa en vanlig lista så här.

   I css-format måste du ange layouten för ol-taggarna. Observera att i det här fallet kommer inställningarna att tillämpas på alla listor över hela webbplatsen där det här stilarket används.

   Först överväga alternativet med en cirkulär design av listan. Återgå till listkoden. Det finns en klassrundad lista. Det är det med den här klassen du behöver tinker för att göra en sådan skönhet. Du kan namnge klassen som du vill.

   Överväg nu kvadratdesignen.

   Stilar är mycket lika. Skillnaden är att i det första fallet avrundas elementet med hjälp av css-funktionerna.

   Webbläsarstöd

   Det är viktigt att förstå att inte alla webbläsare stöder alla css-attribut.

   Till exempel ville du göra en numrerad lista centrerad. HTML-koden kommer att vara densamma, men resultatet i äldre webbläsare kan vara helt annorlunda.

   Detsamma gäller för registrering av numreringen.

   Som du kan se så visas inte rutorna runt siffrorna i äldre versioner av IE-webbläsaren, eftersom hanteraren inte känner till de nya attribut som tillåter denna typ av design.

   En professionell webbdesigner bör förutse och förstå att inte alla användare använder moderna datorer. Inte alla har Windows 7, 8, 10. Det finns en andel användare som fortfarande sitter i Windows XP och använder de äldre versionerna av Internet Explorer-webbläsaren.

   Som regel stöds nästan alla moderna designförbättringar av element inte av dem. Användaren kommer att känna att utformningen av sajten inte fungerade alls. Att allt har rört sig. Elementen löper in i varandra. För att undvika detta måste du beräkna alla alternativ.

   Vissa webbansvariga blundar för dem, eftersom deras andel på den nuvarande marknaden blir mindre och mindre. Men för den professionella är alla besökare viktiga, särskilt om det är en kommersiell webbplats.

   Gör något som passar alla eller överväga alla varianter av webbläsare.