HTML5 ja yleiskatsaus uusiin web-ohjelmointiominaisuuksiin. Mitä uutta HTML5:ssä? Kuvan attribuutti srcset

Käännös: Vlad Merževitš

Saatat kysyä: "Kuinka voin käyttää HTML5:tä, jos vanhemmat selaimet eivät tue sitä?" Itse asiassa tämä kysymys on väärä. HTML5 ei ole yksi iso asia, se on kokoelma erilaisia ​​ominaisuuksia. Et voi kirjoittaa "HTML5-tuettu", koska se ei ole intuitiivista, mutta voit määrittää tuen joillekin HTML 5 -tekniikoille, kuten piirtämiselle, videolle ja maantieteelliselle sijainnille.

Voit ajatella HTML:ää tageina ja kulmasulkeina. Tämä on tietysti tärkeä osa, mutta ei koko asia. HTML5-spesifikaatio määrittää myös, kuinka nämä kulmasulut ovat vuorovaikutuksessa JavaScriptin kanssa Document Object Model (DOM) -mallin kautta. HTML5 ei vain määritä tunnistetta, vaan se myös kertoo DOM:lle kaikista videoobjekteista. Sovellusohjelmointirajapinnalla (API) voit tukea erilaisia ​​videomuotoja, toistaa videota, pysäyttää sen, mykistää äänen, seurata tiedostojen latauksia ja paljon muuta käyttäjän ja tunnisteen välisen vuorovaikutuksen perusteella.

Piditpä siitä tai et, et voi kiistää sitä, että HTML4 on menestynein merkintämuoto. HTML5 rakentuu tälle tuurille, joten sinun ei tarvitse heittää pois olemassa olevia merkintöjä ja oppia uudelleen. Jos verkkosovelluksesi toimii HTML4-kielellä tänään, se toimii myös HTML5-kielellä.

Tässä konkreettinen esimerkki: HTML5 tukee kaikkia HTML4:n lomakeelementtejä ja sisältää myös uusia elementtejä. Jotkut niistä, kuten liukusäätimet ja päivämäärän valinta, ovat olleet kauan tulossa, toiset eivät ole niin ilmeisiä. Esimerkiksi sähköpostiosoitteen syöttökenttä on tavallinen tekstikenttä, mutta nykyaikaiset selaimet tätä kenttää varten helpottavat osoitteen kirjoittamista. Vanhemmat selaimet eivät tue input type="email" , joten ne näyttävät tavallisen tekstikentän ja lomakkeet toimivat sen kanssa ilman lisätemppuja. Tämän avulla voit parantaa lomakkeitasi tänään, vaikka jotkut käyttäjät ovat edelleen jumissa IE6:ssa.

"Päivitys" HTML5:een voidaan tehdä yksinkertaisesti muuttamalla asiakirjatyyppiä. Elementti tulee aina sijoittaa minkä tahansa verkkosivun ensimmäiselle koodiriville. Edellisessä HTML-versiossa määriteltiin useita doctype-vaihtoehtoja, eikä oikean valinta ollut helppoa. HTML5:ssä on vain yksi dokumenttityyppi:

Doctypen muuttaminen ei tuhoa olemassa olevaa asettelua, koska myös HTML5 tukee kaikkia HTML4:ssä määritettyjä tunnisteita. Lisäksi voit käyttää oikein uusia semanttisia elementtejä, kuten , , ja .

Halusitpa sitten piirtää kuvia, toistaa videoita, parantaa lomakkeiden toimivuutta tai rakentaa offline-verkkosovellusta, huomaat, että selaimet tukevat hyvin HTML5:tä. Firefox, Safari, Chrome ja mobiiliselaimet toimivat tunnisteiden, videoiden, maantieteellisen sijainnin, paikallisen tallennustilan jne. kanssa. Google ymmärtää mikrodatan merkinnät. Jopa Microsoft, joka yleensä jää jälkeen standardeista, tukee HTML5:n ydinominaisuuksia Internet Explorer 9 -selaimessaan.

