HTML5 atributi. HTML atributi. HTML5 struktura izgleda stranice

Već smo shvatili. Saznali smo da imaju sadržaj. Međutim, to nije sve. Oznake također imaju atribute koji povećavaju njihove mogućnosti, a atributi zauzvrat imaju vrijednosti. Uz njihovu pomoć možete postaviti parametre za element i odrediti stil dizajna. Na primjer, s oznakom

označili ste odlomak. Ali kako ga mogu poravnati udesno? Da biste to učinili, trebat će vam određeni atribut s odgovarajućom vrijednošću. Baš kao što neke oznake nemaju par, neki se atributi mogu koristiti bez vrijednosti.

Atributi su rezervirane riječi (poput oznaka, samo bez uglastih zagrada), ali njihova značenja mogu biti različita. Baš kao i oznake, preporuča se pisati atribute s vrijednostima malim slovima, iako preglednici, općenito, ne mare - ovo je samo pravilo lijepog ponašanja: na ruskom jeziku TAKOĐER NIJE PRIHVATLJIVO PISANJE KADA CAPS LOCK JE OMOGUĆEN. Zašto je HTML lošiji?

Vrijednosti atributa napisane su u sljedećem formatu:

Attribute=”value” lang=”en”

Uvijek biste trebali pisati atribute unutar uvodne oznake, nakon rezervirane riječi.

stavak

Obično postoji više atributa dostupnih za jednu oznaku. Nije važno kojim redoslijedom su navedeni.

Svaka HTML oznaka ima vlastiti skup atributa. Neki atributi mogu biti dostupni za više oznaka, dok drugi mogu raditi samo s jednom. Također postoji grupa univerzalnih (globalnih) atributa koji se mogu koristiti s bilo kojom oznakom. Pogledajmo ukratko atribute ove kategorije.

• accesskey vam omogućuje da postavite tipkovni prečac za pristup konkretnog objekta stranice. Na primjer, možete osigurati da korisnik koristi kombinaciju tipki Alt+1 za praćenje određene veze. Stoga razvijte ključni navigacijski sustav.

Vrijednost atributa može biti brojevi 0-9 ili slova latinične abecede:

Link će se otvoriti pritiskom na kombinaciju tipki s jedan

• klasa vam omogućuje da pridružite oznaku unaprijed definiranoj pomoću CSS stiliziranje. Korištenje atributa omogućuje značajno smanjenje koda, jer umjesto opetovanog unosa istog CSS bloka, možete jednostavno unijeti naziv odgovarajuće klase.
• Koristeći contenteditable, možete dopustiti korisniku da uređuje bilo koji element HTML stranice: brisanje, umetanje, promjena teksta. Isti atribut omogućuje uređivanje i onemogućavanje. Ima samo dvije vrijednosti: true - dopušta uređivanje, false - onemogući.
• Korištenjem atributa contextmenu, svakom elementu dokumenta možete dati jedinstvene stavke kontekstnog izbornika prema vlastitom nahođenju. Sam izbornik kreiran je u oznaci, a atributu contextmenu dodijeljen je njegov identifikator.
• dir određuje smjer teksta: slijeva nadesno (ltr) ili zdesna nalijevo (rtl).
• draggable omogućuje vam da onemogućite (false) ili dopustite (true) korisniku da povuče element stranice koji ima ovaj atribut.
• dropzone govori pregledniku što treba učiniti s ispuštenim elementom: kopirati (vrijednost copy), premjestiti (move) ili stvoriti vezu na njega (link).
• skriveno - atribut koji vam omogućuje sakrivanje sadržaja elementa tako da se ne prikazuje u pregledniku. Ako je atribut postavljen na false, objekt se prikazuje, true - skriven je.
• id specificira identifikator elementa - neku vrstu imena koje je potrebno za jednostavnu promjenu stila objekta, kao i da mu skripte mogu pristupiti. Vrijednost atributa bit će njegovo ime. Mora započeti latiničnim slovom, a može sadržavati brojeve, slova iste latinične abecede (velika i mala), kao i simbole crtice (-) i podvlake (_). Ne može sadržavati ruska slova.
• lang pomaže pregledniku razumjeti na kojem je jeziku sadržaj napisan i stilizirati ga u skladu s tim (na primjer, jezici mogu koristiti različite navodnike). Vrijednosti su jezični kodovi (ruski - ru, engleski - en, itd.).
• spellcheck omogućuje (true) ili onemogućuje (false) provjeru pravopisa. Posebno je korisno koristiti atribut u oznakama polja obrasca gdje će korisnik unositi tekst.
• stil vam omogućuje postavljanje dizajna elementa s koristeći CSS-kodirati.
• tabindex vam omogućuje da odredite koliko će puta korisnik morati pritisnuti tipku Tab da objekt s tim atributom dobije fokus. Broj klikova određuje vrijednost atributa - prirodni broj.
• naslov - tooltip koji će se pojaviti ako prijeđete mišem preko elementa i ostavite ga neko vrijeme nepomičan. Crta u značenju bit će nagovještaj.

• translate dopušta (da) ili odbija (ne) prijevod sadržaja oznake.
• align specificira poravnanje elementa. Na primjer, možete ga koristiti za poravnavanje teksta ulijevo (lijevo), desno, središte ili obostrano. Za slike (tag ) također je moguće poravnati s gornjom granicom najvišeg elementa retka (vrh), s donjom granicom (dolje), a vrijednost middle čini da se srednja linija slike poklapa s osnovnom linijom crte.

Vrijedno je imati na umu da se ne preporučuje korištenje atributa poravnanja, te je bolje poravnati tekst pomoću CSS-a.

Kao primjer, razmotrite redak HTML koda:

Ovaj tekst se može uređivati

Cijeli redak stvara odlomak teksta koji korisnik može uređivati ​​u pregledniku.

Pogledajmo svaki element linije.

- početna oznaka spremnika koji pohranjuje odlomak.

Između simbola > i< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true” - ovo je atribut i njegova vrijednost. Sjeti se kako u školi: x=3. Isto ovdje: contenteditable = “true”. Atribut contenteditable određuje može li korisnik uređivati ​​sadržaj elementa; vrijednost true, napisana u navodnicima odvojenim znakom jednakosti, dopušta uređivanje:

Attribute=”value” contenteditable=”true”

Davno u danima XHTML/HTML4, programeri su imali samo nekoliko opcija koje su mogli koristiti za pohranu proizvoljnih podataka povezanih s DOM-om. Mogli ste izmisliti vlastite atribute, ali to je bilo riskantno - vaš kôd ne bi bio valjan, preglednici bi mogli zanemariti vaše podatke i moglo bi uzrokovati probleme ako naziv odgovara standardnim HTML atributima.

Stoga se većina programera držala atributa class ili rel jer su oni bili jedini razuman način za pohranu dodatnih redaka. Na primjer, recimo da stvaramo widget za prikaz poruka poput vremenske crte poruka na Twitteru. U idealnom slučaju, JavaScript bi se trebao moći konfigurirati bez potrebe za prepisivanjem koda, tako da definiramo ID korisnika u atributu klase, ovako:

Naš JavaScript kod tražit će element s ID-om msglist. Pomoću skripte tražit ćemo klase koje počinju s user_, a “bob” će u našem slučaju biti ID korisnika, te ćemo prikazati sve poruke tog korisnika.

Recimo da također želimo postaviti maksimalan broj poruka i preskočiti poruke starije od šest mjeseci (180 dana):

Naše atribut klase Vrlo brzo se zatrpa - lakše je pogriješiti, a parsiranje nizova u JavaScriptu postaje sve teže.

Srećom, HTML5 je uveo mogućnost korištenja prilagođenih atributa. Možete koristiti bilo koji naziv malim slovima s prefiksom data-, na primjer:

Prilagođeni atributi podataka:

• ovo su nizovi - u njih možete pohraniti bilo koju informaciju koja se može predstaviti ili kodirati kao niz, kao što je JSON. Prilagođavanje tipa mora se izvršiti pomoću JavaScripta
• treba koristiti u slučajevima kada nema odgovarajućih HTML5 elemenata ili atributa
• odnose se samo na stranicu. Za razliku od mikroformata, njih treba zanemariti vanjski sustavi, tip tražilice i roboti za pretraživanje

