10 najlepších rozdielov HTML oproti HTML5 (infografika)

Obsah:

Anonim

Norma HTML5 bola dokončená a vydaná v roku 2014 a to je to, čo by malo byť, keď bola prvá verzia uvedená na trh pred všetkými tými rokmi. HTML 2.0 bol prvý skutočný „štandard“, ktorý bol uverejnený v roku 1995. O dva roky neskôr bol vydaný HTML 3. O ďalšie dva roky neskôr bol zavedený HTML 4.01 a odvtedy je pracovným koňom internetu.

Prvý „pracovný koncept“ HTML5 bol predstavený už v roku 2008 s vtedy prekvapivo širokou podporou prehliadača. HTML5, ktorý dnes poznáme, sa značne líši od HTML minulosti a tu budeme diskutovať o tom, čo sa jeho vydaním zmenilo najnovšie štandardy. Od uvedenia HTML5 na trh bol široko akceptovaný a všetky jeho funkcie a možnosti sú teraz podporované všetkými hlavnými prehliadačmi. Stále existuje niekoľko škytaviek, ale HTML5 sa celkovo dobre prispôsobuje modernému online prostrediu.

Ako webový vývojár by ste mohli byť buď starým profesionálom, ktorý zvládol staršie štandardy, alebo nováčikom, ktorý zvedavo sleduje vývoj nových štandardov. V každom prípade musíte nakoniec začať s prechodom na HTML5.

HTML Vs HTML5 Infographic

Prvým krokom pri prechode na HTML5 alebo učenie je pochopiť rozdiel medzi starším a posledným štandardom. Tu sú niektoré kľúčové rozdiely medzi HTML a HTML5:

  1. HTML5 je živý jazyk

HTML5 je živý jazyk, prebieha. Je úžasné vidieť, čo môže HTML5 urobiť, ale je tiež dôležité vedieť, že HTML5 nie je plne štandardizovaná verzia, ako je HTML4, ktorá je staršia ako desať rokov a je nastavená, nemenná.

Ak sa dostávate do jazyka HTML5, budete musieť urobiť nejaké aktualizácie. Atribúty a prvky sa každý rok pridávajú a pravidelne upravujú. Závisí to aj od toho, do akej miery využívate bohaté prvky, ale je to určite jedno z rizík, ktoré so sebou prináša tekutina, zmena jazyka ako HTML5.

  1. HTML5 je jednoduchší

Aj keď HTML5 má riziká ako neustále aktualizácie, vo všeobecnosti je ľahké držať krok so zmenami a aktualizáciami kvôli jednoduchšej syntaxi v porovnaní s HTML4. Napríklad na začiatku stránky máte veľmi jednoduché vyhlásenie, ktoré ho nastaví ako stránku HTML5:

Jednoduchá deklarácia Doctype je jedným zo zjednodušení vykonaných v syntaxi HTML, ktorá je kompatibilná so všetkými verziami HTML4 a celú cestu späť do XHTML1. HTML5 však nie je kompatibilný s SGML.

Odporúčané kurzy

  • Zadarmo Python programovacie školenie
  • Bezplatný certifikačný kurz testovania softvéru
  • Programovacie kurzy Java zadarmo
  • Kompletný kurz PERL
  1. Nový prvok

HTML5 prichádza s mnohými novými prvkami a odstraňuje niekoľko ďalších (ktoré sa chvíľu zaoberáme), ale jedným z jeho kľúčových pridaných prvkov je to, čo má obrovský vplyv na používanie Adobe Flash na webových stránkach. Aj keď je Flash stále používaný na viacerých webových stránkach, HTML5 bolo adoptovaných mnohými a veľa ľudí si myslí, že Flash bude nakoniec zastaraný. O tom rozhodne iba čas; dovtedy sa kaskádový prvok HTML5 osvedčil ako dobrá alternatíva k programu Flash.

Tento prvok sa dá použiť na kreslenie grafiky s rôznymi tvarmi a farbami pomocou skriptovania, zvyčajne skriptu JavaScript. Prvkom je jednoducho kontajner pre grafiku; musíte na definovanie grafiky použiť skript. V predvolenom nastavení je plátno obdĺžnikovou oblasťou bez obsahu alebo ohraničení. Trh je taký:

Na definovanie veľkosti plátna je dôležité zadať atribút id, ako aj šírku a výšku. Ak chcete definovať hranice, môžete pridať atribút štýlu.

Môžete použiť aj JavaScript, napríklad nasledujúci príklad:

var c = document.getElementById („myCanvas“);

var ctx = c.getContext („2d“);

ctx.fillStyle = “# FF0000”;

ctx.fillRect (0, 0, 150, 75);

  1. Nové a prvky

