HTML5 – uus põlvkond. HTML 4.01 soovituse avaldamisest (1999) on möödas üle 10 aasta ja seetõttu on oodata palju muudatusi ja täiendusi. HTML5 spetsifikatsioon on praegu veel väljatöötamisel. World Wide Web Consortium ei tööta välja standardeid, vaid annab ainult soovitusi. Kõik algab tööaruteludest, seejärel algatatakse töökavand, seejärel vabastatakse soovituse kandidaat ja alles siis saab täpsustus lõpuks soovitusliku staatuse. Praegu on HTML5-ga töötamine alles mustandi staadiumis. Vaatamata sellele toetab enamik populaarsemaid Interneti-brausereid juba osaliselt HTML5 uuendusi. Enne nendest lühiülevaate tegemist kordan üle, et mitte kõik brauserid ei rakenda seda funktsiooni ja mitte veel täielikult. Täna võime loota, et Opera, Chrome, Firefox, Safari ja Internet Explorer toetavad HTML5 erineval määral.

Mis on HTML5-s uut?

Ja seal on tõesti palju uut. Nüüd on veebiarendajatel mitmeid lisafunktsioone, nagu geomeetriliste kujundite joonistamine veebilõuendile, sisseehitatud pukseerimisvõimalus ning video- ja helifailide esitamine (varem sai seda teha ainult pistikprogrammide, näiteks Adobe Flash Playerina) ja palju muud, millest tuleb juttu veidi hiljem. Alustuseks ütlen paar sõna üldistest HTML-i arengusuundadest.

See osa HTML5 spetsifikatsioonist, mis uute siltide näol silma jääb, on vaid jäämäe tipp. Enamik HTML5 täiustatud funktsioone on saadaval ainult skriptimise programmeerimiskeele abil, mis on kliendipoolse veebiprogrammeerimise aluseks. Kui võtta sama joonistusfunktsioon, mis on realiseeritud sildi abil, siis me ei räägi geomeetriliste kujundite siltide abil "joonistamise märgistusest", nagu võiks eeldada. Lõuendi paigutus lõpeb lõuendi elemendi asetamisega lehele ja kõik. Joonis ise on JavaScripti funktsioon, mis pärast lõuendile juurdepääsu tõmbab sellele kujundeid samamoodi nagu tavalised Windowsi rakendused kuvavad graafikat akendele GDI (Graphics Device Interface) liidese kaudu. Seega seab HTML5 spetsifikatsioon Interneti-brauseritele JavaScriptiga töö rakendamisel üsna tõsiseid nõudeid, mis reguleerivad suures osas programmiliidest () dokumendiobjekti mudeliga (DOM) töötamiseks. See on hea uudis, kuna paljud teavad, et erinevad brauserid saavad objektimudeliga tööd korraldada üksteisest erinevate programmiliideste kaudu. Osaliselt on tarkvaraliidese spetsifikatsioon organisatsiooni teene Veebi hüperteksti rakendustehnoloogia töörühm (WHATWG), mis teeb jõupingutusi mitte ainult märgistuskeele, vaid ka skriptikeeltes (nt JavaScripti) kirjutatud rakendustes kasutatavate API-de standardimiseks. WHATWG osaleb ka W3C arenduses.

Samuti võime järeldada, et HTML5 autorid püüdsid mõnede populaarsete ja nõutud veebiprogrammeerimisülesannete teostamise üle anda Interneti-brauserite endi vastutusele. Näiteks HTML5 abil saab üsna lihtsalt ellu viia veebipoodide kasutajaliidestes nii populaarseks saanud elementide lohistamise funktsionaalsust (toodete ostukorvi valimine). Varem tuli selleks kirjutada JavaScriptis skript, kasutades erinevaid tugiteeke, näiteks . Nüüd on palju lihtsam rakendada pukseerimist, määratledes mitmed täiendavad atribuudid ja lisades vajalike siltide jaoks mõned sündmusekäitlejad. “Drag&drop” korraldamine jQuery abil pole samuti eriti keeruline, kuid HTML5 puhul on meil tegu ühe soovitusega kõikidele Interneti-tarkvara klientidele ning see on täiesti erinev tugi ja brauseriülese ühilduvuse garantii. Selgub, et HTML5 soovitusi toetavad brauserid võimaldavad nüüd seansi seadeid salvestada ja taastada veebiseansi enda kontekstis. Näiteks lehe uuesti laadimisel ei lähe sellele varem sisestatud info kaotsi, vaid see taastatakse praeguse seansi keskkonnast. See on juba serveripoolse veebiprogrammeerimise "territooriumile sisenemine", kuna varem ei saanud seda teha ainult HTML-i ja JavaScripti abil.

Noh, nüüd nimekiri HTML5 kõige tähelepanuväärsematest uuendustest:

Veebilõuendile joonistamine või lõuendi elemendi kasutamine

Nagu juba mainitud, on uue elemendi kasutamisega seotud soovituste põhiosa on spetsifikatsioon tarkvaraliidesele, mis võimaldab sellel kuvada graafikat. Alustuseks pange lehele silt teatud laiuse ja kõrguse, siis pääsete sellele JavaScripti koodis ligi (näiteks id abil) ja hakkate sellele joonistama. Joonistamine taandub joonestiili joonestusstiili järjestikusele määratlemisele, täitmisstiilile fillStyle ja joonistusmeetodite kutsumisele, nagu näiteks moveTo (pliiatsi liigutamine), lineTo (lõigu joonistamine), kaar (kaare joonistamine) jne. Allpool vaadake näidet - lihtsaim tööriist hiirega joonistamiseks. Allpool on selle lähtekood JavaScriptis ja HTML-i märgistuses. Pliiatsiga joonistamiseks vajutage hiire vasakut nuppu ja liigutage kursorit üle lõuendi. Režiimis "Jooned" või "hulknurgad" klõpsake lihtsalt lõuendil järjestikku, näidates sellega polüliinide või alaobjektide tippe.