Svi vam preglednici omogućuju dobivanje i promjenu atributa podataka pomoću metoda getAttribute i setAttribute:

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

Ovo radi, ali bi se trebalo koristiti samo za održavanje kompatibilnosti sa starijim preglednicima.

Od jQuery 1.4.3, data() metoda rukuje HTML5 atributima podataka. Ne morate eksplicitno navesti data- prefiks, tako da će kod kao što je ovaj funkcionirati:

Var msglist = $("#msglist"); var show = msglist.data("veličina popisa"); msglist.data("veličina popisa", prikaži+3);

Međutim, imajte na umu da jQuery pokušava pretvoriti vrijednosti takvih atributa u odgovarajuće tipove (booleove vrijednosti, brojeve, objekte, nizove ili null) i da će utjecati na DOM. Za razliku od setAttribute, metoda data() neće fizički zamijeniti atribut data-list-size - ako provjerite njegovu vrijednost izvan jQueryja - i dalje će biti 5.

Konačno, imamo API za rad s HTML5 skupovima podataka koji vraća objekt DOMStringMap. Važno je zapamtiti da se atributi podataka preslikavaju na objekt bez prefiksa podataka, crtice se uklanjaju iz imena, a sama imena se pretvaraju u velika i mala slova, na primjer:

Naš novi kod:

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

Ovaj API podržavaju svi moderni preglednici, ali ne IE10 i stariji. Postoji zaobilazno rješenje za ove preglednike, ali vjerojatno je praktičnije koristiti jQuery ako pišete za starije preglednike.

Atributi pružaju Dodatne informacije o elementu, a uvijek su definirani u početnoj oznaci, bez obzira radi li se o uparenoj oznaci ili jednoj oznaci.

Postoji niz atributa u HTML-u koji su univerzalni i mogu se primijeniti na gotovo svaku oznaku, pa se atributi uključeni u ovu grupu nazivaju globalni atributi.

Globalni atributi često će se susresti u primjerima ovog vodiča; predlažem da brzo pregledate atribute koje smo već pregledali i upoznate se s globalnim atributima o kojima će se raspravljati u nadolazećim člancima:

Prije nego prijeđete na sljedeću temu, dovršite zadatak za vježbanje:

Savjet: ne zaboravite definirati jezik sadržaja stranice i elemenata gdje je potrebno. Nakon što dovršite vježbu, pregledajte kod stranice otvaranjem primjera u zasebnom prozoru kako biste provjerili jeste li ga ispravno dovršili.

Na HTML5, iako ga svi moderni preglednici već podržavaju ovaj standard. Od prosinca 2011. standard je još uvijek u razvoju.

HTML5 dodaje mnogo novih sintaktičkih značajki - , , i . Ovi su elementi osmišljeni kako bi olakšali ugradnju i upravljanje grafikom i medijima na webu bez potrebe za korištenjem izvornih dodataka i API-ja. Ostali novi elementi kao što su , , i osmišljeni su da obogate semantički sadržaj dokumenta (stranice).

• 1. Oznake odjeljaka (članak, strana, podnožje, zaglavlje, hgroup, nav, odjeljak)
• 2. Oznake za grupiranje sadržaja (slika, figcaption)
• 3. Oznake za semantičko označavanje teksta (bdo, mark, time, ruby, rt, rp, wbr)
• 4. Oznake za umetanje sadržaja (audio, video, canvas, embed, izvor)
• 5. Oznake za elemente obrasca (datalist, keygen, output, progress, meter)
• 6. Interaktivni elementi (detalji, sažetak, naredba, izbornik)

lažno

auto

Važno je pravilno koristiti ove oznake. Kako se ne biste zabunili kada koju koristiti, na internetu postoji jedan prekrasan izvor, a možete koristiti i sljedeći algoritam:

Svi moderni preglednici (Opera, Safari, Chrome, Mozilla, IE9+) već imaju podršku za HTML5. Za preglednike IE8 i manje, trebali biste povezati javascript, koji će ih "naučiti" razumjeti nove oznake. Kod za povezivanje je ispod:

Prilikom izrade izgleda prešli smo na korištenje novog HTML5 standarda. Ako želite naručiti web stranicu ili zasebno, možete ostaviti zahtjev pisanjem na bilo koju od adresa navedenih na stranici ili putem obrasca Povratne informacije. Radujemo se suradnji!

Uz atribute specifične za određene oznake, u HTML5 postoji niz atributa koji se mogu dodati bilo kojim oznakama, pa se atributi uključeni u ovu grupu nazivaju globalnim ili univerzalnim. Dolje su navedeni s Kratak opis. Dostupno putem poveznice Detaljan opis atribut.

Atribut accesskey omogućuje aktiviranje poveznice pomoću određene kombinacije tipki sa slovom ili brojem navedenim u kodu veze. Preglednici koriste različite kombinacije tipki. Na primjer, za accesskey="s" sljedeće kombinacije rade.

• Internet Explorer: Alt + S
• Chrome: Alt+S
• Opera: Shift + Esc , S
• Safari: Alt+S
• Firefox: Shift + Alt + S

Određuje klasu stila koja vam omogućuje pridruživanje određene oznake tablici stilova. Moguće je navesti nekoliko klasa u vrijednosti odjednom, odvajajući ih razmakom.

Obavještava da je element dostupan za uređivanje od strane korisnika - dopušteno je brisanje teksta i unos novog. Standardne naredbe poput poništavanja, lijepljenja teksta iz međuspremnika itd. također rade.

Postavlja kontekstni izbornik za element. Vrijednost je identifikator izbornika kreiranog pomoću oznake.

Postavlja smjer i prikaz teksta - slijeva nadesno ili zdesna nalijevo. Preglednici obično razlikuju smjer teksta ako je u Unicodeu, ali možete koristiti atribut dir da odredite u kojem smjeru treba prikazati tekst. Za arapske i hebrejske znakove, Unicode smjer ima prednost, tako da atribut dir neće utjecati na njih.

Omogućuje vam da povučete element za daljnju manipulaciju.

Određuje što učiniti s elementom koji se povlači.

Skriva sadržaj elementa iz pogleda. Takav element nije prikazan na stranici, ali je dostupan putem skripti.

Postavlja identifikator - jedinstveni naziv elementa, koji se koristi za promjenu njegovog stila i pristup putem skripti. Identifikator u šifri dokumenta mora biti u jednom primjerku, drugim riječima, pojaviti se samo jednom.

Skupina atributa dizajniranih za rad s mikropodacima.

Tekst dokumenta može biti upisan na jednom jeziku ili sadržavati umetke na drugim jezicima, koji se mogu razlikovati u pravilima oblikovanja teksta. Na primjer, za ruski, njemački i na engleskom Karakteristični su različiti navodnici u kojima se navodi citat. Za određivanje jezika na kojem je napisan tekst unutar trenutnog elementa i primijenjen atribut lang. Preglednik koristi svoju vrijednost za ispravan prikaz određenih znakova.

Kaže pregledniku da provjeri jesu li pravopis i gramatika u tekstu točni. Iako se atribut može postaviti na gotovo sve elemente, učinak će biti vidljiv samo na poljima obrasca ( , ) i elementima koji se mogu uređivati ​​(imaju postavljen atribut contenteditable).

Koristi se za stiliziranje elementa pomoću CSS pravila.

Atribut tabindex postavlja redoslijed primanja fokusa prilikom kretanja između elemenata pomoću tipke Tab. Prijelaz se događa s manje vrijednosti na veću, na primjer s 1 na 2, zatim na 3 i tako dalje. U ovom slučaju strogi redoslijed nije bitan; dopušteno je preskočiti neke brojeve i početi od bilo kojeg broja. Ako su vrijednosti tabindexa elemenata iste, tada se uzima u obzir njihov redoslijed pojavljivanja u kodu.

Stvara tekstualni opis alata koji se pojavljuje kada zadržite pokazivač iznad elementa. Vrsta ovog savjeta ovisi o pregledniku i postavkama operacijski sustav i ne može se mijenjati pomoću HTML koda ili stilova.