Ďalším veľkým prírastkom, ktorý prichádza s HTML5, sú nové prvky a prvky naznačujúce novú webovú anatómiu. S týmito novými značkami už nie je potrebné identifikovať tieto dva prvky pomocou značky.

Špecifikácie definujú prvok hlavičky tak, že predstavuje skupinu „navigačných“ alebo „úvodných“ pomôcok. Prvok sa preto môže použiť na definovanie úvodu do časti stránky alebo do celej stránky. Tu je útržok kódu, ktorý používa prvok hlavičky.

nadpis

Autor Autor: Web 2.0

Text

Špecifikácie HTML5 označujú element päty ako „pätu pre najbližší obsah sekcie predkov alebo koreňový prvok sekcie“ a vo všeobecnosti obsahujú informácie týkajúce sa sekcie, ako je meno autora, údaje o autorských právach, odkazy na dokumenty atď.

Logicky je päta umiestnená v dolnej časti webovej stránky. Môže sa však umiestniť aj na koniec časti stránky. Tu je niekoľko príkladov kódovania, ktoré používajú element päty:

Názov obsahu

Autor Autor: Web 2.0

Text.

Značky: Príkazový riadok, Kompas, CSS, Sass, Terminál

10 páči sa mi

Päta tu obsahuje značky príspevkov a príspevok „Páči sa mi Facebook“.

  1. Prvky a

Ak by ste prešli vyššie uvedenými príkladmi, všimli by ste si niekoľko ďalších nových prvkov, napríklad. Tento prvok spolu s prvkom umožňuje označiť konkrétne časti rozloženia a sú mimoriadne prospešné pre optimalizáciu vyhľadávacieho nástroja. Prvok článku je určený tak, že predstavuje samostatnú súčasť webovej stránky, ktorá sa dá opakovane opakovane použiť alebo distribuovať. Môže to byť denník, príspevok na fóre, článok v časopise, blogový príspevok alebo čokoľvek iné.

Prvok článku má spravidla svoj vlastný nadpis v prvku hlavičky a možno aj pätu, ako ste videli vo vyššie uvedenom príklade. Jednoducho si môžete predstaviť tento prvok ako položku blogu alebo samostatnú časť obsahu; chúlostivou časťou je identifikácia toho, čo je nezávislé. Jednoducho povedané, nezávislý obsah je taký, ktorý má zmysel sám o sebe.

Dobrým spôsobom, ako zistiť, či je obsah nezávislý, je otázka, či má zmysel v informačnom kanáli RSS zmysel. Články blogu a statické stránky dávajú zmysel a niektoré webové stránky majú informačné kanály. Odsek v článku by však nedal zmysel oddelene od zvyšku obsahu. Tu je útržok kódu so značkami päty a publikovania.

Názov obsahu

Publikované: 2016-02-24

Text

Licencia Creative Commons Attribution-ShareAlike

Prvok oddielu podľa špecifikácií W3C predstavuje „všeobecný oddiel“ aplikácie alebo dokumentu. Dalo by sa to zameniť so značkou, takže teraz zmeňme zmätok. Značka sekcie sa používa, keď je obsah v nej potrebné zoskupiť oddelene od zvyšku stránky s jednou témou a keď by sa mal považovať za položku v obryse stránky. Prvok div je však špecifikovaný ako „generický kontajner“, čo znamená, že nie je oddelené od hlavnej stránky, okrem vlastných atribútov názvu, jazyka a triedy.

  1. Nové a prvky

Nové a prvky HTML5 sú súčasťou špecifikácií interaktívnych prvkov, ale vývojári patria medzi najmenej hovorené prvky. Vzhľadom na skutočnosť, že sa web zmenil na viac prepojené stránkované dokumenty a dokumenty, tieto prvky sú vítaným doplnkom väčšej interaktivity webu.

Tento prvok sa nesmie zamieňať s prvkom, ktorý je definovaný ako navigačná značka HTML, ktorá predstavuje blok navigácie na stránke. Spravidla obsahuje odkazy, pomocou ktorých môžu používatelia prechádzať sekciami na stránke alebo na inú stránku. Na druhej strane značka ponuky predstavuje príkazy ponuky pre jednoduchosť v stolných a mobilných aplikáciách. Tu je príklad prvku v akcii:

Ahoj svet

Medzitým je tento prvok ďalším spôsobom usporiadania obrázkov a textu. Používa sa spolu s prvkom na označenie ilustrácií, schém a fotografií. Nižšie je uvedený krátky útržok kódu, ktorý obsahuje oba prvky v akcii.

"Popis

  1. Nové a prvky