Kaikki tämän kirjan osiot sisältävät yhteensopivuustaulukon suosituille selaimille. Vielä tärkeämpää on, että keskusteluun sisältyy vanhempien selainten tukivaihtoehtoja. HTML5-teknologiat, kuten maantieteellinen sijainti ja video, toteutettiin käyttämällä laajennuksia, kuten Gears tai Flash. Muita ominaisuuksia, kuten piirtämistä, voidaan emuloida JavaScriptin kautta. Tämä kirja näyttää, kuinka voit käyttää nykyaikaisten selainten sisäänrakennettuja ominaisuuksia heittämättä pois vanhoja versioita.

Tim Berners-Lee keksi World Wide Webin 1990-luvun alussa. Myöhemmin hän perusti W3C:n ylläpitämään verkkostandardeja. Organisaatiolla on yli 15 vuoden historia. Tässä on mitä W3C ilmoitti verkkostandardien tulevaisuudesta heinäkuussa 2009:

Johto ilmoitti tänään, että kun XHTML 2 Working Groupin peruskirja päättyy vuoden 2009 lopussa, sitä ei uusita. Tämä lisää HTML-työryhmän resursseja. W3C toivoo, että tämä nopeuttaa HTML5:n etenemistä ja selventää W3C:n kantaa HTML:n tulevaisuuteen.

HTML5 on täällä. Sukellaanpa siihen.

HTML5-spesifikaatio tuo mukanaan monia eritasoisia ja vaihtelevan tärkeyden muutoksia. Pohjimmiltaan keskeiset muutokset voidaan jakaa 7 lohkoon:

a) Semantiikka (kieliyksiköiden semanttinen merkitys)

HTML5 esittelee useita uusia semanttisia tunnisteita, joiden avulla voit järjestellä verkkosivujen sisäistä rakennetta mielekkäämmin. Tämä sisältää sekä lohkotunnisteet, kuten otsikko-, alatunniste-, artikkeli- ja tekstimerkintätagit, kuten mark, ruby, details. Useita olemassa olevia HTML4-tageja on julistettu vanhentuneiksi, yksittäisten tunnisteiden merkitys on muuttunut ja attribuutit ovat muuttuneet.

b) Multimedia

HTML5 lisää natiivituen multimediasisällölle (äänelle ja videolle) suoraan HMTL-merkinnöissä – ja siihen liittyvän API:n hallintaa varten.

c) Grafiikka

Työskentely grafiikan kanssa asiakaspuolella on helpottunut huomattavasti. Canvas-elementti ja erityinen JavaScript-sovellusliittymä sen kanssa työskentelemistä varten on lisätty HTML5:een. Canvas on dynaaminen "pinta", jolle voit piirtää ohjelmallisesti. HTML5 sisältää virallisesti myös svg-tunnisteen, jonka avulla voit toteuttaa vastaavan verkkostandardin SVG:n (Scalable Vector Graphics) kuvaamaa vektorigrafiikkaa.

d) Verkkolomakkeet

Uudet verkkolomakeelementit: tyypit ja attribuutit, joiden avulla voit laajentaa perinteisten lomakkeiden ominaisuuksia sisäänrakennetuilla työkaluilla ilman lisäkirjastojen käyttöä - vihjeistä syöttökentässä (paikkamerkki) ja syötettyjen arvojen validoinnista erikoiselementteihin päivämäärän ja värien syöttäminen.

e) JavaScript-sovellusliittymät.

HTML5 sisältää uusia ominaisuuksia objektien siirtämiseen (Drag & Drop), siirtymien historian käsittelyyn (History API) sekä useita pieniä asioita, kuten mahdollisuuden tehdä sisällöstä muokattavaa suoraan nykyisessä sijainnissa käyttämällä Content Editable -attribuutteja. .

f) Uusi DOCTYPE

DOCTYPE-tunniste on avainkomponentti verkkosivuilla, jotka väittävät noudattavansa standardeja: ilman sitä koodi ei läpäise vahvistusta. DOCTYPE on myös tärkeä, jotta sivu näkyy ja toimii oikein standardien mukaisissa selaimissa.

HTML 4:ssä oli kolmenlaisia ​​elementtejä:

• 1. Tiukka
• 2. Siirtymävaihe
• 3. Kehyksillä (Frameset)

Usein yhden tai toisen DOCTYPE-elementin valitseminen oli melko vaikeaa. HTML5 DOCTYPE:ssä on vain yksi, se on kirjoitettu näin:

Tämä lyhyt merkintä korvaa vanhemman, pidemmän lomakkeen:

g) Syntaksi

HTML 5:llä on kaksi syntaksia - "mukautettu" HTML ja XML. HTML-syntaksi määrittelee yksityiskohtaiset jäsennyssäännöt (mukaan lukien "virheiden käsittely").

XML-syntaksi on yhteensopiva XHTML1-dokumenttien ja sen toteutusten kanssa. Tämän syntaksin käyttämiseksi MIME (Multipurpose Internet Mail Extensions) -tyyppi on ilmoitettava XML-tyypiksi ja elementit on rakennettava XML-määrityksen mukaisesti.

Kuva 2 - HTML5:n perusominaisuudet

HTML5 - uusi sukupolvi. Yli 10 vuotta on kulunut HTML 4.01 -suosituksen (1999) julkaisemisesta, ja siksi muutoksia ja lisäyksiä on odotettavissa paljon. HTML5-spesifikaatio on tällä hetkellä vielä kehitteillä. World Wide Web Consortium ei kehitä standardeja, vaan antaa vain suosituksia. Kaikki alkaa työkeskusteluista, sitten aloitetaan työluonnos, sitten vapautetaan ehdokas suosittelijan rooliin ja vasta sitten spesifikaatio saa lopulta suosituksen tilan. Tällä hetkellä HTML5-työ on vielä luonnosvaiheessa. Tästä huolimatta useimmat suosituimmat Internet-selaimet tukevat jo osittain HTML5-innovaatioita. Ennen kuin teen niistä lyhyen yleiskatsauksen, toistan, että kaikki selaimet eivät toteuta tätä toimintoa eivätkä vielä täysin. Nykyään voimme luottaa siihen, että Opera, Chrome, Firefox, Safari ja Internet Explorer tukevat HTML5:tä vaihtelevissa määrin.

Ja siellä on todella paljon uutta. Nyt verkkokehittäjillä on useita lisäominaisuuksia, kuten geometristen muotojen piirtäminen verkkokankaalle, sisäänrakennetut vedä ja pudota -ominaisuudet sekä video- ja äänitiedostojen toistaminen (aiemmin tämä onnistui vain laajennuskomponenteilla, kuten esim. Adobe Flash Playerina) ja paljon muuta, joista keskustellaan hieman myöhemmin. Aluksi haluaisin sanoa muutaman sanan HTML:n kehityksen yleisistä suuntauksista.

Uusien tunnisteiden muodossa esiin jäävä HTML5-määrityksen osa on vain jäävuoren huippu. Suurin osa HTML5:n edistyneistä ominaisuuksista on saatavilla vain komentosarjaohjelmointikielellä, joka on asiakaspuolen web-ohjelmoinnin perusta. Jos otamme saman piirustustoiminnon toteutettuna tagilla, emme puhu "piirtomerkinnöistä" geometristen muototunnisteiden avulla, kuten voisi olettaa. Kanvasasettelu päättyy kanvas-elementin sijoittamiseen sivulle ja se on siinä. Piirustus itsessään on JavaScript-toiminto, joka, kun se on päässyt kankaalle, piirtää siihen muotoja samalla tavalla kuin tavalliset Windows-sovellukset näyttävät grafiikkaa ikkunoihin GDI (Graphics Device Interface) -rajapintojen kautta. Siten HTML5-spesifikaatio asettaa Internet-selaimille melko vakavia vaatimuksia JavaScript-työn toteuttamisessa, mikä suurelta osin säätelee ohjelmarajapintaa () dokumenttiobjektimallin (DOM) kanssa työskentelyyn. Tämä on hyvä uutinen, sillä monet tietävät, että eri selaimet voivat järjestää työskentelyn objektimallin kanssa toisistaan ​​poikkeavien ohjelmarajapintojen kautta. Osittain ohjelmistorajapinnan määrittely on organisaation ansio Web Hypertext Application Technology Working Group (WHATWG), joka pyrkii standardoimaan merkintäkielen lisäksi myös sovellusliittymiä, joita käytetään komentosarjakielillä, kuten JavaScriptillä, kirjoitetuissa sovelluksissa. WHATWG on myös mukana kehitystyössä W3C:n kanssa.

