Lista completă a atributelor html5. Referință pentru etichete HTML

Înainte de HTML5, lucrul cu atribute în elemente HTML nu era distractiv, ca să spunem ușor. A trebuit să folosesc atribute precum rel sau class . Și unii dezvoltatori și-au creat chiar propriile atribute.

Dar lucrurile s-au schimbat dramatic atunci când HTML5 ne-a oferit oportunitatea de a folosi atributele sale de date. Acum puteți salva destul de ușor date suplimentare folosind instrumente standard.

Cum funcționează atributele datei?

Numele vorbește de la sine. Atributele datei stochează unele date specificate de dvs. Ele încep întotdeauna cu prefixul de date și se termină cu ceva mai ușor de înțeles pentru dezvoltator (conform specificației, sunt permise doar litere mici și cratime). Un element poate conține orice număr de atribute de dată.

Un exemplu de utilizare a atributelor pentru a stoca datele utilizatorului:

Desigur, aceste date nu sunt foarte utile pentru utilizatorul final, deoarece pur și simplu nu le vede, dar atributele datei sunt foarte utilizate pe scară largă în tehnologiile web moderne.

Iată un exemplu de buton pentru a șterge ceva de pe pagina ta:

Șterge

Toți parametrii necesari sunt la îndemână și gata să fie trimiși către scriptul backend. Nu mai există atribute rel sau gestionarea ID-ului sau acțiuni necesare din partea altor atribute.

Ce poți depozita?

Există o singură regulă de reținut: obiectele nu pot fi stocate în atribute de dată. Adică, este posibil dacă sunt mai întâi serializate. Deocamdată, amintiți-vă că, în principiu, puteți stoca doar date șiruri.

Citirea/scrierea atributelor folosind javascript

Să revenim la exemplul de buton și să vedem cum putem accesa atributele necesare.

// Acesta este un buton var button = document.getElementById("your-button-id"); // Obține valoarea var cmd = button.getAttribute("data-cmd"); var id = button.getAttribute("data-id"); // Schimbați valoarea button.setAttribute("data-cmd", yourNewCmd); button.setAttribute("data-id", yourNewId);

Destul de simplu, nu? Acum pur și simplu transmiteți parametrii cmd și id aplicației dvs. și efectuați cererea ajax necesară.

Citiți/scrieți atributele date folosind jQuery.

Iată un analog în jQuery:

// Obține valoarea var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#your-button-id").attr("data-id"); // Schimbați valoarea $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

A nu se confunda cu metoda data(). Deși au unele lucruri în comun, în general sunt lucruri complet diferite. Chiar dacă nu sunteți complet familiarizat cu aceste metode, utilizați doar attr() .

Folosind setul de date API

HTML5 ne oferă chiar și un API pentru lucrul cu atribute de date, deși IE10 și mai jos nu îl acceptă.

Din nou, un exemplu cu un buton, dar de data aceasta folosind API-ul setului de date:

// Acesta este un buton var button = document.getElementById("your-button-id"); // Obține valoarea var cmd = button.dataset.cmd; var id = button.dataset.id; // Schimbați valoarea button.dataset.cmd = yourNewCmd; button.dataset.id = yourNewId;

Vă rugăm să rețineți absența prefixului de date și a cratimelor. La fel ca atunci când lucrați cu proprietăți CSS în JavaScript, veți avea nevoie de cazul „humpback”. API-ul Dataset traduce numele atributelor, astfel încât data-some-attribute-name în HTML devine dataset.someAttributeName în JavaScript.

Ce poți face cu atributele datei?

Exemplele date sunt doar fundația. Puteți face operațiuni mult mai complexe cu atribute de dată. Să ne uităm la câteva exemple.

Filtrare

Să presupunem că lucrați cu o listă de elemente și trebuie să le filtrați după cuvinte cheie. Loc Cuvinte cheieîn atributele datelor și utilizați un mic script iterativ pentru a le procesa.

• Vad
• Chevrolet
...

Exemplu „pe genunchi”:

