a! Html5. Pašlaik tas jau ir aktīvi izmantots, izstrādājot tīmekļa saskarnes un lietojumus. Mēs visi zinām, ka HTML5 cēla daudz jaunu tagu, atribūtiem un elementiem. Daži no tiem ir ļoti noderīgi mūsu vietnēm. Tādējādi šajā rakstā es īsi saku par vairākiem lietderīgiem un svarīgiem Html5 tagi un atribūtiJums ir jāzina un jāizmanto praksē!
Strukturālā iezīmēšana HTML5
Daži jauni tagi parādījās HTML5, kas ir paredzēti, lai aizstātu jau konfiscētos div blokus (ne visi, protams 🙂). Ārēji, lai runātu, nekas nav mainījies, bet būtībā jauni tagi ir semantiska (semantiska) slodze, un stingri definēt savu vietu un lomu katrā blokā:
- - nosaka "pagraba", vietnes vai nodalījuma tīmekļa lapas, kurā kaķī tiek izmitināta papildu informācija;
- - nosaka navigācijas zonu kā noteikumu sarakstu saites;
Forma
Jaunu tipu ievades lauki
HTML5 ieviesa jaunus veidus ievades lauki. Tie ļauj jums rakstīt semantiski pareizu kodu, kas pielāgots mobilajām ierīcēm. Piemēram, izmantojot e-pasta tipu, notiek automātiska ievadītā teksta apstiprināšana, uz e-pasta adreses identitāti un tā tālāk.
1 | <ievades veids \u003d "URL"\u003e
|
Regulāras apstiprināšanas izteiksmes
Pirms izskatu HTML5, izmantojot veidlapu savā vietnē, jums bija izlaist ievadīto tekstu caur JavaScript. pārbaudei. Tagad ar HTML5 un atribūtu, jūs varat definēt regulāru izteiksmes veidni, lai pārbaudītu datus.
1 |
|
Automātiskā pabeigšana ar HTML5 Datalistu
Izmantojot Datalpista HTML5 elements ļauj izveidot datu sarakstu autofill ievades laukiem. Super noderīga!
1 |
|
Autofokusa lauka lauki
Autofokusa atribūts ļaus jums iestatīt fokusu uz jebkuru veidlapas elementu (ieskaitot pogu).
Slēptie elementi ar HTML5
Hitml5 ievadītais slēpts atribūts, kas ļauj jums paslēpt noteiktu elementu, piemēram, tas attiecas uz CSS, izmantojot displeju: nav
Pellentsque Hoanistant Morbi Tristque Senectus et Netus .... Pultifeque Hoatant Morbi Tristique Senectus et Netus et Malesuada ... Izveidot vietnes akordeonu - In HTML5, jauns atribūts parādījās atsaucēm. Tagad, lai norādītu pārlūkprogrammu, ka saite ir jāielādē, un nav pietiekami atvērta, lai izmantotu šo atribūtu. Palikt aktuāli ar svaigiem rakstiem un nodarbībām skatīties Ilgstoši, XHTML / HTML4 laikā izstrādātājiem bija tikai dažas funkcijas, ko viņi varētu izmantot, lai uzglabātu patvaļīgus datus, kas saistīti ar DOM. Jūs varētu izgudrot savus atribūtus, bet tas bija riskants - jūsu kods nebūtu derīgs, pārlūkprogrammas varētu ignorēt jūsu datus, un tas var izraisīt problēmas, ja vārds sakrita ar standarta HTML atribūtiem. Tāpēc lielākā daļa izstrādātāju bija saistīti ar atribūtiem klasē vai relitūtiem, jo \u200b\u200btie bija vienīgais saprātīgais veids, kā uzglabāt papildu līnijas. Piemēram, pieņemsim, ka mēs izveidojam logrīku, lai parādītu ziņas, piemēram, īsziņu līniju čivināt. Ideālā gadījumā JavaScript vajadzētu būt iespējai konfigurēt bez nepieciešamības pārrakstīt kodu, tāpēc mēs definējam lietotāja ID klases atribūtā, piemēram:
2. sadaļa.
Atribūtu lejupielāde
Mūsu JavaScript kods meklēs elementu ar ID msglist.. Izmantojot skriptu, mēs meklēsim klases, sākot ar lietotājs_un "Bob" mūsu gadījumā būs lietotāja ID, un mēs parādīsim visus šī lietotāja ziņojumus.
Pieņemsim, ka mēs vēlētos arī noteikt maksimālo ziņojumu skaitu, un izlaist ziņojumus vairāk nekā sešus mēnešus (180 dienas):
Mūsu atribūts klase Tas ir ļoti ātri kāpšana - tas ir vieglāk atļaut kļūdas, un analīze virknes JavaScript kļūst sarežģītāka.
HTML5 datu atribūti
Par laimi, HTML5 tika ieviests spēja izmantot pielāgotus atribūtus. Jūs varat izmantot jebkuru nosaukumu apakšējā reģistrā ar prefiksu dati-, piemēram:
Pielāgotas datu atribūti:
- Šīs līnijas ir tajās, jūs varat saglabāt jebkādu informāciju, kas var tikt pārstāvēta vai kodēta kā virkne, piemēram, JSON. Veidi ir jāievieš, izmantojot JavaScript
- jāizmanto gadījumos, kad nav piemērotu HTML5 elementu vai atribūtu
- attiecas tikai uz lapu. Atšķirībā no mikroformats, tie ir ignorē ar ārējām sistēmām, piemēram, meklētājprogrammām un meklēt robotiem
Piemērs Nr.1 \u200b\u200bapstrādes uz JavaScript: Getattribute un SetTribute
Visas pārlūkprogrammas ļauj iegūt un mainīt datu atribūtus, izmantojot getattribute un setattribute metodes:
Var Msglist \u003d document.getElementByid ("msglist"); var parādīt \u003d msglist.getattribute ("datu saraksta lielums"); msglist.Setattribute ("datu saraksta lielums", + Show + 3);
Tas darbojas, bet drīkst izmantot tikai, lai saglabātu saderību ar vecām pārlūkprogrammām.
Piemērs # 2 apstrāde uz JavaScript: Dati () metode jQuery bibliotēka
Sākot no jQuery 1.4.3 datu () metodes procesu HTML5 datu atribūtiem. Jums nav skaidri jānorāda prefikss dati-Tāpēc šāds kods darbosies:
Var Msglist \u003d $ ("# msglist"); var parādīt \u003d msglist.data ("saraksta lielums"); msglist.data ("saraksta lielums", parādīt + 3);
Bet esiet, ka, kā tas var, paturiet prātā, ka jQuery cenšas pārvērst vērtības šādu atribūtu uz slaucīšanas veidiem (Būla vērtībām, numuriem, objektiem, masīviem vai null) un ietekmēt DOM. Atšķirībā no otra setattribute.Metode dati () fiziski neaizstās atribūtu datu saraksta lielums - Ja pārbaudāt tās vērtību ārpus jQuery - tas joprojām būs vienāds ar 5.
Piemērs Nr 3. apstrādes uz JavaScript: API darbam ar datu kopām
Un visbeidzot, mums ir API strādāt ar HTML5 datu kopām, kas atgriež DomstringMap objektu. Jāatceras, ka datu atribūti tiek parādīti objektā bez prefiksiem dati-No nosaukumiem tiek noņemtas Hyphena pazīmes, un paši nosaukumi tiek pārvērsti Camelcase, piemēram:
| Atribūta nosaukums | Nosaukums datu kopas API |
| datu lietotājs. | lietotājs. |
| datu apstrāde. | maksimums. |
| datu saraksta lielums | saraksts |
Mūsu jaunais kods:
Var Msglist \u003d document.getElementByid ("msglist"); var parādīt \u003d msglist.dataset.listize; msglist.dataset.listize \u003d + show + 3;
Šo API atbalsta visas mūsdienu pārlūkprogrammas, bet ne IE10 un zemāk. Šādām pārlūkprogrammām ir risinājums, bet, iespējams, ir lietderīgāk izmantot jQuery, ja jūs rakstīt vecām pārlūkprogrammām.
HTML - hiperteksta marķējuma valoda. Tas ir balstīts uz tā sauktajiem tagiem. Tags - tie ir daži elementi no overtakes, kas nosaka formātu un īpašības Web lapas elementiem. Tajā pašā lapā mēs esam savākuši pašreizējo HTML tag direktoriju.
Kopumā ir vairāk nekā simts iezīmēšanas elementu. Katram ir vairāki atribūti un tā sintakse. HTML tagu ceļvedis palīdzēs ātri atrast nepieciešamo vienumu.
HTML tagu saraksts
Turpmāk redzamajā tabulā redzams HTML5 tagu saraksts ar īsu aprakstu krievu valodā.
| Tag | Īss apraksts |
|---|---|
| Komentēt. | |
| Definē dokumenta veidu. | |
| Saite, hipersaite, enkurs. | |
| Nosaka tekstu kā saīsinājumu. | |
| Kontaktinformācija dokumenta autors vai īpašnieks. | |
| Nosaka platību kartes attēlā | |
| Raksts | |
| Saturs malā (saturs nav galvenais lapā ar nozīmi) | |
| Ļauj ievietot reproducējamu audio failu. | |
| Bold teksts. | |
| Norāda pamata URL vai mērķa atribūtu attiecībā uz relatīvajām atsaucēm dokumentā. | |
| Teritorija, kurā teksta rakstīšanai var būt citi virzieni. | |
| Iestata teksta rakstīšanas virzienu. Atšķirībā no otra Virziens norāda uz fizisko virzienu | |
| Citāts. | |
| Norāda ķermeņa dokumentu zonu. | |
| Līnijas pārtraukums. | |
| Clickable poga | |
| Izmanto, lai zīmētu grafiku, izmantojot skriptus | |
| Paraksta tabulas. | |
| Zemsvītras piezīme par materiāla nosaukumu. | |
|
Izmanto, lai ievietotu datora kodu teksta formā. |
| Norāda tabulas kolonnu īpašības. | |
| Norāda grupu viena vai vairākas tabulas kolonnas formatēšanai. | |
| Izmanto, lai noteiktu iepriekš noteiktās iespējas, lai izvēlētos, ievadot teksta lauku | |
Nosaka termina aprakstu no taga
|
|
| Teksts, kas tiek noņemts jauna versija Dokumentu. | |
| Definē papildu informāciju, ko lietotājs var apskatīt vai paslēpt | |
| Norāda, ka saturs ir termins. | |
| Nosaka dialoglodziņu vai interaktīvu elementu | |
| Bloka elements ir viens no galvenajiem izkārtojuma elementiem. | |
| Definē definīciju sarakstu. | |
Nosaukums termins definīciju sarakstā
|
|
| teksts, kas paredzēts nozīmē (parasti, teksts, kas izvēlēts kursīvā). | |
| Konteiners ārējai lietošanai | |
| Grupu saistīto elementu formā | |
| Virsraksts |
|
| Nosaka vairāku elementu autonomo grupu (piemēram, attēlu ar parakstu) | |
| kājene | |
| Definē lietotāja ievades veidu | |
- |
HTML galvenes dažādiem līmeņiem: , , , |
| Norāda galvas dokumenta platību. | |
| Bloka galvene | |
| Horizontālā līnija - tematiskais atdalītājs. | |
| Saknes elements. Ziņojumi pārlūkprogrammā, ka šis dokuments ir HTML dokuments. | |
| Atlasa tekstu kursīvā. | |