Domov / Skype / Nové funkcie Html5. Čo je nové v HTML5? Nové konštrukčné prvky

Nové funkcie Html5. Čo je nové v HTML5? Nové konštrukčné prvky

S uvoľnením HTML5, bolo do HTML pridaných veľa nových funkcií. A čo je ešte lepšie, niektoré prehliadače už niektoré z týchto funkcií podporujú, zatiaľ čo iné k nim smerujú. Pridanie týchto funkcií do prehliadačov môžete sledovať na tejto stránke.

1. Nový Doctype a Charset.

Jednou zo silných stránok HTML5 je jeho jednoduchosť.

Áno, to je všetko. Doslova dve slová. Táto jednoduchosť je pravdepodobne spôsobená tým, že HTML5 existuje samostatne a nezostáva súčasťou SGML.

Charset je tiež veľmi jednoduchý, používa utf-8 a je nastavený rovnakým spôsobom, doslova s ​​jedným tagom:

2. Nová štruktúra

HTML5 chápe, že webová stránka má štruktúru, rovnako ako napríklad kniha. Väčšinou ide o navigáciu, samotný obsah, bočné menu (bočný panel) a hlavičku. A HTML5 poskytuje značky pre všetky tieto prvky.

  • - definuje sekcie stránky
  • - definuje názov stránky
  • - definuje pätu stránky
  • – definuje článok alebo hlavný obsah na stránke
  • – definuje obrázok, abstrakt článku

3. Nové vstavané prvky.

Tieto nové prvky definujú niektoré základné pojmy a označujú prvky stránky:

  • - na označenie obsahu
  • – na označenie niektorých meraní, napríklad miesta na disku
  • – na označenie vašich úspechov a napredovania

4. Nová podpora pre dynamické stránky

HTML 5 bolo navrhnuté tak, aby zjednodušilo úlohy webových vývojárov, takže existuje veľa nových funkcií na podporu dynamických stránok.

  • Kontextové menu – HTML 5 bude podporovať vytváranie a používanie kontextových ponúk na webových stránkach a aplikáciách
  • asynchrónny atribút – táto značka informuje prehliadač, že skript by sa mal načítať asynchrónne, aby nespomalil zvyšok stránky.
  • – obsahuje podrobné informácie o prvku.
  • - vytvorí tabuľku, ktorá je vytvorená z databázy alebo iného zdroja dynamických stránok
  • – staré značky sú späť, čo vám umožňuje vytvárať systémy menu na vašich webových stránkach
  • - definuje akcie, ktoré by sa mali stať pri aktivácii dynamického prvku

5. Nové typy formulárov

HTML5 podporuje všetky staré typy formulárov, ale boli pridané aj nové:

  • Dátum Čas
  • dátum-čas-miestne
  • mesiac
  • číslo
  • rozsah
  • e-mailom

6. Nové prvky

V HTML5 je niekoľko nových prvkov:

  • je prvok, ktorý umožňuje používať JavaScript na webových stránkach.To vám môže umožniť pridávať obrázky alebo grafiku do popisov alebo jednoducho vytvárať dynamickú grafiku na stránke na cestách.

7. Odstránené položky

Existujú aj prvky HTML4, ktoré sa už v HTML5 nedajú použiť. Väčšina z nich je zastaraná, takže takéto akcie nie sú prekvapujúce.

  • Preklad

Webové technológie sa neustále vyvíjajú. Každý deň sa vytvárajú nové webové stránky, ktoré rozširujú možnosti HTML. HTML 4 existuje už takmer desaťročie, no vydavatelia hľadajú nové spôsoby, ako rozšíriť funkčnosť formátu. Rozmanitosť jazykov a prehliadačov však obmedzuje niektoré z jeho možností.

S cieľom poskytnúť vývojárom flexibilnejší, interoperabilnejší produkt a urobiť projekty interaktívnejšími a zaujímavejšími, HTML 5 zavádza a rozširuje škálu funkcií vrátane ovládacích prvkov formulárov, API, multimédií, štruktúry a sémantiky.

Práce na HTML 5 sa začali v roku 2004. V súčasnosti prebieha vývoj v rámci spoločného úsilia medzi W3C HTML WG a WHATWG. Na vývoji sa podieľa mnoho známych spoločností, vrátane: Apple, Mozilla, Opera a Microsoft a množstvo ďalších organizácií a jednotlivcov s rôznymi záujmami a pozadím.

Upozorňujeme, že špecifikácia je stále vo vývoji a nie je ani zďaleka úplná. Preto je možné, že niektoré funkcie uvedené v tomto článku sa môžu v budúcnosti zmeniť. Tento článok je určený na popis nových funkcií formátu HTML verzie 5.


Štruktúra

HTML 5 prináša množstvo nových prvkov, ktoré výrazne zjednodušujú štruktúru stránky. Väčšina stránok HTML4 obsahuje sériu spoločné štruktúry, napríklad hlavičky a päty (hlavička a päta stránky) a stĺpce a dnes sa stáva tradíciou ich zvýrazňovanie pomocou prvkov div, čím sa získa trieda alebo id.


Obrázok ukazuje typické rozloženie s 2 stĺpcami pomocou prvkov div s priradenou triedou alebo identifikátorom. Štruktúra obsahuje - "hlavičku" stránky, pätu, navigačné menu a obsah rozdelený do 2 stĺpcov -

Uprednostňuje sa použitie prvkov div, pretože v prúde HTML verzie 4 chýba sémantika na presnejšie opísanie týchto častí. HTML 5 tento problém rieši zavedením nových prvkov, z ktorých každý má svoj samostatný názov.

Kód dokumentu vyzerá takto:

...
...
...

...
...


Použitie týchto prvkov má niekoľko výhod. Pri použití v kombinácii s nadpismi prvkov (h1 – h6) to umožňuje vložiť podsekciu s nadpisom na každej úrovni, na rozdiel od možných 6 úrovní v predchádzajúcej verzii HTML. Špecifikácia obsahuje podrobný algoritmus na generovanie hraníc. Tieto prvky možno použiť ako nástroje na tvorbu obsahu a prehliadača na generovanie obsahu a pomáhajú používateľom pri navigácii v dokumente.

Napríklad nasledujúca štruktúra je vrstvená s vnorenými prvkami h1:

Úroveň 1

Úroveň 2

Úroveň 3


Upozorňujeme, že pre maximálnu kompatibilitu s rôzne prehliadače, môžete použiť rôzne úrovne nadpisov ako h2, h3 atď.

Definovaním účelu sekcií na stránke pomocou špecifických prvkov sekcií môže táto technológia pomôcť používateľovi ľahšie sa pohybovať po stránke. Používateľ môže napríklad ľahko prejsť do sekcie ponuky alebo rýchlo prejsť z jedného článku do druhého bez toho, aby vývojár vytvoril takýto navigačný odkaz. Oslavovať môžu aj vývojári, pretože nahradením prvkov div príslušnými prvkami bude zdrojový kód jednoduchší a „čistejší“.

Prvok „hlavička“. predstavuje názov stránky. Táto sekcia môže obsahovať nielen nadpis ako taký, ale aj prípadné podnadpisy, ktoré používateľovi pomôžu lepšie pochopiť obsah stránky.

Ukážka HTML 5

Od Lachlana Hunta

Príklad blogu

Tu vložte riadok značky.


Prvok „päta“. predstavuje „pätu“ stránky. Táto časť stránky zvyčajne obsahuje odkaz na autorské práva, pulty a pod.

prvok „nav“.- definuje sekciu navigácie na stránke:

prvok „strana“. definuje časť tangenciálne súvisiacu s obsahom stránky, najčastejšie sa používa ako príloha.

Úvod