Voidaan myös todeta, että HTML5:n kirjoittajat yrittivät siirtää joidenkin suosittujen ja haluttujen web-ohjelmointitehtävien toteuttamisen Internet-selaimien itsensä vastuulle. Esimerkiksi HTML5:n avulla voidaan varsin helposti toteuttaa verkkokauppojen käyttöliittymissä niin suosituksi tullut elementtien vetäminen ja pudottaminen (tuotteiden valinta ostoskoriin). Aiemmin tätä varten piti kirjoittaa JavaScript-skripti käyttämällä erilaisia ​​​​tukikirjastoja, kuten . Vedä ja pudota -toiminto on nyt paljon helpompi toteuttaa määrittämällä useita lisämääritteitä ja lisäämällä muutama tapahtumakäsittelijä tarvitsemillesi tunnisteille. "Drag&drop" -toiminnon järjestäminen jQuerylla ei myöskään ole erityisen monimutkaista, mutta HTML5:n tapauksessa käsittelemme yhtä suositusta kaikille Internet-ohjelmistoasiakkaille, ja tämä on täysin eri tasoinen tuki ja selainyhteensopivuuden takuu. Osoittautuu, että HTML5-suosituksia tukevat selaimet tarjoavat nyt mahdollisuuden tallentaa ja palauttaa istunnon asetuksia itse web-istunnon yhteydessä. Esimerkiksi kun sivu ladataan uudelleen, sille aiemmin syötetyt tiedot eivät katoa, vaan ne palautetaan nykyisen istunnon ympäristöstä. Tämä on jo "astumassa" palvelinpuolen web-ohjelmoinnin alueelle, koska aiemmin tätä ei voitu tehdä vain HTML:n ja JavaScriptin avulla.

No, nyt luettelo HTML5:n merkittävimmistä innovaatioista:

Kuten jo mainittiin, suurin osa suosituksista, jotka koskevat uuden elementin käyttöä on spesifikaatio ohjelmistokäyttöliittymälle grafiikan näyttämiseksi siinä. Aloita asettamalla sivulle tunniste tietyn leveyden ja korkeuden, käytät sitä JavaScript-koodissa (esimerkiksi id:llä) ja alat piirtää siihen. Piirtäminen tarkoittaa, että määritetään peräkkäin viivatyylin viivatyylinen, täyttötyylinen fillStyle ja kutsutaan piirtomenetelmiä, kuten moveTo (siirrä kynää), lineTo (piirrä viiva), kaari (piirrä kaari) jne. Katso alla esimerkki - yksinkertaisin työkalu hiirellä piirtämiseen. Alla on sen lähdekoodi JavaScript- ja HTML-merkinnöissä. Piirrä kynällä painamalla hiiren vasenta painiketta ja siirtämällä kohdistinta kankaalle. "Lines"- tai "polygons"-tilassa napsauta vain peräkkäin kankaalla, mikä osoittaa polyline- tai alueobjektien kärjet.

Esimerkki piirustusoperaatioiden toteuttamisesta elementissä HTML5:n avulla.

