Cum de a lucra în date-atribute HTML5 și modul în care acestea pot fi folosite

Ce este o serie de date-atribute și ce sunt?

Deci, pentru a începe cu, ceea ce este, la toate. După cum probabil știți, în orice etichetă HTML, puteți specifica orice atribut, fie că este vorba universală (clasa, id) sau unic pentru acel element.

Prima lor caracteristică este faptul că atributul poate fi numit nimic. Singura regula - trebuie să înceapă cu prefixul și DATA- acolo, desigur, nu trebuie să fie litere românești. O etichetă poate fi scris orice număr de parametri. Precum și valorile pe care le pot specifica cuvinte arbitrare. Apropo, o valoare poate fi specificată în limba rusă. exemplu:

După cum puteți vedea, puteți specifica orice nume și orice valoare. Dar aceste opțiuni nu fac nimic cu un element, atunci de ce au nevoie? Există cel puțin câteva moduri de a folosi date-atribute în construirea site-ului, și să ne uităm la ele.

HTML5 și CSS3 practica de la zero la rezultatul!

Dozare 1 - apel la elemente în css

Dacă știi ce atribut selectori, probabil deja ghici cum pot fi folosite noile caracteristici. Referindu-se la un unic tag-ul de date atribut, puteți face referire în mod corespunzător să-l în stil. Să ne uităm la un exemplu:

Acest lucru ne-a permis să se aplice elementul fără utilizarea de clase de stil. Cu toate acestea, dacă crezi asta, atunci nu există nici un avantaj special, nu, pentru a avea acces la clasa trebuie să fie făcut în legătură cu aceeași acțiune. Astfel, pur și simplu extinde oportunitățile pentru selectori și nimic mai mult.

Metoda de aplicare 2 - valori stocarea și utilizarea acestora

La prima vedere, valori de atribute de date nu se schimba nimic, și în general nu afectează pagina web. Deci, de ce au nevoie? De fapt, utilizarea acestora ar putea fi găsit, dacă vă amintiți despre attr () în css.

Să ne pune problema: pe care doriți să le afișați pe pagina cu textul explicativ la fotografiile care au apărut fie în mod direct, cu imagini, sau atunci când treceți peste ea, indiferent cum. indiciu standard este implementat folosind atributul din titlu.

Dar acest sfat nu s-ar putea satisface pe mulți parametri. În primul rând, se pare neted (care nu este întotdeauna necesar). În al doilea rând, aceasta dispare după un timp. În al treilea rând, apare în locuri diferite, în funcție de locul în care cursorul este. Dar cea mai mare problemă - nu putem stiliza noastre prompte - va fi întotdeauna text negru pe un fundal alb, care nu este foarte interesant.

Deci, în codul de mai sus, am introdus o imagine, a subliniat modul în care să-l și înregistrate în plus arbitrar set de date. Punerea în aplicare o explicație concluzie fotografiile pot fi acum după cum urmează:

Ce am făcut? Acum, toate imaginile vor fi pseudo-element care va conține valoarea atributului de date img, în cazul în care acesta este tag-ul img. În acest mod simplu ai putea aduce un text explicativ la fotografii.

Nu voi în acest articol oferă instrucțiuni despre cum să atragă un indiciu. Pot spune doar că, în mod implicit, va fi afișată după încărcarea paginii. De multe ori este necesar să se ascundă inițial și afișa atunci când treceți pe imagine. Pentru a-l pune în aplicare, trebuie să utilizați un selector img: Hover: după.

Desigur, singurul dezavantaj al tuturor acestor inovații este că acestea nu sunt întotdeauna întreținute în mod corespunzător. Așa că, dacă un browser caracteristici noi funcționează bine, iar utilizatorii pot folosi noul câmp, apoi într-un alt browser-ul Web, totul poate fi diferit. Desigur, o parte de vină pentru ei înșiși utilizatorii, care nu actualizează software-ul, dar trebuie să păstreze, de asemenea urmări modul în care și ceea ce este acceptat. În cursul primei în HTML5, să fii în stare să învețe despre serviciul bun care definesc sprijinul anumitor proprietăți.

sintaxa simplificată

Nu pot menționa cu privire la modul de a înregistra în mod corespunzător atributele și valorile lor. Faptul este că HTML 5 în acest plan a devenit mult mai ușor. Este suficient să arate. și este posibil să se scrie cod chiar și cu erori minore, și, ca urmare, el va fi în continuare procesate corect. exemple:

S-ar părea, ce este? Este posibil să scrie bine? Se pare că, în html5 posibil. Valoarea atributului poate fi specificat fără ghilimele, și ei înșiși pentru a scrie numele tag-uri, chiar și în diferite registre. Desigur, nu ar trebui să facă în mod intenționat, și, în acest sens, nu este vizibil. Dar, totuși, dacă sunteți acum la întâmplare undeva recunosc o astfel de greșeală mică, nici o problemă va apărea.

HTML5 și CSS3 practica de la zero la rezultatul!

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram