HTML5 un pārskats par jaunām tīmekļa programmēšanas iespējām. Kas jauns HTML5? Attēla atribūts srcset

Tulkojums: Vlads Merževičs

Varat jautāt: "Kā es varu izmantot HTML5, ja vecākas pārlūkprogrammas to neatbalsta?" Patiesībā šis jautājums ir nepareizs. HTML5 nav liela lieta, tā ir dažādu funkciju kolekcija. Jūs nevarat rakstīt "HTML5 atbalstīts", jo tas ir pretrunīgi, taču varat norādīt atbalstu dažām HTML 5 tehnoloģijām, piemēram, zīmēšanai, video un ģeogrāfiskās atrašanās vietas noteikšanai.

Jūs varat uzskatīt HTML kā tagus un leņķiekavas. Tā, protams, ir svarīga daļa, bet ne viss. HTML5 specifikācijā ir arī norādīts, kā šīs leņķiekavas mijiedarbojas ar JavaScript, izmantojot dokumenta objektu modeli (DOM). HTML5 ne tikai definē tagu, bet arī informē DOM par visiem video objektiem. Varat izmantot lietojumprogrammu saskarni (API), lai atbalstītu dažādus video formātus, atskaņotu videoklipu, apturētu to, izslēgtu skaņu, izsekotu failu lejupielādes un daudz ko citu, pamatojoties uz mijiedarbību starp lietotāju un tagu.

Neatkarīgi no tā, vai jums tas patīk vai nē, jūs nevarat noliegt, ka HTML4 ir visveiksmīgākais iezīmēšanas formāts. HTML5 balstās uz šo veiksmi, tāpēc jums nav jāizmet esošais marķējums un jāmācās no jauna. Ja jūsu tīmekļa lietojumprogramma šodien darbojas HTML4 formātā, tā darbosies arī HTML5 formātā.

Šeit ir konkrēts piemērs: HTML5 atbalsta visus veidlapas elementus, ko nodrošina HTML4, kā arī ietver jaunus elementus. Daži no tiem, piemēram, slīdņi un datuma izvēle, ir bijuši acīmredzami jau ilgu laiku, citi nav tik acīmredzami. Piemēram, e-pasta adreses ievadīšanas lauks ir parasts teksta lauks, taču mūsdienu pārlūkprogrammas šim laukam atvieglo adreses ievadīšanu. Vecākas pārlūkprogrammas neatbalsta ievadi type="email" , tāpēc tajās tiks rādīts parasts teksta lauks un veidlapas ar to darbosies bez papildu trikiem. Tas ļauj uzlabot veidlapas jau šodien, pat ja daži lietotāji joprojām ir iestrēguši ar IE6.

“Jaunināšanu” uz HTML5 var veikt, vienkārši mainot dokumenta veidu. Elements vienmēr jāievieto jebkuras tīmekļa lapas koda pirmajā rindā. Iepriekšējā HTML versija definēja vairākas doctype opcijas, un izvēlēties pareizo nebija viegli. HTML5 ir tikai viens dokumenta veids:

Mainot doctype, esošais izkārtojums netiek iznīcināts, jo visi HTML4 definētie tagi tiek atbalstīti arī HTML5. Turklāt varat pareizi izmantot jaunus semantiskos elementus, piemēram, , un .

Neatkarīgi no tā, vai vēlaties zīmēt attēlus, atskaņot videoklipus, uzlabot veidlapu funkcionalitāti vai izveidot bezsaistes tīmekļa lietojumprogrammu, jūs atklāsiet, ka pārlūkprogrammas labi atbalsta HTML5. Firefox, Safari, Chrome un mobilās pārlūkprogrammas darbojas ar tagiem, video, ģeogrāfisko atrašanās vietu, vietējo krātuvi utt. Google saprot mikrodatu anotāciju. Pat Microsoft, kas parasti atpaliek no standartiem, savā pārlūkprogrammā Internet Explorer 9 atbalsta HTML5 pamatfunkcijas.

