Hvordan man opretter nestede lister til HTML5 og CSS3 programmering - dummies

Nogle gange vil du gerne skabe konturer eller andre former for komplekse data på dine HTML5-sider. Du kan nemt huse lister inde i hinanden, hvis du vil. Du kan se en mere kompleks liste, der beskriver populære katnavne i USA og Australien.

Dette eksempel bruger en kombination af lister til at udføre sit arbejde. Dette indeholder en liste over to lande: USA og Australien. Hvert land har en H3 overskrift og en anden (bestilt) liste inde i den. Du kan nest forskellige elementer inde i en liste, men du skal gøre det omhyggeligt, hvis du vil have siden til at validere.

I dette eksempel er der en uordnet liste med kun to elementer. Hvert af disse elementer indeholder en overskrift og en ordnet liste. Siden håndterer alle disse data på en relativt ren måde og valideres korrekt.

Den indlejrede listeeksempel

Hele koden for nestedList. html er gengivet her:

nestedList. html

Nested Lists

Populære Cat Names


USA

Tigger
Tiger
Max
Smokey
Sam



Australien

Oscar
Max > Tiger
Sam
Misty
Her er et par ting, du måske bemærker i denne kodeoversigt:

Der er et stort

• sæt, der omgiver hele hovedlisten.

  Hovedlisten har kun to listeposter.

  • Hver af disse poster repræsenterer et land.

  • Hvert land har et

  • element, der beskriver landnavnet inde i

    .

    Hvert land har også et

    sæt med en liste over navne.

    Indrykket hjælper dig virkelig med at se, hvordan tingene er forbundet.

    1. Sådan indsætter du din kode

  Du har muligvis bemærket, at HTML-koden normalt er indrykket. Browserne ignorerer alt indrykning, men det er stadig en vigtig kodende vane.

  Der er mange meninger om, hvordan koden skal formateres, men standardformatet tjener dig godt, indtil du udvikler din egen stil.

  Generelt gælder følgende regler for indent HTML-kode:

  Indsæt hvert indlejret element.

  • Da taggen er inde i elementet, kan du indrykke for at angive dette. Ligeledes er -elementerne altid indrykket inde i

  • eller
    par.
    Læg dine elementer op.

    1. Hvis et element optager mere end en linje, skal du linke op ende-mærket med begyndelsestaggen. På denne måde ved du hvad der slutter hvad. Brug mellemrum, ikke faner.

    2. Fanen Tegn forårsager ofte problemer i kildekoden. Forskellige redigeringsformater faner forskelligt, og en blanding af faner og mellemrum kan gøre din omhyggeligt formaterede side ser forfærdelig, når du ser den i en anden editor. De fleste redaktører har evnen til at fortolke fanens nøgle som mellemrum.Det er en god idé at finde denne funktion på din editor og tænde den, så når du rammer fanen, tolkes den som mellemrum. I Komodo Edit gør du dette i Rediger ➪ Indstillinger ➪ Rediger ➪ Indrykning.

       Brug to mellemrum.

    3. De fleste kodere bruger to eller fire mellemrum pr. Indrykningsniveau. HTML-elementer kan nestes ret dybt. Går syv eller otte lag dybt er almindeligt. Hvis du bruger faner eller for mange mellemrum, har du så meget hvidt rum, at du ikke kan se koden. Slut til venstre margen.

    4. Hvis du er færdig med siden, og du ikke er tilbage til venstre margen, har du glemt at afslutte noget. Korrekt indrykning gør det nemt for din sideorganisation at se. Hvert element skal stå op med dens lukkede tag. Sådan bygger du en nestet liste

    Når du kigger over koden til den nestede liste, kan den se ud til at skræmme, men det er ikke så svært. Hemmeligheden er at opbygge listen

    udenfor i: Opret den ydre liste først.

    1. Byg den primære liste (uanset om den er bestilt eller uordnet). I eksemplet var der oprindeligt bare den uordnede liste med de to lande i den.

       Tilføj listeposter til den ydre liste.

    2. Hvis du vil have tekst eller overskrifter i den større liste, kan du sætte dem her. Hvis du kun lægger en liste på din primære liste, kan du måske placere nogle pladsholdermærker derinde, så du kan være sikker på, at alt fungerer.

       Validér inden du tilføjer det næste listenniveau.

    3. Indlejrede lister kan forvirre validatoren (og dig). Bekræft din kode med den ydre liste for at sikre, at der ikke er nogen problemer, før du tilføjer indre lister.

       Tilføj den første indre liste.

    4. Når du ved, at den grundlæggende struktur er okay, tilføj den første interiørliste. Til eksemplet var dette den ordnede liste over katnavne i USA.

       Gentag indtil færdig.

    5. Fortsæt med at tilføje lister, indtil din side ser rigtigt ud.

       Validér ofte.

    6. Det er meget bedre at validere, når du går, end at vente til alt er færdigt. Fang dine fejl tidligt, så du ikke replikerer dem.