a! HTML5. Trenutno se već aktivno koristi pri razvoju web sučelja i aplikacija. Svi znamo da je HTML5 donio mnoge nove oznake, atribute i elemente. Neki od njih su zaista korisni za naša mjesta. Tako ću u ovom članku ukratko reći o nekoliko korisnih i važnih HTML5 oznake i atributiMorate znati i koristiti u praksi!
Strukturni markup HTML5
Nekoliko novih oznaka pojavilo se u HTML5, koje su dizajnirane da zamijene već oduzete blokove div (nije sve naravno 🙂). Izvana, da tako govorimo, ništa se nije promijenilo, ali u suštini novim oznakama nose semantičko (semantičko) opterećenje i strogo definiraju svoje mjesto i ulogu za svaki blok:
- - određuje "podrum", web stranice web stranice ili particije u kojima se dodatne informacije obično smještaju u mačku;
- - određuje navigacijsko područje, kao popis pravila veza;
Obrazac
Nova vrsta ulaznih polja
HTML5 je uveo nove tipove polja za unos. Oni vam omogućavaju da napišete više semantički ispravnog koda prilagođenog mobilnim uređajima. Na primjer, kada se koristi tipa e-pošte, dođe do automatske provjere unesenog teksta, na identitetu adrese e-pošte i tako dalje.
1 | <tip ulaz \u003d "URL"\u003e
|
Redovni izrazi validacije
Prije pojave HTML5, kada koristite obrazac na vašoj web lokaciji, morate preskočiti uneseni tekst putem JavaScript. za ček. Sada sa HTML5 i atributom uzorka možete definirati redoviti predložak izraza za provjeru podataka.
1 |
|
Automatsko dovršavanje sa HTML5 datalističkom
Upotreba Elementa za HTML5 ement Datalist omogućava vam da kreirate listu podataka za polja za unos autoFillova. Super korisno!
1 |
|
Autofocus polja polja
Atribut automatskog fokusiranja omogućit će vam postavljanje fokusa na bilo koji oblik obrasca (uključujući tipku).
Skriveni elementi sa HTML5
Skriveni atribut unesen u HTML5, što vam omogućava da sakrivate određeni element, kao što se to odnosi na CSS koristeći Dispaly: Nema
Pelentinska staništa Morbi Tristique Senectus et Netus .... Pellentesque stanište Morbi Tristique Senectus et Netus et Malesuada ... Stvorite harmoniku za web mjesto - U HTML5 se pojavio novi atribut za reference. Sada da odredite pretraživač da se veza mora preuzeti, a ne da se ne otvara dovoljno za upotrebu ovog atributa. Da budete u toku sa svježim člancima i predavanjima Davno, za vrijeme XHTML / HTML4, programeri su imali samo nekoliko značajki koje bi mogle koristiti u cilju pohrane proizvoljnih podataka vezanih za Dom. Mogli biste izmisliti vlastite atribute, ali bilo je rizično - vaš kod ne bi bio validan, preglednici bi mogli zanemariti vaše podatke, a moglo bi uzrokovati probleme ako se ime poklapa sa standardnim HTML atributima. Stoga je većina programera bila vezana za klase ili relaturi kao što su bili jedini razuman način pohrane dodatnih linija. Na primjer, pretpostavimo da kreiramo widget za prikaz poruka poput privremene linije poruka na Twitteru. U idealnom slučaju, JavaScript bi trebao biti u mogućnosti konfigurirati bez potrebe za prepisivanjem koda, tako da definiramo korisnički ID u atributu klase, na primjer:
Naslov 2.
Preuzimanje atributa
Naš JavaScript kod potrazit će element sa ID-om mssGlist.. Upotreba skripte, tražit ćemo časove koji počinju korisnik_, a "Bob" će u našem slučaju biti korisnički ID, a mi ćemo prikazati sve poruke ovog korisnika.
Recimo da bismo željeli da postavimo i maksimalni broj poruka i preskočimo poruke preko šest meseci (180 dana):
Naš atribut klasa Vrlo brzo se penje - lakše je omogućiti grešku, a analiza žica na JavaScript-u postaje složenija.
HTML5 atributi podataka
Srećom, u HTML5 uvedena je mogućnost korištenja prilagođenih atributa. Možete koristiti bilo koje ime u donjem registru s prefiksom podaci-, npr.:
Prilagođeni atributi podataka:
- ove su linije u njima, možete pohraniti sve informacije koje se mogu predstavljati ili kodirati kao niz, poput JSON-a. Vrste se moraju donijeti pomoću JavaScript-a
- treba koristiti u slučajevima kada nema prikladnih HTML5 elemenata ili atributa
- prijavite se samo na stranicu. Za razliku od mikroformati, moraju ih zanemariti vanjskim sistemima, poput pretraživača i pretraživanja robota
Primjer br. 1 prerade na JavaScript: Getattribute i setattribute
Svi preglednici omogućavaju vam da dobijete i promijenite atribute podataka pomoću metoda Getattribute i SetaTtribute:
Var msglist \u003d dokument.gerentmentbyid ("MssGlist"); var show \u003d mssglist.getattribute ("veličina podataka"); msglist.settribute ("Veličina podataka", + prikaži + 3);
Djeluje, ali treba koristiti samo za održavanje kompatibilnosti sa starim preglednicima.
Primjer br. 2 Obrada na JavaScript: podaci () metoda jQuery biblioteka
Počevši od jQuery 1.4.3 podaci () postupak procesa HTML5 atributi podataka. Ne trebate izričito odrediti prefiks podaci-Tako da će takav kodeks raditi:
Var msglist \u003d $ ("# mssglist"); var show \u003d mssglist.data ("veličina liste"); msglist.data ("Veličina liste", prikaži + 3);
Ali, kao što može, imati na umu da jQuery pokušava pretvoriti vrijednosti takvih atributa na brige (boolejske vrijednosti, brojevi, predmeti, nizovi ili null) i utiču na dom. Za razliku od setattribute., Metoda podaci () fizički neće zamijeniti atribut veličina popisa podataka - Ako provjerite njegovu vrijednost izvan jQuery - i dalje će ostati jednak 5.
Primjer br. 3 obrade na JavaScript-u: API za rad sa skupovima podataka
I na kraju, imamo API za rad sa HTML5 skupovima podataka koji vraća objekt domstringmap. Mora se imati na umu da se atributi podataka prikazuju u objektu bez prefiksa podaci-Iz imena su uklonjena znakovi crtice, a sami imena pretvoreni su u kamel, na primjer:
| Naziv atributa | Ime u setu podataka API |
| korisnik podataka. | korisnik. |
| maxage podataka. | maxage. |
| veličina popisa podataka | listesize. |
Naš novi kod:
Var msglist \u003d dokument.gerentmentbyid ("MssGlist"); var show \u003d mssglist.dataset. listizi; msglist.dataset. listizi \u003d + Prikaži + 3;
Ovaj API podržavaju svi moderni pretraživači, ali ne i IE10 i u nastavku. Za takve preglednike postoji rešenje, ali, verovatno je praktičnije da koristite jQuery ako pišete za stare preglednike.
HTML - Hypertekxt označavajući jezik. Zasnovan je na takozvanim oznakama. Oznake - Ovo su neki elementi preteljenih pretekla koji određuju format i svojstva elemenata web stranica. Na istoj stranici sakupili smo trenutnu direktorij HTML oznake za vas.
Ukupno ima više od stotinu elemenata markiranja. Svaka ima niz atributa i vlastitu sintaksu. Vodič za HTML oznake pomoći će vam brzo pronaći stavku koja vam je potrebna.
Lista HTML oznaka
Tablica u nastavku prikazuje listu HTML5 oznaka sa kratkim opisom na ruskom jeziku.
| Označiti | Kratki opis |
|---|---|
| Komentar. | |
| Definira vrstu dokumenta. | |
| Link, hipervezu, sidro. | |
| Određuje tekst kao skraćenica. | |
| Podaci za kontakt autor ili vlasnik dokumenta. | |
| Određuje područje na slici karte | |
| Član | |
| Sadržaj na stranu (sadržaj nije glavni na stranici značenjem) | |
| Omogućuje vam umetanje reproducibilne audio datoteke. | |
| Odvažan tekst. | |
| Određuje osnovni url ili ciljni atribut za relativne reference u dokumentu. | |
| Područje u kojem pisanje teksta može imati druge smjerove. | |
| Postavlja smjer pisanja teksta. Za razliku od Smjer ukazuje na fizički smjer | |
| Citat. | |
| Određuje područje dokumenta tijela. | |
| Linijska pauza. | |
| Dugme kliknete | |
| Koristi se za crtanje grafike pomoću skripta | |
| Tablice potpisa. | |
| Fusnota na ime materijala. | |
|
Koristi se za umetanje računarskog koda u tekstualnom obliku. |
| Određuje karakteristike stupaca u tablici. | |
| Određuje grupu jednog ili više stupaca tablice za formatiranje. | |
| Koristi se za određivanje unaprijed definiranih opcija za odabir prilikom ulaska u tekstno polje | |
Određuje opis izraza od oznake
|
|
| Tekst koji se uklanja u nova verzija Dokument. | |
| Definira dodatne informacije koje korisnik može pregledati ili sakriti | |
| Označava da su sadržaj izraz. | |
| Određuje dijaloški okvir ili interaktivni element | |
| Blok element je jedan od glavnih elemenata izgleda. | |
| Definira popis definicija. | |
Naziv termina na popisu definicija
|
|
| tekst posvećen značenju (obično, tekst odabrano u kurzivu). | |
| Kontejner za vanjsku aplikaciju | |
| Grupa povezanih elemenata u obliku | |
| Naslov za |
|
| Određuje autonomnu grupu nekoliko elemenata (na primjer, slika sa potpisom) | |
| podnožje | |
| Definira oblik korisničkog unosa | |
- |
HTML zaglavlja različitih nivoa: , , , |
| Označava područje glavne dokumenta. | |
| Zaglavlje blokova | |
| Vodoravna linija - tematski separator. | |
| Korijenski element. Izvještava preglednik da je ovaj dokument HTML dokument. | |
| Odabir teksta u kurzivu. | |