Visās šīs grāmatas sadaļās ir populāru pārlūkprogrammu saderības tabula. Daudz svarīgāk ir tas, ka ir iekļauta diskusija par vecāku pārlūkprogrammu atbalsta iespējām. HTML5 tehnoloģijas, piemēram, ģeogrāfiskā atrašanās vieta un video, tika ieviestas, izmantojot tādus spraudņus kā Gears vai Flash. Citas funkcijas, piemēram, zīmēšanu, var emulēt, izmantojot JavaScript. Šajā grāmatā ir parādīts, kā izmantot mūsdienu pārlūkprogrammu iebūvētās funkcijas, neizmetot vecās versijas.

Tims Berners-Lī izgudroja globālo tīmekli deviņdesmito gadu sākumā. Vēlāk viņš nodibināja W3C, lai uzturētu tīmekļa standartus, organizāciju ar vairāk nekā piecpadsmit gadu vēsturi. Lūk, ko W3C paziņoja par tīmekļa standartu nākotni 2009. gada jūlijā:

Vadība šodien paziņoja, ka tad, kad 2009. gada beigās beigsies XHTML 2 darba grupas harta, tā netiks atjaunota. Tas ir paredzēts, lai palielinātu HTML darba grupas resursus. W3C cer, ka tas paātrinās HTML5 progresu un precizēs W3C nostāju attiecībā uz HTML nākotni.

HTML5 ir šeit. Iedziļināsimies tajā.

HTML5 specifikācija rada daudzas dažāda līmeņa un dažādas nozīmes izmaiņas. Būtībā galvenās izmaiņas var iedalīt 7 blokos:

a) Semantika (valodas vienību semantiskā nozīme)

HTML5 ievieš vairākus jaunus semantiskos tagus, kas ļauj jēgpilnāk organizēt tīmekļa lapu iekšējo struktūru. Tas ietver gan bloku tagus, piemēram, galveni, kājeni, rakstu, gan teksta iezīmēšanas tagus, piemēram, atzīmes, rubīns, detaļas. Vairāki esošie HTML4 tagi ir pasludināti par novecojušiem, atsevišķu tagu nozīme ir mainījusies, un atribūtos ir veiktas noteiktas izmaiņas.

b) Multivide

HTML5 pievieno vietējo atbalstu multivides saturam (audio un video) tieši HMTL marķējumā — ar saistīto API pārvaldībai.

c) Grafika

Darbs ar grafiku klienta pusē ir kļuvis ievērojami vieglāks. HTML5 ir pievienots kanvas elements un īpaša JavaScript API darbam ar to. Audekls ir dinamiska "virsma", uz kuras varat programmatiski zīmēt. HTML5 oficiāli ietver arī svg tagu, kas ļauj ieviest vektorgrafiku, ko apraksta atbilstošs tīmekļa standarts SVG (Scalable Vector Graphics).

d) tīmekļa veidlapas

Jauni tīmekļa veidlapu elementi: veidi un atribūti, kas ļauj paplašināt tradicionālo formu iespējas ar iebūvētiem rīkiem, neizmantojot papildu bibliotēkas - no padomiem ievades laukā (vietturis) un ievadīto vērtību validācijas līdz īpašiem elementiem ievadot datumus un krāsas.

e) JavaScript API.

HTML5 ietver jaunas iespējas objektu pārvietošanai (Drag & Drop), darbam ar pāreju vēsturi (History API), kā arī vairākas sīkas lietas, piemēram, iespēju padarīt saturu rediģējamu tieši pašreizējā atrašanās vietā, izmantojot Content Editable atribūtus. .

f) Jauns DOCTYPE

DOCTYPE tags ir galvenā sastāvdaļa tīmekļa lapās, kas apgalvo, ka tās atbilst standartiem: bez tā kods netiks nodots pārbaudītājam. DOCTYPE ir arī svarīgs, lai lapa tiktu parādīta un pareizi darbotos standartiem atbilstošās pārlūkprogrammās.

HTML 4 bija 3 elementu veidi:

• 1. Stingri
• 2. Pārejas
• 3. Ar rāmjiem (Frameset)

Bieži vien izvēlēties vienu vai otru DOCTYPE elementu bija diezgan grūti. HTML5 DOCTYPE ir tikai viens, tas ir rakstīts šādi:

Šis īsais ieraksts aizstāj vecāko, garāko formu:

g) Sintakse

HTML 5 būs divas sintakses - "pielāgots" HTML un XML. HTML sintakse definē detalizētus parsēšanas noteikumus (tostarp "kļūdu apstrādi").

XML sintakse ir saderīga ar XHTML1 dokumentiem un to ieviešanu. Lai izmantotu šo sintaksi, MIME (Multipurpose Internet Mail Extensions) tips ir jādeklarē kā XML tips, un elementi ir jākonstruē saskaņā ar XML specifikāciju.

2. attēls — HTML5 pamata rekvizīti

HTML5 — jaunā paaudze. Kopš HTML 4.01 ieteikuma izdošanas (1999) ir pagājuši vairāk nekā 10 gadi, un tāpēc ir sagaidāms daudz izmaiņu un papildinājumu. HTML5 specifikācija pašlaik joprojām ir izstrādes stadijā. World Wide Web Consortium neizstrādā standartus, bet tikai sniedz ieteikumus. Viss sākas ar darba diskusijām, tad tiek iniciēts darba projekts, pēc tam tiek atbrīvots kandidāts ieteikuma lomai, un tikai tad specifikācija beidzot saņem ieteikuma statusu. Pašlaik darbs pie HTML5 joprojām ir darba uzmetuma stadijā. Neskatoties uz to, lielākā daļa populārāko interneta pārlūkprogrammu jau daļēji atbalsta HTML5 jauninājumus. Pirms sniegt īsu pārskatu par tiem, es atkārtošu, ka ne visas pārlūkprogrammas īsteno šo funkcionalitāti un vēl nav pilnībā. Šodien mēs varam paļauties uz Opera, Chrome, Firefox, Safari un Internet Explorer, kas dažādās pakāpēs atbalsta HTML5.

Un tiešām ir daudz kas jauns. Tagad tīmekļa izstrādātājiem būs vairākas papildu funkcijas, piemēram, ģeometrisku formu zīmēšana uz tīmekļa audekla, iebūvētas vilkšanas un nomešanas iespējas, kā arī video un audio failu atskaņošana (iepriekš to varēja izdarīt tikai, izmantojot spraudņa komponentus, piemēram, kā Adobe Flash Player) un daudz ko citu, kas tiks apspriests nedaudz vēlāk. Iesākumā vēlos teikt dažus vārdus par vispārējām tendencēm HTML attīstībā.

HTML5 specifikācijas daļa, kas izceļas jaunu tagu veidā, ir tikai aisberga redzamā daļa. Lielākā daļa HTML5 uzlaboto funkciju ir pieejamas tikai, izmantojot skriptu programmēšanas valodu, kas ir klienta puses tīmekļa programmēšanas pamatā. Ja mēs ņemam to pašu zīmēšanas funkcionalitāti, kas ieviesta, izmantojot tagu, tad mēs nerunājam par “zīmēšanas iezīmēšanu”, izmantojot ģeometriskās formas tagus, kā varētu pieņemt. Kanvas izkārtojums beidzas ar audekla elementa ievietošanu lapā un viss. Zīmējums pats par sevi ir JavaScript funkcija, kas pēc piekļuves audeklam uzzīmēs uz tā formas tāpat kā parastās Windows lietojumprogrammas, izmantojot GDI (Graphics Device Interface) saskarnes, logiem parāda grafiku. Tādējādi HTML5 specifikācija uzliek diezgan nopietnas prasības interneta pārlūkprogrammām attiecībā uz darba ar JavaScript ieviešanu, kas lielā mērā regulē programmas saskarni () darbam ar dokumenta objekta modeli (DOM). Tā ir laba ziņa, jo daudzi cilvēki zina, ka dažādas pārlūkprogrammas var organizēt darbu ar objekta modeli, izmantojot programmu saskarnes, kas atšķiras viena no otras. Daļēji programmatūras saskarnes specifikācija ir organizācijas nopelns Tīmekļa hiperteksta lietojumprogrammu tehnoloģiju darba grupa (WHATWG), kas cenšas standartizēt ne tikai iezīmēšanas valodu, bet arī API, ko izmanto lietojumprogrammās, kas rakstītas skriptu valodās, piemēram, JavaScript. WHATWG ir iesaistīts arī W3C izstrādē.

