Forskel mellem DIV og SPAN Forskellen mellem

Anonim

og er HTML-tags, der definerer elementer i HTML-kode.

HTML (Hypertext Markup Language) er en struktureret kode, der bruges til at opbygge og vise de websider, vi besøger online hver dag, på en hvilken som helst enhed.

Andre teknologier og programmeringssprog kan integreres med HTML for at give dynamiske og avancerede funktioner på et websted.

Forstå HTML

Hypertext Markup Language (HTML) er et udbredt markeringssprog og refererer til strukturen og koden 'bag' en webside, der vises i en webbrowser.

HTML er en tekstfil ved hjælp af en specifik kode (syntaks) til at definere en sides stil, indhold, layout og format. Termen Markup angiver, at teksten / koden er forberedt til behandling og præsentation i. e. på en webside, i en webbrowser.

World Wide Web Consortium (W3C) [i] genkender HTML som et formelt markeringssprog i udviklingen af ​​websider, og derfor understøttes HTML af de fleste browsere. Så websider kan udvikles på et anerkendt sprog, der let tolkes af forskellige browsere for at gøre siden som designet af designeren.

Den nuværende version, der stadig er brugt, er HTML4, men den bliver langsomt udfaset, da HTML5 får mere support og adoption for dynamiske og lydhøre websider.

Responsiveness bliver en grundlæggende komponent i webudvikling for at give en nemmere og mere dynamisk brugeroplevelse, som skal rummes på flere enheder som smartphones, tablets og bærbare computere.

Cascading Style Sheets (CSS) bliver en integreret del af opbygningen af ​​dynamiske og lydhøre sider. Det er en separat fil definerende attributter for hvert element som skrifttype, farve, justering - så udvikleren har ikke angiver elementets stil hver gang den bruges i HTML-koden.

HTML-strukturens grundlæggende struktur

For at få mest muligt ud af ethvert udviklingssprog, overholder standardfilstrukturen og overvejer den bedste syntaksforbrug nøglen til at levere stabilt, målbevidst og visuelt tiltalende webindhold.

En HTML-side har en struktur defineret af elementer (også kaldet tags). Når du skriver HTML-koden, vises disse elementer i par - det betyder, at hvert tag har brug for en åbning og en lukning. En start og en ende.

Et element åbnes med syntaksen: og lukket med . Skrå linien / angiver slutningen af ​​elementets definition.

Elementattributterne og indholdet er defineret mellem disse to punkter.

Minimumselementerne, der kræves for en HTML-fil, er definitionen, (kun HTML4) og tags.

  • DOCTYPE Definition

Definitionen (DTD) skal først deklareres som den første tag i en HTML-fil, så når websiden behandles, ved webbrowseren, hvilken type fil den er, og kan derfor korrekt fortolke og vis siden.

I HTML4 er der variationer af DTD'en (afhængig af sidetegn og -elementer), men de mere typiske udsagn vil blive inkluderet som:

eller

DTD'en i HTML5 er meget enklere:

· HTML, HEAD og BODY

  • Etiketten angiver, at det er en HTML-fil, og dette er roden til HTML-elementet, der indeholder alle andre efterfølgende elementer defineret i det; og herunder en sprogattribut anbefales som bedste praksis; for eksempel:
  • Det kræves i HTML4, men ikke obligatorisk i HTML5. Det er et element, der indeholder andre elementer, der er relevante for denne dokumentdel, såsom titlen, henvisningsskripter, definering af stilarter og metadata. Den lukkede tag skal bruges, før
  • defineres. Elementet indeholder hovedindholdet til siden, herunder tabeller, billedtekster, lister osv. Når tagget er lukket, kan elementet nu afslutte. Brug af det nye HTML5-element er valgfrit for siden eller i en anden del af indholdet.

HTML Elements

HTML5 har produceret nye elementer til nem udvikling og design, og det har også fjernet elementer, der bruges i HTML4. Listen over forskelle mellem HTML4 og HTML5 er udgivet af World Wide Web Consortium (W3C) [ii].

HTML DIV TAG

Sammen med forbedringer og nye elementer kombineret med CSS fremskridt kan visse elementer bruges på forskellige, bedre måder end før, og websider bliver hurtigere, mere funktionelle og smukke til at se på! med CSS, der bruges med HTML5, kan erstatte visse elementer, der var overdrevent brugt, som.

Etiketten er populær, når man adskiller indhold på en side. Når du opretter dette element, indsætter det automatisk en pause

for at holde teksten eller indholdet sammen, i stedet for at gå på tekst på tværs af siden.

Med tilgængelighed på webstedet og søgemaskineoptimering bliver teknikker stadig en videnskab og anbefales af WC3 ikke altid at vende tilbage til brug i HTML5.

Som et eksempel på et pænt struktureret, men simpelt blogformat, skal du overveje de nye HTML5-elementer med CSS i stedet for at bruge elementet; Brug elementet til hovedindhold, elementet til at fremhæve eller adskille indhold på siden, overskriften eller sidefoden (hvor som helst!), og elementet kan bruges til at holde en menu eller gruppe links for at gennemse fra siden.

Disse nye elementer identificerer nemt indholdstypen ved hjælp af HTML5. Tagget bruges dog også med CSS til at oprette lydhøre websites.

Oprettelse af hvert element (med sit eget id eller klasse) kan CSS-filen defineres til at manipulere hvert element.

HTML-eksemplet nedenfor viser et eksempel på at bruge flere elementer:

Mine eksempler

Elementerne kan have forskellige attributter, specifikt forskellige størrelser til responsiv interaktion afhængigt af skærmens størrelse på den enhed, der bruges.

Her er et eksempel på, hvordan hvert element kan styles i HTML's tilsvarende CSS-fil - ved at referere til hver tag.

#Header {

bredde: 800px;

højde: auto

margen-venstre: auto;

margin-left: auto;

}

#Foratureret {

højde: 150px;

Baggrundsfarve: #CCC;

}

HTML SPAN TAG

Elementet er et inline-element og brydes ikke ind i linjer, medmindre pause

-tagget bruges, og den definerede tekst (indhold) mellem de åbne og lukkede tags vises som en linje (som standard uden at bruge andre elementer).

Inline elementer er tekstelementer i HTML-filen og kan defineres inden for linjen i et andet element.

Som elementet har ingen betydning for optimal reference. Det viser i grunden elementets indhold som det er, men alle forekomster kan defineres i CSS for styling, hvis de er mærket korrekt og beriget med andre attributter eller manipuleret med JavaScript.

I eksemplet nedenfor fremhæver den blå tekst, hvordan spændelementet kan nestes som et inlineelement med forskellige attributter end dets overordnede element - stykket p>:

For at åbne eksemplet klik på ikonet nederst af siden.

Når du ser i en webbrowser, vises teksten i elementet ovenfor i en anden skrifttype til stykket for at fremhæve, hvor brugeren skal klikke for at få adgang til eksemplet.

Bemærk, at der ikke er forskelle mellem HTML4 og HTML5.