Share
Kredit: Ämne Enkelt - Vad är HTML5? De gör coola animerade videor.
Välkommen till Envato Tuts +! Denna handledning ger en inledande översikt över HTML5. Om du inte har hört mycket om det eller bara vill förstå dess relevans, har du kommit till rätt ställe.
HTML5 är den senaste standarden för webbläsare att visa och interagera med webbsidor. Godkänd 2014, den är den första uppdateringen till HTML på 14 år. I denna dag och ålder är det en livstid mellan uppdateringar.
Syftet med HTML5 är framförallt att göra det enklare för webbutvecklare och webbläsarskapare att följa konsensusbaserade standarder som gör compliance effektivare och mer effektivt. Det är också utformat för att ge bättre, snabbare och mer konsekventa användarupplevelser för stationära och mobila besökare.
Här är några viktiga förbättringar i HTML5:
Till exempel nedan är ett HTML5 geolocation exempel från Bygga din start med PHP: Geolocation och Google Places (Tuts +):
HTML5 förbättrar hastighet, användarvänlighet och konsistens över hela webben. Ja, din YouTube-upplevelse blir gradvis underbart. Det kommer att finnas färre webbläsare- och pluginuppdateringar, färre säkerhetshot och mer eleganta, mer läsbara och snabbare webbplatser.
HTML5 gör ditt liv otroligt enklare och utökar kraftigt vad som är möjligt. Det betyder också att du kommer att kunna bygga saker och lita mer på webbläsare byggare för att säkerställa konsistens. Det betyder mycket mindre villkorlig layoutkod.
Å ena sidan har du en bra färdplan i HTML5-specifikationen som beskriver hur och vad du ska bygga. Å andra sidan finns det mer att göra och få rätt. Det kommer inte vara lika lätt att skilja din webbläsare jämfört med de stora flickans webbläsare.
Bara en snabb påminnelse innan vi dyker in! Jag försöker delta i diskussionerna nedan. Om du har en fråga eller ett ämne förslag till en framtida handledning, vänligen skicka en kommentar nedan eller kontakta mig på Twitter @ reifman.
HTML5 är den senaste i över 20 år av webbläsarprogrammeringsstandarder sedan lanseringen av webben 1991.
HTML först uppkom som en standard 1993, och här är tidslinjen för HTML-versioner som godkänts av standardkommittéer:
Enligt Wikipedia är HTML5 avsett att konsolidera tidigare versioner och differentierade dokumenttyper som XHTML 1 och DOM Level 2 HTML:
[HTML5] utökar, förbättrar och rationaliserar markeringen tillgänglig för dokument och introducerar markering och ... (API) för komplexa webbapplikationer ... HTML5 är också en potentiell kandidat för mobila applikationer på plattformen. Många funktioner har utformats med lågdrivna enheter som smartphones och tabletter som tagits i beaktande.
Här är en sammanfattning av hur MakeUseOf förklarade HTML5: s mål:
Bild kredit: Ämne Simple
Mycket, det visar sig! HTML5 ger en så imponerande lista över nya möjligheter att de stora webbläsarna fortfarande inte är helt kompatibla även 18 månader efter dess godkännande:
Bildkrediter: PHPFlow
Det finns också denna interaktiva visuella regnbåge på HTML5Readiness. Håll över olika bågar och du kan se vilka funktioner som stöds av vilka webbläsare:
Det är roligt, men andra diagram på andra webbplatser kan vara mer funktionellt intuitiva att använda.
Under 2011 rapporterade Wikipedia om att en tredjedel av de 100 bästa webbplatserna stödde vissa HTML5-filer. I augusti 2013 gjorde cirka 153 av Fortune 500-webbplatserna.
Här är en visualisering av storheten i HTML5: s kapacitet:
Bildkredit: Wikipedia
De mest grundläggande nya elementen i HTML5 gör det enklare att lägga ut webbsidor och felsöka din kod eller andra ". Det gör det också lättare för automatiserade tjänster att skanna webben och förstå vikten av olika sidokomponenter.
För sidlayout och nyckelfunktioner finns nu specifika element som:
Här är en fin visuell översikt av dessa av Smashing Magazine:
Här är några av de mer avancerade funktionerna i HTML5, inklusive API-integration, vilket gör kodning i JavaScript för sofistikerade åtgärder enklare och mer konsekvent över webbläsare:
HTML5 och Webbans framtid erbjuder en annan guide till dessa funktioner. Här är en av deras takeaways-de uppskattar väldigt mycket applikationscachen:
Google Gears gav oss offline datalagring och Flash introducerade oss till kraften i programcache (Pandora använder den för att spara din inloggningsinformation). Med HTML5 är dessa funktioner nu tillgängliga för att använda rätt på språket och kan enkelt utökas med JavaScript.
Behöver du se vilka funktioner som stöds i vilka webbläsare? HTML5Test har en användbar interaktiv bedömning för funktioner och webbläsarsupport:
Det finns så många nya funktioner att det är omöjligt att katalogisera dem alla här. Kontrollera resurslänkarna längst ner i denna handledning för djupare resurser som jag rekommenderar.
Låt oss ta en titt på några fina exempel på HTML5 i aktion.
Enkelheten i HTML5 är tydlig i dess nya sidlayouter. De mer innehållsinriktade elementen gör sidkoden lättare att förstå och felsöka. Här är ett enkelt exempel som jag byggde med HTML5-Återställ-projektet:
Sidans titel
Artikelhuvud
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum är en viktig del av kursen.
Artikelunderrubrik
Kärlek lacus erat, volutpat vel dignissim vid, fringilla ut felis.
Lägg märke till att det finns en enklare doctype-tagg, länktaggar och skript taggar. HTML5Shiv-skriptet tillhandahåller äldre stöd för versioner av Internet Explorer före 9.x.
Om du vill se några andra tillvägagångssätt, kolla in HTML5 Boilerplate, en bredare HTML-sida för öppen källkod.
Här är ett videoexempel från W3Schools som visar källkoden till vänster och den resulterande spelaren till höger:
Det finns inget plugin krävs och inga uppdateringar.
HTML5 har ett brett utbud av förbättringar till formulär och inmatningselement för att göra webprogrammering enklare och användaren upplever mycket bättre. Till exempel stödjer inmatningselement nu en mängd inbyggda valideringar. Här är en validering för siffror inom ett visst intervall:
Här är några bra handledning för att gå ett steg djupare på formulär på HTML5 Doctor:
Här är en demonstration av räckvidd element som visas i en Chrome-webbläsare:
I HTML5 kan du lättare animera element med JavaScript och HTML5. Här är en enkel animerad klocka som är skalbar (ändra zoom):
Här är ett exempel på koden för demo ovanför integrering av JavaScript:
HTML5 Demo: SVG klockanimering SVG klockanimering
SVG klockanimering av David Basoko.
Jag hoppas att du har haft den här översikten över uppkomsten och nytta av HTML5. Om du vill utforska HTML5 ytterligare, finns det ytterligare två resurser som jag skulle vilja föreslå:
Här är ett exempel på de genomsynliga demoserna på HTML5 Demos (inte alla arbetade för mig):
Om du är en WordPress-webbplatschef som många Envato Tuts + -läsare kanske du vill bedöma framtida teman för att de överensstämmer med HTML5. Standardstyrd utveckling med konsekvent webbläsarstöd gör webutveckling mycket enklare för så många av oss och kommer att minska antalet buggar våra kunder går in i, samtidigt som de ger bättre användarupplevelser.
Sammantaget har jag varit ganska imponerad av HTML5. Och det verkar att det fortsätter att utvecklas snabbare än vart 14 år.
Dessutom, om du letar efter andra verktyg för att hjälpa dig att öka dina HTML5-färdigheter, glöm inte att se vad vi har tillgängliga på Envato Market.
Jag skulle gärna höra mer om din feedback om HTML5 och förslag på framtida ämnen som du vill lära dig mer om. Var snäll och posta dina frågor och kommentarer nedan. Du kan också kontakta mig direkt på Twitter @ reifman. För att se andra handledning som jag har skrivit, bläddra i min Envato Tuts + instruktörssida.
Eftersom det finns så många användbara resurser för HTML5 har jag inkluderat en extra hjälp av några av de som jag tycker är mest användbara:
Accentsconagua