Lõuendielemendile joonistamise näide

Näide joonistustoimingute rakendamisest elemendil HTML5 abil.

JavaScripti lähtekood

//Praeguse operatsiooni kood var operation=0; //Operatsiooni olek var active=false; //Käivitage graafiline tehte funktsioon startOperation(e) ( if (operation==0) return; if (aktiivne) return; var kontekst = getContext(); context.strokeStyle = getColor("stroke"); kontekst.fillStyle = getColor ( "fill" kontekst.beginPath(); var kontekst = getContext( context.closePath(); ) else ( var kontekst = getContext(); var point = getPoint(e); kontekst.lineTo(punkt.x, punkt.y); kontekst.stroke(); if (operatsioon == 3) kontekst .fill(); ) tagastab tõene = e ||. window.event; if (!active || operatsioon != 1) return = getContext(); var point = getPoint(e); kontekst.joonTo(punkt.x, punkt.y); kontekst.stroke(); tagasta tõene; ) funktsioon getColor(control) ( var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; ) //Canvas element function getCanvas() ( tagastada dokument. getElementById("canvas" ) //Kontekst 2D graafika kuvamiseks lõuendi elemendil funktsiooni getContext() ( return getCanvas().getContext("2d"); ) //Element "selected operation" getSelected() ( return document getElementById("selected"); //Hiire kursori funktsiooni getPoint(e) suhtelised koordinaadid ( var x = event.pageX || event.x; var y = event.pageY || event.y; var rect = getCanvas() .getBoundingClientRect(); operatsioon) ( juhtum 1: ( getSelected().innerText = "Selected: pen"; break; ) juhtum 2: ( getSelected().innerText = "Selected: read"; break; ) juhtum 3: ( getSelected().innerText = "Valitud: hulknurgad"; murda; ) ) )

HTML-i lähtekood

pliiatsi jooned hulknurgad Valitud: joone värv täitevärv

Lohistage elemente

See pole midagi enamat kui brauseri tugi klassikalisele lohistamismudelile, mis on tavalistes GUI rakendustes väga populaarne. Lohitavate elementide jaoks määrake lohistatav atribuut ja elementide jaoks, millele lohistate, sündmuste käitlejad ondragenter , ondragover ja ondorp . See on tegelikult kõik. Näide allpool.

HTML5 pukseerimise näide – "Korvpallikorv"

Näide pukseerimisoperatsioonide (elementide lohistamise) rakendamisest HTML5 abil.

HTML-i lähtekood