//Nykyisen toiminnon koodi var operation=0; //Toiminnan tila var active=false; //Käynnistä graafinen toimintofunktio startOperation(e) ( if (operation==0) return; if (aktiivinen) return; var konteksti = getContext(); context.strokeStyle = getColor("stroke"); konteksti.fillStyle = getColor ( "fill"); context.beginPath(); var point = getPoint(e); context.moveTo(point.x, point.y); active = true; ) //Graafisen toiminnon lopettaminen stopOperation() (jos (! active) return; var konteksti = getContext(); konteksti.closePath(); active = false; ) //Hiiren tapahtumat -funktio mouseDown(e) ( var e = e || window.event; if (!active) ( startOperation(e); return; ) else ( var konteksti = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); if (operaatio == 3 ) konteksti .fill(); ) return true; ) function mouseUp(e) ( var e = e || window.event; if (!active || operaatio != 1) return; stopOperation(); return true; )-funktio mouseMove(e) ( var e = e || window.event; if (!aktiivinen || toiminta != 1) return; var konteksti = getContext(); var point = getPoint(e); konteksti.viivaTo(piste.x, piste.y); konteksti.stroke(); palauttaa tosi; ) funktio getColor(control) ( var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; ) //Canvas-elementtifunktio getCanvas() ( palauttaa asiakirjan. getElementById("canvas"); ) //Konteksti 2D-grafiikan näyttämiseen kankaalle elementtifunktiolla getContext() ( return getCanvas().getContext("2d"); ) //Elementin "valittu toiminta" -funktio getSelected() ( return document. getElementById("selected"); ) //Hiiren kohdistinfunktion getPoint(e) suhteelliset koordinaatit ( var x = tapahtuma.sivuX || tapahtuma.x; var y = tapahtuma.sivuY || tapahtuma.y; var rect = getCanvas() .getBoundingClientRect(); var point = (); point.x = x - rect.left; point.y = y - rect.top; paluupiste; ) //Valitse toimintofunktio selectOperation(code) ( stopOperation(); operaatio = koodi; kytkin(toiminto) ( tapaus 1: ( getSelected().innerText = "Valittu: kynä"; break; ) tapaus 2: ( getSelected().innerText = "Valittu: rivit"; break; ) tapaus 3: ( getSelected().innerText = "Valittu: polygonit"; tauko; ) ) )

kynäviivat polygonit Valittu: viivan väri täyttöväri

Tämä ei ole muuta kuin selaimen tuki klassiselle "vedä ja pudota" -mallille, joka on erittäin suosittu tavallisissa GUI-sovelluksissa. Määritä "vedettäville" elementeille vedettävissä oleva attribuutti ja elementeille, joille "heität" vedetyt elementit, määrität tapahtumakäsittelijät ondragenter , ondragover ja ondorp . Siinä kaikki, oikeastaan. Esimerkki alla.

Esimerkki vedä ja pudota -toimintojen (elementtien vetäminen) toteuttamisesta HTML5:n avulla.