$("#filtru").on("keyup", function() ( var cuvânt cheie = $(this).val().toLowerCase(); $(".cars > li").each(function() ( $(this).toggle(cuvânt cheie.lungime< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

Stilizare

Desigur, este mai bine să aplicați stiluri folosind clase, dar același lucru se poate face folosind atribute de date. Acesta este modul în care puteți aplica un stil elementelor care au un anumit atribut de date, indiferent de valoarea acestuia. Să ne uităm mai întâi la HTML:

Și acum CSS:

( fundal: roșu; )

Dar cum ținem cont de valoarea unui atribut? Iată cum puteți aplica un stil tuturor elementelor cu un atribut de avertizare de date a cărui valoare conține cuvântul eroare:

( culoarea rosie; )

Setări

Cunoscutul cadru Bootstrap folosește atribute de date pentru a-și configura pluginurile JavaScript. Exemplu pop-up:

Popover deasupra

Cel mai bun mod de a stoca date

Atributele datei sunt foarte frecvente în tehnologiile web. Dar cel mai important lucru este că acestea sunt pe deplin acceptate de browserele mai vechi și pătrund din ce în ce mai adânc în standardele web. Și, deoarece standardul HTML a fost deja aprobat, puteți lucra cu ele astăzi și nu vă fie teamă că vor dispărea brusc mâine.

Atributele oferă informații suplimentare despre un element și sunt întotdeauna definite în eticheta de început, indiferent dacă este o etichetă pereche sau o singură etichetă.

Există o serie de atribute în HTML care universalși poate fi aplicat aproape oricărei etichete, motiv pentru care atributele incluse în acest grup sunt numite atribute globale.

Atributele globale vor fi adesea întâlnite în exemplele acestui tutorial. Vă sugerez să revizuiți rapid atributele pe care le-am revizuit deja și să vă familiarizați cu atributele globale care vor fi discutate în articolele viitoare:

Întrebări și sarcini pe această temă

Înainte de a trece la următorul subiect, finalizați sarcina de practică:

Sfat: Nu uitați să definiți limba conținutului paginii și elementele acolo unde este necesar. După ce finalizați exercițiul, inspectați codul paginii deschizând exemplul într-o fereastră separată pentru a vă asigura că l-ați completat corect.

În vremurile XHTML/HTML4, dezvoltatorii aveau doar câteva opțiuni pe care le puteau folosi pentru a stoca date arbitrare legate de DOM. Ai putea să-ți inventezi propriile atribute, dar acest lucru era riscant - codul tău nu ar fi valid, browserele ar putea să-ți ignore datele și ar putea cauza probleme dacă numele se potrivește cu atributele HTML standard.

Prin urmare, majoritatea dezvoltatorilor s-au păstrat la atributele class sau rel, deoarece acestea erau singura modalitate rezonabilă de a stoca rânduri suplimentare. De exemplu, să presupunem că creăm un widget pentru a afișa mesaje precum o cronologie a mesajelor Twitter. În mod ideal, JavaScript ar trebui să fie configurabil fără a fi nevoie să rescrie codul, așa că definim ID-ul utilizatorului în atributul de clasă, astfel:

Codul nostru JavaScript va căuta un element cu ID msglist. Folosind scriptul vom căuta clase care încep cu utilizator_, iar „bob” în cazul nostru va fi ID-ul utilizatorului și vom afișa toate postările utilizatorului respectiv.

Să presupunem că am dori, de asemenea, să setăm un număr maxim de mesaje și să omitem mesajele mai vechi de șase luni (180 de zile):

Atributul nostru clasă Este aglomerat foarte repede - este mai ușor să greșiți, iar analizarea șirurilor în JavaScript devine din ce în ce mai dificilă.

Atribute de date HTML5

Din fericire, HTML5 a introdus capacitatea de a utiliza atribute personalizate. Puteți folosi orice nume cu minuscule cu un prefix date-, De exemplu:

Atribute personalizate de date:

• acestea sunt șiruri - puteți stoca orice informație în ele care poate fi reprezentată sau codificată ca șir, cum ar fi JSON. Castarea tipului trebuie făcută folosind JavaScript
• ar trebui utilizat în cazurile în care nu există elemente sau atribute HTML5 adecvate
• referiti doar la pagina. Spre deosebire de microformate, acestea ar trebui ignorate de sisteme externe, cum ar fi motoarele de căutare și crawlerele

Procesarea JavaScript Exemplul #1: getAttribute și setAttribute

Toate browserele vă permit să obțineți și să modificați atributele de date folosind metodele getAttribute și setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

Acest lucru funcționează, dar ar trebui folosit doar pentru a menține compatibilitatea cu browserele mai vechi.

Exemplul nr. 2 de procesare în JavaScript: metoda data() a bibliotecii jQuery

Incepand cu versiuni jQuery 1.4.3 Metoda data() procesează atributele de date HTML5. Nu trebuie să specificați în mod explicit prefixul date-, deci un cod ca acesta ar funcționa:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("dimensiunea listei", show+3);

Cu toate acestea, rețineți că jQuery încearcă să convertească valorile unor astfel de atribute în tipuri adecvate (boolean, numere, obiecte, matrice sau nul) și va afecta DOM. Spre deosebire de setAttribute, metoda date() nu va înlocui fizic atributul dimensiunea listei de date- dacă îi verificați valoarea în afara jQuery - va rămâne în continuare egală cu 5.

Exemplul nr. 3 de procesare JavaScript: API pentru lucrul cu seturi de date

În cele din urmă, avem un API pentru lucrul cu seturi de date HTML5 care returnează un obiect DOMStringMap. Este necesar să ne amintim că atributele datelor sunt mapate la un obiect fără prefixe date-, cratimele sunt eliminate din nume, iar numele în sine sunt convertite în camelCase, de exemplu:

Noul nostru cod:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Acest API este acceptat de toate browserele moderne, dar nu IE10 și mai mici. Există o soluție pentru aceste browsere, dar probabil că este mai practic să utilizați jQuery dacă scrieți pentru browsere mai vechi.

Ultima actualizare: 04/08/2016

Înainte de a trece direct la crearea paginilor web în HTML5, să ne uităm la blocurile de bază care alcătuiesc o pagină web.

Un document HTML5, ca orice document HTML, este alcătuit din elemente, iar elementele sunt alcătuite din etichete. De obicei, elementele au o etichetă de deschidere și de închidere, care sunt incluse în paranteze unghiulare. De exemplu:

Iată un element div definit care are o etichetă de deschidere

Elementele pot consta, de asemenea, dintr-o singură etichetă, de exemplu, element
, a cărui funcție este de a rupe o linie.

Astfel de elemente sunt numite și elemente goale. Deși am folosit o bară oblică de închidere, prezența sa este opțională conform specificațiilor și este echivalentă cu utilizarea unei etichete fără bară oblică:

Fiecare element din eticheta de deschidere poate avea atribute. De exemplu:

Există două elemente definite aici: div și input. Elementul div are un atribut de stil. După semnul egal, valoarea atributului se scrie între ghilimele: style="color:red;" . În acest caz, valoarea este „color:red;” indică faptul că culoarea textului va fi roșie.

Al doilea element - elementul de intrare, format dintr-o etichetă, are două atribute: tip (indică tipul elementului - buton) și valoare (definește textul butonului)

Există atribute globale sau comune pentru toate elementele, cum ar fi stilul, și există unele specifice care se aplică anumitor elemente, cum ar fi tipul.

Pe lângă atributele obișnuite, există și atribute booleene. Este posibil ca astfel de atribute să nu aibă sens. De exemplu, puteți seta atributul dezactivat pentru un buton:

Atributul dezactivat indică faptul că elementul este dezactivat.

Atribute globale

HTML5 are un set atribute globale, care se aplică oricărui element HTML5:

accesskey : definește o cheie pentru acces rapid la un element

class : specifică clasa CSS care va fi aplicată elementului

contenteditable: determină dacă conținutul elementului poate fi editat

contextmenu : definește meniul contextual pentru un element care este afișat când faceți clic dreapta pe element

dir: setează direcția textului într-un element

draggable: determină dacă elementul poate fi tras

dropzone: determină dacă datele zonei de drop pot fi copiate atunci când sunt aruncate pe un element

ascuns : ascunde elementul

id : identificatorul unic al elementului. Elementele de pe o pagină web nu trebuie să aibă identificatori duplicați

lang : specifică limba elementului

verificare ortografică : indică dacă verificarea ortografică va fi utilizată pentru acest element

stil : stabilește stilul elementului

tabindex : definește ordinea în care elementele pot fi comutate folosind tasta TAB

title : setează o descriere suplimentară pentru element

translate : determină dacă conținutul elementului trebuie tradus

Dar, de regulă, din toată această listă, trei sunt cel mai des folosite: clasă, id și stil.

Atribute personalizate

Spre deosebire de versiunea anterioară a limbajului de marcare, atributele personalizate au fost adăugate la HTML5. Acum, dezvoltatorul sau creatorul paginii web poate defini orice atribut prefixându-l cu un prefix date-. De exemplu:

Atributul data-color este definit aici și are valoarea „roșu”. Deși nu există un astfel de atribut pentru acest element și nici în html în general. O definim noi înșine și o punem la orice valoare.

Ghilimele simple sau duble

Puteți găsi adesea cazuri în care atât ghilimele simple, cât și cele duble sunt folosite în html atunci când definiți valorile atributelor. De exemplu:

Atât ghilimele simple, cât și cele duble sunt acceptabile în acest caz, deși ghilimelele duble sunt mai des folosite. Cu toate acestea, uneori, valoarea atributului în sine poate conține ghilimele duble, caz în care este mai bine să puneți întreaga valoare între ghilimele simple:

A! HTML5În prezent, este deja destul de activ utilizat în dezvoltarea de interfețe și aplicații web. Știm cu toții că HTML5 a adus multe etichete, atribute și elemente noi. Unele dintre ele sunt cu adevărat utile pentru site-urile noastre. Astfel, în acest articol, voi vorbi pe scurt despre câteva utile și importante Etichete și atribute HTML5, pe care ar trebui să-l cunoașteți și să îl folosiți în practică!

Markup structural HTML5

Au apărut mai multe etichete noi în HTML5, care sunt concepute pentru a înlocui blocurile div deja stabilite (nu toate, desigur 🙂). În exterior, ca să spunem așa, nimic nu s-a schimbat, dar, în esență, noile etichete poartă o încărcare semantică (semantică) și definesc strict pentru fiecare bloc locul și rolul său:

• — Definește zona „header” a site-ului cu logo-ul, navigarea primară etc.;
• — Definește „subsolul”, subsolul paginii web sau al secțiunii unui site web, care de obicei conține informații suplimentare;
• — Definește un bloc care este utilizat pentru a grupa obiecte de același tip sau pentru a împărți textul în secțiuni;
• — Definește partea autonomă a paginii, poate fi o postare pe forum, o postare în revistă sau un articol de ziar, o intrare pe blog etc.;
• — Definește zona de navigare, de obicei o listă de link-uri;

Formă

Noi tipuri de câmpuri de intrare

HTML5 a introdus noi tipuri câmpuri de intrare. Ele vă permit să scrieți cod mai corect din punct de vedere semantic, adaptat pentru dispozitive mobile. De exemplu, atunci când se utilizează tipul de e-mail, textul introdus este validat automat pentru a se asigura că este identic cu adresa de e-mail etc.

Expresii regulate pentru validare

Înainte de HTML5, atunci când utilizați un formular pe site-ul dvs., trebuia să treceți prin textul introdus JavaScript pentru verificare. Acum, cu HTML5 și atributul model, puteți defini un model de expresie regulată pentru a valida datele.

Completare automată cu lista de date HTML5

Utilizarea elementului HTML5 dataList vă permite să creați o listă de date pentru a completa automat câmpurile de intrare. Super util!

Focalizarea automată a câmpurilor de formular

Atributul de focalizare automată vă va permite să setați focalizarea pe orice element de formular (inclusiv un buton).

Elemente ascunse folosind HTML5

HTML5 a introdus atributul ascuns, care vă permite să ascundeți un anumit element, similar modului în care este utilizat în CSS folosind afișaj: niciunul

Pellentesque habitant morbi tristique senectus et netus....