HTML5: Drag and Drop html, body ( fondiperekond: Arial font-size: 11px; ) .basket (ääris: 1px solid #777; laius: 105px; kõrgus: 120px; polsterdus: 10px; border-raadius:0 0 10px 10px; taustavärv: #eee; kasti vari: sisestus 0px 5px #777. : parem; .pall (ääris: 1px tahke #FF7F50; laius: 20px; kõrgus: 20px; äärise raadius: 10px; taustavärv: #FF8C00; kasti vari: 0px 0px 5px #777; hõljuk: vasak; veeris: 1px; ) funktsioon startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer.effectAllowed="move"; return true ; ) funktsioon endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) funktsioon drop(e) ( var e = e || window.event; e .target .appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation e.stopPropagation() : e.cancelBubble = true; tagastama vale; ) ...

Video- ja helifailide esitamine

Siin on kõik üsna lihtne, oleks, mida paljundada ja kus. Asetage sildid Ja Määrake oma lehel nende jaoks atribuut src, näidates taasesituse allikat, ja oodake, kuni Interneti-brauserid õpivad neid suurepäraseid juhiseid töötlema ja kõige levinumaid vorminguid esitama.

Uued kohandatud veebivormi elemendid

HTML5 lubab uusi elemenditüüpe , mis kontrollib Interneti-aadressi, e-posti aadressi, arvväärtuste, kuupäeva, kellaaja, värvi jne sisestamist. Kui teie brauser juba toetab kõiki neid uuendusi, siis allpool näete, kuidas see seda teeb. Kui brauser ei toeta kõiki uusi elemenditüüpe, näevad need, millega ta veel ei tea, kuidas töötada, tavaliste tekstisisestusväljadena.

Kasutaja juhtnupud

Erinevate tüübiatribuutide väärtustega elementide variandid:

Kui aadressi väärtus ei vasta vormingule url, siis pärast [kinnita] klõpsamist proovib brauser seda parandada. Kui see ei saa seda teha, kuvab see veateate. Kui meili väärtus ei vasta vormingule meili, siis pärast [kinnita] klõpsamist parandab brauser aadressi või teatab sisestusveast.

Arvväärtuste visualiseerimine

Arvväärtuse esitamine skaala kujul, millel on võimalus näidata intervalle alla madala ja kõrge normi, samuti optimaalse väärtuse optimumi.

Element:

Täitmisprotsessi visualiseerimine. Saate määrata ainult maksimaalse max ja praeguse väärtuse.

HTML-i lähtekoodi element

Number intervallist:

Täisarv:

Päev ja aeg:

Kuupäev:

Aeg:

Kuu:

Nädal:

Värv:

url:

email:

Sirvimisajaloo haldamine

Varem laaditud lehtedele üleminekut saab iseseisvalt hallata JavaScripti ja objekti abil ajalugu. Näiteks akna window.history.length kutsumine tagastab "ajaloo pikkuse" ja kutsumine window.history.back() , window.history.forward() või window.history.go(stepCount) viib läbi vastavad üleminekud. Allpool on väike näide:

Edasi>

Seansi oleku salvestamine

See suurepärane funktsioon võimaldab teil salvestada ja taastada seansi andmeid. Täitsime tellimuse, käisime toodet vaatamas, pöördusime tagasi (lingi abil) uuesti tellimust täitma, kuid eelnevalt sisestatud andmed olid alles. Varem ei saanud sellise lehe atribuudi pakkumiseks hakkama ilma täiendavate pingutusteta veebirakenduse serveri poolel. Nüüd on võimalik andmeid salvestada veebiseansi kontekstis ( sessionSalvestus) või lokaalselt brauseri RAM-is ( kohalik salvestusruum). SessioonStorage peaks võimaldama andmete salvestamist seni, kuni seanss, milles need initsialiseeriti, on aktiivne. Salvestatud andmetele pääseb juurde erinevatelt brauseri poolt laaditud veebilehtedelt. LocalStorage'i valik peaks ilmselt salvestama andmeid, kui brauser ise on avatud. Kuna juurdepääs localStorage'ile peaks olema alati saadaval, isegi kui serveriga pole ühendust, saavad kõik brauseri poolt avatud leheküljed kohalikult salvestuselt andmeid vastu võtta. Mõlemal juhul on seansi olek võtme-väärtuste paaride kogum, millele pääseb juurde väljakutsetega xxxStorage.setItem(võti, väärtus) ja xxxStorage.getItem(key) .

Näide: Vaadake jaotist elemendi sisu redigeerimise kohta uue atribuudi abil rahulolev, mis on kasutusele võetud HTML5-s, on. Allpool on lisatud kaks nuppu, millest üks salvestab redigeeritud ploki sisu ja teine ​​taastab selle. Klõpsake [Salvesta], muutke ploki sisu ja klõpsake nuppu [Restore]. Kui teie brauser toetab HTML5-funktsiooni sessionSalvestus, seejärel ploki sisu rahulolev taastatakse.

Taastama

Salvesta Taasta

Vahetage sõnumeid lehtede vahel

Kui teie leht sisaldab elemente mis laadivad teiste lehtede sisu: mitte ainult teie saidi lehti, vaid ka täiesti erineva domeeni lehti, siis on HTML5 soovituste rakendamisega võimalik selliste akendega sõnumeid vahetada. Sõnumi saatv leht teeb seda funktsiooni window.postMessage(message, target) abil ja sõnumit vastuvõttev leht peab sisaldama sündmuste töötlejat "onmessage", kus ta peab juba töötlema sõnumiteksti event.data, kui see on tõesti nii. selle saaja – vastab väärtusele sündmus.päritolu . Enne selle mehhanismi tulekut ei olnud võimalik suhelda erinevate Interneti-ressurssidega kliendi poolel. Allpool on toodud näide kahe lehe vahelise suhtluse kõige lihtsamast rakendamisest, kasutades uut HTML5 sõnumimehhanismi. Esmapilgul võib tunduda, et näites ei toimu midagi erilist. Täpsemalt jääb arusaamatuks, milleks seda kõike vaja on. Tegelikult võib sõnumside saada populaarseks, kui luuakse erinevaid internetiteenuseid ühte kohta koondavaid infoportaale. Oletame näiteks, et on olemas teatud Interneti-teenus, mille teenuseid saab kasutada alles pärast mahuka elektroonilise avalduse täitmist. Samuti oletame, et mõni klient kasutab selle teenuse teenuseid üsna sageli, kuid tema taotlused erinevad üksteisest iga kord vähe (enamik parameetreid on alati samad). Kui selline Interneti-teenus lisaks taotluse täitmise elektroonilisele vormile toetaks ka "sõnumi vastuvõtjat" oma teenuste automaatseks tellimuse esitamiseks, saaksid selle kliendid selle teenuse akna "lohistada" nende lehtedel (kasutades elementi ), looge sinna oma (enda jaoks optimeeritud) taotlusvormid ja funktsioonid nende sõnumite kujul sihtteenusele saatmiseks. Enamik parameetreid genereeritakse sel juhul automaatselt, näiteks kliendi andmed. Loomulikult saab sarnast suhtlust realiseerida ka HTTP päringute kaudu kliendilt serverisse, mille päises edastatakse vajalikud parameetrid, kuid tasub tähele panna, et HTML5 sõnumimehhanismi puhul on edastamisel liiklus null parameetrid, kuna kõik toimub kliendi poolel.

Näide kahest sõnumeid vahetavast lehest

Näide lehtedevahelise sõnumivahetuse rakendamisest HTML5 abil.

Sõnumi lähtelehe lähtekood

function init() ( document.getElementById("vorm").onsubmit = sendMessage; ) function sendMessage() ( var asukoht = aken.koht; var sõnum = document.getElementById("sõnum").väärtus; var target = dokument. getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host) ...

message_source.html:

messages_target.html laadimine ebaõnnestus!

Sõnumi tekst

Sõnumi vastuvõtja lehe lähtekood

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

messages_target.html:

Ootan sõnumit... saatjalt...

Elemendi sisu redigeerimine

Nüüd saate atribuudi contenteditable defineerimisega muuta redigeeritavaks üksikud märgistuselemendid, näiteks tekstiplokid, loendid jne. Atribuudi designmode abil saate muuta kogu lehe redigeeritavaks. See funktsioon võib olla kasulik ressursi omanikuga tagasiside korraldamisel, näiteks avalduse, tellimuse või muu taolise täitmiseks ja saatmiseks. Loote vormi HTML-lehe algsel kujul ja annate selle kasutajale täitmiseks. Pärast täitmist kinnitab kasutaja sisestatud andmed ning redigeeritud dokument saadetakse serverisse. Redigeeritava märgistuse näide on näidatud allpool:

Selle ploki sisu saab redigeerida, kuna selle jaoks on määratud atribuut rahulolev:

Tabeli lahtrite redigeerimisel muutuvad veergude laius ja joonte kõrgus automaatselt.

Uue loendielemendi sisestamiseks vajutage .

• Loendi üksus 1
• Loendi punkt 2
• Loendi punkt 3

Pärast uue üksuse lisamist loendisse uuendatakse numeratsiooni automaatselt.

Nummerdatud loendi punkt 1

Nummerdatud loendi punkt 2

Nummerdatud loendi punkt 3

Vektorgraafika

Oodatakse toetust SVG- vektorgraafika märgistuskeel, mis põhineb . Graafika lisatakse märgendisse, mis on loogiline, kasutades silti , näiteks nii:

Kui näete allolevaid geomeetrilisi kujundeid, tähendab see, et teie brauser toetab juba svg-d.

Matemaatilised avaldised

Oodatud on ka toetust MathML- XML-il põhinevate matemaatiliste avaldiste märgistuskeel. Siin on näide kolmnurga külje pikkuse arvutamise valemi märkimisest koosinusteoreemi abil:

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

Kui näete ruutjuure sümboliga valemit, mõistab teie brauser juba MathML-i.

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

Muud märgistuselemendid

Kõigepealt tahaksin esile tuua rühma uusi lehe märgistuselemente, mida varem selgesõnaliselt ei eksisteerinud. Nende hulka kuulub silt - artikkel, märkus, uudis jne; - artikli pealkiri või päis - jalus või jalus - artikli jaotis või peatükk. Miks seda vaja on, kui sama asja saab teha elemente kasutades erinevad klassid? See on vajalik, et teie märgistuse tähendus oleks selge ka neile, kes seda analüüsida üritavad. Ma ei räägi inimesest, kes teie teksti loeb (ta ei näe märgistust, ilma selleta on talle kõik selge), vaid automatiseeritud süsteemidest ja ennekõike kehtib see otsingumootorite kohta. Semantiline koormus on otsingumootorite jaoks väga oluline teie lehtede asjakohasuse arvutamisel konkreetse otsingupäringuga. See element väärib selles kontekstis erilist tähelepanu , kuna see on mõeldud teie lehe peamiste navigeerimislinkidega ploki esiletõstmiseks. Võib-olla kohtlevad otsingumootorid selliseid linke erinevalt. Allpool on kokkuvõtlik tabel uutest HTML5-märgenditest, mis lisavad märgistusele tähenduse.

Silt Lühikirjeldus

	Artikkel, uudis, märkus, kommentaar või mis tahes muud tüüpi üksikväljaanne. Tag artiklitühendab ühe teema või probleemiga seotud teabe. Üks element artiklit võib sisaldada muid elemente artiklit(näide allpool).
	Märkus, kõrvalepõige. Tag kõrvale saab kasutada ka selliste tekstiosade esiletõstmiseks, mis ei ole seotud lehe põhisisuga, näiteks reklaamide paigutamiseks.
	Üksikasjaliku teabe plokk, mida saab soovi korral laiendada.
	Joonise allkiri. Tag pildiallkiri kasutatakse sildi sees kujund.
	Allkirjaga joonistamine. See element peab sisaldama pilti img ja allkiri pildiallkiri.
	Jalus. Tag jalus see on mõistlik paigutada ka sildi sisse artiklit artikli või märkuse autori märkimiseks.
	Lehekülje pealkiri või artikli sissejuhatus. Sildi sisse asetatuna artiklit märgistada päis Saate lisada pealkirja, väljaande lühikirjelduse ja lingid seotud materjalidele.
	Pealkirjade rühmitamine h1 - h6 mitmetasandilisse päisesse.
	Mark. Tag mark Seda on mõttekas kasutada, kui on vaja osa tekstist erineva stiiliga esile tõsta ja sellele dokumendis teisest kohast viidata.
	Navigeerimislinkide blokeerimine.
	Lehekülje jaotis, artikli peatükk. Artikli sisse asetamisel (silt artiklit) võib tõlgendada omaette peatükina.

Allpool on näide HTML-i märgistusest, kasutades loetletud silte.

HTML5 ei ole veel soovituslikuks muutunud ja selle semantiliste siltide kasutamise üle on vaidlusi, näiteks Ja juba päris palju. Keegi ei tea veel, kuidas neid õigesti märgistusse sisestada, kuid uute HTML5 struktuurimärgendite kasutamiseks on mitmeid näpunäiteid, millele on raske vastu vaielda, kuna nende tähendus on ilmne. Siin on mõned neist:

Ärge kasutage silti päis lihtsalt selleks, et panna sinna üks pealkirjasilt h1 - h6 nii nagu pole vaja pealkirja siltide sisse midagi muud peale pealkirjade teksti toppida. Te ei tohiks seda teha: saidi nimi

Ärge kasutage silti hgrupp luua ühest elemendist pealkirjade rühmi. Iga üksik element alates h1 enne h6 ja nii pealkiri ise. Siin on näide, mida mitte teha: Saidi nimi

Elemente pole vaja lisada osa muude elementide sees, kui need sisaldavad nende elementide kogu põhisisu. Ülaltoodud näites pole iga kommentaari sees eraldi plokke osa kommentaari teksti enda esiletõstmiseks. Siin on näide lisaelemendist osa :

Kommentaari tekst

Avaldatud...

Elemendi tähendust pole vaja mõista artiklit sõna otseses mõttes. See pole mitte ainult artikkel, vaid ka tervikliku mõtte esitusviis. Just sel põhjusel on ka varem toodud näites artikli kommentaarid eraldatud eraldi plokkidesse artiklit.

Kasutage HTML5 struktuurimärgendeid ainult siis, kui arvate, et need aitavad otsingumootoritel teie märgistuse semantika kohta rohkem teada saada. Kui sildil ei ole eraldi tähendust, vaid see lisatakse ainult "ilu jaoks", on selle lisamise tulemuseks teie lehe "lisakaal", mis, nagu teada, on lehe "tervisele kahjulik". saidile.

See on minu jaoks kõik hüperteksti märgistuskeele uute funktsioonide kohta, mis peaksid ilmuma koos HTML5 soovituse avaldamisega.

HTML5 väljalaskmisega on HTML-ile lisatud palju uusi funktsioone. Veelgi parem on see, et mõned brauserid juba toetavad mõnda neist funktsioonidest, samas kui teised liiguvad endiselt selle poole. Sellel lehel saate jälgida nende funktsioonide lisamist brauseritele.

1. Uus Doctype ja Charset.

Üks HTML5 eeliseid on selle lihtsus.

Jah, see on kõik. Sõna otseses mõttes kaks sõna. See lihtsus on ilmselt tingitud asjaolust, et HTML5 seisab pigem iseseisvana kui jääb SGML-i osaks.

Charset on samuti väga lihtne, see kasutab utf-8 ja määratakse samamoodi, sõna otseses mõttes ühe sildi abil:

2. Uus struktuur

HTML5 mõistab, et veebilehel on struktuur, täpselt nagu näiteks raamatul. Tavaliselt on selleks navigeerimine, sisu ise, külgmenüü (küljeriba) ja päis. Ja HTML5 pakub kõigi nende elementide jaoks silte.

• – määrab lehe osad
• – määrab lehe pealkirja
• – määrab lehe jaluse
• – määrab lehel navigeerimise
• – määratleb lehe artikli või põhisisu
• – määratleb täiendava sisu, lehe külgriba
• – määratleb artikli pildi, annotatsiooni

3. Uued sisseehitatud elemendid.

Need uued elemendid määratlevad mõned põhimõisted ja esindavad leheelemente:

• – sisu märkimiseks
• – kellaaja või kuupäeva näitamiseks
• – teatud mõõtmete, näiteks kettaruumi näitamiseks
• – näidata oma edu ja edusamme

4. Uus dünaamiliste lehtede tugi

HTML 5 loodi veebiarendajate ülesannete lihtsustamiseks, mistõttu on dünaamiliste lehtede toetamiseks palju uusi funktsioone.

• Kontekstimenüü – HTML 5 toetab kontekstimenüüde loomist ja kasutamist veebilehtedel ja rakendustes
• asünkroonne atribuut – see silt ütleb brauserile, et skript tuleks laadida asünkroonselt, et see ei aeglustaks ülejäänud lehe laadimist ja renderdamist.
• – sisaldab üksikasjalikku teavet elemendi kohta.
• – loob tabeli, mis luuakse andmebaasist või muust dünaamilise lehe allikast
• – vanad sildid on tagasi, võimaldades luua oma veebilehtedele menüüsüsteeme
• – määratleb toimingud, mis peaksid toimuma dünaamilise elemendi aktiveerimisel

5. Uut tüüpi vormid

HTML5 toetab kõiki vanu vormitüüpe, kuid lisatud on ka uusi:

• kuupäev Kellaaeg
• datetime-local
• kuu
• number
• ulatus
• meili

6. Uued elemendid

HTML5-s on mõned uued elemendid:

• – element, mis võimaldab veebilehtedel kasutada JavaScripti. See võimaldab teil lisada tööriistaspikritesse pilte või graafikat või lihtsalt luua lehel dünaamilist graafikat.
• – lisab veebilehele video.
• – lisab veebilehele heli.

7. Kustutatud üksused

Samuti on HTML4 elemente, mida HTML5-s enam kasutada ei saa. Enamik neist on ammu aegunud, nii et sellised toimingud pole üllatavad.

Autorilt: HTML 5 standardi väljaandmine 2 aastat tagasi tekitas arendajate kogukonnas segaduse. Mitte ainult sellepärast, et spetsifikatsioonis oli palju uusi atribuute, vaid ka seetõttu, et see oli esimene suurem HTML-i uuendus pärast HTML 4.01, mis ilmus 1999. aastal. Internetist leiate endiselt saite, mis uhkeldavad, et nad kasutavad "kaasaegset" HTML5 standardit.

Meie õnneks ei pidanud me seekord uue põlvkonna HTML-i nii kaua ootama. 2015. aasta oktoobris alustas W3C HTML 5.1 mustandi väljatöötamist, mis pidi lahendama mitmeid HTML5-s lahtiseks jäänud probleeme. Üle pika aja jõudis spetsifikatsioon 2016. aasta juunis kandidaadi staatusesse, 2016. aasta septembris kandidaadi staatusesse ja lõpuks W3C soovituse staatusesse novembris 2016. Need, kes arendust järgisid, võisid märgata, et tee oli okkaline. Paljud HTML 5.1 põhifunktsioonid lükati kehva disaini ja brauseri toe puudumise tõttu tagasi.

HTML 5.1 on endiselt arendamisel ja W3C on alustanud tööd HTML 5.2 mustandi kallal, mis peaks ilmuma 2017. aasta lõpus. Selles artiklis vaatleme paari huvitavat uut funktsiooni ja versiooni täiustust 5.1. Nende atribuutide tugi on endiselt kehv, kuid me ütleme teile, millistes brauserites saate vähemalt näiteid proovida.

Kontekstimenüü menüü ja menüüüksuste siltide abil

5.1 mustand tutvustab kahte tüüpi menüüelemente: konteksti ja tööriistariba. Esimest kasutatakse natiivse kontekstimenüü laiendamiseks, mis kuvatakse tavaliselt lehel paremklõpsuga. Teine määratleb lihtsad menüükomponendid. Arendusprotsessi käigus loobuti tööriistaribast, kontekstimärgend on endiselt olemas.

Menüümärgendi abil saate luua menüü ühe või mitme menüüelemendi sildistusega ja määrata need sildid kontekstimenüü atribuudi abil mis tahes elementidele. Menüüüksuse silt võib olla kolme tüüpi:

märkeruut – võimaldab valida või tühistada;

käsk – võimaldab klõpsuga toimingu sooritada;

raadio – võimaldab valida rühmast ühe valiku.

Tavaline kasutusjuhtum, töötab Firefox 49-s, Chrome 54-s puudub tugi.

Toetatud brauserites peaks kontekstimenüü välja nägema järgmine:

üksikasjad ja kokkuvõtlikud elemendid

Üksikasjad ja kokkuvõtlikud sildid võimaldavad teil klõpsamisel kuvada ja peita plokke koos lisateabega. Tavaliselt tehakse seda JS-is, kuid nüüd saab seda teha üksikasjade ja kokkuvõtlike siltide abil. Kokkuvõttesildil klõpsates avaneb üksikasjade sildi sisu.

Allolevat näidet testiti Firefoxis ja Chrome'is.

Toetatud brauserites näeb demo välja järgmine:

Täiendavad sisestusvälja tüübid on kuu, nädal ja datetime-local

Sisestusväljade arsenal on täienenud kolme uue tüübiga: kuu, nädal ja datetime-local.

Esimesed kaks tüüpi võimaldavad teil valida nädala ja kuu. Chrome'is kuvatakse mõlemad need tüübid ripploendikalendritena, kus saate valida kuu või nädala. JS-ist juurdepääsu korral näeb string välja umbes selline: "2016-W43" on nädal ja "2016-10" kuu.

Esialgu tutvustas mustand 5.1 kahte kuupäeva ja kellaaja sisendit: datetime ja datetime-local. Nende erinevus seisneb selles, et datetime-local valib alati kellaaja kasutaja ajavööndis, datetime aga võimaldab ajavööndit muuta. Arenduse käigus loobuti kuupäeva ja kellaaja tüübist, jättes alles ainult datetime-local. Tüüpi datetime-local väli koosneb kahest osast: kuupäevast, mida saab valida samamoodi nagu väljadel tüüp nädal ja kuu, ja kellaajast, mida saab eraldi määrata.

Allolev CodePeni demo näitab kõigi tüüpide näiteid. Töötab Chrome'is, Firefoxis pole veel tuge:

Demot toetavates brauserites näeb see välja järgmine:

Reageerivad pildid

HTML 5.1 tutvustab mitmeid uusi funktsioone reageerivate piltidega töötamiseks ilma CSS-ita. Igal funktsioonil on oma kasutusnäited.

Pildi atribuut srcset

Atribuut srcset image võimaldab registreerida mitu erineva pikslitihedusega lisapilti. Nii saab brauser laadida kasutaja seadme jaoks vajaliku kvaliteediga pilte (lähtudes seadme pikslitihedusest, suumitasemest ja võrgu kiirusest). Näiteks väikeste telefonide või aeglase võrguga kasutajatele saate näidata madala eraldusvõimega pilte.

Atribuut srcset aktsepteerib komadega eraldatud piltide URL-ide loendit koos X-muutjaga. Modifikaatorid kirjeldavad iga pildi jaoks sobivat pikslite suhet (füüsiliste pikslite arv CSS-piksli kohta). Lihtne näide:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 1x, Images/high-res.jpg 2x, Pildid/ultra-high-res.jpg 3x"

Kui pikslite suhe on 1, näidatakse madala eraldusvõimega pilti, 2 puhul kõrge eraldusvõimega, 3 puhul ülikõrge eraldusvõimega pilti. Pikslisuhte asemel saate näidata erineva suurusega pilte. Selleks peate kasutama w modifikaatorit:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

Sel juhul on madala eraldusvõimega pilt laiusega 600 pikslit, kõrge eraldusvõime jaoks 1000 pikslit ja ülikõrge eraldusvõime jaoks 1400 pikslit.

suurused pildi atribuut

Sõltuvalt ekraani suurusest võite soovida pilte kuvada erineval viisil. Näiteks saate laiekraanidel pilte kuvada kahes veerus, kitsastel ekraanidel aga ühes veerus. Suuruste atribuut aitab teid selles. Atribuut võimaldab tõlkida ekraani laiuse pildile eraldatud ruumi, misjärel valitakse sobiv pilt atribuudi srcset abil. Näide:

< img src = "images/low-res.jpg" sizes = "(max-width: 40em) 100vw, 50vw" srcset = "images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

Kui brauseriakna laius on suurem kui 40 em, määrab atribuut sizes pildi laiuseks 50% akna laiusest. Kui akna laius on väiksem või võrdne 40 em, on pildi laius 100%.

Pildi silt

Ei piisa lihtsalt piltide suuruse muutmisest, et need sobiksid erinevatele ekraanidele. Teil on vaja võimalust näidata täiesti erinevaid pilte. Pildimärgis aitab teid selles. See silt võimaldab teil registreerida mitu pilti erinevatele ekraanidele. Selleks tuleb mähkida img silt pildi sisse ja määrata täiendavad allikasildid. Allikasildid sisaldavad linke piltidele.

< picture > < source media = "(max-width: 20em)" srcset = " Images/small/low-res.jpg 1x, > < / picture >

Vormi kinnitamine vormi.reportValidity() abil

HTML5 sisaldab meetodit form.checkValidity(), mida saab kasutada vormiväljade kontrollimiseks validaatoritega. Tulemuseks on Boole'i ​​väärtus. Uus meetod reportValidity() töötab sarnaselt. Selle abiga saate vormi kinnitada ja tulemuse tagastada. Lisaks näitab see meetod kasutajale vigu otse brauseris. Allolev CodePeni demo näitab tulemust (testitud Firefoxis ja Chrome'is):

