a! HTML5. Jelenleg már aktívan használják a webes interfészek és alkalmazások fejlesztésekor. Mindannyian tudjuk, hogy a HTML5 számos új címkét, attribútumot és elemet hozott. Néhányan nagyon hasznosak a webhelyeink számára. Így ebben a cikkben röviden többet fogok mondani néhány hasznosnak és fontosnak HTML5 címkék és attribútumokTudnia kell a gyakorlatban!
Szerkezeti jelölés HTML5
Néhány új címke jelent meg a HTML5-ben, amelyek célja a már lefoglalt DIV blokkok helyett (nem mindegyik természetesen 🙂). Külsőleg, hogy beszéljen, semmi sem változott, de lényegében az új címkék szemantikai (szemantikai) terhelést hordoznak, és szigorúan meghatározzák az egyes blokkok helyét és szerepét:
- - határozza meg a „pincében”, a web oldalt az oldal vagy partíciót, ahol további információkat általában elhelyezve a macska;
- - meghatározza a navigációs területet, mint a hivatkozások szabályait;
A nyomtatvány
Új típusok beviteli mezők
A HTML5 új típusokat vezetett be bemeneti mezők. Lehetővé teszik, hogy több szemantikailag helyes kódot írjanak ki a mobil eszközökhöz. Például, ha az e-mail típust használ, a megadott szöveg automatikus érvényesítése az e-mail cím azonosítójára és így tovább.
1 | <beviteli típus \u003d "URL"\u003e
|
Rendszeres érvényesítési kifejezések
A HTML5 megjelenése előtt, amikor az űrlapot használja a webhelyén, át kellett hagynia a megadott szöveget JavaScript. ellenőrizze. Most HTML5 és a minta attribútum, akkor meghatározhatja a rendszeres kifejezéssablont az adatok ellenőrzéséhez.
1 |
|
Automatikus kiegészítés a HTML5 datalistával
A DATALIST HTML5 elem használata lehetővé teszi az AutoFill bemeneti mezők adatlistájának létrehozását. Szuper hasznos!
1 |
|
Autofókusz mező mezők
Az AutoFocus attribútum lehetővé teszi, hogy a fókuszt bármely formanyomtatványra (beleértve a gombot) állíthatja be.
Rejtett elemek HTML5-vel
A HTML5-ben megadott rejtett attribútum, amely lehetővé teszi, hogy elrejtsen egy bizonyos elemet, például a Dispaly CSS-re vonatkozik: nincs
Pellentsque Habitant Morbi Tristique Senectus Et Netus .... Pellentesque Habitant Morbi Tristique Senectus et Netus et Malesuada ... Hozzon létre egy harmonika a webhely számára - A HTML5-ben új attribútum jelent meg a referenciákhoz. Most, hogy megadja a böngészőt, hogy a linket letölteni kell, és nem nyit meg eléggé az attribútum használatához. Legfeljebb naprakész friss cikkekkel és órákkal Régen az XHTML / HTML4 alatt a fejlesztőknek csak néhány olyan funkciója volt, amelyeket használhattak a DOM-hoz kapcsolódó tetszőleges adatok tárolására. Meg tudod találni a saját tulajdonságait, de kockázatos volt - a kód nem lenne érvényes, a böngészők figyelmen kívül hagyhatják az adatokat, és problémákat okozhat, ha a név egybeesett a szabványos HTML attribútumokkal. Ezért, a legtöbb fejlesztő volt kötve a Class vagy REL attribútumok ők voltak az egyetlen ésszerű módon kell tárolni a további sorokat. Tegyük fel például, hogy létrehozunk egy widgetet az üzenetek megjelenítéséhez, mint egy ideiglenes üzenetsor a Twitterben. Ideális esetben a Javascriptnek képesnek kell lennie arra, hogy a kód átírása nélkül konfigurálhassa, így meghatározzuk az osztály attribútum felhasználói azonosítóját, például:
2. cím.
Attribútum letöltése.
JavaScript-kódunk egy azonosítóval rendelkező elemet fog keresni mglist.. A szkript használatával keresünk osztályokat user_és a "Bob" a mi esetünkben lesz a felhasználói azonosító, és megjelenítjük a felhasználó összes üzenetét.
Tegyük fel, hogy az üzenetek maximális számát is szeretnénk beállítani, és hat hónap alatt átugrani az üzeneteket (180 nap):
Az attribútumunk osztály Ez nagyon gyorsan hegymászó - könnyebb, hogy egy hiba, és az elemzés a húrok JavaScript bonyolultabbá válik.
HTML5 adat attribútumok
Szerencsére a HTML5-ben az egyéni attribútumok használatának képessége bevezetésre került. Használhatja az alsó regiszterben lévő nevet az előtaggal adat-, például:
Egyéni adat attribútumok:
- ezek a sorok bennük van, akkor bármilyen olyan információt tárolhat, amelyek ábrázolhatók vagy kódolhatók, mint például a JSON. A típusokat a JavaScript segítségével kell benyújtani
- olyan esetekben kell használni, ahol nincs megfelelő HTML5 elemek vagy attribútumok
- csak az oldalra kell alkalmazni. A mikroformátumokkal ellentétben a külső rendszerek, például a keresőmotorok és a keresési robotok figyelmen kívül kell hagyniuk őket
1. példa A JavaScript feldolgozásának 1. példája: Getattribute és SetTtribute
Minden böngésző lehetővé teszi, hogy megkapja és módosítsa az adat attribútumokat a Getattribute és a Setattribute módszerekkel:
Var msglist \u003d document.getelementbyid ("mglist"); var show \u003d mgglist.gettribute ("adatjegy-méret"); mglist.setattribute ("adatjegy-méret", + show + 3);
Ez működik, de csak a régi böngészőkkel való kompatibilitás fenntartására használható.
2. példa Feldolgozás JavaScript: Adat () Módszer JQuery Library
A JQUIERY 1.4.3 ADATOK () MÓDSZEREK A HTML5 adat attribútumok feldolgozása. Nem kell kifejezetten megadnia az előtagot adat-Tehát az ilyen kód működik:
Var msglist \u003d $ ("# mglist"); var show \u003d mglist.data ("list-size"); mglist.data ("Lista-méret", show + 3);
De legyen ez, ahogy lehet, ne feledje, hogy a jQuery megpróbálja átalakítani az ilyen attribútumok értékeit a söpöreti típusokhoz (logikai értékek, számok, tárgyak, tömbök vagy null), és befolyásolja a DOM-ot. nem úgy mint setattribute., Módszer adatok () fizikailag nem helyettesíti az attribútumot adatlista méretű - Ha megvizsgálja a jQuery-n kívüli értéket - továbbra is egyenlő 5.
3. példa A JavaScript feldolgozásának 3. példája: API az adatkészletekkel való munkavégzéshez
És végül van egy API, hogy dolgozzunk a HTML5 adatkészletekkel, amelyek visszaadják a DOMSTRINGMAP objektumot. Emlékeztetni kell arra, hogy az adat attribútumok az objektumban előtagok nélkül jelennek meg adat-A nevekből eltávolították a hyphada jeleit, és a neveket maguknak a tevéshöz alakítják át, például:
| Attribútum neve | Név az API adatkészletben |
| adatfelhasználó. | felhasználó. |
| adat max. | maxage. |
| adatlista méretű | feljegyzést. |
Új kódunk:
Var msglist \u003d document.getelementbyid ("mglist"); var show \u003d msglist.dataset.listsize; mglist.dataset.listsize \u003d + show + 3;
Ezt az API-t minden modern böngésző támogatja, de nem az IE10 és az alábbiakban. Ilyen böngészők esetében van egy megoldás, de valószínűleg praktikusabb, ha régi böngészőkre írsz.
HTML - Hypertext jelölés nyelv. Az úgynevezett címkéken alapul. Címkék - Ezek néhány elem a túlvilágok, amelyek meghatározzák a weboldal elemek formátumát és tulajdonságait. Ugyanazon az oldalon gyűjtöttük össze az aktuális HTML tag könyvtárat az Ön számára.
Összesen több mint száz jelölőelem van. Mindegyiknek számos attribútuma és saját szintaxisja van. A HTML Tag Guide segítségével gyorsan megtalálja a szükséges elemet.
HTML-címkék listája
Az alábbi táblázat mutatja a HTML5 címkék listáját, rövid leírással az orosz nyelven.
| Címke | Rövid leírás |
|---|---|
| Megjegyzés. | |
| Meghatározza a dokumentum típusát. | |
| Link, hiperhivatkozás, horgony. | |
| Meghatározza a szöveget rövidítésként. | |
| Elérhetőség A dokumentum szerzője vagy tulajdonosa. | |
| Meghatározza a térképet a térképen | |
| Cikk | |
| Tartalom mellett (a tartalom nem az oldal egyik fő) | |
| Lehetővé teszi a reprodukálható audiofájl beillesztését. | |
| Félkövér szöveg. | |
| Megadja az alap URL-t vagy a cél attribútumot a dokumentum relatív referenciáihoz. | |
| Az a terület, ahol a szöveg írása más utasításokkal rendelkezik. | |
| Beállítja a szöveg írásának irányát. nem úgy mint Az irány jelzi a fizikai irányt | |
| Idézet. | |
| Megadja a testdokumentum területét. | |
| Sortörés. | |
| Kattintható gomb | |
| A grafika rajzolása | |
| Aláírási táblázatok. | |
| Lábjegyzet az anyag nevében. | |
|
Számítógépes kód szöveges formátumba való beillesztéséhez. |
| Megadja az asztali oszlopok jellemzőit. | |
| Megadja egy vagy több táblázatos oszlopot a formázáshoz. | |
| A szövegmezőbe való belépéskor kiválasztott előre meghatározott lehetőségek meghatározására használják | |
Meghatározza a kifejezés leírását a címke
|
|
| Szöveg, amely eltávolításra kerül új verzió Dokumentum. | |
| Meghatározza a felhasználó számára, hogy a felhasználó megtekintheti vagy elrejtheti | |
| Azt jelzi, hogy a tartalom a kifejezés. | |
| Meghatározza a párbeszédpanelt vagy az interaktív elemet | |
| A blokk elem az elrendezés egyik fő eleme. | |
| Meghatározza a definíciók listáját. | |
A fogalommeghatározások listájának neve
|
|
| a szövegben kifejtett szöveg (általában a szövegben kiválasztott szöveg). | |
| Konténer külső alkalmazáshoz | |
| A kapcsolódó elemek csoportja az űrlapon | |
| Cím |
|
| Meghatározza több elem autonóm csoportját (például a kép az aláírással) | |
| lábléc | |
| Meghatározza a felhasználói bemenet formáját | |
- |
HTML fejlécek különböző szintekből: , , , |
| Jelzi a fejdokumentum területét. | |
| Blokk fejléc | |
| Vízszintes vonal - tematikus elválasztó. | |
| Gyökérelem. Jelentette a böngészőt, hogy ez a dokumentum HTML dokumentum. | |
| Kiválasztja a szöveget dőlt betűkkel. | |