De tag ble introdusert med HTML5 for en tid siden, men du kan fortsatt ikke være kjent med hva den gjør, eller hvordan den kan brukes i mange forskjellige situasjoner. I denne opplæringen lærer du forskjellen mellom og andre sammenlignbare koder, og hvordan du kan begynne å bruke den for å forbedre måten du grupperer elementer i oppslaget på.
Dette er en opplæringsplan for nybegynnernivå, men vil også fungere som en nyttig oppdatering for andre.
Typiske bruksområder for
La oss først se hva HTML5-doktoren har å si om saken:
Tallelementet representerer en innholdsenhet, eventuelt med en bildetekst, som er selvstendig, som vanligvis refereres til som en enkelt enhet fra hovedstrømmen av dokumentet, og som kan flyttes vekk fra hovedstrømmen av dokumentet uten påvirker dokumentets betydning. -Richard Clark
Så figur element angir selvstendig innhold, for eksempel illustrasjoner og bilder. Dette betyr at du alltid bruker figur tagg for å huske noe annet.
En vanlig misforståelse er det figur kan kun brukes til bilder. Faktisk kan det brukes til å gruppere et antall forskjellige ting sammen, inkludert, men ikke begrenset til, bilder, video, lyd og kodeblokker.
Definere sidestruktur
De figur er en snittrot, noe som betyr at den effektivt isolerer innholdet fra forfaderens struktur. Uansett hva som er inne i figuren, bidrar det ikke til dokumentoversikten utenfor det. Den oppfører seg som et strukturelt element på siden og kan derfor inneholde egne overskrifter, som begynner med en og arbeider nedover hierarkiet gjennom , og så videre, men dette har ingen betydning for hierarkiet utenfor:
Hierarkiet i figuren har ingen betydning for sin forfedres disposisjon
Elementer som dette brukes ofte til å introdusere eksternt innhold til dokumentet, for eksempel et sitat. er et annet eksempel på et snittrotelement.
Bilder
Her er et typisk eksempel på hvordan figur tag kan brukes til å vise et bilde.
Nå kan du tenke, "Hvorfor bry deg om min img-tag i tilleggsoppslag?" Det er et rettferdig spørsmål, men det begynner å gi mening når du skjønner at a kan inneholde mer enn ett barnelement, for eksempel en bildetekst.
Det er også en kode for en figurtekst, eller heller, figcaption. Med dette i betraktning kan du bruke den på følgende måte.
Hva skjer? Jeg er en bildetekst!
Flere bilder
Bruk bare en serie av img elementer for å vise bilder sammen virker bra, selv om hvert enkelt bilde ville være frittstående som sin egen blokk av kode, helt uavhengig av noen andre. I tilfeller der bildene deler et forhold av noe slag figur kommer til redning. Disse tre bildene er relaterte og deler et enkelt sammendrag i figcaption.
Tre forskjellige bilder, gruppert sammen som en figur, og er tatt med figcaption.
Ved hjelp av for kodeblokker
De figur elementets talent for å gruppere ofte temaelementer slutter ikke der. Kanskje du vil gruppere litt inline-kode, sammen med en bildetekst, i en veiledning for eksempel, så kan du bruke figur og figcaption på følgende måte:
Livet er bra, sa HTML5 til XHTML.
I denne kodeblokken ser vi HTML5 snakker til XHTML.
figur kan brukes på denne måten med kode, pre, og SAMP, gjør det enkelt å gruppere kodeblokker.
Wrapping Up
Det er det! Du har lært hvordan du bruker figur element, sammen med figcaption og andre elementer for å gruppere flere elementer sammen. Hvordan bruker du figur element for øyeblikket? Vil det endres som et resultat av å lese dette raske tipset? Fortell oss i kommentarene!
Share
Accentsconagua
Hierarkiet i figuren har ingen betydning for sin forfedres disposisjon