HTML5: Vedä ja pudota html, body ( font-family: Arial font-size: 11px; ) .basket (reunus: 1px kiinteä #777; leveys: 105px; korkeus: 120px; täyte: 10px; reunuksen säde:0 0 10px 10px; taustaväri: #eee; laatikkovarjo: upotettu 0px 0px 5px #777; .basket .ball (leveys: 30px; korkeus: 30px; reunuksen säde: 15px; laatikkovarjo: 5px 5px 10px #77; float: oikea; ) .ball (reunus: 1px kiinteä #FF7F50; leveys: 20px; korkeus: 20px; reunuksen säde: 10px; taustaväri: #FF8C00; laatikkovarjo: 0px 0px 5px #777; float: vasen; marginaali: 1px; ) funktio startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer.effectAllowed="move"; return true ; ) funktio endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) function drop(e) ( var e = e || window.event; e .target.appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = tosi; palauttaa väärä; )...

Kaikki on täällä melko yksinkertaista, siellä olisi jotain lisääntymistä ja missä. Aseta tunnisteet Ja Määritä sivullasi heille src-attribuutti, joka ilmaisee toistolähteen, ja odota, että Internet-selaimet oppivat käsittelemään näitä upeita ohjeita ja toistamaan yleisimpiä formaatteja.

HTML5 lupaa uusia elementtityyppejä , jotka ohjaavat Internet-osoitteen, sähköpostiosoitteen, numeroarvojen, päivämäärän, kellonajan, värin jne. syöttämistä. Jos selaimesi tukee jo kaikkia näitä innovaatioita, näet alta, miten se tekee sen. Jos selain ei tue kaikkia uudentyyppisiä elementtejä, ne, joita se ei vielä osaa käsitellä, näyttävät tavallisilta tekstinsyöttökentiltä.

Elementtien muunnelmat, joilla on erilaiset tyyppiattribuuttiarvot:

Jos osoitearvo ei vastaa muotoa url, sen jälkeen kun olet napsauttanut [vahvista], selain yrittää korjata sen. Jos se ei voi tehdä tätä, se näyttää virheilmoituksen. Jos sähköpostin arvo ei vastaa muotoa sähköposti, klikattuasi [vahvista] selain joko korjaa osoitteen tai ilmoittaa syöttövirheestä.

Numeerisen arvon esitys asteikon muodossa, jossa on kyky osoittaa intervallit matalan normin ja korkean normin alapuolella sekä optimaalisen arvon optimi.

Elementti:

Suoritusprosessin visualisointi. Voit määrittää vain maksimi- ja nykyisen arvon.

Elementin HTML-lähdekoodi

Numero väliltä:

Kokonaisluku:

Päivämäärä ja aika:

Päivämäärä:

Aika:

Kuukausi:

Viikko:

Väri:

url:

sähköposti:

Siirtymistä aiemmin ladatuille sivuille on mahdollista hallita itsenäisesti JavaScriptin ja objektin avulla historia. Esimerkiksi kutsuminen window.history.length palauttaa "historian pituuden", ja kutsuminen window.history.back() , window.history.forward() tai window.history.go(stepCount) suorittaa asianmukaiset siirtymät. Alla pieni esimerkki:

Eteenpäin>

Tämän erinomaisen toiminnon avulla voit tallentaa ja palauttaa istuntotietoja. Täytimme tilauksen, kävimme katsomassa tuotetta, palasimme (linkin avulla) uudelleen täyttämään tilauksen, mutta aiemmin syötetyt tiedot olivat edelleen olemassa. Aikaisemmin tällaisen sivuominaisuuden tarjoaminen oli mahdotonta ilman lisäponnisteluja verkkosovelluksen palvelinpuolella. Nyt on mahdollista tallentaa tietoja verkkoistunnon yhteydessä ( sessionStorage) tai paikallisesti selaimen RAM-muistissa ( paikallinen varasto). sessionStoragen oletetaan sallivan tietojen säilyttämisen niin kauan kuin istunto, jossa se alustettiin, on aktiivinen. Tallennettuun tietoon pääsee käsiksi useilta selaimen lataamilta verkkosivuilta. LocalStorage-vaihtoehdon pitäisi ilmeisesti tallentaa tietoja, kun selain on auki. Koska pääsyn localStorageen pitäisi olla aina saatavilla, vaikka yhteyttä palvelimeen ei olisi, mikä tahansa selaimen avaama sivu voi vastaanottaa tietoja localStoragesta. Istuntotila molemmissa tapauksissa on joukko avain-arvo-pareja, joita käytetään kutsujen xxxStorage.setItem(avain, arvo) ja xxxStorage.getItem(avain) avulla.

Esimerkki: Katso osio elementin sisällön muokkaamisesta uudella attribuutilla tyytyväisiä, joka esiteltiin HTML5:ssä, on. Alle on lisätty kaksi painiketta, joista toinen tallentaa muokatun lohkon sisällön ja toinen palauttaa sen. Napsauta [Tallenna], muokkaa lohkon sisältöä ja napsauta [Palauta]. Jos selaimesi tukee HTML5-toimintoa sessionStorage, sitten lohkon sisältö tyytyväisiä palautetaan.

Palauttaa

Tallenna Palauta

Jos sivusi sisältää elementtejä jotka lataavat muiden sivujen sisältöä: ei vain sivustosi sivuja, vaan myös täysin eri verkkotunnuksen sivuja, niin HTML5-suositusten avulla on mahdollista vaihtaa viestejä tällaisten ikkunoiden kanssa. Viestin lähettävä sivu tekee tämän funktiokutsulla window.postMessage(message, target) ja viestin vastaanottavan sivun tulee sisältää "onmessage"-tapahtumakäsittelijä, jossa sen on jo käsiteltävä viestiteksti event.data, jos se todella on sen vastaanottaja - vastaa arvoa tapahtuma.alkuperä . Ennen tämän mekanismin tuloa ei ollut mahdollista kommunikoida erilaisten Internet-resurssien kanssa asiakaspuolella. Alla on esimerkki yksinkertaisimmasta viestinnän toteutuksesta kahden sivun välillä käyttämällä uutta HTML5-viestimekanismia. Ensi silmäyksellä saattaa tuntua, että esimerkissä ei tapahdu mitään erityistä. Tarkemmin sanottuna ei ole selvää, miksi kaikkea tätä tarvitaan. Itse asiassa viestityksestä voi tulla suosittua luotaessa tietoportaaleja, jotka yhdistävät erilaisia ​​Internet-palveluita yhteen paikkaan. Oletetaan esimerkiksi, että on olemassa tietty Internet-palvelu, jonka palveluita voi käyttää vasta kun on täytetty laaja sähköinen hakemus. Oletetaan myös, että on olemassa asiakas, joka käyttää melko usein tämän palvelun palveluita, mutta hänen pyyntönsä eroavat toisistaan ​​​​vain vähän joka kerta (useimmat parametrit ovat aina samat). Jos tällainen Internet-palvelu tukisi sähköisen hakemuksen täyttölomakkeen lisäksi myös "viestivastaanottajaa" palveluidensa automaattista tilausta varten, sen asiakkaat voisivat "raahaa" tämän palvelun ikkunan sivuilleen (elementtiä käyttämällä), luo niihin omia (itsellesi optimoituja) hakulomakkeita ja toimintoja niiden lähettämiseksi kohdepalveluun viestien muodossa. Suurin osa parametreista generoituisi tässä tapauksessa automaattisesti, esimerkiksi asiakastiedot. Tietysti samanlainen kommunikaatio voidaan toteuttaa asiakkaalta palvelimelle tulevien HTTP-pyyntöjen kautta, joiden otsikossa välitetään tarvittavat parametrit, mutta kannattaa huomioida, että HTML5-sanomamekanismin tapauksessa liikennettä välittäessä on nolla. parametreja, koska kaikki tapahtuu asiakkaan puolella.

Esimerkki viestienvaihdon toteuttamisesta sivujen välillä HTML5:llä.

function init() ( document.getElementById("form").onsubmit = sendMessage; ) function sendMessage() ( var location = window.location; var message = document.getElementById("viesti").arvo; var target = asiakirja. getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host); return false; ) ...

