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
– 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
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
- 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:
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?
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 )
- 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.
Ú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.
Ú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
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.
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.