Hvordan lage nestede lister for HTML5 og CSS3 programmering - dummies

Noen ganger vil du opprette skisser eller andre typer komplekse data på HTML5-sidene dine. Du kan lett hekse lister i hverandre, hvis du vil. Du kan se en mer kompleks liste som beskriver populære kattnavn i USA og Australia.

Dette eksemplet bruker en kombinasjon av lister for å utføre sitt arbeid. Dette inneholder en liste over to land: USA og Australia. Hvert land har en H3-overskrift og en annen (bestilt) liste i den. Du kan nest forskjellige elementer i en liste, men du må gjøre det nøye hvis du vil at siden skal validere.

I dette eksemplet er det en uordnet liste med bare to elementer. Hver av disse elementene inneholder en overskrift og en bestilt liste. Siden håndterer alle disse dataene på en relativt ren måte og validerer riktig.

Det nestede listeksemplet

Hele koden for nestedList. html er gjengitt her:

nestedList. html

Nested Lists

Populære Cat Names


USA

Tigger
Tiger
Max
Smokey
Sam



Australia

Oscar
Max > Tiger
Sam
Misty
Her er noen ting du kan legge merke til i denne koden oppføringen:

Det er et stort

• sett rundt hele hovedlisten.

  Hovedlisten har bare to listeposter.

  • Hver av disse elementene representerer et land.

  • Hvert land har et

  • -element som beskriver landnavnet inni

    .

    Hvert land har også et

    sett med en liste over navn.

    Inndelingen hjelper deg virkelig å se hvordan ting er koblet sammen.

    1. Slik legger du inn koden din

  Du har kanskje lagt merke til at HTML-koden vanligvis er innrykket. Nettleserne ignorerer alle innrykk, men det er fortsatt en viktig kodende vane.

  Det er mange meninger om hvordan koden skal formateres, men standardformatet vil tjene deg godt til du utvikler din egen stil.

  Generelt gjelder følgende regler for innrykk HTML-kode:

  Innfør hvert nestet element.

  • Fordi taggen er inne i elementet, kan du indrykke for å indikere dette. På samme måte er elementene alltid innrykket i

  • eller
    par.
    Linj opp elementene dine.

    1. Hvis et element tar opp mer enn én linje, må du linke opp slutt-taggen med begynnelsestaggen. På denne måten vet du hva som slutter hva. Bruk mellomrom, ikke faner.

    2. Tabellkarakteren forårsaker ofte problemer i kildekoden. Ulike redigeringsformater faner annerledes, og en blanding av faner og mellomrom kan gjøre din nøye formaterte side ser forferdelig ut når du ser den i en annen editor. De fleste redaktører har mulighet til å tolke tabulatortasten som mellomrom.Det er en god ide å finne denne funksjonen på editoren din og slå den på, så når du treffer fanen, tolkes den som mellomrom. I Komodo Edit gjør du dette i Rediger ➪ Innstillinger ➪ Rediger ➪ Innrykk.

       Bruk to mellomrom.

    3. De fleste kodere bruker to eller fire mellomrom per innrykksnivå. HTML-elementer kan nestes ganske dypt. Å gå syv eller åtte lag dypt er vanlig. Hvis du bruker faner eller for mange mellomrom, har du så mye hvitt plass at du ikke kan se koden. Slutt til venstre margin.

    4. Hvis du er ferdig med siden, og du ikke er tilbake til venstre, har du glemt å avslutte noe. Riktig innrykk gjør at sidenorganisasjonen din er enkel. Hvert element skal stå opp med sin avsluttende kode. Slik bygger du en nestert liste

    Når du ser over koden for den nestede listen, kan det se skremmende ut, men det er egentlig ikke så vanskelig. Hemmeligheten er å bygge listen

    ute i: Opprett ytterlisten først.

    1. Bygg den primære listen (enten den er bestilt eller uordnet). I eksemplet var det opprinnelig bare den uordnede listen med de to landene i den.

       Legg til listeposter til den ytre listen.

    2. Hvis du vil ha tekst eller overskrifter i den større listen, kan du sette dem her. Hvis du bare legger inn noe annet enn en liste i hovedlisten din, kan det hende du vil legge inn noen plassholderkoder der, slik at du kan være sikker på at alt fungerer.

       Bekreft før du legger til neste listenivå.

    3. Nestede lister kan forvirre validatoren (og deg). Bekreft koden din med den ytre listen for å sikre at det ikke er noen problemer før du legger til indre lister.

       Legg til den første indre listen.

    4. Når du vet at grunnstrukturen er ok, legg til den første interiøret. For eksempel var dette den bestilte listen over kattnavn i USA.

       Gjenta til ferdig.

    5. Fortsett å legge til lister til siden ser riktig ut.

       Bekreft ofte.

    6. Det er mye bedre å validere når du går enn å vente til alt er ferdig. Fang feilene dine tidlig, så du ikke kopierer dem.