HTML 4 je tu s nami už asi 10 rokov. Počas tejto doby sa neuskutočnili žiadne vážne kroky na jej zlepšenie. Samozrejme, XHTML sa objavilo, ale len sprísňuje pravidlá a núti vás písať stále lepší kód. Zároveň vám plne záleží na dodržiavaní normy. HTML 5 je navrhnutý tak, aby dokázal viac. Pridáva sériu veľmi dôležitých inovácií.

Práca na HTML5 sa začala už v roku 2004, ale až teraz (2009) začína vyvolávať vážny záujem. Podpora prehliadačov sa zvyšuje a prvok, ktorý sa mi páči najviac (CANVAS), podporujú 4 z 5 najbežnejších prehliadačov. Nie je však úplne reálne, hoci možné, používať HTML 5, od r nový štandard nie je podporované v MSIE.

Čo je teda nové v HTML 5?

je pole na kreslenie 2D grafiky riadené JavaScriptom. Môžete ho použiť na vytváranie grafov a iných dynamických obrázkov.

Tag

Tag

Kontextové ponuky

HTML5 tiež poskytuje metódu na jednoduché pridávanie kontextových ponúk na webovú stránku. Možno, že takéto ponuky nie sú pre bežné stránky veľmi užitočné. Ale pre aplikácie, v ktorých by chceli byť mnohé funkcie zoskupené a zobrazené kontextovo, je táto funkcia ako stvorená.

Nové konštrukčné prvky

Keďže HTML 4 je voľne štruktúrované, do 5. verzie špecifikácie boli pridané nové prvky na opravu tohto nedostatku:

  • oddiel alebo odsek.
  • - hlavička stránky (nezamieňať s )
  • - päta strany.
  • - tento tag môže obsahovať napríklad článok na blogu.
  • - možno použiť napríklad na vytváranie diagramov.

Nové inline prvky

Štandard HTML5 zavádza nové prvky, ktoré vám umožňujú špeciálnym spôsobom vyberať časti textu obsahujúce časy a čísla:

  • - označuje časť textu. Nájdené výrazy môžete napríklad označiť v zozname výsledkov vyhľadávania.
  • - reprezentovať čísla v určitom rozsahu. Môže mať rôzne atribúty: hodnotu, minimum, maximum, nízku, vysokú a optimálnu.
  • Môže sa použiť na zobrazenie indikátora stavu procesu. Má niekoľko atribútov: hodnotu a max.

Nové typy vstupných polí

HTML5 pridáva niekoľko nových typov pre vstupné polia:

  • Dátum Čas
  • dátum-čas-miestne
  • mesiac
  • číslo
  • rozsah
  • e-mailom

Niektoré z nich sú široko používané v používateľských rozhraniach desktopových aplikácií. A s najväčšou pravdepodobnosťou už budú dobre známe všetkým vašim používateľom.

Zastarané prvky

Nasledujúce prvky HTML sú zastarané:

  • skratka
  • aplet
  • basefont
  • stred
  • rám
  • frameset
  • isindex
  • noframes
  • noscript
  • štrajk

Syntax pre špecifikáciu kódovania

Syntax na nastavenie kódovania dokumentu v HTML5 je teraz veľmi jednoduchá:

Interaktívne inovácie

Niekoľko noviniek, ktoré uľahčia a spríjemnia vytváranie webových stránok a webových aplikácií:

  • - dodatočné informácie o niečom. Túto značku možno napríklad použiť v prehliadačoch na implementáciu popisu. Značka môže mať otvorený atribút označujúci, či sa obsah značky na začiatku zobrazí používateľovi alebo nie.
  • - Na rozdiel od tradičných tabuliek (ktoré sú navrhnuté ako statické), túto značku možno použiť na reprezentáciu interaktívnej množiny údajov. Napríklad pre tabuľku s výberom riadkov alebo stĺpcov, inline editáciu údajov, triedenie atď.
  • - predtým zastarané, značka sa vrátil k štandardu HTML5 v novom šate. Teraz môže obsahovať napríklad prvky ktoré vyvolajú príslušné príkazy. Tento prvok možno použiť na znázornenie panela nástrojov alebo kontextového menu (pozri vyššie). Značka môže mať atribúty štítku a ikony. Môžu byť pridané na vytvorenie viacúrovňového menu.

