Această industrie se mișcă rapid - foarte repede! Dacă nu ești atent, vei fi lăsat în praf. Deci, dacă vă simțiți puțin copleșiți de modificările / actualizările care apar în HTML5, utilizați acest lucru ca element de bază al lucrurilor pe care trebuie să le cunoașteți.
Înainte de a naviga prin aceste tehnici, aruncați o privire la șabloanele noastreHTML5, deoarece o temă de calitate ar putea fi o opțiune bună pentru următorul proiect.
Sau puteți obține ajutor pe Envato Studio cu tot felul de proiecte, cum ar fi personalizarea șabloanelor HTML5.
1. Noua Doctype
Folosind în continuare acel plictisitor, imposibil de memorat XHTML doctype?
Dacă da, de ce? Treceți la noua doctype HTML5. Vei trăi mai mult - după cum spunea Douglas Quaid.
De fapt, știați că este adevărat că nu este chiar necesar pentru HTML5? Cu toate acestea, este folosit pentru browserele curente și cele vechi care necesită o specificare doctype. Browserele care nu înțeleg această doctype vor face pur și simplu marcajul conținut în modul standard. Deci, fără îngrijorare, nu ezitați să arătați prudență vântului și să îmbrățișați noua doctype HTML5.
2. Elementul figura
Luați în considerare următoarea marjă pentru o imagine:
Imaginea lui Marte.
Din păcate, nu există nici un mod ușor sau semantic de asociere a legendei, înfășurat într-o etichetă cu paragraf, cu elementul de imagine în sine. HTML5 rectifică acest lucru, odată cu introducerea element. Când este combinat cu element, putem asocia acum semantic subtitrări cu omologii lor de imagine.
Aceasta este o imagine a ceva interesant.
3. redefinită
Nu cu mult timp în urmă, am folosit element pentru a crea subtitluri care sunt strâns legate de logo. Este un element de prezentare util; totuși, acum, ar fi o utilizare incorectă. mic elementul a fost redefinit, mai adecvat, pentru a se referi la tipărirea redusă. Imaginați-vă o declarație privind drepturile de autor în subsolul site-ului dvs.; conform noii definiții HTML5 a acestui element; ar fi ambalajul corect pentru aceste informații.
mic elementul se referă acum la "imprimare mică".
4. Nu mai mult Tipuri pentru Scripturi și legături
Este posibil să adăugați încă tip atribuiți-vă legătură și scenariu Etichete.
Acest lucru nu mai este necesar. Se presupune că ambele etichete se referă la foi de stiluri și, respectiv, la scripturi. Ca atare, putem elimina tip atribuiți toți împreună.
5. A cita sau a nu cita.
? Aceasta este întrebarea. Rețineți că HTML5 nu este XHTML. Nu trebuie să împleti atributele dvs. în ghilimele dacă nu doriți să vă. Nu trebuie să închideți elementele. Cu asta a spus, nu este nimic in neregula cu asta, daca te face sa te simti mai bine. Cred că este adevărat pentru mine.
Porniți reactorul.
Fă-ți mintea pe asta. Dacă preferați un document mai structurat, cu toate mijloacele, lipiți cu ghilimelele.
6. Creați-vă conținutul editabil
Noile browsere au un atribut nou, care poate fi aplicat elementelor numite contenteditable. După cum sugerează și numele, acest lucru permite utilizatorului să editeze orice text conținut în element, inclusiv copiii acestuia. Există o varietate de utilizări pentru așa ceva, inclusiv o aplicație la fel de simplă ca o listă de sarcini, care beneficiază, de asemenea, de stocarea locală.
fără titlu
Lista de sarcini
Pauză șoferul cabinei mecanice.
Conduceți la fabrica abandonată
Vizionați videoclipul de sine
Sau, așa cum am învățat în sfatul precedent, am putea scrie:
7. Intrările de e-mail
Dacă aplicăm a tip de "e-mail" pentru a forma intrări, putem instrui browser-ul la numai permiteți șirurilor care corespund unei structuri de adresă de e-mail validă. Asta e corect; built-in formular de validare va fi în curând aici! Nu putem să ne bazăm 100% pe aceasta încă din motive evidente. În browserele mai vechi care nu înțeleg acest tip de "e-mail", acestea vor reveni pur și simplu la o casetă de text obișnuită.
fără titlu
În acest moment, nu putem depinde de validarea browserului. O soluție server / client trebuie încă implementată.
De asemenea, trebuie remarcat faptul că toate browserele actuale sunt puțin perturbate atunci când vine vorba de elementele și atributele pe care le fac și care nu le suportă. De exemplu, Opera pare să sprijine validarea e-mail-urilor, atâta timp cât Nume atributul este specificat. Cu toate acestea, nu suportă înlocuitor atribut, pe care îl vom învăța în următorul sfat. Linia de fund, nu depinde încă de această formă de validare? dar puteți să-l utilizați în continuare!
8. Placeholders
Înainte, a trebuit să utilizăm un pic de JavaScript pentru a crea locații pentru casetele de text. Sigur, puteți seta inițial valoare atribuiți modul în care considerați potrivit, dar, de îndată ce utilizatorul șterge acest text și dă clic pe el, intrarea va fi lăsată din nou gol. înlocuitor atributul remedii acest lucru.
Din nou, suportul este umbrite în cel mai bun caz în browserele, cu toate acestea, acest lucru va continua să se îmbunătățească cu fiecare lansare nouă. În plus, dacă browserul, cum ar fi Firefox și Opera, nu suportă în prezent înlocuitor atributul, nu sa făcut nici un rău.
9. Depozitare locală
Datorită spațiului de stocare local (nu HTML5 oficial, dar grupat din motive de conveniență), putem face browserele avansate să "rețină" ceea ce tastăm, chiar și după ce browser-ul este închis sau este actualizat.
"localStorage stabilește câmpuri pe domeniu. Chiar și atunci când închideți browserul, redeschideți-l și reveniți la site, acesta își amintește toate câmpurile din localStorage." -QuirksBlog
Desigur, nu este acceptat în toate browserele, ne putem aștepta ca această metodă să funcționeze, mai ales în Internet Explorer 8, Safari 4 și Firefox 3.5. Rețineți că, pentru a compensa browserele mai vechi care nu vor recunoaște spațiul de stocare local, trebuie mai întâi să testați pentru a stabili dacă window.localStorage există.
viaяhttp: //www.findmebyip.com/litmus/
10.î Semanticul Antet și Subsol
Au dispărut zilele următoare:
?
?
Divs, prin natura lor, nu au nici o structură semantică - chiar și după id este aplicat. Acum, cu HTML5, avem acces la și elemente. Marja de mai sus poate fi acum înlocuită cu:
?
Este pe deplin potrivit să aveți multiple antetși subsolîn proiectele dvs..
Încercați să nu confundați aceste elemente cu "antetul" și "subsolul" site-ului dvs. web. Ele se referă pur și simplu la containerul lor. Ca atare, este logic să plasați, de exemplu, meta informație în partea de jos a unui post de blog din cadrul site-ului subsol element. Același lucru este valabil și pentru antet.
11. Mai multe caracteristici ale formularului HTML5
Aflați despre funcțiile de formular HTML5 mai utile în acest sfat video rapid.
12. Internet Explorer și HTML5
Din păcate, faptul că Internet Explorer necesită un pic de luptă pentru a înțelege noile elemente HTML5.
Toate elementele, în mod implicit, au a afişa de in linie.
Pentru a vă asigura că noile elemente HTML5 sunt redactate corect ca elemente la nivel de bloc, este necesar ca în acest moment să le inscripționați ca atare.
Din păcate, Internet Explorer va ignora în continuare aceste stilizări, deoarece nu are nicio idee despre ceea ce, de exemplu, antet element este chiar. Din fericire, există o reparație ușoară:
Destul de ciudat, acest cod pare să declanșeze Internet Explorer. Pentru a pur și simplu acest proces pentru fiecare nouă aplicație, Remy Sharp a creat un script, denumit în mod obișnuit HTML Shiv. Acest script stabilește, de asemenea, unele probleme de tipărire.
13. hgroup *
* De la prima publicare a acestui articol, elementul hgroup a devenit în întregime caduc și nu mai trebuie utilizat.
14. Atributul necesar
Formularele permit o nouă procedură necesar atribut, care specifică, firește, dacă este necesară o anumită intrare. În funcție de preferința dvs. de codare, puteți declara acest atribut într-unul din două moduri:
Sau, cu o abordare mai structurată.
Oricare metodă va face. Cu acest cod și în cadrul browserelor care acceptă acest atribut, un formular nu poate fi trimis dacă intrarea "someInput" este necompletată. Iată un exemplu rapid; vom adăuga, de asemenea, atributul substituentului, deoarece nu există nici un motiv să nu.
Dacă intrarea este lăsată necompletată și formularul este trimis, caseta de text va fi evidențiată.
15. Atribute de focalizare automată
Din nou, HTML5 elimină nevoia de soluții JavaScript. Dacă o anumită intrare trebuie "selectată" sau focalizată, în mod implicit, putem folosi acum autofocus atribut.
Interesant de mult, în timp ce eu personal tind să prefer o abordare mai mult XHTML (folosind ghilimele etc.), scriind "Autofocus = autofocus" se simte ciudat. Ca atare, ne vom ocupa de abordarea cu un singur cuvânt cheie.
16. Asistență audio
Nu mai trebuie să ne bazăm pe pluginuri terță parte pentru a face audio. HTML5 oferă acum element. Ei bine, cel puțin, în cele din urmă, nu va trebui să ne facem griji cu privire la aceste pluginuri. Pentru moment, numai cele mai recente browsere oferă suport pentru audio HTML5. În acest moment, este încă o practică bună să oferim o formă de compatibilitate înapoi.
Mozilla și Webkit nu se înțeleg complet încă, când vine vorba de formatul audio. Firefox va dori să vadă un fișier .ogg, în timp ce browserele Webkit vor funcționa bine cu extensia .mp3 comună. Aceasta înseamnă că, cel puțin pentru moment, ar trebui să creați două versiuni audio.
Când Safari încarcă pagina, nu va recunoaște formatul .ogg și o va sări peste aceasta și va trece la versiunea mp3, în consecință. Rețineți că IE, de obicei, nu acceptă acest lucru, iar Opera 10 și versiunile mai mici pot funcționa numai cu fișiere .wav.
17. Suport video
La fel ca element, de asemenea, avem, desigur, și video HTML5 în noile browsere! De fapt, recent, YouTube a anunțat un nou videoclip HTML5 încorporat pentru videoclipurile sale, pentru browserele care îl suportă. Din nefericire, din nou, deoarece spec. HTML5 nu specifică un codec specific pentru video, este lăsat pe browsere să decidă. În timp ce se poate aștepta ca Safari și Internet Explorer 9 să susțină video în format H.264 (pe care jucătorii Flash îl pot juca), Firefox și Opera se leagă de formatele Open Theora și Vorbis. Ca atare, atunci când afișați un videoclip HTML5, trebuie să oferiți ambele formate.
Chrome poate afișa corect videoclipul care este codificat atât în formatele "ogg" cât și în "mp4".
Sunt câteva lucruri demne de remarcat aici.
Nu suntem obligați din punct de vedere tehnic să setăm tip atribut; cu toate acestea, dacă nu o facem, browserul trebuie să-și dea seama de tipul în sine. Salvați o anumită lățime de bandă și declarați-o singură.
Nu toate browserele înțeleg videoclipul HTML5. Sub sursă elemente, putem oferi fie link-ul de descărcare, fie încorpora o versiune Flash a videoclipului. Depinde de tine.
controale și preîncărcare atributele vor fi discutate în următoarele două sfaturi.
18. Preload Video
preîncărcare atributul face exact ceea ce ați ghici. Cu toate acestea, cu asta ați spus mai întâi dacă doriți sau nu ca browserul să preîncărcați videoclipul. Este necesar? Poate, dacă vizitatorul accesează o pagină, care este făcută în mod special pentru a afișa un videoclip, ar trebui să preîncărcați cu siguranță filmul și să salvați un pic de așteptare pentru vizitator. Videoclipurile pot fi preîncărcate prin setare preîncărcare = „preîncărcare“, sau prin simpla adăugare preîncărcare. Prefer aceasta ultima solutie; este puțin mai redundant.
19. Comenzile afișajului
Dacă lucrați împreună cu fiecare dintre aceste sfaturi și tehnici, este posibil să fi observat că, cu codul de mai sus, videoclipul de mai sus pare a fi doar o imagine, fără controale. Pentru a face aceste controale de redare, trebuie să specificăm controale atribut în cadrul video element.
Rețineți că fiecare browser își face jucătorul în mod diferit unul de celălalt.
20. Expresii regulate
Cât de des te-ai găsit să scrii o expresie regulată rapidă pentru a verifica o anumită casetă de text. Mulțumită noului model , putem introduce o expresie regulată direct în marcajul nostru.
Dacă sunteți destul de familiarizat cu expresii regulate, veți fi conștienți de faptul că acest model: [A-Za-z] 4,10 acceptă numai literele mari și minuscule. Acest șir trebuie să aibă, de asemenea, cel puțin patru caractere și maximum zece caractere.
Observați că începem să combinăm toate aceste atribute minunate noi!
Dacă expresiile regulate sunt străine pentru dvs., consultați aici.
21. Detectarea suportului pentru atribute
Cât de bune sunt aceste atribute dacă nu avem cum să determinăm dacă browserul le recunoaște? Ei bine, punct bun; dar există mai multe modalități de a face acest lucru afară. Vom discuta două. Prima opțiune este de a utiliza biblioteca modernizată excelentă. Alternativ, putem crea și diseca aceste elemente pentru a determina ce sunt capabile browserele. De exemplu, în exemplul nostru precedent, dacă vrem să determinăm dacă browserul poate implementa model atribut, am putea adăuga un pic de JavaScript pe pagina noastră:
alertă ('model' din document.createElement ('input')) // boolean;
De fapt, aceasta este o metodă populară de determinare a compatibilității browserului. Biblioteca jQuery folosește acest truc. Deasupra, creăm un nou intrare element, și de a determina dacă model atributul este recunoscut în interiorul. Dacă este cazul, browserul acceptă această funcționalitate. În caz contrar, bineînțeles că nu.
Rețineți că acest lucru se bazează pe JavaScript!
22. Marchează elementul
Gândiți-vă la element ca marcator. Un șir înfășurat în această etichetă ar trebui să fie relevant pentru acțiunile curente ale utilizatorului. De exemplu, dacă am căutat "Deschideți-vă mintea" pe un anumit blog, aș putea să folosesc apoi niște JavaScript pentru a încheia fiecare apariție a acestui șir în cadrul Etichete.
rezultatele cautarii
Au fost întrerupți, imediat după ce Quato a spus, "Deschide-ti mintea".
23. Când să utilizați a
Unii dintre noi au întrebat inițial când ar trebui să folosim simplu-ole divs. Acum că avem acces la antets, articols, secțiunes, și subsols, există vreodată un timp pentru a utiliza o? div? Absolut.
divs ar trebui să fie utilizate atunci când nu există un element mai bun pentru locul de muncă.
De exemplu, dacă constatați că trebuie să înfășurați un bloc de cod într-un element de înfășurare special pentru scopul de a poziționa conținutul, o
are sens perfect. Cu toate acestea, dacă înfășurați în schimb o nouă postare în blog sau, probabil, o listă de linkuri în subsolul dvs., vă recomandăm să utilizați și elemente, respectiv. Sunt mai semantice.
24. Ce trebuie să începeți imediat să utilizați
Cu toate acestea vorbind despre HTML5 nu este complet până în 2022, mulți oameni ignoră în totalitate - ceea ce este o mare greșeală. De fapt, există câteva caracteristici HTML5 pe care le putem folosi în toate proiectele noastre chiar acum! Codul mai simplu, mai curat este întotdeauna un lucru bun. În sfatul video de astăzi rapid, vă voi arăta o serie de opțiuni.
25. Ceea ce nu este HTML5
Oamenii pot fi iertați pentru presupunerea că tranzițiile minunate cu JavaScript sunt grupate în HTML5 cuprinzător. Hei - chiar și Apple a promovat în mod neașteptat această idee. Pentru non-dezvoltatori, care le pasă; este o modalitate ușoară de a vă referi la standardele web moderne. Cu toate acestea, pentru noi, deși ar putea fi doar semantică, este important să înțelegem exact ce nu este HTML5.
SVG: Nu HTML5. Are cel puțin cinci ani.
CSS3: Nu HTML5. Este? CSS.
Localizarea geografică: Nu HTML5.
Depozitarea clienților: Nu HTML5. Acesta a fost la un moment dat, dar a fost eliminat din spec., Datorită faptului că mulți au îngrijorat că, în ansamblu, devenea prea complicată. Acum are o specificație proprie.
Socketuri Web: Nu HTML5. Din nou, a fost exportat în specificația sa.
Indiferent de cât de multă distincție aveți nevoie, toate aceste tehnologii pot fi grupate în stivă web modernă. De fapt, multe dintre aceste specificații ramificate sunt încă gestionate de aceleași persoane.
26. Atributul de date
Acum avem oficial suport pentru atribute personalizate în toate elementele HTML. În timp ce, înainte, am putea încă să scăpăm de lucruri precum:
Mulțumesc, Tony.
? validatorii s-ar da un zgomot! Dar acum, atâta timp cât ne preface atributul personalizat cu "date", putem folosi oficial această metodă. Dacă v-ați găsit vreodată atașați date importante la ceva de genul a clasă atribut, probabil pentru utilizarea JavaScript, aceasta va veni ca un ajutor mare!
Snippet HTML
Bla Bla
Preluați valoarea atributului particularizat
var theDiv = document.getElementById ('myDiv'); var attr = TheDiv.getAttribute ('data-custom-attr'); alert (attr); // My Val
De asemenea, poate fi folosit chiar și în CSS-ul dvs., ca și în cazul acestui exemplu de schimbare a textului prost și șchiopătat.
Tipul de schimbare a textului CSS pentru Lame
Nu mă atingeți
Puteți vedea o demonstrație a efectului de mai sus pe JSBIN.
27. Elementul de ieșire
După cum probabil ați ghicit, producție elementul este folosit pentru a afișa un fel de calcul. De exemplu, dacă doriți să afișați coordonatele unei poziții a mouse-ului sau suma unei serii de numere, aceste date trebuie inserate în producție element.
Ca un exemplu simplu, să insera suma a două numere într-un gol producție cu JavaScript, atunci când a a depune butonul este apăsat.
Încearcă-te pentru tine.
Rețineți că suportul pentru producție elementul este încă un pic încurcat. La momentul acestei scrieri, puteam doar să fac Opera să joace frumos. Acest lucru se reflectă în codul de mai sus. Dacă browserul nu recunoaște elementul, browserul va avertiza pur și simplu o notificare care vă va informa cât mai mult. În caz contrar, el găsește ieșirea cu numele "sum" și își stabilește valoarea 15, în consecință, după depunerea formularului.
Acest element poate primi, de asemenea, a pentru atribut, care reflectă numele elementului pe care îl producție se referă la, similar cu modul în care a eticheta lucrări.
28. Creați glisierele cu intrarea în interval
HTML5 introduce noul gamă tip de intrare.
Mai ales, poate primi min, max, Etapa, și valoare atribute, printre altele. Deși numai Opera pare să sprijine acest tip de intrare chiar acum pe deplin, va fi fantastic când putem folosi de fapt acest lucru!
Pentru o demonstrație rapidă, să construim un ecartament care să permită utilizatorilor să decidă cât de minunat este "Total Recall". Nu vom construi o soluție de votare în lumea reală, dar vom analiza modul în care ar putea fi făcut foarte ușor.
Pasul 1: Marcare
În primul rând, noi creăm marja noastră.
Observați că, în plus față de setare min și max valorile, putem întotdeauna să specificăm ce Etapa pentru fiecare tranziție va fi. În cazul în care Etapa este setat sa 1, vor fi apoi 10 valori pe care să le alegeți. De asemenea, profităm de noul producție element despre care am aflat despre vârful anterioară.
Pasul 2: CSS
În continuare, o vom schita doar puțin. Vom folosi de asemenea :inainte de și :după pentru a informa utilizatorul despre ceea ce ne-a specificat min și max valorile sunt. Mulțumesc mult lui Remy și lui Bruce pentru că mi-a învățat acest truc, prin "Introducerea HTML5".
Mai sus, creăm conținut înainte și după intrarea în interval și facem valorile să fie egale cu min și max valori, respectiv.
Pasul 3: JavaScript
În cele din urmă, noi:
Determinați dacă browserul curent știe ce este intrarea domeniului. Dacă nu, avertizăm utilizatorul că demo-ul nu va funcționa.
Actualizați producție element dinamic, deoarece utilizatorul mută cursorul.
Ascultați când utilizatorul dezactivează glisorul, apucați valoarea și salvați-l în spațiul de stocare local.
Apoi, data viitoare când utilizatorul va reîmprospăta pagina, intervalul și ieșirea vor fi automat setate la cele pe care le-au selectat ultima dată.
(funcția () var f = document.forms [0], interval = f ['interval'], rezultat = f ['rezultat'], cachedRangeValue = localStorage.rangeValue? (o.type === 'text') alert ('Ne pare rau') este unul dintre copiii reci care // recunoaste intrarea intervalului var o = document.createElement ('input' .Instrumentul dvs. nu este destul de cool încă.Încercați cea mai recentă operă. '); // Setați valorile inițiale ale elementelor de intrare și de ieșire la // fie ceea ce este stocat local, fie numărul 5. range.value = cachedRangeValue; result.value = cachedRangeValue; // Când utilizatorul face o selecție, actualizează spațiul de stocare locală range.addEventListener ("mouseup", funcția () alert ("Valoarea selectată a fost" + range.value + ". (localStorage.rangeValue = range.value): alert ("Salvați datele în baza de date sau ceva în schimb");, false); // Afișați valoarea selectată când glisați. range.addEventListene r ("schimbare", funcție () result.value = range.value; , fals); ) ();
Gata pentru lumea reală? Probabil nu încă; dar este încă distractiv să jucați și să vă pregătiți!
Descărcați codul sursă și încercați-l singur. Dar foloseste Opera.
Vă mulțumim pentru lectură! Am acoperit foarte mult, dar încă am zgâriat doar suprafața a ceea ce este posibil cu HTML5. Sper că acest lucru a servit ca un prim ajutor!
Dacă sunteți în căutarea unei modalități rapide de a începe, aruncăm o privire la șabloanele noastreHTML5, ca o temă de calitate de la ThemeForestana, poate fi exact ceea ce are nevoie de viitorul tău proiect.
Share
Accentsconagua
viaяhttp: //www.findmebyip.com/litmus/ 