Tāpat varam secināt, ka HTML5 autori dažu populāru un pieprasītu tīmekļa programmēšanas uzdevumu ieviešanu centās nodot pašu interneta pārlūkprogrammu pārziņā. Piemēram, izmantojot HTML5, diezgan vienkārši var ieviest interneta veikalu lietotāja saskarnēs tik populāro elementu vilkšanas un nomešanas funkcionalitāti (produktu atlase grozā). Iepriekš, lai to izdarītu, jums bija jāraksta skripts JavaScript, izmantojot dažāda veida atbalsta bibliotēkas, piemēram, . Tagad ir daudz vieglāk ieviest vilkšanu un nomešanu, definējot vairākus papildu atribūtus un pievienojot dažus notikumu apdarinātājus nepieciešamajiem tagiem. Arī “drag&drop” organizēšana, izmantojot jQuery, nav īpaši sarežģīta, taču HTML5 gadījumā mēs nodarbosimies ar vienu ieteikumu visiem interneta programmatūras klientiem, un tas ir pilnīgi atšķirīgs atbalsta līmenis un starppārlūkprogrammu saderības garantija. Izrādās, ka pārlūkprogrammas, kas atbalsta HTML5 ieteikumus, tagad nodrošinās iespēju saglabāt un atjaunot sesijas iestatījumus pašas tīmekļa sesijas kontekstā. Piemēram, pārlādējot lapu, tajā iepriekš ievadītā informācija netiks zaudēta, bet gan tiks atjaunota no pašreizējās sesijas vides. Tā jau ir “ieiešana” servera puses tīmekļa programmēšanas teritorijā, jo iepriekš to nevarēja izdarīt tikai izmantojot HTML un JavaScript.

Tagad saraksts ar visievērojamākajiem HTML5 jauninājumiem:

Kā jau minēts, galvenā ieteikumu daļa par jaunā elementa izmantošanu ir specifikācija programmatūras interfeisam grafikas attēlošanai uz tā. Lai sāktu, lapā ievietojat tagu noteiktu platumu un augstumu, pēc tam JavaScript kodā tam piekļūstat (piemēram, pēc id) un sāciet zīmēt uz tā. Zīmēšana nozīmē secīgu līnijas stila insulta stilu , aizpildīšanas stila fillStyle definēšanu un zīmēšanas metožu izsaukšanu, piemēram, moveTo (pārvietojiet pildspalvu), lineTo (zīmējiet līniju), loku (zīmējiet loku) utt. Zemāk skatiet piemēru - vienkāršākais rīks zīmēšanai ar peli. Zemāk ir tā avota kods JavaScript un HTML iezīmēšanā. Lai zīmētu ar pildspalvu, nospiediet peles kreiso pogu un pārvietojiet kursoru pāri audeklam. Režīmā "Līnijas" vai "daudzstūri" vienkārši secīgi noklikšķiniet uz audekla, tādējādi norādot polilīniju vai laukuma objektu virsotnes.

Piemērs zīmēšanas darbību ieviešanai elementā, izmantojot HTML5.

