A HTML5 szabványt 2014-ben véglegesítették és kiadták, és ennek kellett volna lennie a HTML-nek, amikor az első verziót évekkel ezelőtt elindították. A HTML 2.0 volt az első igazi „szabvány”, amelyet egészen 1995-ben tettek közzé. Két évvel később a HTML 3 megjelent. Két évvel később bevezették a HTML 4.01-et, amely azóta az internetes munka lója.
A HTML5 első „működési tervezetét” már 2008-ban vezették be, akkoriban meglepően széles böngésző-támogatással. A manapság ismert HTML5 nagyban különbözik a múlt HTML-kódjától, és itt csak azt fogjuk megvitatni, hogy mi változott a legújabb szabvány kiadásával. A HTML5 elindítása óta széles körben elfogadják, és annak összes funkcióját és képességeit most minden nagyobb böngésző támogatja. Még mindig van néhány csuklás itt és ott, de az összes HTML5 jól illeszkedik a modern online élményhez.
Webfejlesztőként lehet egy régi profi, aki elsajátította a régebbi szabványokat, vagy egy kezdő, aki kíváncsi módon figyeli az új szabványok kidolgozását az oldalról. Akárhogy is, végül meg kell kezdenie az átállást a HTML5-re.
HTML Vs HTML5 Infographic
A HTML5-re való átálláshoz vagy a tanuláshoz az első lépés a régebbi és a legújabb szabvány közötti különbség megértése. Íme néhány fő különbség a HTML és a HTML5 között:
-
A HTML5 egy élő nyelv
A HTML5 egy élő nyelv, folyamatban lévő munka. Csodálatos látni, hogy mit tehet a HTML5, de fontos tudni, hogy a HTML5 nem teljesen standardizált verzió, mint például a HTML4, amely több mint tíz éve van, és meghatározott szabvány, változatlan.
Ha bekerül a HTML5-be, akkor frissítést kell tennie. Az attribútumokat és elemeket évente hozzáadják és rendszeresen módosítják. Ez attól is függ, hogy mennyit használ gazdag elemeket, de ez határozottan az egyik kockázata, ha folyékony, változó nyelvet, például HTML5-et használunk.
-
A HTML5 egyszerűbb
Noha a HTML5 olyan kockázatokkal jár, mint az állandó frissítések, általában a HTML4-hez képest egyszerűbb szintaxis miatt könnyű lépést tartani a változásokkal és frissítésekkel. Például egy nagyon egyszerű nyilatkozattal rendelkezik az oldal elején, hogy HTML5 oldalra állítsa:
Az egyszerű Doctype-deklaráció a HTML-szintaxis egyik egyszerűsítése, amely kompatibilis a HTML4 összes verziójával és egészen az XHTML1-ig. A HTML5 azonban nem kompatibilis az SGML-vel.
Ajánlott tanfolyamok
- Ingyenes Python programozási tréning
- Ingyenes szoftver tesztelési tanúsító tanfolyam
- Ingyenes Java programozási tanfolyamok
- Teljes PERL tanfolyam
-
Az új elem
A HTML5 számos új elemmel érkezik, és kiküszöböli számos más elemet (amelyeket egy rövid idő alatt le fogunk fedni), de az egyik legfontosabb hozzáadott elem az, amely nagymértékben befolyásolta az Adobe Flash használatát a weboldalakon. Bár a Flash továbbra is számos weboldalon használatos, a HTML5-et sokan elfogadták, és sokan azt gondolják, hogy ez a Flash végül elavulttá válik. Csak az idő fogja eldönteni; addig a HTML5 kaszkád elem bebizonyította, hogy jó alternatívája a Flash-nek.
Az elem felhasználható különböző formájú és színű grafikák rajzolására szkriptek, általában JavaScript segítségével. Az elem egyszerűen egy konténer a grafikához; a grafika meghatározásához szkriptet kell használni. Alapértelmezés szerint a vászon egy téglalap alakú terület, amelynek nincs tartalma vagy szegélyei. A piac így van:
A vászon méretének meghatározásához fontos megadni az id attribútumot, valamint a szélességet és a magasságot. Hozzáadhat egy stílusattribútumot a határok meghatározásához.
Használhatja a JavaScriptet is, például a következő példa szerint:
var c = document.getElementById („myCanvas”);
var ctx = c.getContext („2d”);
ctx.fillStyle = “# FF0000”;
ctx.fillRect (0, 0, 150, 75);
-
Az új és az elemek
Egy másik nagy kiegészítés, amelyhez a HTML5 tartozik, az új elemek és elemek, amelyek jelzik az új webes anatómiát. Ezekkel az új címkékkel nincs szükség a két elem azonosítására egy címkével.
A specifikációk a fejlécet úgy definiálják, mint amely a „navigációs” vagy „bevezetõ” segédeszközök csoportját képviseli. Mint ilyen, az elem felhasználható az oldal egy részének vagy magának az egész oldalnak a bevezetésére. Itt egy kódrészlet, amely a fejlécet használja.
Cím
Írta: Web 2.0
A szöveg törzse
A HTML5 specifikációk arra utalnak, hogy a láb elem „láblécét reprezentálja a legközelebbi őse tartalmi részét vagy szakaszos gyökér elemét”, és általában információkat tartalmaznak a szakaszról, például a szerző neve, szerzői jogi adatok, linkek a dokumentumokhoz és így tovább.
Logikus szempontból a lábléc a weboldal alján helyezkedik el. De elhelyezhető az oldalrész végén is. Íme néhány példa a láblécet használó kódolásra:
Tartalom címe
Írta: Web 2.0
A szöveg törzse.
Címkék: Parancssor, Iránytű, CSS, Sass, Terminal
10 kedvel
Itt a lábléc postai címkéket és a „Facebook kedveli” bejegyzést tartalmazza.
-
A és az elemek
Ha átnézi a fenti példákat, észrevetne még néhány új elemet, például a. Ez az elem és az elem lehetővé teszi az elrendezés bizonyos szakaszának megjelölését, és rendkívül előnyös a keresőmotor optimalizálása szempontjából. A cikk elemét úgy definiálják, hogy egy weboldal önálló elemét képviselje, hogy függetlenül újrafelhasználható vagy terjeszthető legyen. Ez lehet újság, fórumbejegyzés, folyóiratcikk, blogbejegyzés vagy bármi más.
A cikk elemének általában van egy saját címsora egy fejlécelemben, és talán még egy lábléc is, amint azt a fenti példában látta. Az elemről egyszerűen csak blogbejegyzésként vagy független tartalomdarabként gondolhat; a trükkös rész azonosítja azt, ami független. Egyszerűen fogalmazva: egy független tartalom olyan, amely önmagában is értelme.
A tartalom függetlenségének megismerésére jó kérdés az, hogy vajon van-e értelme egy RSS-hírcsatornán belül. A blogcikkeknek és a statikus oldalaknak van értelme, és egyes webhelyek kommentárcsatornákat tartalmaznak. De a cikk egy bekezdésének nincs értelme külön a többi tartalomtól. Itt van egy kódrészlet lábléc és közzétételi címkékkel.
Tartalom címe
Publikálva: 2016-02-24
A szöveg törzse
Creative Commons Nevezd meg!
A szakasz elem a W3C specifikációk szerint, amely egy alkalmazás vagy dokumentum „általános szakaszát” képviseli. Összekeverhető a címkével, tehát most tisztítsuk ki a zavart. A szakaszcímkét akkor használják, ha az abban lévő tartalmat az oldal többi részétől elkülönítve kell csoportosítani egyetlen témával, és amikor azt az oldal körvonalaként bejegyzésnek kell tekinteni. A div elem azonban „általános tárolóként” van megadva, ami azt jelenti, hogy nem különül el a főoldaltól, eltekintve a saját címétől, a nyelvétől és az osztály attribútumaitól.
-
Új és elemek
A HTML5 új és elemei az Interactive Elements specifikációk részét képezik, de a fejlesztők által a legkevésbé beszélt elemek közé tartoznak. Figyelembe véve azt a tényt, hogy az internet könnyebben összekapcsolt oldalakké és dokumentumokká változott, ezek az elemek üdvözlendő kiegészítésként szolgálnak a nagyobb webes interaktivitás érdekében.
Az elemet nem szabad összetéveszteni az elemmel, amelyet HTML navigációs címkeként definiálnak, amely az oldal navigációs blokkját képviseli. Ez általában linkeket tartalmaz a felhasználók számára az oldal egyes szakaszaira vagy egy másik oldalra ugráshoz. Másrészt a menücímke az asztali és a mobil alkalmazások egyszerűségének menüparancsokat képviseli. Íme egy példa a működésben lévő elemre:
Helló Világ
Eközben az elem a képek és a szöveg elrendezésének másik módja. Az elemmel együtt használják az illusztrációk, diagramok és fényképek jelölésére. Az alábbiakban bemutatunk egy rövid kódrészletet, amely mindkét elemet működőképes.
-
Új és elemek
Ez a HTML5 szabvány két fő kiegészítése. Az audiocímke, akárcsak a videocímke, lehetővé teszi a fejlesztők számára, hogy zene és audio beágyazódjanak webhelyükre. A korábbi szabványtól eltérően, nem korlátozódik a midi zene hozzáadására, bár a használt fájltípusokra továbbra is vannak korlátozások. A legtöbb Webkit-alapú böngésző támogatja a szokásos MP3 fájlokat, de mások csak az OGG formátumot támogatják. A jó hír az, hogy rengeteg fájl konverter van, és egyszerűen csak kétféle audiofájl szállíthat; a megfelelő verziót automatikusan felveszi.
A hangcímkét ugyanúgy használhatja, mint bármely más elemet. Íme egy példarészlet:
Az audiocímke számos attribútumot tartalmaz a kiegészítő vezérlőkhöz, beleértve az eseményttribútumokat, és az események ablakos eseményeket, űrlap eseményeket, média eseményeket és egér eseményeket tartalmaznak. A video elemnek számos tartalmi attribútuma is van, ideértve az SRC-t, a globális attribútumokat, a hurkot, a vezérlést, az előtöltést és a posztert. Az SRC, a loop, az automatikus lejátszás és a vezérlő attribútumok meglehetősen önmagukban vannak és azonosak az összes médiaelemhez, míg a globális attribútumok minden elemnél általánosak. Ide tartoznak a dir, a rejtett, a helyi menü és még sok más.
Van néhány más multimédiás attribútum és elem is, amelyek a HTML5-hez tartoznak, például a track elem, amely szöveges sávokat biztosít a video elemhez.
-
Új formák
A HTML5 mostantól az űrlappal és az elemekkel rendelkezik. Ha nem tervezi, hogy sok táblát használ az oldalon, akkor eltávolíthatja az attribútumot, és áttekintheti a végrehajtott módosításokat, mielőtt továbblépne.
-
Nincs több és elem
Ez azt jelenti, hogy az összes attribútum, amely lehetővé teszi a fejlesztők számára, hogy tökéletesen elrendezett, színezett táblát hozzon létre, például a szegélyt, a bgcolor-t, az igazítást, a magasságot, a szabályokat és egyebeket. Mindezeket az attribútumokat CSS váltja fel.
-
Nincs több, és
Ez nagyszerű azoknak a fejlesztőknek, akik a HTML kezdeti napjain dolgoztak át. A frameet, frame és noframes attribútumokat teljes mértékben eltávolították, másokkal, például a villogással, basefont és másokkal együtt. A táblák használata nélkül el kell végeznie az elrendezést. A táblázatok továbbra is a HTML5 részét képezik, de a pixeleknek nem szánják őket. A specifikációk szerint a táblázatokat nem szabad használni elrendezési segédeszközökhez és az oldal elrendezésének vezérléséhez.
Következtetés
Mint jól látható, sok változás van a HTML5-ben, ezért óvatosan és körültekintően kell használni. Frissítenie kell a nyelv ismereteit is, mivel az idővel megváltozik, és újabb frissítéseket kap. Le kell állítania az olyan elemek használatát, amelyeket a HTML5 eltávolított magából, és használnia kell az új HTML5 elemeket, amelyek minden bizonnyal megmaradnak, mint például a fejléc vagy a lábléc címkék.
Amit fent láttál, az a HTML5 az elindításakor elvégzett változtatások egyszerűsített változata. De legyünk őszinték itt; nincs semmi egyszerű vagy lassú a HTML5 elfogadásának módjában, és az új szabvány sok olyan képességgel bővül, amelyek elengedhetetlenek a modern felhasználói élményhez. Lépést kell tartania az új nyelven, és el kell tanulnia néhány CSS-t is, amelynek a korábbinál nagyobb szerepe van.
Jó dolog ezekben a változásokban az, hogy bár nagyok is, a jobb oldalon vannak, és ezt megértik az összes érintett fél. A böngészők annál erősebbek lesznek, ha a felhő felé haladnak, és képesek lesznek többet kezelni. Olyan dolgokkal, mint például az Ajax, valamint a video- és audiobeágyazások és így tovább, sokkal könnyebb lesz kódolni egy egyszerű módszerrel, és lehetővé teszik a böngészőnek, hogy vállalja a nehéz feladatokat. Például az új szerkezeti elemekre, például az ábrára, a láblécre, az összefoglalóra és a szakaszra mind a dokumentum szerkezetére hivatkoznak, és a megjelenítést a böngésző hagyja el.
Kapcsolódó cikkek:-
Íme néhány cikk, amelyek segítenek a HTML és a HTML5 részletesebb ismertetésében, ezért csak keresse meg a linket.
- HTML és XML
- HTML5 vs Flash 9 legfontosabb különbség (infographics)
- HTML vs XHTML
- HTML5 vs Flash
- Csodálatos különbségek HTML5 vs. JavaScript
- 10 fantasztikus hasznos tipp a Python programozáshoz (trükkök)