itthon / Skype / Html5 új funkciók. Mi az új a HTML5-ben? Új szerkezeti elemek

Html5 új funkciók. Mi az új a HTML5-ben? Új szerkezeti elemek

A kiadással HTML5, számos új funkcióval bővült a HTML. És ami még jobb, egyes böngészők már támogatják ezeket a funkciókat, míg mások egyre inkább felé haladnak. Ezen az oldalon nyomon követheti ezeknek a funkcióknak a böngészőkhöz való hozzáadását.

1. Új dokumentumtípus és karakterkészlet.

A HTML5 egyik erőssége az egyszerűsége.

Igen, ez minden. Szó szerint két szó. Ez az egyszerűség valószínűleg annak a ténynek köszönhető, hogy a HTML5 önmagában létezik, és nem marad az SGML része.

A karakterkészlet is nagyon egyszerű, utf-8-at használ, és ugyanúgy van beállítva, szó szerint egy címkével:

2. Új szerkezet

A HTML5 megérti, hogy a weboldalnak olyan szerkezete van, mint például egy könyvnek. Általában ez a navigáció, maga a tartalom, az oldalmenü (oldalsáv) és a fejléc. A HTML5 pedig címkéket biztosít ezekhez az elemekhez.

  • - meghatározza az oldal szakaszait
  • - határozza meg az oldal címét
  • - határozza meg az oldal láblécét
  • – meghatározza a cikket vagy a fő tartalmat az oldalon
  • – képet, cikkkivonatot határoz meg

3. Új beépített elemek.

Ezek az új elemek meghatároznak néhány alapfogalmat és oldalelemeket jelölnek ki:

  • - a tartalom jelzésére
  • – bizonyos méretek, például lemezterület jelzésére
  • – sikereinek és előrehaladásának jelzésére

4. Új támogatás a dinamikus oldalakhoz

A HTML 5-öt úgy tervezték, hogy leegyszerűsítse a webfejlesztők feladatait, így számos új funkcióval támogatja a dinamikus oldalakat.

  • Helyi menü – A HTML 5 támogatja a helyi menük létrehozását és használatát weboldalakon és alkalmazásokban
  • aszinkron attribútum – Ez a címke közli a böngészővel, hogy a szkriptet aszinkron módon kell betölteni, így nem lassítja le az oldal többi részének betöltését és megjelenítését.
  • – részletes információkat tartalmaz az elemről.
  • - adatbázisból vagy más dinamikus oldalforrásból létrehozott táblát hoz létre
  • – visszatértek a régi címkék, amelyek lehetővé teszik weboldalain menürendszerek létrehozását
  • - meghatározza azokat a műveleteket, amelyeknek meg kell történniük a dinamikus elem aktiválásakor

5. Új típusú nyomtatványok

A HTML5 támogatja az összes régi űrlaptípust, de újak is hozzáadásra kerültek:

  • dátum idő
  • dátumidő-helyi
  • hónap
  • szám
  • hatótávolság
  • email

6. Új elemek

Néhány új elem van a HTML5-ben:

  • egy olyan elem, amely lehetővé teszi a JavaScript használatát weboldalakon.Ez lehetővé teheti, hogy képeket vagy grafikákat adjon hozzá az eszköztippekhez, vagy egyszerűen dinamikus grafikákat hozzon létre az oldalon, útközben.

7. Eltávolított elemek

Vannak olyan HTML4-elemek is, amelyek már nem használhatók a HTML5-ben. A legtöbbjük elavult, így az ilyen intézkedések nem meglepőek.

  • Fordítás

A webes technológiák folyamatosan fejlődnek. Minden nap új weboldalak jönnek létre, amelyek kiterjesztik a HTML erejét. A HTML 4 közel egy évtizede létezik, de a kiadók új módszereket keresnek a formátum funkcionalitásának bővítésére. A nyelvek és a böngészők sokfélesége azonban korlátozza egyes képességeit.

