HTML5-standarden blev afsluttet og frigivet i 2014, og det var, hvad HTML skulle have været, da den første version blev lanceret for alle disse år siden. HTML 2.0 var den første ægte 'standard', der blev offentliggjort helt tilbage i 1995. To år senere blev HTML 3 offentliggjort. Yderligere to år senere blev HTML 4.01 introduceret, og det har været arbejdshesten på Internettet siden da.
Det første 'arbejdsudkast' af HTML5 blev introduceret tilbage i 2008 med overraskende bred browserstøtte dengang. HTML5, som vi kender i dag, er vidt forskellig fra fortidens HTML, og her skal vi diskutere, hvad den nyeste standard ændrede sig med dens udgivelse. Siden HTML5 blev lanceret, er det blevet bredt accepteret, og alle dens funktioner og funktioner understøttes nu af alle større browsere. Der er stadig et par hikke her og der, men samlet set har HTML5 assimileret godt med den moderne online-oplevelse.
Som webudvikler kan du enten være en gammel pro, der har mestret de ældre standarder eller en nybegynder nysgerrig set udviklingen af nye standarder på sidelinjen. Uanset hvad, skal du til sidst begynde at skifte over til HTML5.
HTML Vs HTML5 Infographic
Det første trin til overgang til HTML5 eller indlæring er at forstå forskellen mellem den ældre standard og den nyeste. Her er nogle vigtige forskelle mellem HTML og HTML5:
-
HTML5 er et levende sprog
HTML5 er et levende sprog, et igangværende arbejde. Det er forbløffende at se, hvad HTML5 kan gøre, men det er også vigtigt at vide, at HTML5 ikke er en fuldt standardiseret version som HTML4, som er mere end ti år gammel og en fast standard, uforanderlig.
Hvis du kommer ind i HTML5, bliver du nødt til at foretage nogle opdateringer. Attributter og elementer tilføjes og ændres regelmæssigt hvert år. Dette afhænger også af, hvor meget du bruger rige elementer, men det er bestemt en af de risici, der er forbundet med at bruge et flydende, skiftende sprog som HTML5.
-
HTML5 er enklere
Mens HTML5 har risici som konstante opdateringer, er det generelt let at følge med på ændringerne og opdateringerne på grund af den enklere syntaks sammenlignet med HTML4. For eksempel har du en meget simpel erklæring i starten af siden for at indstille den som en HTML5-side:
Den enkle Doctype-erklæring er en af de forenklinger, der er foretaget i HTML-syntaks, som er kompatibel med alle versioner fra HTML4 og helt tilbage til XHTML1. HTML5 er dog ikke kompatibel med SGML.
Anbefalede kurser
- Gratis Python-programmeringstræning
- Free Software Testing Certification Course
- Gratis Java-programmeringskurser
- Komplet PERL-kursus
-
Det nye element
HTML5 kommer med en række nye elementer og eliminerer flere andre (som vi vil dække i et stykke tid), men et af de vigtigste tilføjede elementer er, hvilket har haft enorm indflydelse på brugen af Adobe Flash på websteder. Selvom Flash stadig bruges af flere websteder, er HTML5 blevet vedtaget mange, og mange mennesker tror, at det til sidst vil gøre Flash forældet. Det er kun tiden, der bestemmer det; Indtil da har HTML5's kaskadeelement vist sig at være et godt alternativ til Flash.
Elementet kan bruges til at tegne grafik med forskellige former og farver via scripting, normalt JavaScript. Elementet er simpelthen en beholder til grafikken; skal du bruge et script til at definere grafikken. Som standard er et lærred et rektangulært område uden indhold eller grænser. Markedet er sådan:
Det er vigtigt at specificere en id-attribut såvel som bredde og højde til at definere lærredets størrelse. Du kan tilføje en stilattribut for at definere grænser.
Du kan også bruge JavaScript, som følgende eksempel:
var c = document.getElementById (“myCanvas”);
var ctx = c.getContext (“2d”);
ctx.fillStyle = “# FF0000”;
ctx.fillRect (0, 0, 150, 75);
-
De nye og elementer
En anden stor tilføjelse, som HTML5 kommer med, er de nye og elementer, der indikerer en ny webanatomi. Med disse nye tags er der ikke længere behov for at identificere de to elementer med et tag.
Specifikationerne definerer overskriftselementet som repræsenterer en gruppe 'navigations-' eller 'indledende' hjælpemidler. Som sådan kan elementet bruges til at definere en introduktion til et afsnit på en side eller til selve siden. Her er et kodestykke, der bruger headerelementet.
Titel
Af forfatter Arkiveret i Web 2.0
Tekstkrop
HTML5-specifikationerne refererer til fodelementet som repræsenterer 'en sidefod til dets nærmeste forfæders seksionsindhold eller sektion af rodelement', og indeholder generelt oplysninger om sektionen, som forfatternavnet, copyright-data, links til dokumenter osv.
Logisk set er sidefoden placeret i bunden af websiden. Men det kan også placeres i slutningen af en sidesektion. Her er et eksempel på kodning, der bruger sidefodselementet:
Indholdstitel
Af forfatter Arkiveret i Web 2.0
Tekstkrop.
Mærker: Kommandoprompt, kompas, CSS, Sass, terminal
10 likes
Her indeholder sidefoden indlægskoder og indlægget 'Facebook likes'.
-
Elementerne og
Hvis du nu gennemgik ovenstående eksempler, ville du have bemærket et par nye elementer, som f.eks. Dette element sammen med elementet giver dig mulighed for at markere specifikke sektioner i dit layout og er enormt fordelagtige til søgemaskineoptimering. Artikelelementet er specificeret som repræsentativt for en selvstændig komponent på en webside, der kan uafhængigt genbruges eller distribueres. Dette kan være en avis, forumindlæg, magasinartikel, blogindlæg eller noget andet.
Artikelelementet har generelt sin egen overskrift i et headerelement, og måske endda en sidefod, som du så i ovenstående eksempel. Du kan bare tænke på elementet som en blogindgang eller et uafhængigt stykke indhold; den vanskelige del er at identificere, hvad der er uafhængigt. Kort sagt er et uafhængigt stykke indhold et, der giver mening af sig selv.
En god måde at vide, om et stykke indhold er uafhængigt, er ved at spørge, om det giver mening inden for en RSS-feed. Blog artikler og statiske sider giver mening, og nogle steder har kommentarfeeds. Men et afsnit i artiklen giver ikke nogen mening adskilt fra resten af indholdet. Her er et kodestykke med sidefod og udgivelsesmærker.
Indholdstitel
Offentliggjort: 2016-02-24
Tekstkrop
Creative Commons Attribution-ShareAlike-licens
Sektionselementet ifølge W3C-specifikationer, der repræsenterer et 'generisk afsnit' i en applikation eller et dokument. Det kan forveksles med tagget, så lad os rydde forvirringen lige nu. Sektionsmærket bruges, når indholdet i det skal grupperes adskilt fra resten af siden med et enkelt tema, og når det skal ses som en post i sideoversigten. Div-elementet er dog specificeret som en 'generisk container', hvilket betyder, at det ikke er adskilt fra selve hovedsiden, bortset fra dets egen titel, sprog og klasseattributter.
-
Nye og elementer
HTML5's nye og elementer er en del af specifikationerne for interaktive elementer, men er blandt de mindst omtalte elementer fra udviklere. I betragtning af det faktum, at nettet er ændret til mere lige tilknyttede sider og dokumenter, er disse elementer en velkommen tilføjelse til større webinteraktivitet.
Elementet må ikke forveksles med elementet, der er defineret som et HTML-navigationsmærke, der repræsenterer sidenavigationsblokken. Det indeholder typisk links, som brugerne kan hoppe gennem sektioner på siden eller til en anden side. På den anden side repræsenterer menumærket menukommandoer for enkelhed i desktop og mobile applikationer. Her er et eksempel på elementet i handling:
Hej Verden
I mellemtiden er elementet en anden måde at arrangere billeder og tekst på. Det bruges sammen med elementet til markering af illustrationer, diagrammer og fotos. Nedenfor er et kort kodestykket, der indeholder begge elementer i handling.
-
Nye og elementer
Dette er to vigtige tilføjelser til HTML5-standarden. Lydmærket giver, som videomærket, udviklere mulighed for at integrere musik og lyd på deres websted. I modsætning til den foregående standard er du ikke begrænset til at tilføje midi-musik, selvom der stadig er nogle begrænsninger for den anvendte filtype. De fleste Webkit-relaterede browsere understøtter almindelige MP3-filer, men andre understøtter kun OGG-format. Den gode nyhed er, at der er masser af filkonvertere, og du kan blot levere to versioner af lydfilen; den rigtige version afhentes automatisk.
Du kan bruge lydmærket som ethvert andet element. Her er et eksempeluddrag:
Audiomærket har også et antal attributter til yderligere kontroller, inklusive hændelsesattributter, og begivenhederne inkluderer vinduehændelser, formbegivenheder, mediebegivenheder og musebegivenheder. Videoelementet har også et antal indholdsattributter, herunder SRC, globale attributter, loop, kontrol, forudindlæsning og plakat. Attributterne SRC, loop, autoplay og kontroller er temmelig selvforklarende og de samme for alle medieelementer, mens de globale attributter er fælles for alle elementer. De inkluderer dir, skjult, kontekstmenu og mere.
Der er et par andre multimedieattributter og -elementer, der leveres med HTML5, som det sporelement, der indeholder tekstspor til videoelementet.
-
Nye former
HTML5 leveres nu med form og elementer. Hvis du ikke planlægger at bruge mange tabeller på siden, kan du også fjerne attributten og se på ændringerne, der er foretaget, før du går videre.
-
Ikke mere og elementer
Dette betyder, at alle de attributter, der giver udviklere mulighed for at oprette et perfekt udformet, tonet bord, såsom grænsen, bgcolor, align, højde, regler og mere. Alle disse attributter erstattes af CSS.
-
Ikke mere, og
Dette er godt for de udviklere, der har arbejdet igennem de tidlige dage af HTML. Rammesæt, ramme og noframes-attributter er blevet fjernet helt sammen med andre som blink, basefont og mere. Du bliver nødt til at administrere uden at bruge tabeller til layoutet. Tabeller er stadig en del af HTML5, men de er ikke længere beregnet til pixels. Specifikationerne siger, at tabeller ikke skal bruges til layouthjælpemidler og til at kontrollere sidelayoutet.
Konklusion
Som du tydeligt kan se, er der masser af ændringer til HTML5, og du er nødt til at bruge det med omhu og forsigtighed. Du skal også opdatere din viden om sproget, da det ændrer sig over tid og får flere opdateringer. Du er nødt til at stoppe brugen af elementer, som HTML5 har fjernet fra sig selv og bruge de nye HTML5-elementer, der helt sikkert vil forblive, som header- eller sidefodetags.
Hvad du har set ovenfor, er den bare den forenklede version af, hvor mange ændringer HTML5 har foretaget med lanceringen. Men lad os være ærlige her; der er intet enkelt eller langsomt i den måde, hvorpå HTML5 bliver vedtaget, og den nye standard tilføjer mange muligheder, der er afgørende for en moderne brugeroplevelse. Du skal følge med på det nye sprog og også lære noget CSS, som har en større rolle end før.
Det gode ved disse ændringer er, at selvom de er store, er de til det bedre, og dette forstås af alle de involverede parter her. Browsere vil være mere magtfulde, når de bevæger sig mod skyen, med evnen til at håndtere mere af sig selv. Med ting som Ajax og med video- og lydindlejring og så videre, vil det være så meget lettere at kode i en ligetil metode og give browseren mulighed for at påtage sig den tunge opgave. For eksempel henvises der til nye strukturelementer som figur, sidefod, resume og sektion til dokumentstrukturen, og gengivelsen overlades til browseren.
Relaterede artikler:-
Her er nogle artikler, der hjælper dig med at få flere detaljer om HTML vs HTML5, så bare gå gennem linket.
- HTML og XML
- HTML5 vs Flash Top 9 forskelle (med Infographics)
- HTML vs XHTML
- HTML5 vs Flash
- Fantastiske forskelle HTML5 vs JavaScript
- 10 fantastiske nyttige tip om Python-programmering (tricks)