Eesnime väli peab olema esile tõstetud ja ei tohi olla tühi. Tavaliselt töötab see järgmiselt:

Atribuut enablefulscreen raamidele

Uus Boole'i ​​atribuut raamide jaoks, enablefullscreen, võimaldab teil muuta sisu kuvamist, kasutades meetodit requestFullscreen(). Selle abil saate sisu täisekraanile laiendada.

Õigekirjakontroll element.forceSpellCheck() abil

Uus meetod element.forceSpellCheck() võimaldab lubada tekstielementide õigekirjakontrolli. See on ka esimene funktsioon, mida ükski brauser veel ei toeta. Puhtteoreetiliselt saab seda meetodit kasutada mitteredigeeritavate elementide õigekirja kontrollimiseks.

Funktsioonid, mida ei rakendatud

Mõned spetsifikatsiooni varajastes mustandites kirjutatud funktsioonid eemaldati lõpuks peamiselt brauseri arendajate vähese huvi tõttu. Siin on mõned huvitavad funktsioonid:

inertne atribuut

Inertne atribuut pidi keelama kasutaja interaktsiooni kõigi alamelementide puhul. Sama, mis keelatud atribuudi lisamine kõikidele elementidele käsitsi.

Sildi dialoog

Dialoogisildi abil oli võimalik luua hüpikaknaid. Mõeldi isegi läbi mugav integratsioonivorm. Dialoogisildi meetod atribuut takistas vormi esitamist serverile, silt tagastas dialoogi loojale väärtuse.

