a! HTML5 praegu kasutatakse seda juba üsna aktiivselt veebiliideste ja -rakenduste arendamisel. Me kõik teame, et HTML5 on toonud palju uusi silte, atribuute ja elemente. Mõned neist on meie saitidele tõesti kasulikud. Seega kirjeldan selles artiklis lühidalt mitmeid kasulikke ja olulisi HTML5 sildid ja atribuudid peaksite teadma ja praktikas kasutama!
HTML5 struktuurimärgistus
HTML5 -s on ilmunud mitu uut silti, mis on mõeldud juba väljakujunenud divide asendamiseks (muidugi mitte kõik 🙂). Nii-öelda väliselt pole midagi muutunud, kuid sisuliselt kannavad uued sildid semantilist (semantilist) koormust ning määravad rangelt oma koha ja rolli iga ploki jaoks:
- - määratleb saidi või sektsiooni veebilehe jaluse "jaluse", mis tavaliselt sisaldab lisateavet;
- - määratleb navigeerimisala, tavaliselt linkide loendi;
Vorm
Uut tüüpi sisestusväljad
Tutvustati uusi HTML5 tüüpe sisendväljad... Need võimaldavad teil kirjutada semantiliselt korrektsema koodi, mis on mobiilisõbralik. Näiteks e -posti tüübi kasutamisel kinnitatakse sisestatud tekst automaatselt identiteediks e -posti aadressiga jne.
1 | <sisendi tüüp = "url">
|
Regulaaravaldised kinnitamiseks
Enne HTML5 -d, kui kasutasite oma saidil vormi, pidite sisestatud teksti läbima JavaScript kontrollimiseks. Nüüd saate HTML5 ja mustri atribuudi abil andmete valideerimiseks määrata regulaaravaldise mustri.
1 |
|
Täitke automaatselt HTML5 andmeloendiga
Kasutades elementi HTML5 dataList, saate luua sisendväljade automaatseks täitmiseks andmete loendi. Super abivalmis!
1 |
|
Vormiväljade automaatne teravustamine
Autofookuse atribuut võimaldab teil seada fookuse mis tahes vormielemendile (sh nupule).
Varjatud elemendid HTML5 -ga
HTML5 tutvustas peidetud atribuuti, mis võimaldab peita konkreetse elemendi sarnaselt sellele, kuidas seda CSS -is dispaly abil rakendatakse: pole
Suurepärane elukoht morbi tristique senectus et netus .... Suurepärane elukoht morbi tristique senectus et netus et malesuada ... Kuidas veebisaidile lõõtspilli luua - HTML5 tutvustab linkidele uut atribuuti. Nüüd, et näidata brauserile, et link tuleks laadida ja mitte avada, piisab selle atribuudi kasutamisest. Viimaste artiklite ja õppetundidega kursis olemiseks järgige Veel XHTML / HTML4 päevil oli arendajatel võimalik kasutada vaid mõnda funktsiooni meelevaldsete DOM-iga seotud andmete salvestamiseks. Võite oma atribuute välja mõelda, kuid see oli riskantne - teie kood ei kehti, brauserid võivad teie andmeid ignoreerida ja see võib põhjustada probleeme, kui nimi vastab standardsetele HTML -atribuutidele. Seetõttu on enamik arendajaid seotud klassi või rel atribuutidega, kuna need olid ainus mõistlik viis täiendavate stringide salvestamiseks. Oletame näiteks, et loome vidina selliste postituste kuvamiseks nagu Twitteri postituste ajaskaala. Ideaalis peaks JavaScript olema seadistatav ilma koodi ümber kirjutamata, seega määratleme kasutajatunnuse klassi atribuudis, näiteks:
Rubriik 2
Laadi alla atribuut
Meie JavaScripti kood otsib ID -ga elementi msglist... Skripti abil otsime klassid, mis algavad kasutaja_ ja „bob“ on meie puhul kasutajatunnus ja kuvame kõik selle kasutaja sõnumid.
Oletame, et sooviksime määrata ka sõnumite maksimaalse arvu ja jätta vahele üle kuue kuu (180 päeva) vanad sõnumid.
Meie atribuut klassi muutub väga kiiresti segaseks - on lihtsam viga teha ja JavaScripti stringide parsimine muutub üha keerulisemaks.
HTML5 andmete atribuudid
Õnneks tõi HTML5 sisse võimaluse kasutada kohandatud atribuute. Eesliitega saate kasutada mis tahes väiketähti andmed-, Näiteks:
Kohandatud andmete atribuudid:
- need on stringid - neisse saate salvestada mis tahes teavet, mida saab stringina kujutada või kodeerida, näiteks JSON. Kirjutamine tuleb teha JavaScripti abil
- tuleks kasutada juhtudel, kui sobivad HTML5 elemendid või atribuudid pole saadaval
- viidake ainult lehele. Erinevalt mikroformaatidest peaksid välised süsteemid, nagu otsingumootorid ja otsingurobotid, neid ignoreerima.
JavaScripti näide 1: getAttribute ja setAttribute
Kõik brauserid võimaldavad teil andmete atribuute hankida ja muuta, kasutades meetodeid getAttribute ja setAttribute.
Var msglist = document.getElementById ("msglist"); var show = msglist.getAttribute ("andmete loendi suurus"); msglist.setAttribute ("data-list-size", + show + 3);
See töötab, kuid seda tuleks kasutada ainult vanemate brauseritega ühilduvuse säilitamiseks.
JavaScripti näide 2: jQuery data () meetod
Alates jQuery 1.4.3 -st tegeleb andmete () meetod HTML5 andmete atribuutidega. Te ei pea eesliidet selgesõnaliselt määrama andmed- nii et selline kood töötaks:
Var msglist = $ ("# msglist"); var show = msglist.data ("loendi suurus"); msglist.data ("loendi suurus", näita + 3);
Olgu see kuidas on, pidage meeles, et jQuery üritab selliste atribuutide väärtused teisendada sobivateks tüüpideks (booleanid, arvud, objektid, massiivid või null) ja see mõjutab DOM-i. Erinevalt setAttribute, meetod andmed () ei asenda füüsiliselt atribuuti andmete loendi suurus- kui kontrollite selle väärtust väljaspool jQuery - see jääb ikkagi 5 -le.
JavaScripti näide nr 3: API andmekogumitega töötamiseks
Lõpuks on meil olemas API HTML5 andmekogumitega töötamiseks, mis tagastab DOMStringMap objekti. Tuleb meeles pidada, et andmete atribuudid kaardistatakse objektile ilma eesliideteta. andmed-, nimedest eemaldatakse sidekriipsud ja nimed ise teisendatakse kamelkaasiks, näiteks:
| Atribuudi nimi | Andmekogumi API nimi |
| andmete kasutaja | kasutaja |
| andmete maksimum | maksimum |
| andmete loendi suurus | listSize |
Meie uus kood:
Var msglist = document.getElementById ("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = + näita + 3;
Seda API -d toetavad kõik kaasaegsed brauserid, kuid mitte IE10 ja vanemad versioonid. Nende brauserite jaoks on olemas lahendus, kuid tõenäoliselt on otstarbekam kasutada jQuery, kui kirjutate vanematele brauseritele.
HTML on hüperteksti märgistuskeel. See põhineb nn siltidel. Sildid on mingid ümbriselemendid, mis määravad veebilehe elementide vormi ja omadused. Oleme ühel lehel koostanud teile ajakohase HTML-märgendi viite.
Märgistuselemente on kokku üle saja. Igal neist on mitmeid atribuute ja oma süntaks. HTML -i märgendiviide aitab teil soovitud elemendi kiiresti leida.
HTML -siltide loend
Allpool tabelis on HTML5 -siltide loend koos venekeelse lühikirjeldusega.
| Silt | Lühike kirjeldus |
|---|---|
| Kommentaar. | |
| Määrab dokumendi tüübi. | |
| Link, hüperlink, ankur. | |
| Määrab teksti lühendina. | |
| Kontaktinfo dokumendi autor või omanik. | |
| Määrab piirkonna pildikaardil | |
| Artikkel | |
| Sisu kõrvale (sisu ei ole lehel tähenduse järgi peamine) | |
| Võimaldab sisestada esitatava helifaili. | |
| Paks tekst. | |
| Määrab dokumendi suhtelinkide baas -URL -i või sihtatribuudi. | |
| Valdkond, kus teksti kirjutamine võib võtta teistsuguse suuna. | |
| Määrab teksti kirjutamise suuna. Erinevalt suund näitab füüsilist suunda | |
| Tsiteeri. | |
| Näitab dokumendi põhipiirkonda. | |
| Reavahe. | |
| Klõpsatav nupp | |
| Kasutatakse graafika joonistamiseks skriptide abil | |
| Tabeli allkiri. | |
| Materjali nime all joonealune märkus. | |
|
Kasutatakse arvutikoodi sisestamiseks teksti kujul. |
| Määrab tabeli veergude omadused. | |
| Määrab vormindamiseks ühe või mitme tabeliveeru rühma. | |
| Kasutatakse tekstikasti sisestamisel eelmääratletud valikute määratlemiseks | |
Määrab märgendist termini kirjelduse
|
|
| Kustutatud tekst uus versioon dokument. | |
| Määrab lisateabe, mida kasutaja saab vaadata või peita | |
| Näitab, et sisu on termin. | |
| Määrab dialoogiboksi või interaktiivse elemendi | |
| Plokielement on paigutuse üks põhielemente. | |
| Määratleb definitsioonide loendi. | |
Mõiste nimi definitsiooniloendis
|
|
| esiletõstetud tekst (tavaliselt kursiivkirjas). | |
| Mahuti väliseks kasutamiseks | |
| Rühm seotud üksusi vormis | |
| Pealkiri |
|
| Määrab autonoomse rühma, mis koosneb mitmest elemendist (näiteks pilt koos pealdisega) | |
| jalus | |
| Määrab kasutaja sisendi vormi | |
- |
HTML päised erinevatel tasanditel: , , , |
| Näitab dokumendi peapiirkonda. | |
| Pealkirjaplokk | |
| Horisontaaljoon on temaatiline eraldaja. | |
| Juurelement. Annab brauserile teada, et antud dokument on HTML -dokument. | |
| Kursiivis tekst. | |