Hva betyr div i html. Unngå vanlige feil i HTML5-oppmerking. Eksempel. Flott ramme med div
Enhver nettside består av elementer som er plassert på den, og div-blokklayout er nesten alltid ansvarlig for plasseringen. Selvfølgelig er det også et bordoppsett ved hjelp av tagger
| , og det er til og med debatt om hvilket system som er bedre å bruke - blokk- eller tabellbasert. Men i virkeligheten vil du for øyeblikket ikke finne noen av de moderne, populære og praktiske nettstedene som bare bruker tabelloppsett. I beste fall brukes den kun til det den er ment for - det vil si for å lage tabeller, men ikke for å danne selve sidestrukturen.
Faktum er at div-oppsettet til nettstedet lar deg angi mange CSS-egenskaper som ikke er tilgjengelige for tabeller. Dessuten er den største ulempen med et tabellsystem at tabellen ikke vises på skjermen før den er fulllastet av nettleseren. Hvis hele nettstedet er laget i en tabell, vil det vises på skjermen først etter at hele html-koden til siden er fullstendig lastet. DIV-tag og flyteegenskapGrunnlaget for blokkeringssystemet er taggen, som er en beholder for innhold. Den kan også inneholde andre beholdere inni den. Å bruke en DIV-tag er ikke vanskeligere enn . Som regel er standardstrukturen til et nettsted dannet som følger: det er en hovedbeholder (ofte er den tildelt en klasse kalt wrapper, container, main, etc.). Inne i denne beholderen er det blokker av menyen, innholdsdelen og sidefeltet. Som standard plasseres hver ny blokk på en ny linje. For å plassere en blokk til venstre eller høyre for en annen (for eksempel for å plassere en sidefelt til høyre), brukes float-egenskapen. Som standard har den verdien "ingen", men du kan også angi verdiene "venstre" og "høyre". La oss se på denne egenskapen ved å bruke et eksempel med to blokker. Blokk for innhold Blokk for sidefelt Denne koden vil gi følgende resultat: klar eiendomDet er viktig å tenke på at flyteegenskapen ikke bare gjelder selve blokken den er registrert i, men også det påfølgende elementet som vil følge denne blokken. Det vil si at hvis vi legger til en annen blokk til de to blokkene beskrevet ovenfor uten å spesifisere noen egenskaper til den, vil den ikke bli plassert på en ny linje, men vil starte til høyre for den andre blokken. For å unngå dette bruker block div layout egenskapen clear, som må settes for blokken som vi ønsker å plassere på en ny linje. Oftest er den satt til "begge" for dette, men vi kan også sette den til "venstre" eller "høyre" hvis vi ikke bare vil plassere blokken på en ny linje, men også stille inn justeringen. La oss legge til et nytt element i eksemplet ovenfor: Innholdsblokk Sidefeltblokk Ny blokk plassert nederst Resultat:
I tillegg til plasseringen av blokker er det viktig å sette inn innrykk både mellom blokker og innenfor dem. Til dette brukes henholdsvis margin- og polstringsegenskapene. Innrykk settes separat for topp, høyre, bunn og venstre del av elementet. De kan spesifiseres på én linje ved å angi fire verdier: Marg: 20px 10px 0 40px En blokk med disse parameterne vil bli plassert 20 piksler under det overordnede elementet, ti piksler fra det høyre elementet, vil ha null polstring nederst, og vil ha 40 piksler med polstring til venstre. Hvis alle de samme indikatorene er spesifisert i padding-egenskapen, vil disse være den interne utfyllingen for innholdet i forhold til grensene til blokken den er plassert i. Du kan også angi separate egenskaper for individuelle kanter ved å bruke marg-top, margin-bottom, margin-venstre, margin-right (og lignende for polstring). I dette tilfellet, hvis noen av kantene ikke er spesifisert, vil innrykk på siden være null eller vil bli bestemt av de generelle css-egenskapene spesifisert for blokker på siden. HTML Content Division-elementet ( ) er den generiske beholderen for flytinnhold. Den har ingen effekt på innholdet eller layouten før den er stylet med CSS. Kilden for dette interaktive eksemplet er lagret i et GitHub-depot. Hvis du vil bidra til det interaktive eksempelprosjektet, kan du klone https://github.com/mdn/interactive-examples og sende oss en pull-forespørsel. Som en "ren" beholder representerer ikke elementet i seg selv noe. I stedet brukes den til å gruppere innhold slik at det enkelt kan styles ved å bruke klassen eller attributtene, markere en del av et dokument som skrevet på et annet språk (ved å bruke lang-attributtet), og så videre.
Merk: align-attributtet er foreldet; ikke bruk den lenger. I stedet bør du bruke CSS-egenskaper eller teknikker som CSS Grid eller CSS Flexbox for å justere og plassere elementer på siden. Bruksnotater
Alt slags innhold her. Slik som ,
Kompatibilitetstabellen på denne siden er generert fra strukturerte data. Hvis du ønsker å bidra til dataene, vennligst sjekk ut https://github.com/mdn/browser-compat-data og send oss en pull-forespørsel. Oppdater kompatibilitetsdata på GitHub
God ettermiddag venner! På en eller annen måte i mine flere leksjoner på html snakket jeg og brukte et slikt konsept som div layout. Du har sannsynligvis spørsmål, spesielt hvis du er nybegynner, hva er det? I dagens artikkel vil jeg fjerne all din tvil og svare på spørsmål om hvilke div-blokker som er i La oss begynne å studere. HTML div blokker og layoutFor ikke å rote og forsøple hjernen din, vil jeg bare kort si at tidligere brukte alle webdesignere og utviklere et tabelloppsett når de opprettet sider og nettsteder, der hver celle representerte et spesifikt element. Det så omtrent slik ut: Slik var det å lage nettsider. Dette er et veldig primitivt eksempel, men du kan tydelig forestille deg hvordan nettsteder ble opprettet i disse fjerne tider. Internett-teknologier står ikke stille og på et tidspunkt kom konseptet med html div-layout til oss. Og så, som de sier, begynte det hele. Dens betydning i utvikling av nettsteder er virkelig stor. Nå har det blitt enklere enn noen gang å lage nettsider og administrere html-blokker. Nettstedene begynte å vise seg vakre og interessante. Nå er hele verden bare på vei. Slik kan vi nå på en forenklet måte skildre modellen for bruk av div html-blokker. Bekvemmeligheten ligger i blokkenes uavhengighet fra hverandre, de er enkle å administrere individuelt, flytt dem som du vil, legg til stiler, du kan sette vanlige stiler gjennom CSS-regler for flere Div-grupper. Enig at dette er praktisk. Eksempler på bruk av div-taggerLa oss se på noen få praktiske eksempler på hvordan du kan bruke div-tagger på en HTML-side. I et enkelt eksempel vil vi lage 4 blokker på siden. Jeg vil alltid bruke Notepad++ i dette og fremtidige eksempler.
Så la meg forklare. Vi har et design< ! DOCTYPE html >det passer for moderne nettlesere og støtter HTML 5-markering, vi vil snakke om det i fremtidige utgaver. Deretter åpnes en stor "foreldre"-beholder< html >. Den er sammenkoblet og må lukkes på slutten! Så kommer åpningen av servicebrikken< head >, som også er sammenkoblet og inneholder tjenesteinformasjon om kodingen< meta charset >, den viktigste SEO-sidetittelen, beskrivelse (jeg tok den ikke med her, fordi det ikke er nødvendig, vi analyserer et rent teknisk aspekt), CSS-stiler, fonter (Google Fonts-bibliotek), JavaScript er også inkludert her. Deretter kommer taggen< body >. Den vil allerede lagre alle blokkmerkingene våre og alle beholdere med tagger. Bare husk det som et stort "tønne". Og til slutt, her kommer våre div-containere.
Viktig! De er også sammenkoblet; de må også lukkes sammen med andre tagger. Som du kan se, har hver div-blokk et klasseattributt etter likhetstegnet, du kan sette dem uavhengig og vilkårlig. Disse klassene er laget spesielt for CSS. Det vil si at nettleseren kommer til siden, ser div-blokken og ser på hvilken informasjon den inneholder og går til CSS-filen og ser etter den nødvendige klassen der. Du kan angi ikke bare klasseattributtet, men du kan også bruke id (identifikator). Du kan stille spørsmålet: "Hva forskjell gjør det for meg hvilken jeg bruker?" Jeg skal svare, du kan bruke hvilken som helst metode for layout. Med bare én forskjell - når det gjelder prioritet, har id flere privilegier enn klasse. Jeg vil forklare dette i videojuksearket nedenfor. Alle har sin egen stil for å lage nettsider, jeg foretrekker å bruke klasse, siden denne oppføringen i CSS vises med en prikk. velger Ja, forresten, jeg vil si at topptekst, sidefelt, innhold, bunntekst alle er CSS-velgere, og de vil allerede ha attributter. Så vi fortsetter å rydde ut rotet i hodene til brukerne. Vi har laget div-blokker med klasse, la oss nå gå videre til CSS. La oss åpne css-reglene for siden vår inne i head-taggen, det vil si at vi formaterer den. La oss gjøre det slik:
Oppføringen vil være som følger (bare kopier og lim inn i eksemplet ditt og se i nettleseren) Eksempel på bruk av div-tagger .header ( width:600px; height:120px; border:1px solid black; ) .sidebar ( width:200px; height:300px; border:1px solid black; float:venstre; ) .content ( width: 370px; høyde:300px; kant: 1px, margin-venstre: .footer
I denne artikkelen vil vi forstå hva en tag er, hvor den brukes, hvordan du bruker taggen til å plassere bilder, tekster og mye mer. Dessuten er det ikke mindre viktig at taggen veldig ofte brukes i forbindelse med CSS-stilark. Vi vil også ta for oss noen av dem. Så en tag er et blokkelement på en HTML-side, som er designet for å kontrollere plasseringen og gi et bredt utvalg av egenskaper til tekster, bilder, lenker og andre objekter. I seg selv (uten attributter og css-stiler), påvirker ikke taggen elementene på html-sider på noen måte. Uten å bruke stiler, er taggen ment å plassere elementer på en HTML-side. For å gjøre dette må taggen ha align-attributtet. Men la oss ikke slå rundt busken og gå rett til praksis. 2. Hvordan brukes tagger for å plassere tekstblokker på en HTML-side?Ved å bruke en tag kan du plassere et hvilket som helst element i hvilken som helst del av siden. For eksempel har vi ordet "TEKST". For å plassere den, bruk taggen slik: I nettleseren ser det slik ut: 3. Hvordan plassere et bilde (bilde) ved hjelp av taggen?Ved å bruke taggen kan vi raskt og enkelt plassere ikke bare tekst, men også bilder på ønsket sted på html-siden. Dette gjøres slik: La oss si at vi har et bilde kalt flow.jpg og det er plassert i samme katalog (i samme mappe) som filen det skal plasseres på. Den har også en bredde på 100 piksler og en høyde på 72 piksler. I dette tilfellet skrives tagger slik: I nettleseren ser det slik ut:
Ved å bruke tagger kan du plassere ikke bare enkel tekst eller bilder på en HTML-side, men også lenker. Dette gjøres slik: La oss si at vi må installere en lenke et sted på en HTML-side som fører til nettstedet http://site. Som du allerede burde vite fra fortiden, er lenken til selve nettstedet skrevet slik: leksjoner
Vel, vi fant ut hvordan tekster, bilder og lenker plasseres på html-nettsider ved å bruke tagger. Det er ikke noe komplisert her. 5. Hvordan markere et objekt på en HTML-side ved å bruke en tag og css-stiler, eller hvordan lage en ramme rundt et objekt ved å bruke en tag og css-stiler?Dette emnet er litt vanskeligere å forstå siden vi må legge til css-stiler til . Så vanligvis opprettes en egen tekstfil med en css-utvidelse for stiler, som er koblet til siden i overskriften, det vil si i . Vi vil ikke gjøre dette, men vil skrive alle nødvendige stiler direkte i taggen. For å sette CSS-stiler i taggen, bruk style="stiler må skrives atskilt med semikolon".
7. padding-top:30px;
- toppmarg 20 piksler 8. polstring-venstre:15px; - fyll blokken med grønt (du kan også sette farger i heksadesimal) Etter å ha lagret filen, vil vi se følgende i nettleseren:Her kan vi korte ned stilkoden litt. For eksempel kan du forkorte den ytre innrykkkoden slik:
- spesifisere blåfargen (fargen i stiler kan spesifiseres både i det heksadesimale systemet for å angi farger, og i vanlige vanlige engelske ord, som rød, blå, gul)
3.font-size:12px; Selvfølgelig, hvis du har en enorm mengde innhold, er det ikke praktisk å bruke stiler direkte i taggen, siden redigering og tilføying av dem tar mye tid. Og, som jeg allerede skrev i denne artikkelen, for å forenkle behandlingen, er alle stiler plassert i en egen fil med css-utvidelsen, som er inkludert i html-taggen på siden. Men vi vil ikke vurdere dette, siden dette emnet er et helt annet programmeringsspråk relatert til webdesign. Hvis du vil forstå css, html og generelt lære hvordan du lager nettsider ved hjelp av videotimer, kan du besøke nettstedet mitt. Og hvis du planlegger å lære hvordan du lager profesjonelle nettbutikker ved hjelp av Magento-motoren, så er dette enklest å gjøre ved hjelp av forfatterens videokurs. Elementet er et blokkelement og er ment å fremheve et fragment av et dokument for å endre utseendet på innholdet. Vanligvis styres utseendet til en blokk ved hjelp av stiler. For ikke å beskrive stilen inne i taggen hver gang, kan du dele stilen i et eksternt stilark, og legge til en klasse eller id-parameter til taggen med navnet på velgeren. Som med andre blokkelementer, starter innholdet i taggen alltid på en ny linje. Et linjeskift legges også til etter det.... SyntaksParametere align Angir justeringen av tag-innholdet. title Legger til et verktøytips til innholdet. Avsluttende tag
.block2 (
Ikke tillatt i XHTML 1.1 Beskrivelse... Argumentsenter Justerer teksten til midten. Teksten plasseres horisontalt i nettleservinduet eller beholderen der tekstblokken er plassert. Tekstlinjer ser ut til å være trukket på en usynlig akse som går nedover midten av nettsiden. Denne justeringsmetoden brukes aktivt i overskrifter og ulike signaturer, for eksempel bildetekster den gir et offisielt og solid utseende til tekstdesignet.I alle andre tilfeller brukes senterjustering sjelden av den grunn at det er upraktisk å lese en stor mengde slik tekst.
#lag1 ( Beskrivelse... bakgrunn: #fc0;polstring: 5px; #lag2 (bakgrunn: #fff;
polstring: 10px; TITLE parameter
Legger til forklarende tekst til beholderen i form av et verktøytips som vises når musepekeren holder over innholdet.
Argumenter En hvilken som helst tekststreng. Strengen må være omgitt av doble eller enkle anførselstegn.
Du kan også like |