Märgendit toetab endiselt Firefox, näide selle toimimisest:

Täiendavad lingid

See pole kaugeltki täielik loetelu HTML 5.1 muudatustest. Spetsifikatsioon sisaldab palju väikeseid funktsioone ja muudatusi, mis võeti vastu elustandardis, ning paljusid funktsioone, mis eemaldati. Muudatuste täieliku loendi leiate spetsifikatsiooni jaotisest Muudatused. Seniks aga loodame, et brauseri arendajad võtavad uued funktsioonid kiiresti kasutusele!

Mis teile HTML 5.1 juures kõige rohkem meeldis? Kirjuta kommentaaridesse!

Toimetaja: Pavels Jelisejevs

1. veebruar 2008, kell 23:51 Mida uut on HTML 5.0-s? 1. osa

• Veebilehe arendus

• Tõlge

Veebitehnoloogiad arenevad pidevalt. Iga päev luuakse uusi saite, mis laiendavad HTML-i võimalusi. HTML 4 on olnud kasutusel peaaegu kümme aastat, kuid kirjastajad otsivad uusi viise vormingu funktsionaalsuse laiendamiseks. Keelte ja brauserite mitmekesisus piirab aga mõningaid selle võimalusi.

Et anda arendajatele paindlikum, koostalitlusvõimelisem toode, mis muudab projektid interaktiivsemaks ja huvitavamaks, tutvustab ja laiendab HTML 5 mitmesuguseid funktsioone, sealhulgas vormide juhtelemente, API-sid, multimeediumit, struktuuri ja semantikat.