//Pašreizējās operācijas kods var operation=0; //Darbības statuss var active=false; //Sākt grafiskās darbības funkciju startOperation(e) ( if (operation==0) return; if (active) return; var konteksts = getContext(); context.strokeStyle = getColor("stroke"); konteksts.fillStyle = getColor ( "aizpildīt"); konteksts.beginPath(); var punkts = getPoint(e); konteksts.moveTo(point.x, point.y); active = true; ) //Grafiskās darbības funkcijas stopOperation() pabeigšana (ja (! active) return; var konteksts = getContext(); konteksts.closePath(); active = false; ) //Peles notikumu funkcija mouseDown(e) ( var e = e || window.event; if (!active) ( startOperation(e); return; ) else ( var konteksts = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); konteksts.stroke(); if (operācija == 3 ) konteksts .fill(); ) return true; ) function mouseUp(e) ( var e = e || window.event; if (!active || operācija != 1) return; stopOperation(); return true; ) funkcija mouseMove(e) ( var e = e || window.event; if (!active || operācija != 1) return; var konteksts = getContext(); var punkts = getPoint(e); konteksts.līnijaTo(punkts.x, punkts.y); konteksts.insults(); atgriezt patiesu; ) funkcija getColor(control) ( var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; ) //Canvas elementa funkcija getCanvas() (atgriezt dokumentu. getElementById("canvas"); ) //Konteksts 2D grafikas attēlošanai uz audekla elementa funkcijas getContext() ( return getCanvas().getContext("2d"); ) //Elementa funkcija "selected operation" getSelected() ( return document. getElementById("selected"); ) //Peles kursora funkcijas getPoint(e) relatīvās koordinātas ( var x = notikums.lapaX || notikums.x; var y = notikums.lapaY || notikums.y; var rect = getCanvas() .getBoundingClientRect(); var point = (); point.x = x - rect.left; point.y = y - rect.top; atgriešanās punkts; ) //Izvēlieties darbības funkciju selectOperation(code) ( stopOperation(); darbība = kods; switch(operation) ( 1. gadījums: ( getSelected().innerText = "Atlasīts: pildspalva"; pārtraukums; ) 2. gadījums: ( getSelected().innerText = "Atlasīts: rindas"; pārtraukums; ) 3. gadījums: ( getSelected().innerText = "Atlasīts: daudzstūri"; pārtraukums; ) ) )

pildspalvas līnijas poligoni Atlasīts: līnijas krāsa aizpildījuma krāsa

Tas ir nekas cits kā pārlūkprogrammas atbalsts klasiskajam “velciet un nometiet” modelim, kas ir ļoti populārs parastajās GUI lietojumprogrammās. Elementiem, kurus "velk", definējiet velkamo atribūtu, bet elementiem, uz kuriem "izmetīsit" velkos elementus, definējiet notikumu apdarinātājus ondragenter , ondragover un ondorp . Tas arī viss, patiesībā. Piemērs zemāk.

Piemērs vilkšanas un nomešanas darbību (vilkšanas elementu) ieviešanai, izmantojot HTML5.

