Tunnisteet ja attribuutit html5-kuvaus. Mukautettujen attribuuttien käyttäminen HTML5:ssä. Lomakkeen elementtien ryhmittely

Attribuutit antavat lisätietoja elementistä, ja ne määritellään aina aloitustunnisteessa riippumatta siitä, onko kyseessä parillinen tunniste vai yksi tunniste.

HTML:ssä on useita universaaleja attribuutteja, joita voidaan käyttää melkein mihin tahansa tunnisteeseen, joten tähän ryhmään kuuluvia attribuutteja kutsutaan globaaleiksi määritteiksi.

Yleisiä määritteitä tulee usein vastaan ​​tämän opetusohjelman esimerkeissä. Suosittelen, että käyt nopeasti läpi ne attribuutit, jotka olemme jo tarkistaneet, ja tutustu tulevissa artikkeleissa käsiteltäviin yleisiin määritteisiin:

Ennen kuin siirryt seuraavaan aiheeseen, suorita harjoitustehtävä:

Vinkki: Muista määrittää tarvittaessa sivun sisällön ja elementtien kieli. Kun olet suorittanut harjoituksen, tarkista sivukoodi avaamalla esimerkki erillisessä ikkunassa varmistaaksesi, että suoritit sen oikein.

Natiiviattribuutteja pidetään yhtenä tärkeimmistä lisäyksistä HTML5:een, jolla voi olla tärkeä rooli semanttisessa web-kehityksessä. Tämän päivän opetusohjelmassa annamme sinulle käytännön esimerkkejä mukautettujen tietomääritteiden luomisesta ja käyttämisestä HTML5:ssä, mukaan lukien kaikki tarvittavat JavaScript-toiminnot.

Ennen HTML5:tä oli mahdollista lisätä mukautettuja attribuutteja HTML-elementteihin ja käyttää niitä JavaScriptin avulla, mutta jos olet joskus yrittänyt tehdä niin, tiedät todennäköisesti, että tässä tapauksessa meidän on unohdettava koodin validointi. HTML5 tarjoaa meille mahdollisuuden luoda ja käyttää mukautettuja elementtiattribuutteja kelvollisilla sivuilla.

HTML5-asiakirjan luominen

Jos sinulla ei ole valmista mallia työstettäväksi, kopioi toimitettu koodi HTML-tiedostoon:

/*toimii täällä*/





Sijoitamme elementtimme omilla määritteillään dokumentin runkoon, ja JavaScript-funktiot auttavat meitä pääsemään niihin käsiksi, ja nämä toiminnot sijaitsevat dokumentin head-osiossa.

Elementin luominen

Lisätään elementti, jolla on yksinkertainen sisältö, ja lisätään mukautettu attribuutti yhdessä tunnuksen kanssa, jotta voimme tunnistaa tämän elementin demossa käytetystä javascriptistä:

Puuvillainen paita

Kuten näet, mukautettu attribuutti on muotoa "data-*" ja valitsemasi nimi (tai nimet) "data-"-osan jälkeen. Tämä on ainoa kelvollinen tapa käyttää mukautettuja attribuutteja HTML5:ssä, joten muista aina aloittaa elementtien nimet tällä osoittimella, jos haluat sivujesi olevan kelvollisia.

Tietysti oman suunnittelusi yksityiskohdat määräävät, ovatko mukautetut attribuutit sinulle hyödyllisiä vai eivät, ja nämä tiedot auttavat sinua myös löytämään sopivia elementtien nimiä. Tätä esimerkkiä voidaan käyttää vähittäiskaupan verkkosivustolle. Mukautettujen määritteiden avulla voit käsitellä elementtejä tietyllä tavalla sivun JavaScript-koodissa. Esimerkiksi kun käytät animaationäytön ominaisuuksia. Tämä on todellakin ainoa suositeltava tapa käyttää mukautettuja attribuutteja, ellei tietyssä tilanteessa ole jo olemassa tavallista HTML-attribuuttia.

Testipainikkeen lisääminen

Omat javascript-toiminnot käsittelevät tapahtumia sivuillasi, mutta visuaalista esimerkkiä varten lisää sivullesi seuraava painike:

Painike välittää elementin tunnuksen parametrina, jotta javascript-funktio voi viitata siihen ja käyttää omaa attribuuttiaan.