Annak érdekében, hogy a fejlesztők rugalmasabb, átjárhatóbb terméket kapjanak, valamint hogy a projekteket interaktívabbá és érdekesebbé tegye, a HTML 5 számos funkciót vezet be és bővít, beleértve az űrlapvezérlőket, API-kat, multimédiát, szerkezetet és szemantikát.

A HTML 5-ön való munka 2004-ben kezdődött. A fejlesztések jelenleg is folynak a W3C HTML WG és a WHATWG együttműködésének részeként. A fejlesztésben számos ismert cég vesz részt, köztük az Apple, a Mozilla, az Opera és a Microsoft, valamint számos más, eltérő érdeklődési körrel és hátterű szervezet és személy.

Vegye figyelembe, hogy a specifikáció még fejlesztés alatt áll, és még korántsem teljes. Emiatt lehetséges, hogy a cikkben említett funkciók a jövőben megváltozhatnak. Ez a cikk a HTML 5-ös verzió formátum új funkcióit hivatott bemutatni.


Szerkezet

A HTML 5 számos új elemet vezet be, amelyek sokkal egyszerűbbé teszik az oldal szerkezetét. A legtöbb HTML4-oldal egy sorozatot tartalmaz közös szerkezetek, mint például a fejlécek és láblécek (oldalfejléc és lábléc) és az oszlopok, és ma már hagyománnyá válik, hogy ezeket div elemekkel emeljük ki, osztályt vagy azonosítót adva neki.


Az ábrán egy tipikus 2 oszlopos elrendezés látható div elemek használatával, hozzájuk rendelve egy osztályt vagy azonosítót. A szerkezet tartalmazza - az oldal "fejlécét", láblécét, a navigációs menüt és a tartalmat, 2 oszlopra osztva -

A div elemek használata előnyösebb, mert a jelenlegi HTML verziók A 4-ből hiányzik a szemantika ezen részek pontosabb leírásához. HTML 5 ez a problémaúj elemek bevezetésével oldja meg, amelyek mindegyikének külön neve van.

A dokumentum kódja így néz ki:

...
...
...

...
...


Ezen elemek használatának számos előnye van. Az elemfejlécekkel (h1 - h6) együtt használva ez lehetővé teszi egy alszakasz beágyazását egy címsorral minden szinten, szemben a HTML korábbi verziójában található lehetséges 6 szinttel. A specifikáció részletes algoritmust tartalmaz a szegélyek generálására. Ezek az elemek szerzői és böngészőeszközként használhatók tartalomjegyzék létrehozásához, és segítik a felhasználókat a dokumentumban való navigálásban.

Például a következő struktúra beágyazott h1 elemekkel van rétegezve:

1. szint

2. szint

3. szint


Vegye figyelembe, hogy a maximális kompatibilitás érdekében különböző böngészők, különböző címsorszinteket használhat, például h2, h3 stb.

Azáltal, hogy meghatározott szakaszelemekkel meghatározza az oldalon lévő szakaszok célját, ez a technológia segíthet a felhasználónak könnyebben navigálni az oldalon. Például a felhasználó egyszerűen navigálhat egy menürészhez, vagy gyorsan navigálhat egyik cikkről a másikra anélkül, hogy a fejlesztőnek ilyen navigációs hivatkozást kellene létrehoznia. A fejlesztők is örülhetnek, mert a div elemek megfelelő elemekkel való helyettesítésével egyszerűbb és "tisztább" lesz a forráskód.

A "fejléc" elem az oldal címét jelenti. Ez a rész nem csak a címsort, hanem minden olyan alcímet is tartalmazhat, amely segít a felhasználónak az oldal tartalmának jobb megértésében.

A HTML 5 előnézete

Írta: Lachlan Hunt

Példablog

Ide illessze be a címkesort.


A "lábléc" elem az oldal "láblécét" jelöli. Az oldal ezen része általában tartalmaz egy hivatkozást a szerző jogaira, számlálóira stb.

"nav" elem- meghatározza a webhely navigációs szakaszát:

"félre" elem az oldal tartalmához érintőlegesen kapcsolódó szakaszt határoz meg, amelyet leggyakrabban mellékletként használnak.

Bevezetés

A HTML 4 körülbelül 10 éve velünk van. Ez idő alatt nem történt komoly lépés a javítására. Természetesen megjelent az XHTML, azonban csak szigorítja a szabályokat, és egyre jobb kód írására kényszerít. Ugyanakkor teljes mértékben törődik a szabványnak való megfeleléssel. A HTML 5-öt többre tervezték. Egy sor nagyon fontos újítást ad hozzá.

A HTML5-ön való munka még 2004-ben kezdődött, de csak most (2009-ben) kezd komoly érdeklődést kelteni. A böngésző támogatása növekszik, és az általam legjobban kedvelt elemet (CANVAS) az 5 leggyakoribb böngészőből 4 támogatja. A HTML 5 használata azonban nem teljesen reális, bár lehetséges, mivel új szabvány az MSIE nem támogatja.

Tehát mi az új a HTML 5-ben?

egy JavaScript által vezérelt 2D grafikus rajzmező. Grafikonok és egyéb dinamikus képek készítésére használhatja.

Címke

Címke

Helyi menük

A HTML5 egy módszert is biztosít a helyi menük egyszerű hozzáadására egy weboldalhoz. Talán az ilyen menük nem túl hasznosak a szokásos webhelyeken. De olyan alkalmazásokhoz, amelyekben sok funkciót szeretne csoportosítani és kontextus szerint megjeleníteni, ez a funkció pont megfelelő.

Új szerkezeti elemek

Mivel a HTML 4 laza szerkezetű, a specifikáció 5. verziója új elemekkel egészült ki, hogy kijavítsák ezt a hiányosságot:

  • szakaszt vagy bekezdést.
  • - oldalfejléc (nem tévesztendő össze )
  • - oldal lábléce.
  • - ez a címke tartalmazhat például egy blogcikket.
  • - használható például diagramok készítésére.

Új beépített elemek

A HTML5 szabvány új elemeket vezet be, amelyek lehetővé teszik az időket és számokat tartalmazó szövegrészletek különleges módon történő kiválasztását:

  • - megjelöl egy szövegrészt. Megjelölheti például a talált kifejezéseket a keresési eredmények listájában.
  • - egy adott tartományba eső számok megjelenítésére. Különféle attribútumokkal rendelkezhet: érték, min, max, alacsony, magas és optimum.
  • A folyamat állapotjelzőjének megjelenítésére használható. Van néhány attribútuma: érték és max.

Új típusú beviteli mezők

A HTML5 számos új típust ad a beviteli mezőkhöz:

  • dátum idő
  • dátumidő-helyi
  • hónap
  • szám
  • hatótávolság
  • email

Néhányukat széles körben használják az asztali alkalmazások felhasználói felületein. És nagy valószínűséggel már minden felhasználója jól ismeri őket.

Elavult elemek

A következő HTML-elemek elavultak:

  • betűszó
  • kisalkalmazás
  • alapfont
  • központ
  • keret
  • keretkészlet
  • isindex
  • noframes
  • noscript
  • sztrájk

Szintaxis a kódolás megadásához

A HTML5-ben lévő dokumentumok kódolásának szintaxisa most nagyon egyszerű:

Interaktív innovációk

Számos újítás, amelyek megkönnyítik és élvezetesebbé teszik a webhelyek és webes alkalmazások létrehozását:

  • - kiegészítő információ valamiről. Ez a címke például használható a böngészőkben elemleírás megvalósítására. A címkének lehet nyitott attribútuma, amely jelzi, hogy a címke tartalma kezdetben megjelenik-e a felhasználó számára vagy sem.
  • - A hagyományos táblákkal ellentétben (amelyeket statikusnak terveztek), ez a címke használható interaktív adatkészlet ábrázolására. Például sor- vagy oszlopkijelöléssel, soron belüli adatszerkesztéssel, rendezéssel stb.
  • - korábban elavult, címke új köntösben tért vissza a HTML5 szabványhoz. Most például tartalmazhat elemeket amelyek meghívják a megfelelő parancsokat. Ez az elem használható eszköztár vagy helyi menü megjelenítésére (lásd fent). A címkének lehetnek címke és ikon attribútumai. Hozzáadhatók többszintű menü létrehozásához.