Nová definícia typu dokumentu (DTD)

V HTML5 je oveľa jednoduchšie deklarovať DTD:Vyhlásenie DTD sa stalo krajším a hádam aj ľahšie zapamätateľným. Je to pravdepodobne dôsledok toho, že HTML už nie je spojené so SGML.

Nepovinné href v odkazoch

Atribút href je teraz voliteľný, pretože odkazy možno použiť v spojení so skriptmi. Pravdepodobne to bude užitočné vo webových aplikáciách.

async atribút

Atribút dáva prehliadaču náznak, že blok skriptu možno vykonať asynchrónne, namiesto čakania, kým sa stránka úplne nenačíta.

Záver

Prirodzene, nie všetky prehliadače budú podporovať celý štandard (myslím, že čitateľ si teraz spomenul na „obľúbený“ MSIE). Podpora však príde časom. A nové prvky HTML 5 boli navrhnuté s ohľadom na súčasnú situáciu. Na druhej strane väčšina prehliadačov už špecifikáciu čiastočne podporuje. Takže napríklad tag podporované v prehliadačoch Firefox, Opera, Chrome a Safari. Navyše, pokiaľ viem, Firefox 3.5 bude podporovať značky

Takže sa tešíme.

Pre záujemcov špecifikáciu HTML 5 nájdete na nasledujúcom odkaze -

Čo je teda nové v HTML5, čo v HTML4 nebolo?

A v podstate všetko je nové. Špecifikácia HTML5 so sebou prináša mnoho zmien rôznej úrovne a dôležitosti. Zásadné zmeny možno rozdeliť do niekoľkých blokov:

  • Sémantika jazyka. HTML5 zaviedlo množstvo nových sémantických značiek, ktoré pomáhajú zmysluplnejšie organizovať vnútornú štruktúru webových stránok.

Zvážte najznámejšie z nich:

  • nav- slúži na vytvorenie navigačnej lišty;
  • stranou- je zjednocujúci tag, najvhodnejší na zvýraznenie bočného panela. Môže obsahovať navigačné bloky a ďalšie prvky, ktoré nie sú navigačné (reklamné bannery, autorské fotografie, tlačidlá sociálnych sietí atď.);
  • oddiele- tiež zjednocujúci tag. Okrem toho môže vystupovať v rôznych rolách: buď rozdeliť stránku do niekoľkých tematických oblastí, alebo rozdeliť článok priamo na stránke do samostatných sekcií;
  • článok- slúži na rozdelenie stránky na samostatné články. Značky sekcie aj článku majú množstvo zaujímavých funkcií. Napríklad teraz môžete bezpečne použiť nadpis H1 prvej úrovne na tej istej strane niekoľkokrát, čo bolo predtým neprijateľné;
  • hgroup- tag je určený na zoskupenie názvov stránok do jedného logického celku;
  • video- slúži na jednoduché vkladanie videa na stránky stránky;
  • audio- navrhnuté aj pre jednoduché vkladanie mediálneho obsahu na stránky lokality;
  • plátno- vytvára oblasť, v ktorej môžete pomocou JavaScriptu kresliť rôzne objekty, zobrazovať obrázky, transformovať ich a meniť vlastnosti.