Attribuutin hankkiminen

Yleisin tapa käyttää attribuutteja javascriptissä on käyttää getAttributesia, jonka teemme ensin. Lisää seuraava toiminto sivusi otsikossa olevaan komentosarjaosioon:

Funktio getElementAttribute(elemID) (
var theElement = document.getElementById(elemID);
var theAttribute = theElement.getAttribute("data-product-category");
hälytys (Attribuutti);
}
Selvyyden vuoksi teemme määritteen valmiiksi, mutta omat komentosarjasi voivat tehdä mitä tarvitset.

Tietojoukon hankkiminen

Vaihtoehtona DOM "getAttributes" -menetelmälle voit käyttää elementtitietojoukkoja. Tämä lähestymistapa voi olla tehokkaampi varsinkin tapauksissa, joissa koodisi toistetaan useissa määritteissä. Selaintuki tälle menetelmälle on kuitenkin edelleen erittäin heikko, mikä on myös tärkeää ottaa huomioon. Tämä koodi suorittaa saman prosessin:

//var theAttribute = theElement.getAttribute("data-product-category");
var theAttribute = theElement.dataset.productCategory;
Tietojoukkojen avulla voit välttää "data-"-liitteen käyttämisen attribuutin nimen alussa, kun käytät niitä JavaScript-funktioilla, jotka sinun on silti sisällytettävä HTML-koodiin. Huomaa, että jos omassa määritteen nimessäsi on yhdysmerkki (joka on attribuutissamme), meillä on tässä ryhäselässä kirjainkoko, jos tietojoukon kautta käsiksi "data-product-category" tulee "tuoteluokka").

Muut menetelmät ja toiminnot

Olemme kertoneet sinulle, kuinka voit luoda määritteitä, mutta komentosarjasi voivat myös luoda tai poistaa niitä. Seuraava koodi näyttää meille attribuuttien asettamisprosessin käyttämällä tavallista javascript-menetelmää ja vaihtoehtona tietojoukkoa:

//DOM-menetelmä
theElement.setAttribute("data-tuoteluokka", "alennus");

//tietojoukon versio
theElement.dataset.productCategory = "alennus";
Voit poistaa määritteen myös käyttämällä joko tietojoukkoa tai DOM-menetelmää:

//DOM-menetelmä
theElement.removeAttribute("data-product-category");

//tietojoukon versio
theElement.dataset.productCategory = null;
Johtopäätös

Omien attribuuttien käyttöönotto HTML5:ssä ei ole teknisesti kovinkaan vaikea prosessi, mutta vaikeus syntyy, miten parhaiten soveltaa niitä omissa projekteissasi. Muista lopuksi, että on liian aikaista sitoutua täysin tietojoukkojen käyttöön, ja jos päätät käyttää niitä, yritä tarjota varavaihtoehto selaimille, jotka eivät tue tekniikkaa.

Viimeisin päivitys: 08.04.2016

Ennen kuin siirryt suoraan verkkosivujesi luomiseen HTML5:llä, katsotaanpa web-sivun perusrakennuspalikoita.

HTML5-dokumentti, kuten mikä tahansa HTML-dokumentti, koostuu elementeistä, ja elementit koostuvat tunnisteista. Tyypillisesti elementeissä on avaus- ja sulkemistunniste, jotka on suljettu kulmasuluissa. Esimerkiksi:

div elementin teksti

Tässä määritellään div-elementti, jolla on aloittava ja sulkeva tagi. Näiden tunnisteiden välissä on div-elementin sisältö. Tässä tapauksessa sisältö on yksinkertainen teksti "Div-elementin teksti".

Elementit voivat koostua myös yhdestä tunnisteesta, esimerkiksi elementistä
, jonka tehtävänä on katkaista viiva.

Teksti
div-elementti

Tällaisia ​​elementtejä kutsutaan myös tyhjiksi elementeiksi. Vaikka käytin lopettavaa kauttaviivaa, sen esiintyminen on valinnaista spesifikaatioiden mukaan ja vastaa tagin käyttöä ilman kauttaviivaa:

Jokaisella alkutunnisteen elementillä voi olla attribuutteja. Esimerkiksi:

Painike