HTML5: velciet un nometiet html, pamatteksts (fontu saime: Arial fonta izmērs: 11 pikseļi; ) .grozs ( apmale: 1 px, ciets #777; platums: 105 pikseļi; augstums: 120 pikseļi; polsterējums: 10 pikseļi; apmales rādiuss: 0 0 10 pikseļi 10 pikseļi; fona krāsa: #eee; lodziņa ēna: ielaidums 0 pikseļi 0 pikseļi 5 pikseļi #777; .grozs .bumba (platums: 30 pikseļi; augstums: 30 pikseļi; apmales rādiuss: 15 pikseļi; kastes ēna: 5 pikseļi 5 pikseļi 10 pikseļi #777; pludiņš: pa labi; ) .bumba ( apmale: 1px solid #FF7F50; platums: 20px; augstums: 20px; border-radius: 10px; background-color: #FF8C00; box-shadow: 0px 0px 5px #777; float: left; margin: 1px; ) funkcija startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Bumba", e.target.id); e.dataTransfer.effectAllowed="move"; return true ; ) funkcija endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) funkcija drop(e) ( var e = e || window.event; e .target.appendChild(document.getElementById(e.dataTransfer.getData("Bumba"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; return false; )...

Šeit viss ir pavisam vienkārši, būtu ko pavairot un kur. Novietojiet tagus Un savā lapā definējiet tiem src atribūtu, norādot atskaņošanas avotu, un gaidiet, kamēr interneta pārlūkprogrammas iemācīsies apstrādāt šos brīnišķīgos norādījumus un atskaņot visizplatītākos formātus.

HTML5 sola jaunus elementu veidus , kas kontrolē interneta adreses, e-pasta adreses, skaitlisko vērtību, datuma, laika, krāsas utt. ievadi. Ja jūsu pārlūkprogramma jau atbalsta visus šos jauninājumus, tad tālāk redzēsit, kā tas to dara. Ja pārlūkprogramma neatbalsta visus jaunos elementu veidus, tie, ar kuriem tā vēl nezina, kā strādāt, izskatīsies kā parastie teksta ievades lauki.

Elementu varianti ar dažādām tipa atribūtu vērtībām:

Ja adreses vērtība neatbilst formātam url, pēc tam, noklikšķinot uz [apstiprināt], pārlūkprogramma mēģinās to labot. Ja tas to nevar izdarīt, tiks parādīts kļūdas ziņojums. Ja e-pasta vērtība neatbilst formātam e-pasts, pēc noklikšķināšanas uz [apstiprināt] pārlūkprogramma vai nu labos adresi, vai ziņos par ievades kļūdu.

Skaitliskās vērtības uzrādīšana skalas veidā ar iespēju norādīt intervālus zem zemās normas un virs augstās normas, kā arī optimālās vērtības optimumu.

Elements:

Izpildes procesa vizualizācija. Varat norādīt tikai maksimālo maksimālo un pašreizējo vērtību.

Elements HTML avota kods

Skaitlis no intervāla:

Vesels skaitlis:

Datums un laiks:

Datums:

Laiks:

Mēnesis:

Nedēļa:

Krāsa:

url:

e-pasts:

Pāreju uz iepriekš ielādētām lapām būs iespējams patstāvīgi vadīt, izmantojot JavaScript un objektu vēsture. Piemēram, izsaucot logu.history.length, tiks atgriezts “vēstures garums”, un izsaucot window.history.back() , window.history.forward() vai window.history.go(stepCount), tiks veiktas atbilstošās pārejas. Zemāk ir neliels piemērs:

Uz priekšu>

Šī lieliskā funkcionalitāte ļaus saglabāt un atjaunot sesijas datus. Aizpildījām pasūtījumu, devāmies apskatīt preci, atgriezāmies (izmantojot saiti) vēlreiz pie pasūtījuma aizpildīšanas, bet iepriekš ievadītie dati joprojām bija. Iepriekš, lai nodrošinātu šādu lapas rekvizītu, nebija iespējams iztikt bez papildu pūlēm tīmekļa lietojumprogrammas servera pusē. Tagad būs iespējams saglabāt datus tīmekļa sesijas kontekstā ( sessionStorage) vai lokāli pārlūkprogrammas RAM ( vietējāStorage). SesionStorage ir paredzēts, lai ļautu saglabāt datus tik ilgi, kamēr sesija, kurā tie tika inicializēti, ir aktīva. Saglabātajiem datiem var piekļūt no dažādām tīmekļa vietnes lapām, kuras ielādējis pārlūkprogramma. Opcijai ar localStorage acīmredzot vajadzētu saglabāt datus, kamēr pati pārlūkprogramma ir atvērta. Tā kā piekļuvei vietējai krātuvei vienmēr jābūt pieejamai, pat ja nav savienojuma ar serveri, jebkura pārlūkprogrammas atvērtā lapa var saņemt datus no vietējās krātuves. Abos gadījumos sesijas stāvoklis ir atslēgu un vērtību pāru kopa, kurai piekļūst, izsaucot xxxStorage.setItem(atslēga, vērtība) un xxxStorage.getItem(key) .

Piemērs: Skatiet sadaļu par elementa satura rediģēšanu, izmantojot jauno atribūtu apmierinošs, kas ieviesta HTML5, ir. Zemāk ir pievienotas divas pogas, no kurām viena saglabā rediģētā bloka saturu, bet otrā to atjauno. Noklikšķiniet uz [Saglabāt], rediģējiet bloka saturu un noklikšķiniet uz [Atjaunot]. Ja jūsu pārlūkprogramma atbalsta HTML5 funkcionalitāti sessionStorage, tad bloka saturs apmierinošs tiks atjaunots.

Atjaunot

Saglabāt Atjaunot

Ja jūsu lapā ir elementi kas ielādē citu lapu saturu: ne tikai jūsu vietnes lapas, bet arī lapas no pavisam cita domēna, tad ar HTML5 ieteikumu ieviešanu būs iespējams apmainīties ar ziņojumiem ar šādiem logiem. Lapa, kas sūta ziņojumu, to dara, izmantojot funkcijas window.postMessage(message, target) izsaukumu, un lapā, kas saņem ziņojumu, ir jāietver notikumu apdarinātājs “onmessage”, kur tai jau ir jāapstrādā ziņojuma teksts event.data, ja tas patiešām ir. tā saņēmējs – atbilst vērtībai notikums.izcelsme . Pirms šī mehānisma parādīšanās klienta pusē nebija iespējams sazināties ar dažādiem interneta resursiem. Tālāk ir sniegts piemērs vienkāršākai komunikācijai starp divām lapām, izmantojot jauno HTML5 ziņojumu mehānismu. No pirmā acu uzmetiena var šķist, ka piemērā nekas īpašs nenotiek. Precīzāk, nav skaidrs, kāpēc tas viss ir vajadzīgs. Faktiski ziņapmaiņa var kļūt populāra, veidojot informācijas portālus, kas vienuviet apvieno dažādus interneta pakalpojumus. Piemēram, pieņemsim, ka ir kāds interneta pakalpojums, kura pakalpojumus var izmantot tikai pēc apjomīga elektroniskā pieteikuma aizpildīšanas. Tāpat pieņemsim, ka ir kāds klients, kurš diezgan bieži izmanto šī pakalpojuma pakalpojumus, taču viņa pieprasījumi katru reizi maz atšķiras viens no otra (lielākā daļa parametru vienmēr ir vienādi). Ja šāds interneta pakalpojums papildus elektroniskajai pieteikuma aizpildīšanas veidlapai atbalstītu arī “ziņu uztvērēju” tā pakalpojumu automātiskai pasūtījuma veikšanai, tad tā klienti varētu “uzvilkt” šī pakalpojuma logu uz savas lapas (izmantojot elementu ), izveidojiet tur savas (pašam optimizētas) pieteikuma veidlapas un funkcijas to nosūtīšanai mērķa pakalpojumam ziņojumu veidā. Lielākā daļa parametru šajā gadījumā tiktu ģenerēti automātiski, piemēram, klienta informācija. Protams, līdzīgu komunikāciju var īstenot ar HTTP pieprasījumiem no klienta uz serveri, kuru galvenē tiek nodoti nepieciešamie parametri, taču ir vērts atzīmēt, ka HTML5 ziņojumu mehānisma gadījumā trafika nosūtīšanas laikā ir nulle. parametri, jo viss notiek klienta pusē.

Piemērs ziņojumu apmaiņas ieviešanai starp lapām, izmantojot HTML5.

funkcija init() ( document.getElementById("forma").onsubmit = sendMessage; ) funkcija sendMessage() ( var location = window.location; var message = document.getElementById("ziņa").value; var target = dokuments. getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host); return false; ) ...