Töö HTML 5 kallal algas 2004. aastal. Praegu tehakse arendusi W3C HTML WG ja WHATWG ühistöö raames. Arendusega tegelevad paljud tuntud ettevõtted, sealhulgas: Apple, Mozilla, Opera ja Microsoft ning mitmed teised erineva huvide ja taustaga organisatsioonid ja üksikisikud.

Pange tähele, et spetsifikatsioon on alles väljatöötamisel ja pole kaugeltki täielik. Seetõttu on võimalik, et selles artiklis mainitud funktsioonid võivad tulevikus muutuda. See artikkel on mõeldud HTML-i versiooni 5 uute funktsioonide kirjeldamiseks.

Struktuur

HTML 5 tutvustab tervet hulka uusi elemente, mis muudavad lehe struktuuri palju lihtsamaks. Enamik HTML4 lehti sisaldab mitmeid levinud struktuure, nagu päised ja jalused ning veerud, ning tänapäeval on saamas traditsiooniks nende esiletõstmine div elementide abil, määrates sellele klassi või id.


Joonisel on kujutatud tüüpiline 2-veeruline paigutus, mis kasutab div elemente, määrates neile klassi või ID. Struktuur sisaldab lehe päist, jalust, navigeerimismenüüd ja sisu, mis on jagatud 2 veergu -