Tässä on määritelty kaksi elementtiä: div ja input. Div-elementillä on style-attribuutti. Yhtävyysmerkin jälkeen määritteen arvo kirjoitetaan lainausmerkkeihin: style="color:red;" . Tässä tapauksessa arvo on "väri:punainen;" ilmaisee, että tekstin väri on punainen.

Toisella elementillä - yhdestä tunnisteesta koostuvalla syöttöelementillä on kaksi attribuuttia: type (osoittaa elementin tyypin - painike) ja arvo (määrittää painikkeen tekstin)

Kaikille elementeille, kuten tyylille, on yleiset tai yhteiset attribuutit, ja on tiettyjä, jotka koskevat tiettyjä elementtejä, kuten tyyppi.

Tavallisten attribuuttien lisäksi on olemassa myös Boolen attribuutteja. Tällaiset attribuutit eivät ehkä ole merkityksellisiä. Voit esimerkiksi asettaa painikkeelle pois käytöstä määritteen:

Disabled-attribuutti osoittaa, että elementti on poistettu käytöstä.

HTML5:llä on joukko yleisiä attribuutteja, jotka koskevat mitä tahansa HTML5-elementtiä:

pääsyavain: määrittää avaimen elementin nopeaa käyttöä varten

class : määrittää elementtiin käytettävän CSS-luokan

contenteditable: määrittää, voidaanko elementin sisältöä muokata

kontekstivalikko : Määrittää elementin kontekstivalikon, joka näytetään, kun napsautat elementtiä hiiren kakkospainikkeella

dir: määrittää tekstin suunnan elementissä

vedettävä: määrittää, voidaanko elementti vetää

dropzone: määrittää, voidaanko pudotusalueen tiedot kopioida, kun ne pudotetaan elementille

piilotettu: piilottaa elementin

id : Elementin yksilöllinen tunniste. Web-sivun elementeillä ei saa olla päällekkäisiä tunnisteita

lang : määrittää elementin kielen

spellcheck : osoittaa, käytetäänkö tälle elementille oikeinkirjoituksen tarkistusta

tyyli : määrittää elementin tyylin

tabindex : Määrittää järjestyksen, jossa kohteita voidaan vaihtaa SARKAIN-näppäimellä

title : määrittää elementille lisäkuvauksen

translate : määrittää, käännetäänkö elementin sisältö

Mutta yleensä tästä koko luettelosta kolmea käytetään useimmiten: luokka, tunnus ja tyyli.

Toisin kuin merkintäkielen aiemmassa versiossa, HTML5:een lisättiin mukautettuja attribuutteja. Nyt web-sivun kehittäjä tai luoja voi määrittää minkä tahansa attribuutin lisäämällä sen etuliitteen data-. Esimerkiksi:

Data-color-attribuutti määritellään tässä ja sen arvo on "punainen". Vaikka tällaista attribuuttia ei ole tälle elementille, eikä html:ssä yleensä. Määritämme sen itse ja asetamme sen mihin tahansa arvoon.

Voit usein löytää tapauksia, joissa html:ssä käytetään sekä yksittäisiä että kaksoislainausmerkkejä määritettäessä attribuuttiarvoja. Esimerkiksi:

Sekä kerta- että kaksoislainausmerkit ovat hyväksyttäviä tässä tapauksessa, vaikka lainausmerkkejä käytetään useammin. Joskus attribuutin arvo voi kuitenkin sisältää lainausmerkkejä, jolloin on parempi laittaa koko arvo lainausmerkkeihin:

HTML on hypertekstikuvauskieli. Se perustuu niin kutsuttuihin tageihin. Tunnisteet ovat joitain kääreelementtejä, jotka määrittävät verkkosivun elementtien muodon ja ominaisuudet. Olemme koonneet yhdelle sivulle ajantasaisen viitteen HTML-tunnisteista.

Merkintäelementtejä on yhteensä yli sata. Jokaisella on useita määritteitä ja oma syntaksi. HTML Tags Reference auttaa sinua löytämään nopeasti tarvitsemasi elementin.

