a! Html5. V současné době se již aktivně používá při vývoji webových rozhraní a aplikací. Všichni víme, že HTML5 přinesl mnoho nových značek, atributů a prvků. Některé z nich jsou opravdu užitečné pro naše stránky. V tomto článku tedy stručně říkám o několika užitečných a důležitých Tagy a atributy HTML5Musíte vědět a používat v praxi!
Strukturální značka HTML5.
Několik nových značek se objevilo v HTML5, které jsou navrženy tak, aby nahradilo již zabavené bloky DIV (ne všechny samozřejmě 🙂). Externě, tak, abych se změnil, nic se nezměnilo, ale v podstatě nová značky nesou sémantický (sémantický) zatížení a přísně definují své místo a roli pro každý blok:
- - Určuje "suterén", webové stránky webu nebo oddílu, ve kterých jsou v kočce obvykle ubytovány další informace;
- - Určuje navigační oblast, jako pravidlo seznam odkazů;
Formulář
Nové typy vstupních polí
Html5 zavedl nové typy vstupní pole. Umožňují napsat více sémanticky správný kód přizpůsobený pro mobilní zařízení. Například při použití typu e-mailu dojde k automatickému ověření zadaného textu na identitě e-mailové adresy a tak dále.
1 | <typ vstupu \u003d "URL"\u003e
|
Pravidelné ověřovací výrazy
Před vzhledem HTML5, při použití formuláře na vašich stránkách, musíte přeskočit zadaný text prostřednictvím JavaScript. pro kontrolu. Nyní s HTML5 a atributem vzoru můžete definovat šablonu regulárního výrazu pro ověření dat.
1 |
|
AutoComplete s HTML5 DataList
Použití prvku DataList HTML5 umožňuje vytvářet seznam dat pro vstupní pole AutoFill. Super užitečný!
1 |
|
Pole Autofokus pole
Atribut AutoFocus vám umožní nastavit zaostření na libovolný prvek formuláře (včetně tlačítka).
Skryté prvky s HTML5
Skrytý atribut zadaný v HTML5, který umožňuje skrýt určitý prvek, protože to platí pro CSS pomocí dishy: Žádný
Pellentsque Svazek Morbi Tristique Senectus et Netus .... Pellentesque Svazek Morbi Tristique Senectus et Netus et Malesuada ... Vytvořit akordeon pro web - V HTML5 se pro odkazy objevil nový atribut. Nyní určete prohlížeč, který odkaz musí být stažen, a ne otevřít dostatečně otevřený, aby tento atribut použil. Zůstat aktuální s čerstvými články a lekce hodinky Dřívější, během XHTML / HTML4 měli vývojáři jen několik funkcí, které by mohly používat, aby ukládali libovolná data týkající se Dom. Můžete vymyslet své vlastní atributy, ale byl riskantní - váš kód by nebyl platný, prohlížeče by mohly ignorovat vaše data, a to by mohlo způsobit problémy, pokud název se shoduje se standardními HTML atributy. Proto většina vývojářů byla vázána na atributy třídy nebo Rel, protože oni byli jediným rozumným způsobem, jak ukládat další linky. Předpokládejme například, že vytvoříme widget pro zobrazení zpráv, jako je dočasná čára zpráv v Twitteru. V ideálním případě by měl být JavaScript schopen konfigurovat bez nutnosti přepsat kód, takže definujeme ID uživatele ve atributu třídy, například:
Titul 2.
Ke stažení atributu.
Náš kód JavaScriptu bude hledat prvek s ID msglista.. Pomocí skriptu, budeme hledat třídy začínající uživatel_A "Bob" v našem případě bude ID uživatele a zobrazíme všechny zprávy tohoto uživatele.
Řekněme, že bychom také chtěli nastavit maximální počet zpráv a přeskočit zprávy v průběhu šesti měsíců (180 dní):
Náš atribut třída Je velmi rychlé lezení - je snazší umožnit chybu a analýza řetězců na JavaScriptu se stává složitější.
HTML5 Atributy dat
Naštěstí v HTML5 byla zavedena schopnost používat vlastní atributy. Můžete použít libovolný název v nižším registru s předponou data-, např.:
Vlastní atributy dat:
- tyto řádky jsou v nich ukládat jakékoli informace, které mohou být reprezentovány nebo zakódovány jako řetězec, například JSON. Typy musí být přivedeny pomocí JavaScriptu
- by měly být použity v případech, kdy nejsou vhodné prvky nebo atributy HTML5
- použít pouze na stránku. Na rozdíl od mikroformátů musí být ignorovány externími systémy, jako jsou vyhledávače a vyhledávací roboty
Příklad č. 1 zpracování na JavaScript: GetAtattribute a SetAttribute
Všechny prohlížeče umožňují získat a změnit atributy dat pomocí metod GetAtattribute a SetAtTribute:
Var msglist \u003d dokument.getElementbyid (msglist "); var show \u003d msglist.getattribute ("velikost dat-list"); msglist.setattribute ("velikost dat-list", + show + 3);
Funguje, ale měly by být používány pouze k udržení kompatibility se starými prohlížeči.
Příklad # 2 Zpracování na JavaScriptu: Data () Metoda JQuery Knihovna
Začínáme z jQuery 1.4.3 Data () metoda zpracovává atributy dat HTML5. Nemusíte explicitně specifikovat předponu data-Takový kód bude fungovat:
Var msglist \u003d $ ("# msglist"); var show \u003d msglist.data ("velikost seznamu"); msglist.data ("velikost seznamu", zobrazit + 3);
Ale být, jak to může, mějte na paměti, že jQuery se snaží převést hodnoty takových atributů pro typy zametání (booleovské hodnoty, čísla, objekty, pole nebo null) a ovlivňují DOM. Na rozdíl od sETATETRIBUTE., Metoda data () Fyzicky nenahrazuje atribut velikost seznamu dat - Pokud zkontrolujete jeho hodnotu mimo jQuery - stále zůstane rovna 5.
Příklad č. 3 zpracování na JavaScriptu: API pro práci s datovými sady
A konečně máme API pro práci s datovými sadami HTML5, které vrátí objekt Domstredringmap. Musí být pamatováno, že atributy dat jsou zobrazeny v objektu bez předpon data-Z názvů jsou odstraněny příznaky hypheny a jména samotná jsou převedena na velbloudí, například:
| Název atributu. | Jméno v API dat |
| data-uživatel. | uživatel. |
| maxage dat. | maxage. |
| velikost seznamu dat | seznam. |
Náš nový kód:
Var msglist \u003d dokument.getElementbyid (msglist "); var show \u003d msglist.dataset.Listize; msglist.dataset.Listize \u003d + show + 3;
Toto rozhraní API je podporováno všemi moderními prohlížeči, ale ne IE10 a níže. Pro takové prohlížeče existuje řešení, ale pravděpodobně je to praktičtější použít jQuery, pokud píšete pro staré prohlížeče.
HTML - hypertextový označovací jazyk. Je založen na tzv. Tagech. Tagy - to jsou některé prvky předků, které určují formát a vlastnosti prvků webových stránek. Na stejné stránce jsme pro vás shromáždili aktuální adresář tagů HTML.
Celkem existuje více než sto značkovacích prvků. Každý má řadu atributů a vlastní syntaxe. HTML tag průvodce pomůže rychle najít potřebu položky.
Seznam tagů HTML
Níže uvedená tabulka zobrazuje seznam značek HTML5 s stručný popis v ruštině.
| Štítek | Stručný popis |
|---|---|
| Komentář. | |
| Definuje typ dokumentu. | |
| Odkaz, hypertextový odkaz, kotva. | |
| Určuje text jako zkratku. | |
| Kontaktní informace autora nebo vlastník dokumentu. | |
| Určuje oblast na mapě obrazu | |
| Článek | |
| Obsah stranou (obsah není hlavním na stránce podle smyslu) | |
| Umožňuje vložit reprodukovatelný zvukový soubor. | |
| Tučné písmo. | |
| Určuje základní URL nebo cílový atribut pro relativní odkazy v dokumentu. | |
| Oblasti, kde může mít psaní textu jiné směry. | |
| Nastaví směr psaní textu. Na rozdíl od Směr označuje fyzický směr | |
| Citát. | |
| Určuje oblast dokumentu těla. | |
| Přerušení řádku. | |
| Tlačítko Clickable. | |
| Slouží k kresbě grafiky pomocí skriptů | |
| Podpisové tabulky. | |
| Poznámka pod čarou na jméno materiálu. | |
|
Slouží k vložení počítačového kódu v textovém formuláři. |
| Určuje vlastnosti sloupců v tabulce. | |
| Určuje skupinu jednoho nebo více sloupců tabulky pro formátování. | |
| Slouží k určení předdefinovaných možností pro výběr při vstupu do textového pole | |
Určuje popis termínu ze značky
|
|
| Text, který je odstraněn v nová verze Dokument. | |
| Definuje další informace, které uživatel může zobrazit nebo skrýt | |
| Označuje, že obsah je termín. | |
| Určuje dialogové okno nebo interaktivní prvek | |
| Blokový prvek je jedním z hlavních prvků dispozice. | |
| Definuje seznam definic. | |
Název termínu v seznamu definic
|
|
| text určený ve smyslu (obvykle textu vybraný v kurzívách). | |
| Kontejner pro externí aplikaci | |
| Skupina příbuzných prvků ve formuláři | |
| Název pro. \\ T |
|
| Určuje autonomní skupinu několika prvků (například obrázek s podpisem) | |
| zápatí | |
| Definuje formu uživatelského vstupu | |
- |
HTML záhlaví různých úrovní: , , , |
| Označuje oblast dokumentu hlavy. | |
| Bloku záhlaví | |
| Horizontální linka - tematický separátor. | |
| Kořenový prvek. Zprávy prohlížeče, že tento dokument je dokument HTML. | |
| Vybere text v kurzívách. | |