Div-elementide kasutamine on eelistatud, kuna praegusel HTML 4 versioonil puudub semantika nende osade täpsemaks kirjeldamiseks. HTML 5 lahendab selle probleemi, lisades uusi elemente, millest igaühel on oma eraldi nimi.

Dokumendi kood näeb välja selline:

...
...
...

...
...

Nende elementide kasutamisel on mitmeid eeliseid. Kui seda kasutatakse koos elementide pealkirjadega (h1 - h6), võimaldab see lisada igale tasemele pealkirjaga alamjaotise, erinevalt HTML-i eelmise versiooni võimalikust kuuest tasemest. Spetsifikatsioon sisaldab üksikasjalikku piiride genereerimise algoritmi. Neid elemente saab kasutada autori- ja brauseri tööriistadena, et luua sisukord ja aidata kasutajatel dokumendis navigeerida.

Näiteks järgmine struktuur on jagatud pesastatud h1 elementidega tasemeteks:

1. tase 2. tase 3. tase
Pange tähele, et erinevate brauseritega maksimaalse ühilduvuse tagamiseks võite kasutada erinevaid pealkirjatasemeid, näiteks h2, h3 jne.

Määrates lehe jaotiste eesmärgi konkreetsete jaotise elementide abil, võib see tehnoloogia aidata kasutajal lehel hõlpsamini navigeerida. Näiteks saab kasutaja hõlpsasti navigeerida menüüjaotisesse või liikuda kiiresti ühest artiklist teise, ilma et arendaja peaks sellist hüppelinki looma. Samuti võivad arendajad rõõmustada, sest asendades div elemendid vastavate elementidega, on lähtekood lihtsam ja puhtam.