message_source.html:

Ziņas teksts

function init() ( if (window.addEventListener) window.addEventListener("ziņojums", saņemtZiņojums, false); else window.attachEvent("onmessage", ReceiveMessage); ) funkcija ReceiveMessage(event) ( document.getElementById("target") ).innerHTML = event.data; document.getElementById("origin").innerHTML = "no " + event.origin; ) ...

messages_target.html:

Tagad, definējot atribūtu contenteditable, varat rediģēt atsevišķus iezīmēšanas elementus, piemēram, teksta blokus, sarakstus utt. Izmantojot atribūtu designmode, visu lapu var padarīt rediģējamu. Šī funkcionalitāte var būt noderīga, lai organizētu atgriezenisko saiti ar resursa īpašnieku, piemēram, aizpildot un nosūtot viņam pieteikumu, pasūtījumu vai ko tamlīdzīgu. Jūs izveidojat veidlapas HTML lapu tās sākotnējā formā un nododat lietotājam to aizpildīt. Pēc aizpildīšanas lietotājs apstiprina ievadītos datus, un rediģētais dokuments tiek nosūtīts uz serveri. Rediģējamu marķējumu piemērs ir parādīts zemāk:

Šī bloka saturu var rediģēt, jo tam ir definēts atribūts apmierinošs:

Rediģējot tabulas šūnas, kolonnu platums un līniju augstums mainās automātiski.

Lai ievadītu jaunu saraksta vienumu, nospiediet .