Alla olevassa taulukossa on luettelo HTML5-tageista ja lyhyt kuvaus venäjäksi.

	Kommentti.
	Määrittää asiakirjan tyypin.
	Linkki, hyperlinkki, ankkuri.
	Määrittää tekstin lyhenteeksi.
	Asiakirjan tekijän tai omistajan yhteystiedot.
	Määrittää alueen kuvakartalla
	Artikla
	Sisältö sivuun (sisältö ei ole sivun pääsisältö)
	Voit lisätä parhaillaan toistettavan äänitiedoston.
	Lihavoitu teksti.
	Määrittää asiakirjan suhteellisten linkkien perus-URL-osoitteen tai kohdeattribuutin.
	Alue, jossa tekstin kirjoittaminen voi viedä eri suunnan.
	Asettaa tekstin kirjoitussuunnan. Toisin kuin suunta, fyysinen suunta näytetään
	Lainata.
	Määrittää asiakirjan runko-alueen.
	Rivinvaihto.
	Napsautettava painike
	Käytetään grafiikan piirtämiseen skriptien avulla
	Taulukon allekirjoitus.
	Alaviite materiaalin otsikkoon.
	Käytetään tietokonekoodin lisäämiseen tekstimuodossa.
	Määrittää taulukon sarakkeiden ominaisuudet.
	Määrittää muotoiltavan yhden tai useamman taulukon sarakkeen ryhmän.
	Käytetään määrittämään ennalta määritettyjä vaihtoehtoja, joista valita, kun kirjoitat tekstikenttään
	Määrittää termin kuvauksen termiluettelon tagista.
	Teksti, joka on poistettu asiakirjan uudesta versiosta.
	Määrittää lisätiedot, jotka käyttäjä voi tarkastella tai piilottaa
	Osoittaa, että sisältö on termi.
	Määrittää valintaikkunan tai interaktiivisen elementin
	Lohkoelementti on yksi tärkeimmistä asettelun elementeistä.
	Määrittää luettelon määritelmistä.
	Termin nimi määritelmäluettelossa.
	teksti korostettu merkityksen vuoksi (yleensä kursiivilla teksti).
	Säiliö ulkoiseen käyttöön
	Ryhmään liittyviä elementtejä lomakkeessa
	Elementin otsikko
	Määrittää itsenäisen ryhmän useista elementeistä (esimerkiksi kuva, jossa on kuvateksti)
	alatunniste
	Määrittää käyttäjän syöttölomakkeen
-	HTML-otsikot eri tasoilla: , , , , , .
	Määrittää asiakirjan pääalueen.
	Otsikkolohko
	Vaakaviiva on temaattinen jakaja.
	Juurielementti. Kertoo selaimelle, että annettu asiakirja on HTML-dokumentti.
	Kursivoitu teksti.
	Määrittää rivin kehyksen
	Kuva, kuva.
	Syöttökenttä
	Teksti, joka on lisätty asiakirjan uuteen versioon.
	Näppäimistöltä syötetty teksti tai näppäimistön painikkeiden nimet. Tyypillisesti monospace fontilla.
	Tunniste syöttökenttään. Ilmaisee elementin (yleensä tekstin) sitomisen syöttökenttään.
	Elementin otsikko
	Luetteloelementti.
	Määrittää ulkoisen resurssin sidoksen (useimmiten CSS-tyylitaulukon sidoksen)
	Pääsisältö
	Säiliö . Määrittää mukautetun kartan kuvaan
	Valittu teksti (yleensä taustakorostusta käyttämällä).
	Säiliö valikon kohteiden luettelolle
	Määrittää kohteet, joihin käyttäjä voi soittaa pikavalikosta
	Käytetään asiakirjan metatietojen määrittämiseen.
	Arvojen mittari tietyllä alueella
	Säiliö navigointielementeille
	Vaihtoehtoista sisältöä käyttäjille, jotka ovat poistaneet komentosarjat käytöstä
	Määrittää sisäänrakennetun objektin
	Määrittää numeroidun luettelon.
	Määrittää ryhmän liittyviä vaihtoehtoja avattavassa luettelossa. Antaa ryhmälle nimen
	Parametri (valintavaihtoehto) avattavassa luettelossa
	Laskennan tulos
	Kohta.
	Asettaa asetukset sisäänrakennetuille objekteille
	Säiliö useille kuville
	Esimuotoiltu teksti.
	Edistymispalkki
	Lainaus tekstissä.
	Vaihtoehtoinen teksti, jos selain ei tue .
	Merkintä tunnisteen sisällölle.
	Säiliö symboleille ja niiden dekoodaukselle (pääasiassa Itä-Aasian symboleille, hieroglyfeille).
	Yliviivattu teksti.
	Teksti, joka on tietokoneohjelman tulos (yleensä monospace-fontilla).
	Määrittää komentosarjan tai komentosarjayhteyden ulkoisesta resurssista.
	Luku
	Määrittää avattavan luettelon
	Teksti pienemmällä fontilla.
	Määrittää resurssin kohteille , ja .
	Sisäinen elementti.
	Teksti korostettu merkityksen mukaan. Yleensä näytetään lihavoituna.
	Määrittää säilön asiakirjatyylien määrittelyä varten
	Näyttää tekstin alaindeksinä.
	Otsikko tunnisteen sisällä
	Näyttää tekstin yläindeksinä.