Új dokumentumtípus-meghatározás (DTD)

A HTML5-ben sokkal egyszerűbb deklarálni egy DTD-t:A DTD nyilatkozat szebb lett, és azt hiszem, könnyebben megjegyezhető. Ez valószínűleg annak az eredménye, hogy a HTML már nem kapcsolódik az SGML-hez.

Opcionális href a linkekben

A href attribútum mostantól nem kötelező, mivel a hivatkozások szkriptekkel együtt használhatók. Valószínűleg hasznos lesz webes alkalmazásokban.

aszinkron attribútum

Az attribútum utalást ad a böngészőnek, hogy a szkriptblokk aszinkron módon is végrehajtható, ahelyett, hogy megvárná, amíg az oldal teljesen betöltődik.

Következtetés

Természetesen nem minden böngésző támogatja a teljes szabványt (azt hiszem, az olvasó most emlékezett a "kedvenc" MSIE-re). De a támogatás idővel jönni fog. Az új HTML 5 elemeket pedig a jelenlegi helyzet figyelembevételével terveztük. Másrészt a legtöbb böngésző már részben támogatja a specifikációt. Tehát például a címke Firefox, Opera, Chrome és Safari támogatja. Ráadásul, amennyire én tudom, a Firefox 3.5 támogatja a címkéket

Szóval nagyon várjuk.

Az érdeklődők számára a HTML 5 specifikáció az alábbi linken található -

Tehát mi az új a HTML5-ben, ami nem volt a HTML4-ben?

És alapvetően minden új. A HTML5 specifikáció számos, különböző szintű és fontosságú változást hoz magával. Az alapvető változtatások több blokkra oszthatók:

  • A nyelv szemantikája. A HTML5 számos új szemantikai címkét vezetett be a weboldalak belső szerkezetének értelmesebb megszervezéséhez.

Tekintsük a leghíresebbet közülük:

  • nav- navigációs sáv létrehozására szolgál;
  • félre- egy egységesítő címke, leginkább egy oldalsáv kiemelésére alkalmas. Tartalmazhat navigációs blokkokat és egyéb, nem navigációs elemeket is (reklámszalagok, szerző fényképe, közösségi oldalak gombjai stb.);
  • szakasz- egységesítő címke is. Sőt, különböző szerepekben is működhet: vagy több tematikus területre osztja fel az oldalt, vagy osztja fel a cikket közvetlenül az oldalon külön szakaszokra;
  • cikk- az oldal külön cikkekre bontására szolgál. Mind a szakasz-, mind a cikkcímkéknek számos érdekessége van. Például most már nyugodtan használhatja ugyanazon az oldalon többször is az első szintű H1 címsort, ami korábban elfogadhatatlan volt;
  • hcsoport- a címke célja, hogy az oldalcímeket egyetlen logikai egységbe csoportosítsa;
  • videó-- videó egyszerű beillesztésére szolgál a webhely oldalain;
  • hang-- a médiatartalomnak a webhely oldalain történő egyszerű beillesztésére is tervezték;
  • vászon- olyan területet hoz létre, ahol a JavaScript segítségével különböző objektumokat rajzolhat, képeket jeleníthet meg, átalakíthat és tulajdonságait megváltoztathatja.