message_source.html:

Viestin teksti

function init() ( if (window.addEventListener) window.addEventListener("viesti", ReceiveMessage, false); else window.attachEvent("onmessage", ReceiveMessage); ) function ReceiveMessage(event) ( document.getElementById("target" ).innerHTML = event.data; document.getElementById("origin").innerHTML = "from " + event.origin; ) ...

messages_target.html:

Nyt määrittämällä contenteditable-attribuutin voit tehdä yksittäisistä merkintäelementeistä muokattavia, esimerkiksi tekstilohkoja, luetteloita jne. Designmode-attribuutin avulla voit tehdä koko sivun muokattavaksi. Tämä toiminto voi olla hyödyllinen palautteen järjestämisessä resurssin omistajan kanssa, esimerkiksi hakemuksen, tilauksen tai muun vastaavan täyttämiseen ja lähettämiseen. Luot lomakkeesta HTML-sivun alkuperäisessä muodossaan ja annat sen käyttäjän täytettäväksi. Täytön jälkeen käyttäjä vahvistaa syöttämät tiedot ja muokattu dokumentti lähetetään palvelimelle. Alla on esimerkki muokattavista merkinnöistä:

Tämän lohkon sisältöä voidaan muokata, koska sille on määritetty attribuutti tyytyväisiä:

Taulukon soluja muokatessa sarakkeiden leveys ja rivien korkeus muuttuvat automaattisesti.

