Innholdsfortegnelse:
Video: DevBytes: Web Components - HTML Imports 2025
Nettsteder har brukt lister i flere tiår til å formidle relatert eller hierarkisk informasjon. I følgende figur kan du se en eldre versjon av Yahoo. com som bruker punktlister for å vise ulike kategorier og dagens Allrecipes. com oppskrift side, som bruker lister for å vise ulike ingredienser.
Lister begynner med et symbol, et innrykk, og deretter listeposten. Symbolet som brukes kan være et tall, et brev, et punktum eller et symbol i det hele tatt.
Opprette bestilte og uordnede lister
De to mest populære lister er:
-
Bestilt: Bestilte lister er numeriske eller alfabetiske lister der sekvensen av lister er viktig.
-
Uordnet: Disse lister er vanligvis punktlister der sekvensen av listeposter ikke har betydning.
Du oppretter lister ved å spesifisere typen liste som bestilt eller uordnet, og deretter legger du til hvert listeelement ved hjelp av li-taggen, som vist i følgende trinn:
-
Angi typen liste.
Legg til åpnings- og lukkelister som angir enten en bestilt (ol) eller ikke-ordnet (ul) -liste, som følger:
-
ol for å spesifisere begynnelsen og slutten av en bestilt liste.
-
ul for å spesifisere begynnelsen og slutten av en uordnet liste.
-
-
Legg til en åpnings- og lukkerkode (det vil si
- og ) for hvert element i listen.
Her er en bestilt liste:
- List item # 1
- List item # 2
- List item # 3
Nestlister
I tillegg kan du nestlister i lister. En liste av hvilken som helst type kan være nestet inne i en annen liste; å nest en liste, erstatt listen elementetiketten
-
eller
-
.
Eksempelkoden her viser forskjellige listetyper, inkludert en nestliste.
Siden som er produsert av koden, vises her:
Koden
som er vist i denne koden, er ikke nødvendig for å opprette en liste. Det brukes her bare for å nevne hver liste.
Hver åpningsliste eller listemerketikett må følges med en lukkeliste eller listemerketikett.