A többi címkéről a htmlbook.ru webhelyről tájékozódhat.

  • Multimédia. A HTML5 már készenlétben támogatja a multimédiás tartalmakat (audio- és videolejátszó) HMTL-jelölésben – a megfelelő API-val a lejátszás és a kodekek vezérléséhez.
  • Grafika. A grafikával való munka sokkal könnyebbé vált a vászoncímkének és egy speciális JavaScript API-nak köszönhetően. A HTML5-be hivatalosan is bekerült az svg tag, amely lehetővé teszi a beágyazást vektoros grafika, amelyet a megfelelő webes szabvány (SVG, Scalable Vector Graphics) ír le.
  • Webes űrlapok.Új webes űrlapelemek: típusok és attribútumok egyaránt, amelyek lehetővé teszik a hagyományos űrlapok képességeinek bővítését beépített eszközökkel, anélkül, hogy további könyvtárakat használnának a bemeneti adatok, űrlapparancsok érvényesítéséhez.
  • JavaScript API. API grafikus és multimédiás használathoz, új fejlett funkciók az objektumok mozgatásához és az átmenetek történetének kezeléséhez (History API), valamint számos apróság, mint például a tartalom szerkeszthetővé tétele az aktuális helyen a Content segítségével Szerkeszthető attribútumok.
  • Sokkal több. Továbbfejlesztett hálózati kommunikáció. Jelentősen javított adattárolás. Webes eszközök Munkás a végrehajtáshoz háttérfolyamatok. WebSocket interfész állandó kapcsolat létrehozásához egy rezidens alkalmazás és egy szerver között. Megnövelt sebesség az oldalak mentésében és betöltésében. A CSS3 támogatása a felhasználói felület vezérlésében, amely biztosítja a HTML5 tartalom orientációját.

Nyilvánvaló tehát, hogy a HTML5 formátum alapvetően új megközelítést mutat a látványos és emlékezetes grafikák, interaktív elemek és a minőségi webdizájn és felület egyéb összetevőinek létrehozásában. Ez tagadhatatlan előnyt jelent - a flash-elemek elutasításának képességét, amelyek bizonyos nehézségeket okoznak az oldalak betöltésében. Ugyanakkor az ilyen oldalak betöltéséhez bizonyos időre van szükség. Ezenkívül a HTML5-tel való megfelelő működéshez megfelelő rendszerkapacitással rendelkező számítógépre van szükség, és a böngészőfejlesztők túl lusták ahhoz, hogy a HTML5 összes funkcióját teljes mértékben támogatják.

HTML 5- ez egy új verzió legnépszerűbb jelölőnyelv.

Több mint 10 éve hipertext jelölőnyelv HTML gyakorlatilag nem változott, ami nagyon furcsa volt, tekintettel a webes technológiák óriási fejlődési sebességére, és most végre megtörtént és megjelent a változás HTML 5.

NÁL NÉL HTML 5 néhány új elemet és attribútumot hozzáadtunk, és néhány régit eltávolítottunk (pl. betűtípusés központ).

A következő elemek kerültek hozzáadásra:

1) fejléc.

2) lábléc.

4) szakasz.

5) cikk.

6) félre.

7) figurák.

8) párbeszéd.

9) m (jel).

10) idő.

11) méter.

12) előrehalad.

13) videó-.

14) hang-.

15) részletek.

16) datagrid.

17) menü.

18) parancs.

Minden más változatlan maradt. Vagyis nem lesz probléma, feltéve, hogy ismeri a szabványt. Valójában minden maradt a régiben, csak új funkciók kerültek be.

Az újításoknak köszönhetően HTML 5 Sokkal könnyebbé teheti a webmesterek munkáját ugyanazon jelölés egyszerűsítésével.

Bizonyára azon tűnődsz: "Működik-e HTML 5 régebbi böngészőkkel?" A válasz: "Természetesen igen, de az új elemek természetesen nem jelennek meg." Vagy más szóval mindenki látni fogja az új oldalakat, de a böngészők modern verzióinak tulajdonosai egy kicsit. többet és másképp.

Biztos vagyok benne, hogy hamarosan HTML 5 a felhasználóknak ugyanannyi százalékát fogják látni, mint most HTML 4 amely több mint 10 éves.

Az új funkciók használatáról HTML 5 a következő cikkekben fogunk beszélni veled.