Voit syöttää uuden luettelokohteen painamalla .

• Luettelon kohta 1
• Luettelon kohta 2
• Luettelon kohta 3

Kun uusi kohde on lisätty luetteloon, numerointi päivittyy automaattisesti.

Tukea odotetaan SVG- vektorigrafiikan merkintäkieli perustuu . Grafiikka lisätään merkintään, mikä on loogista, tunnisteen avulla , esimerkiksi näin:

Jos näet alla olevat geometriset muodot, se tarkoittaa, että selaimesi tukee jo svg:tä.

Myös tukea odotetaan MathML- XML-pohjaisten matemaattisten lausekkeiden merkintäkieli. Tässä on esimerkki kaavan merkitsemisestä kolmion sivun pituuden laskemiseksi kosinilauseen avulla:

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

Jos näet kaavan neliöjuuren symbolilla, selaimesi ymmärtää jo MathML:n.

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

Ensinnäkin haluaisin korostaa joukkoa uusia sivun merkintäelementtejä, joita ei ollut nimenomaisesti aiemmin olemassa. Näihin kuuluu tunniste - artikkeli, muistiinpano, uutiset jne.; - artikkelin otsikko tai otsikko - alatunniste tai alatunniste - artikkelin osa tai luku. Miksi tätä tarvitaan, jos sama asia voidaan tehdä elementeillä eri luokat? Tämä on välttämätöntä, jotta merkintäsi merkitys on selvä myös niille, jotka yrittävät analysoida sitä. En puhu tekstiäsi lukevasta henkilöstä (hän ​​ei näe merkintää, kaikki on hänelle selvää ilman sitä), vaan automaattisista järjestelmistä ja ennen kaikkea tämä koskee hakukoneita. Semanttinen kuormitus on erittäin tärkeä hakukoneille, kun ne laskevat sivujesi osuvuuden tietylle hakukyselylle. Tässä yhteydessä elementti ansaitsee erityistä huomiota , koska se on suunniteltu korostamaan sivusi tärkeimpien navigointilinkkien lohko. Ehkä hakukoneet kohtelevat tällaisia ​​linkkejä eri tavalla. Alla on yhteenvetotaulukko uusista HTML5-tageista, jotka lisäävät merkinnöille merkitystä.

Alla on esimerkki HTML-merkinnöistä, joissa käytetään lueteltuja tageja.

HTML5:stä ei ole vielä tullut suositus, ja sen "semanttisten tunnisteiden" käytöstä on kiistaa, kuten esim. Ja jo aika paljon. Kukaan ei vielä oikein tiedä, kuinka ne pitäisi lisätä merkintöihin oikein, mutta uusien HTML5-rakennetunnisteiden käyttöön on olemassa useita vinkkejä, joista on vaikea kiistellä, koska niiden merkitys on ilmeinen. Tässä muutama niistä:

Siinä kaikki minulle hypertekstin merkintäkielen uusista ominaisuuksista, joiden pitäisi ilmestyä HTML5-suosituksen julkaisemisen yhteydessä.

HTML5 on uusin versio pääsivunkuvauskielestä. HTML:ssä ei ole tapahtunut suuria muutoksia viimeisen 10 vuoden aikana, mikä on hieman outoa, kun otetaan huomioon, kuinka nopeasti verkkoteknologia on kehittynyt. Ja lopuksi, HTML5 on järjestetty uudelleen meille, ja tässä artikkelissa kerrotaan, mitä uutta olemme saaneet tähän versioon.

HTML5:llä on vähemmän tiukat säännöt verrattuna aiempaan XHTML:ään, joten nyt voit:

• Sinun ei tarvitse käyttää sulkevia tunnisteita.
• Älä käytä lainausmerkkejä määritteiden arvoissa.
• Käytä isoja merkkejä elementeissä ja määritteissä.

Uudet tunnisteet.
Ja niin uusia tunnisteita ilmestyi HTML5:een.

On myös poissuljettuja tageja, jotka eivät ole enää merkityksellisiä ja joita ei suositella käytettäväksi.