Päise element tähistab lehe pealkirja. See jaotis võib sisaldada mitte ainult pealkirja ennast, vaid ka alampealkirju, mis aitavad kasutajal lehe sisust rohkem aru saada.

HTML 5 eelvaade, autor Lachlan HuntExample BlogSisesta siia sildirida.
Element "jalus" tähistab lehe "jalust". See lehe osa sisaldab tavaliselt linki autoriõigustele, loenduritele jne.

Element „nav” – määrab saidi navigeerimise jaotise:

Element "kõrvale" määratleb lehe sisuga kaudselt seotud jaotise, mida kasutatakse enamasti manusena.
Mis on HTML5-s uut? Erinevused HTML5 ja HTML 4 vahel

HTML5 spetsifikatsioon toob endaga kaasa palju erineva tasemega ja erineva tähtsusega muudatusi. Põhimõtteliselt saab peamised muudatused jagada 7 plokki:

a) Semantika (keeleüksuste semantiline tähendus)

HTML5 tutvustab mitmeid uusi semantilisi silte, mis võimaldavad sisukamalt korraldada veebilehtede sisemist struktuuri. See hõlmab nii plokkmärgendeid (nt päis, jalus, artikkel) kui ka tekstimärgistusmärgendeid (nt mark, ruby, üksikasjad). Mitmed olemasolevad HTML4 sildid on kuulutatud aegunuks, üksikud sildid on muutnud oma tähendust ja atribuudid on läbinud teatud muudatused.

b) Multimeedia

HTML5 lisab multimeediumisisu (heli ja video) loomuliku toe otse HMTL-i märgistusele – koos sellega seotud API-ga haldamiseks.

c) Graafika

Kliendipoolne graafikaga töötamine on muutunud märgatavalt lihtsamaks. HTML5-sse on lisatud lõuendi element ja spetsiaalne JavaScripti API sellega töötamiseks. Lõuend on dünaamiline "pind", millele saate programmiliselt joonistada. HTML5 sisaldab ametlikult ka svg tagi, mis võimaldab realiseerida vastava veebistandardi SVG (Scalable Vector Graphics) poolt kirjeldatud vektorgraafikat.

d) Veebivormid

Uued veebivormi elemendid: tüübid ja atribuudid, mis võimaldavad teil laiendada traditsiooniliste vormide võimalusi sisseehitatud tööriistadega ilma täiendavaid teeke kasutamata - alates vihjetest sisestusväljal (kohahoidja) ja sisestatud väärtuste valideerimisest kuni spetsiaalsete elementideni kuupäevade ja värvide sisestamine.

e) JavaScripti API-d.

HTML5 sisaldab uusi võimalusi objektide teisaldamiseks (Drag & Drop), üleminekute ajalooga töötamiseks (History API), aga ka mitmeid pisiasju, näiteks võimalust muuta sisu redigeeritavaks sisu redigeeritavate atribuutide abil otse praeguses asukohas. .

e) Uus DOCTYPE

Märgend DOCTYPE on standarditele väidetavalt vastavate veebilehtede põhikomponent: ilma selleta ei lähe kood validaatorist läbi. DOCTYPE on oluline ka lehe kuvamiseks ja korrektseks toimimiseks standarditele vastavates brauserites.

HTML 4-s oli kolme tüüpi elemente:

• 1. Range
• 2. Üleminek
• 3. Raamidega (Frameset)

Tihti oli ühe või teise DOCTYPE elemendi valimine üsna keeruline. HTML5 DOCTYPE-is on ainult üks, see on kirjutatud järgmiselt:

See lühike kirje asendab vanema, pikema vormi:

g) Süntaks

HTML 5-l on kaks süntaksit – "kohandatud" HTML ja XML. HTML-i süntaks määratleb üksikasjalikud sõelumisreeglid (sh "tõrkekäsitlus").

XML-i süntaks ühildub XHTML1 dokumentide ja selle rakendustega. Selle süntaksi kasutamiseks tuleb XML-i tüübina deklareerida tüüp MIME (Multipurpose Internet Mail Extensions) ja elemendid tuleb konstrueerida vastavalt XML-i spetsifikatsioonile.

Joonis 2 – HTML5 põhiomadused