a! HTML5. În prezent, este deja utilizat în mod activ la dezvoltarea interfețelor web și a aplicațiilor. Știm cu toții că HTML5 a adus multe etichete noi, atribute și elemente. Unele dintre ele sunt foarte utile pentru site-urile noastre. Astfel, în acest articol, voi spune pe scurt despre mai multe utile și importante HTML5 Etichete și atributeTrebuie să știți și să utilizați în practică!
Markup structural HTML5.
Câteva etichete noi au apărut în HTML5, care sunt concepute pentru a înlocui blocurile Div deja confiscate (nu toate, desigur 🙂). În exterior, ca să spunem, nimic nu sa schimbat, dar, în esență, noi etichete poartă o sarcină semantic (semantic) și să-și definească strict locul și rolul pentru fiecare bloc:
- - determină "subsolul", o pagină web a site-ului sau partiției, în care informațiile suplimentare sunt de obicei adaptate la pisică;
- - determină zona de navigație, ca o listă de reguli a legăturilor;
Forma
Noi câmpuri de introducere a tipurilor
HTML5 a introdus noi tipuri câmpuri de introducere. Ele vă permit să scrieți mai mult codul mai corect adaptat pentru dispozitivele mobile. De exemplu, atunci când se utilizează tipul de e-mail, apare validarea automată a textului introdus, pe identitatea adresei de e-mail și așa mai departe.
1 | <introduceți tipul \u003d "URL"\u003e
|
Expresii de validare regulate
Înainte de apariția HTML5, atunci când utilizați formularul de pe site-ul dvs., a trebuit să săriți textul introdus prin JavaScript. pentru verificare. Acum, cu HTML5 și atributul modelului, puteți defini un șablon de expresie regulat pentru a verifica datele.
1 |
|
Autocomplete cu HTML5 Datalist
Utilizarea elementului HTML5 Datalist vă permite să creați o listă de date pentru câmpurile de introducere automată. Super util!
1 |
|
Domeniile de câmp de focalizare automată
Atributul Autofocus vă va permite să setați focalizarea pe orice element de formă (inclusiv butonul).
Elemente ascunse cu HTML5
Atributul ascuns introdus în HTML5, care vă permite să ascundeți un anumit element, așa cum se aplică CSS utilizând Disply: Nici unul
Pellentsque Habitant Morbi Tristique Senectus et Netus .... Pelenteque Habitant Morbi Tristique Senectus et Netus et Malesuada ... Creați un acordeon pentru site - În HTML5, a apărut un nou atribut pentru referințe. Acum, pentru a specifica browserul pe care link-ul trebuie să fie descărcat și să nu deschideți suficient pentru a utiliza acest atribut. Pentru a rămâne la curent cu articole proaspete și a lecțiilor de urmărire Cu mult timp în urmă, în timpul XHTML / HTML4, dezvoltatorii au avut doar câteva caracteristici pe care le-ar putea folosi pentru a stoca date arbitrare legate de DOM. Ați putea să vă inventați propriile atribute, dar a fost riscant - codul dvs. nu va fi valabil, browserele ar putea ignora datele dvs. și ar putea provoca probleme dacă numele a coincis cu atribute standard HTML. Prin urmare, majoritatea dezvoltatorilor au fost legați de atributele de clasă sau relativă, deoarece au fost singura modalitate rezonabilă de a stoca linii suplimentare. De exemplu, să presupunem că creăm un widget pentru afișarea mesajelor ca o linie temporară de mesaje în Twitter. În mod ideal, JavaScript ar trebui să poată configura fără a fi nevoie să rescrie codul, astfel încât să definim ID-ul de utilizator în atributul de clasă, de exemplu:
Titlul 2.
Atribute descărcare
Codul nostru JavaScript va căuta un element cu ID msglist.. Folosind scriptul, vom căuta clase începând cu utilizator_, iar "Bob" în cazul nostru va fi ID-ul de utilizator și vom afișa toate mesajele acestui utilizator.
Să presupunem că, de asemenea, dorim să stabilim numărul maxim de mesaje și să săriți mesajele de peste șase luni (180 de zile):
Atributul nostru. clasă Este foarte rapid alpinism - este mai ușor să permiteți o eroare, iar analiza șirurilor de pe JavaScript devine mai complicată.
Atributele de date HTML5.
Din fericire, în HTML5, a fost introdusă capacitatea de a folosi atribute personalizate. Puteți utiliza orice nume în registrul inferior cu prefixul date-, de exemplu:
Atribute personalizate de date:
- aceste linii sunt în ele puteți stoca orice informații care pot fi reprezentate sau codificate ca șir, cum ar fi JSON. Tipurile trebuie aduse utilizând JavaScript
- ar trebui să fie utilizate în cazurile în care nu există elemente sau atribute HTML5 adecvate
- aplicați numai la pagină. Spre deosebire de microformate, ele trebuie să fie ignorate de sisteme externe, cum ar fi motoarele de căutare și roboții de căutare
Exemplul nr. 1 de procesare pe JavaScript: GetTtribute și SetTtribute
Toate browserele vă permit să obțineți și să modificați atributele de date utilizând metodele GetTtribute și SetTtribute:
Var msglist \u003d document.getelementbyid ("msglist"); Var Show \u003d msglist.getattribute ("Dimensiune listă de date"); msglist.setattribute ("Dimensiune de date", + Afișare + 3);
Funcționează, dar ar trebui să fie utilizat numai pentru a menține compatibilitatea cu browserele vechi.
Exemplul # 2 Prelucrarea pe JavaScript: Date () Metoda JQuery Bibliotecă
Pornind de la JQuery 1.4.3 Data () Metoda procesează atributele de date HTML5. Nu trebuie să specificați în mod explicit prefixul date-Deci, un astfel de cod va funcționa:
Var msglist \u003d $ ("# msglist"); vary show \u003d msglist.data ("dimensiunea listei"); msglist.data ("dimensiunea listei", arată + 3);
Dar, așa cum este posibil, rețineți că JQuery încearcă să transforme valorile unor astfel de atribute la tipurile de măturări (valori booleene, numere, obiecte, matrice sau null) și afectează DOM. Spre deosebire de setTtribute., Metoda date () fizic nu va înlocui atributul date-listă-dimensiune - Dacă verificați valoarea sa în afara jQuery - va rămâne în continuare egală cu 5.
Exemplul nr. 3 de procesare pe JavaScript: API pentru lucrul cu seturile de date
Și în cele din urmă, avem un API pentru a lucra cu seturi de date HTML5, care returnează obiectul DomStringMap. Trebuie să vă amintiți că atributele de date sunt afișate în obiect fără prefixe date-Din nume sunt îndepărtate semne de hiphena, iar numele în sine sunt convertite în camelcase, de exemplu:
| Numele atributului | Numele în setul de date API |
| utilizatorul de date. | utilizator. |
| maxage-maxage. | maxage. |
| date-listă-dimensiune | listici. |
Noul nostru cod:
Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.dataset.LISTIZE; msglist.dataset.LISTING \u003d + Afișare + 3;
Acest API este susținut de toate browserele moderne, dar nu IE10 și de mai jos. Pentru astfel de browsere, există o soluție de lucru, dar, probabil, este mai practic să utilizați jQuery dacă scrieți pentru browsere vechi.
HTML - Limba de marcare hipertext. Se bazează pe așa-numitele etichete. Etichete - acestea sunt câteva elemente ale depășirilor care specifică formatul și proprietățile elementelor paginii web. Pe aceeași pagină, am colectat directorul curent al tagului HTML pentru dvs.
În total, există mai mult de o sută de elemente de marcare. Fiecare are un număr de atribute și propria sa sintaxă. Ghidul etichetei HTML va ajuta la găsirea rapidă a elementului de care aveți nevoie.
Lista etichetelor HTML
Tabelul de mai jos prezintă lista etichetelor HTML5 cu o scurtă descriere în limba rusă.
| Etichetă | Scurta descriere |
|---|---|
| Cometariu. | |
| Definește tipul de document. | |
| Link, hyperlink, ancora. | |
| Determină textul ca abreviere. | |
| Informații de contact autor sau proprietar al documentului. | |
| Determină zona de pe imaginea hărții | |
| Articol | |
| Conținutul deoparte (conținutul nu este principalul pe pagină prin intermediul) | |
| Vă permite să introduceți un fișier audio reproductibil. | |
| Textul îndrăzneț. | |
| Specifică adresa URL de bază sau atributul țintă pentru referințele relative din document. | |
| Zona în care scrierea textului poate avea alte direcții. | |
| Setează direcția de scriere a textului. Spre deosebire de Direcția indică direcția fizică | |
| Citat. | |
| Specifică zona documentului corpului. | |
| Pauză de linie. | |
| Buton clickable. | |
| Folosit pentru a desena grafice folosind script-uri | |
| Tabele de semnătură. | |
| Notă de subsol pe numele materialului. | |
|
Folosit pentru a introduce un cod de calculator în formă de text. |
| Specifică caracteristicile coloanelor din tabel. | |
| Specifică un grup de una sau mai multe coloane de masă pentru formatare. | |
| Folosit pentru a determina opțiunile predefinite pentru a alege când intrați în câmpul de text | |
Determină descrierea termenului de la etichetă
|
|
| Text care este eliminat în versiune noua Document. | |
| Definește informații suplimentare pe care utilizatorul le poate vizualiza sau ascunde | |
| Indică faptul că conținutul este termenul. | |
| Determină caseta de dialog sau elementul interactiv | |
| Elementul bloc este unul dintre elementele principale ale aspectului. | |
| Definește o listă de definiții. | |
Numele termenului din lista de definiții
|
|
| textul dedicat sensului (de obicei, textul selectat în italic). | |
| Container pentru aplicații externe | |
| Grup de elemente conexe în formă | |
| Titlu pentru |
|
| Determină grupul autonom de mai multe elemente (de exemplu, imaginea cu semnătura) | |
| subsol | |
| Definește forma de intrare a utilizatorului | |
- |
HTML Headers. de nivele diferite: , , , |
| Indică zona documentului capului. | |
| Blocați antet | |
| Linie orizontală - separator tematic. | |
| Element rădăcină. Raportează browserul pe care acest document este un document HTML. | |
| Selectează textul în caractere cursive. | |