Toto sú dva hlavné prídavky k štandardu HTML5. Zvuková značka, rovnako ako značka videa, umožňuje vývojárom vkladať hudbu a zvuk na svoju webovú stránku. Na rozdiel od predchádzajúceho štandardu sa neobmedzujete iba na pridávanie hudby midi, aj keď stále existujú určité obmedzenia týkajúce sa typu použitých súborov. Väčšina prehľadávačov súvisiacich s Webkitom podporuje bežné súbory MP3, ale iné podporujú iba formát OGG. Dobrou správou je, že existuje veľa prevodníkov súborov a môžete jednoducho dodať dve verzie zvukového súboru; správna verzia bude vyzdvihnutá automaticky.

Zvukovú značku môžete použiť ako akýkoľvek iný prvok. Tu je príklad útržku:

Zvukový štítok má tiež množstvo atribútov pre ďalšie ovládacie prvky, vrátane atribútov udalostí a udalosti zahŕňajú udalosti v okne, udalosti formulára, mediálne udalosti a udalosti myši. Prvok videa má tiež niekoľko atribútov obsahu vrátane SRC, globálnych atribútov, slučky, riadenia, predbežného načítania a plagátu. Atribúty SRC, loop, autoplay a control sú celkom samozrejmé a rovnaké pre všetky mediálne prvky, zatiaľ čo globálne atribúty sú spoločné pre všetky prvky. Zahŕňajú dir, skryté, kontextové menu a ďalšie.

HTML5 obsahuje niekoľko ďalších multimediálnych atribútov a prvkov, napríklad prvok stopy, ktorý poskytuje textové stopy pre prvok videa.

  1. Nové formuláre

HTML5 teraz prichádza s tvarom a prvkami. Ak na stránke nechcete používať veľa tabuliek, môžete tiež odstrániť atribút a pozrieť sa na vykonané zmeny a až potom pokračovať.

  1. Už žiadne a prvky

To znamená, že všetky atribúty, ktoré vývojárom umožňujú vytvárať dokonale usporiadané, tónované tabuľky, ako sú hranice, bgcolor, zarovnanie, výška, pravidlá a ďalšie. Všetky tieto atribúty sú nahradené CSS.

  1. Nie viac a

To je skvelé pre vývojárov, ktorí pracovali v prvých dňoch HTML. Atribúty frameset, frame a noframes boli úplne odstránené, spolu s ostatnými ako blink, basefont a ďalšie. Budete musieť spravovať bez použitia tabuliek pre rozloženie. Tabuľky sú stále súčasťou HTML5, ale už nie sú určené pre pixely. Špecifikácie hovoria, že tabuľky by sa nemali používať na pomôcky na rozloženie a na riadenie rozloženia stránky.

záver

Ako jasne vidíte, v HTML5 je veľa zmien a vy ho musíte používať opatrne a opatrne. Musíte tiež aktualizovať svoje znalosti jazyka, pretože sa postupom času mení a získava viac aktualizácií. Musíte zastaviť používanie prvkov, ktoré zo seba odstránil HTML5, a používať nové prvky HTML5, ktoré určite zostanú, napríklad značky hlavičky alebo päty.

To, čo ste videli vyššie, je iba zjednodušená verzia toho, koľko zmien HTML5 urobil so spustením. Ale buďme tu úprimní; spôsob, akým sa HTML5 prijíma, nie je nič jednoduchého alebo pomalého a nový štandard pridáva množstvo funkcií, ktoré sú rozhodujúce pre moderné užívateľské prostredie. Musíte držať krok s novým jazykom a tiež sa naučiť nejakú CSS, ktorá má väčšiu úlohu ako predtým.

Dobrá vec na týchto zmenách je, že hoci sú veľké, sú k lepšiemu a všetkým zúčastneným stranám tu rozumejú. Prehliadače budú výkonnejšie, keď sa budú pohybovať smerom k cloudu a budú schopné zvládnuť viac sami. S vecami, ako je Ajax, s vložením videa a zvuku atď., Bude oveľa jednoduchšie kódovať jednoduchou metódou a umožní prehliadaču prijať náročné úlohy. Napríklad nové prvky štruktúry, ako sú obrázok, päta, zhrnutie a sekcia, sa všetky odkazujú na štruktúru dokumentu a vykreslenie sa ponechá na prehliadači.

Súvisiace články: -

Tu je niekoľko článkov, ktoré vám pomôžu získať viac podrobností o HTML verzus HTML5, takže stačí prejsť na odkaz.

  1. HTML a XML
  2. Rozdiely medzi HTML5 a Flash Top 9 (s informáciami)
  3. HTML vs XHTML
  4. HTML5 verzus Flash
  5. Úžasné rozdiely HTML5 vs JavaScript
  6. 10 úžasných užitočných tipov na programovanie v Pythone (triky)