• Saraksta 1. vienums
• Saraksta 2. vienums
• Saraksta 3. vienums

Pēc jauna vienuma pievienošanas sarakstam numerācija tiks automātiski atjaunināta.

Gaidāms atbalsts SVG- vektorgrafikas iezīmēšanas valoda, kuras pamatā ir . Grafika tiks ievietota marķējumā, kas ir loģiski, izmantojot tagu , piemēram, šādi:

Ja redzat tālāk norādītās ģeometriskās formas, tas nozīmē, ka jūsu pārlūkprogramma jau atbalsta svg.

Gaidāms arī atbalsts MathML- iezīmēšanas valoda matemātiskām izteiksmēm, kuru pamatā ir XML. Šeit ir piemērs formulas atzīmēšanai trijstūra malas garuma aprēķināšanai, izmantojot kosinusa teorēmu:

a = b 2 + c 2 - 2 b c cos α

Ja redzat formulu ar kvadrātsaknes simbolu, jūsu pārlūkprogramma jau saprot MathML.

A = b 2 + c 2 - 2 b c cos α

Pirmkārt, es vēlētos izcelt jaunu lapu iezīmēšanas elementu grupu, kas iepriekš nepārprotami nepastāvēja. Tie ietver tagu - raksts, piezīme, ziņas utt.; - raksta virsraksts vai galvene - kājene vai kājene - raksta sadaļa vai nodaļa. Kāpēc tas ir vajadzīgs, ja to pašu var izdarīt, izmantojot elementus dažādas klases? Tas ir nepieciešams, lai jūsu marķējuma nozīme būtu skaidra arī tiem, kas mēģina to analizēt. Es nerunāju par personu, kas lasa jūsu tekstu (viņš neredz marķējumu, viņam viss ir skaidrs bez tā), bet gan par automatizētām sistēmām, un, pirmkārt, tas attiecas uz meklētājprogrammām. Semantiskā slodze ir ļoti svarīga meklētājprogrammām, aprēķinot jūsu lapu atbilstību noteiktam meklēšanas vaicājumam. Šajā kontekstā elements ir pelnījis īpašu uzmanību , jo tas ir paredzēts, lai izceltu bloku ar galvenajām navigācijas saitēm jūsu lapā. Iespējams, meklētājprogrammas pret šādām saitēm izturēsies atšķirīgi. Tālāk ir sniegta kopsavilkuma tabula ar jaunajiem HTML5 tagiem, kas piešķir marķējumam nozīmi.

Tālāk ir sniegts HTML iezīmēšanas piemērs, izmantojot uzskaitītos tagus.

HTML5 vēl nav kļuvis par ieteikumu, un pastāv strīdi par tā "semantisko tagu" izmantošanu, piemēram, Un jau diezgan daudz. Neviens vēl īsti nezina, kā tos pareizi ievietot marķējumā, taču ir vairāki padomi jauno HTML5 strukturālo tagu lietošanai, ar kuriem grūti strīdēties, jo to nozīme ir acīmredzama. Šeit ir daži no tiem:

Tas man ir viss par jaunajām hiperteksta iezīmēšanas valodas funkcijām, kurām vajadzētu parādīties, izlaižot HTML5 ieteikumu.

HTML5 ir galvenās tīmekļa lapu iezīmēšanas valodas jaunākā versija. HTML pēdējo 10 gadu laikā nav notikušas nekādas būtiskas izmaiņas, kas ir nedaudz dīvaini, ņemot vērā tīmekļa tehnoloģiju straujo attīstību. Visbeidzot, HTML5 mums ir pārkārtots, un šis raksts jums pastāstīs, kādas jaunas lietas esam ieguvuši šajā versijā.

HTML5 ir mazāk stingri noteikumi salīdzinājumā ar iepriekšējo XHTML, tagad varat:

• Jums nav jāizmanto noslēguma tagi.
• Neizmantojiet pēdiņas atribūtu vērtībās.
• Izmantojiet lielos burtus elementos un atribūtos.

Jaunas atzīmes.
Tātad HTML5 parādījās jauni tagi.

Ir arī izslēgti tagi, kas vairs nav aktuāli un nav ieteicami lietošanai.