Määrittää taulukon. Määrittää taulukon sisältöalueen. Taulukon solu . Monirivinen syöttökenttä Määrittää rivien ryhmän taulukon alaosassa - alatunniste. Solu - otsikko taulukossa . Voit lisätä parhaillaan toistettavan videon. Paikka, jossa rivinvaihto on sallittu. Vanhat HTML-tunnisteet Kuinka korvata vanhentunut HTML-tunniste? Useimmissa tapauksissa CSS Cascading Style Sheets käy. On myös vaihtoehtoja tunnisteille, joita ei käytetä HTML:n uudessa määrittelyssä. Alla olevassa taulukossa näkyvät vanhentuneet HTML-tunnisteet ja niiden vaihtovaihtoehdot. Tag Lyhyt kuvaus Lyhenne. Käytä sen sijaan tunnistetta. Sisäänrakennettu sovelma. Käytä tai sen sijaan. Määrittää asiakirjan kaiken tekstin värin, koon ja kirjasinperheen. Käytä sen sijaan Isompi teksti. Käytä sen sijaan Keskitetty teksti. Käytä sen sijaan Luettelo hakemistoista. Käyttää hänen sijaansa Määrittää fontin värin, koon ja perheen. Käytä sen sijaan Kehys sisällä. Käytä sen sijaan Määrittää kehysjoukon. Jos haluat lisätä useita upotettuja kehyksiä, käytä useita elementtejä Vaihtoehtoinen teksti, jos kehyksiä ei tueta Yliviivattu teksti. Käytä tai sen sijaan Monospace teksti. Käytä sen sijaan Alleviivattu teksti. Käytä sen sijaan XHTML/HTML4-aikoina kehittäjillä oli vain muutamia vaihtoehtoja, joita he saattoivat käyttää mielivaltaisten DOM-tietojen tallentamiseen. Voisit keksiä omia attribuuttejasi, mutta tämä oli riskialtista - koodisi ei olisi kelvollinen, selaimet saattavat jättää tietosi huomiotta, ja se voi aiheuttaa ongelmia, jos nimi vastaa tavallisia HTML-attribuutteja. Siksi useimmat kehittäjät pitivät kiinni class- tai rel-määritteistä, koska ne olivat ainoa järkevä tapa tallentaa lisärivejä. Oletetaan esimerkiksi, että luomme widgetin näyttämään viestejä kuten Twitter-viestien aikajana. Ihannetapauksessa JavaScriptin pitäisi olla konfiguroitavissa ilman koodin uudelleenkirjoittamista, joten määritämme käyttäjätunnuksen luokkaattribuutissa seuraavasti: JavaScript-koodimme etsii elementtiä, jonka tunnus on msglist. Komentosarjan avulla etsimme luokkia, jotka alkavat kirjaimella user_, ja ​​"bob" on meidän tapauksessamme käyttäjätunnus, ja näytämme kaikki kyseisen käyttäjän viestit. Oletetaan, että haluamme myös asettaa viestien enimmäismäärän ja ohittaa yli kuusi kuukautta (180 päivää) vanhat viestit: Luokka-attribuuttimme sotkeutuu hyvin nopeasti - virheiden tekeminen on helpompaa ja merkkijonojen jäsentäminen JavaScriptissä muuttuu yhä vaikeammaksi. HTML5-datan attribuutit Onneksi HTML5 esitteli mahdollisuuden käyttää mukautettuja attribuutteja. Voit käyttää mitä tahansa pientä nimeä data-etuliitteellä, esimerkiksi: Muokatut dataattribuutit: nämä ovat merkkijonoja - voit tallentaa niihin mitä tahansa tietoa, joka voidaan esittää tai koodata merkkijonona, kuten JSON. Tyyppivalu on suoritettava JavaScriptillä tulee käyttää tapauksissa, joissa ei ole sopivia HTML5-elementtejä tai -attribuutteja viittaa vain sivuun. Toisin kuin mikromuodot, ulkoisten järjestelmien, kuten hakukoneiden ja indeksointirobottien, tulisi jättää ne huomiotta JavaScript-käsittelyesimerkki #1: getAttribute ja setAttribute Kaikki selaimet mahdollistavat tietomääritteiden hankkimisen ja muuttamisen getAttribute- ja setAttribute-menetelmillä: Muutt msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3); Tämä toimii, mutta sitä tulisi käyttää vain yhteensopivuuden ylläpitämiseen vanhempien selainten kanssa. Esimerkki nro 2 käsittelystä JavaScriptissä: jQuery-kirjaston data()-menetelmä jQuery 1.4.3:sta lähtien data()-menetelmä käsittelee HTML5-tietoattribuutteja. Sinun ei tarvitse erikseen määrittää data-etuliitettä, joten tällainen koodi toimii: Muutt msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3); Huomaa kuitenkin, että jQuery yrittää muuntaa tällaisten attribuuttien arvot sopiviksi tyypeiksi (booleans, numerot, objektit, taulukot tai nolla) ja vaikuttaa DOM:iin. Toisin kuin setAttribute, data()-menetelmä ei fyysisesti korvaa data-list-size-attribuuttia - jos tarkistat sen arvon jQueryn ulkopuolella - se on silti 5. Esimerkki nro 3 JavaScript-käsittelystä: API datajoukkojen käsittelyyn Lopuksi meillä on API HTML5-tietojoukkojen kanssa työskentelemiseen, joka palauttaa DOMStringMap-objektin. On tärkeää muistaa, että dataattribuutit kartoitetaan objektiin ilman dataetuliitettä, nimistä poistetaan yhdysviivat ja itse nimet muunnetaan camelCase-muotoon, esimerkiksi: Ominaisuuden nimi Tietojoukon API-nimi data-käyttäjä käyttäjä data-max maxage data-list-size listan koko Uusi koodimme: Muutt msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +näytä+3; Kaikki nykyaikaiset selaimet tukevat tätä sovellusliittymää, mutta eivät IE10:tä tai sitä vanhempia. Näille selaimille on olemassa kiertotapa, mutta on luultavasti käytännöllisempää käyttää jQueryä, jos kirjoitat vanhemmille selaimille. Lisää tästä aiheesta: Lataa Driver Sweeper – ohjelma ajurien poistamiseen käyttöjärjestelmästä Windows Lataa ohjelma kortin ajurien poistamiseen Heittää Sniper Elite V2:n työpöydälle Mitä tehdä, jos sniper elite 3 viivästyy Tehokkaimmat älypuhelimet Top 10 tehokkain puhelin Muut artikkelit: Kuinka poistaa sivu ja tili maailmastani Sattuu niin, että henkilö rekisteröitymisen jälkeen ymmärtää, että tämä sosiaalinen verkosto ei ole häntä varten ja haluaa... Kuinka poistaa Avast tietokoneeltasi, jos sitä ei voida poistaa Nyt tarkastelemme kuinka poistaa Avast niin, että virustorjuntaohjelman poistamisen jälkeen tietokone ei... Nokia Lumian yhdistäminen tietokoneeseen Ensimmäistä kertaa artikkelit ja Lifehacks voivat tuottaa pettymyksen kaikille, jotka ovat äskettäin ostaneet tämän matkapuhelimen... Marble – estä reagoiva HTML5-malli Kaikki verkkosivustollesi esitetyt mallit on rakennettu HTML5:n ja CSS3:n nykyaikaisille versioille. Paitsi... × Sivustohaku Luokat ×