O ostatných značkách sa môžete dozvedieť z htmlbook.ru.

  • Multimédiá. HTML5 teraz podporuje multimediálny obsah (prehrávač zvuku a videa) v značke HMTL – s príslušným rozhraním API na ovládanie prehrávania a kodekov.
  • Grafické umenie. Práca s grafikou sa vďaka tagu canvas a špeciálnemu JavaScript API na prácu s ním značne zjednodušila. V HTML5 je oficiálne zahrnutá aj značka svg, ktorá umožňuje vkladanie vektorová grafika, popísaný zodpovedajúcim webovým štandardom (SVG, Scalable Vector Graphics).
  • Webové formuláre. Nové prvky webového formulára: typy aj atribúty, ktoré vám umožňujú rozšíriť možnosti tradičných formulárov pomocou vstavaných nástrojov bez použitia ďalších knižníc na overovanie vstupných údajov, výzvy formulárov.
  • JavaScript API. Rozhranie API pre prácu s grafikou a multimédiami, nové pokročilé funkcie na presúvanie objektov a prácu s históriou prechodov (History API), ako aj množstvo drobností, ako napríklad možnosť upraviť obsah priamo na aktuálnom mieste pomocou atribútov Content Editable.
  • Oveľa viac. Vylepšená sieťová komunikácia. Výrazne vylepšené ukladanie dát. Webové nástroje Pracovník na popravu procesy na pozadí. Rozhranie WebSocket na vytvorenie trvalého spojenia medzi rezidentnou aplikáciou a serverom. Vylepšená rýchlosť ukladania a načítavania stránok. Podpora CSS3 v ovládaní používateľského rozhrania, ktorá zabezpečuje orientáciu obsahu HTML5.

Je teda zrejmé, že formát HTML5 demonštruje zásadne nový prístup k vytváraniu veľkolepej a nezabudnuteľnej grafiky, interaktívnych prvkov a ďalších komponentov vysokokvalitného webového dizajnu a rozhrania. To dáva nepopierateľnú výhodu - schopnosť odmietnuť flashové prvky, ktoré spôsobujú určité ťažkosti pri načítavaní stránok. Zároveň je potrebný určitý čas na načítanie takýchto stránok. Na správnu prácu s HTML5 navyše potrebujete počítač s príslušnou kapacitou systému a vývojári prehliadačov sú príliš leniví na to, aby pridali plnú podporu všetkých funkcií HTML5.

HTML 5- Toto novú verziu najpopulárnejší značkovací jazyk.

Hypertextový značkovací jazyk už viac ako 10 rokov HTML sa prakticky nezmenilo, čo bolo veľmi zvláštne, vzhľadom na obrovskú rýchlosť vývoja webových technológií, a teraz konečne nastala a objavila sa zmena HTML 5.

IN HTML 5 boli pridané niektoré nové prvky a atribúty a niektoré staré boli odstránené (napr. písmo A stred).

Boli pridané nasledujúce položky:

1) hlavička.

2) päta.

4) oddiele.

5) článok.

6) stranou.

7) postavy.

8) dialóg.

9) m (značka).

10) čas.

11) meter.

12) pokrok.

13) video.

14) audio.

15) podrobnosti.

16) datagrid.

17) Ponuka.

18) príkaz.

Všetko ostatné zostalo nezmenené. To znamená, že za predpokladu, že ste oboznámení s normou, nebudú žiadne problémy. Vlastne všetko zostalo ako predtým, len pribudli nové funkcie.

Vďaka inováciám HTML 5 Zjednodušením rovnakého označovania môžete výrazne uľahčiť prácu správcom webu.

Určite sa pýtate: „Bude to fungovať HTML 5 so staršími prehliadačmi?" Odpoveď znie: "Áno, samozrejme, ale nové prvky sa samozrejme nezobrazia." Alebo inými slovami, nové stránky uvidia všetci, ale majitelia moderných verzií prehliadačov ich uvidia trochu viac a inak.

Som si istý, že čoskoro HTML 5 budú môcť vidieť rovnaké percento používateľov ako teraz HTML 4 ktorá má viac ako 10 rokov.

O používaní nových funkcií HTML 5 budeme sa s vami rozprávať v nasledujúcich článkoch.