Upotreba HTML5. HTML5 jednostavnim riječima

Ovdje slijedi vaš tekst koji želite podijeliti u 3 kolone:

Objasnite model CSS kutije

blok css model je pravougaoni prostor oko HTML elementa koji definira granice, margine i padding.

Granice - Odredite maksimalnu površinu koju će element sadržavati. Granicu možemo učiniti vidljivom, nevidljivom, postaviti visinu i širinu elementa, itd. Margine - definiraju udaljenost između ivica i elementa.

Padding - definira udaljenost između granica i susjednih elemenata.

Kao primjer, ispod je jednostavan css kod koji definira blok i vrijednosti za granice, margine i padding:

Dakle, ako primijenimo ovaj CSS kod na div element dat u sljedećem bloku koda, rezultat će biti kao što je prikazano na slici ispod. Dodao sam elemente "Neki tekst" i "Neki drugi tekst" da prikažem svojstvo "margina".

Neki drugi tekst

Recite mi o nekim tekstualnim efektima u CSS 3

Ovdje anketar očekuje da govorite o jednom od dva efekta uvedena u CSS 3.

Oba efekta su prikazana u nastavku:

Efekat senke teksta

Specijalni tekst (sjena teksta: 5px 5px 5px #FF0000; )

Efekat prekida riječi:

Šta su web radnici i zašto su potrebni?

Uzmite u obzir sljedeće "teške" za petlju, koji se izvršava milijardu puta:

funkcija SomeHeavyFunction() ( za (i = 0; i< 1000000000; i++) { x = i + x; } }

Recimo da se ovaj kod izvršava kada se klikne na dugme. HTML forme. Izvršenje ove funkcije je sinhrono. Drugim riječima, pretraživač će čekati da se petlja završi.

Kao rezultat, ovo može dovesti do zamrzavanja pretraživača i poruke o grešci, kao što je prikazano na donjoj slici:

Dakle, kada bismo ovu tešku petlju mogli staviti u JavaScript datoteku i pokrenuti je asinhrono, onda pretraživač ne bi morao čekati da se završi i imali bismo aplikaciju koja bolje reagira.

Za to je i namijenjeno web tehnologija Workers , što omogućava da se JavaScript datoteke izvršavaju asinhrono.

Koja su ograničenja na niti Web Worker?

Web radnici ne mogu mijenjati HTML elementi, globalne varijable i neka svojstva prozora kao što je window.location . Možete koristiti tipove javascript podaci, XMLHttpRequest pozive i još mnogo toga.

Dakle, kako kreirati nit web radnika u JavaScriptu?

Da kreiramo web worker nit, moramo proslediti ime JavaScript datoteke konstruktoru Worker-a.

var worker = new Worker("MyHeavyProcess.js");

Da biste poslali poruku web radnom objektu, možete koristiti metodu "postMessage", kao u kodu ispod:

worker.postMessage();

Kada web radnik pošalje poruku, možemo je primiti od pozivaoca sa događajem "onmessage".

worker.onmessage = funkcija (e) (document.getElementById("txt1").value = e.data; );

Teški ciklus je postavljen javascript fajl"MyHeavyProcess.js", ispod je njegov kod.

Kada ovaj kod želi da pošalje poruku, koristi metodu "postMessage", a svaka poruka primljena od pozivaoca se prima pomoću događaja "onmessage":

var x =0 self.onmessage = funkcija (e) ( za (i = 0; i< 1000000000; i++) { x = i + x; } self.postMessage(x); };

Kako uništiti web worker objekat?

Zašto je HTML 5 uveo događaje koje šalje server?

Jedna od najčešćih potreba u umreženom svijetu je dobivanje ažuriranja sa servera. Na primjer, u aplikaciji koja prikazuje kotacije dionica, pretraživač mora redovno primati najnovije ponude sa servera.

Stoga, da bi implementirali ovu vrstu zahtjeva, programeri obično pišu neku vrstu pull koda koji šalje zahtjeve na server i prima podatke odatle u određenim intervalima. Ovo je dobra odluka, ali začepljuje mrežu sa puno zahtjeva, a također povećava opterećenje na serveru.

Stoga, umjesto pull zahtjeva, bilo bi sjajno imati neku vrstu push rješenja. Jednostavno rečeno, kada server primi ažuriranje, on ga šalje klijentovim pretraživačima. Ovo se može postići pomoću "SERVER-SENT EVENTS".

Prvo, pretraživač mora kontaktirati izvor na serveru koji će slati ažuriranja. Recimo da imamo "stock.aspx" stranicu koja šalje ažurirane ponude.

Da bismo se povezali sa stranicom, moramo se povezati sa objektom izvora događaja, kao što je prikazano u kodu ispod:

varsource = new EventSource("stock.aspx");

Također moramo povezati funkciju koja će primati poruke kada server pošalje ažuriranja. Da bismo to učinili, moramo povezati funkciju sa događajem "onmessage", kao što je prikazano u sljedećem kodu:

source.onmessage = funkcija (događaj) (document.getElementById("rezultat").innerHTML += event.data + "
"; };

Konačno, sa strane servera, moramo poslati događaje. Ispod je lista važnih događaja, sa komandama koje se šalju sa strane servera.

Na primjer, ako želimo poslati podatke, ispod je ASP.NET kod za to. Imajte na umu da je zaglavlje "ContentType" postavljeno na "text/event-stream":

Response.ContentType="text/event-stream"; Response.Expires=-1; Response.Write("data: " + DateTime.Now.ToString()); Response.Flush();

Zamoliti klijenta da ponovi zahtjev nakon 10 sekundi.

Response.Write("ponovni pokušaj: 10000");

Ako želite da priložite rukovalac događaja na strani klijenta, koristite metodu "addEventListener" kao što je prikazano ispod.

source.addEventListener("message", function(e) ( console.log(e.data); ), false);

Sljedeća poruka servera će uzrokovati javascript funkcija"poruka":

događaj: podaci o poruci: zdravo

Objasnite koncept lokalne memorije u HTML 5

Često moramo pohraniti informacije o korisniku na njihovom lokalnom računalu. Recimo da je korisnik napola popunio veliki formular i odjednom se gubi internet veza.

Stoga bi bilo dobro da se ove informacije pohranjuju lokalno kod korisnika, a kada se uspostavi internet veza, korisnik bi ih iskoristio i poslao na server.

Moderni pretraživači imaju prodavnicu pod nazivom " Lokalna pohrana” (“Lokalna pohrana”), gdje možete pohraniti ove informacije.

Kako možemo dodati i ukloniti podatke iz lokalne memorije?

Podaci se dodaju i uklanjaju iz lokalne memorije pomoću para ključ/vrijednost. Ispod je primjer koda za dodavanje zemlje " Indija"S ključem" Key001»:

localStorage.setItem("Key001","Indija");

Možete dobiti podatke iz lokalne memorije koristeći getItem metodu, prosljeđujući im vrijednost ključa:

varcountry = localStorage.getItem("Key001");

Takođe možete pohraniti JavaScript objekti ispod:

var zemlja = (); country.name = "Indija"; country.code = "I001"; localStorage.setItem(“I001”, država); var country1 = localStorage.getItem("I001");

Ako želite pohraniti podatke u JSON formatu, možete koristiti funkciju "JSON.stringify":

localStorage.setItem("I001",JSON.stringify(country));

Koliki je vijek trajanja lokalnog skladišta?

Lokalna pohrana nema datum isteka. Podaci će biti pohranjeni sve dok ih korisnik ne izbriše iz svog pretraživača ili dok ih ne izbrišete pomoću JavaScript koda.

Koja je razlika između lokalne pohrane i kolačića?

	Kolačići	Lokalna pohrana
Klijentska / Serverska strana	Podaci su dostupni i na strani klijenta i na strani servera. Kolačići se šalju serveru na svaki zahtjev	Podaci su dostupni samo na strani pretraživača klijenta. Server ne može pristupiti podacima lokalne memorije dok se ne pošalju na server POST metoda ili GET
Veličina	4095 bajtova za svaki kolačić	5 MB za svaku domenu
Rok trajanja	Kolačići imaju rok trajanja. Nakon isteka ovog perioda, kolačići se brišu	Ne postoji period zadržavanja. Podaci će biti pohranjeni sve dok ih korisnik ne izbriše iz svog pretraživača ili dok ih ne izbrišete pomoću JavaScript koda

Šta je skladištenje sesije i kako ga kreirati?

Pohrana sesije je slična lokalnoj memoriji, ali podaci vrijede za vrijeme trajanja sesije. Jednostavno rečeno, podaci se brišu čim zatvorite pretraživač.

Da biste kreirali skladište sesije, trebate koristiti konstrukciju "sessionStorage.variablename". U sljedećem kodu kreiramo varijablu "clickcount".

Ako osvježite stranicu u svom pretraživaču, brojač će se povećati. Ali ako zatvorite pretraživač i ponovo ga otvorite, varijabla "clickcount" će se ponovo postaviti na nulu:

if(sessionStorage.clickcount) ( sessionStorage.clickcount=Broj(sessionStorage.clickcount)+1; ) else ( sessionStorage.clickcount = 0; )

Koja je razlika između pohrane sesije i lokalne memorije?

Podaci u lokalno skladište se pohranjuju zauvijek, au memoriji sesije samo za vrijeme trajanja pretraživača. Čim se pretraživač zatvori, podaci iz skladišta sesija se gube.

Šta je WebSQL?

Web SQL je relaciona baza podatke koji rade na strani pretraživača klijenta. Unutar pretraživača postoji relacijski DBMS u kojem možete izvršavati SQL upite.

Da li je WebSQL dio HTML 5 specifikacije?

br. Mnogi ga nazivaju HTML 5, ali WebSQL nije dio specifikacije HTML 5. Specifikacija je bazirana na SQLite-u.

Dakle, kako možete koristiti WebSQL?

Prvo moramo otvoriti bazu podataka koristeći openDatabase funkciju kao što je prikazano ispod. Prvi argument je ime baze podataka, nakon čega slijedi verzija, naziv običan tekst i veličina baze podataka.

var db=openDatabase("dbCustomer","1.0","Customer app', 2 * 1024 * 1024);

Možete izvršiti upite pomoću funkcije "transaction", pozivajući metodu "executeSql" unutar nje:

db.transaction(funkcija (tx) ( tx.executeSql("KREIRAJ TABELU AKO NE POSTOJI tblCust(id jedinstven, korisničko ime)"); tx.executeSql("INSERT INTO tblcust (id, customername) VALUES(1, "shiv") "); tx.executeSql("INSERT INTO tblcust (id, customername) VRIJEDNOSTI (2, "raju")"); )

U slučaju da izvršite "select" upit, dobijate podatke u kolekciji "rezultati", koju možete preći i prikazati rezultate na stranici:

db.transaction(funkcija (tx) ( tx.executeSql("SELECT * FROM tblcust", , funkcija (tx, rezultati) ( za (i = 0; i< len; i++) { msg = "

" + rezultati.rows.item(i).log + "

"; document.querySelector("#customer).innerHTML += msg; ) ), null); ));

Šta je keš aplikacije u HTML5?

Jedna od najtraženijih karakteristika za krajnjeg korisnika je rad offline. Drugim riječima, ako internetska veza nije dostupna, stranicu treba vratiti iz keš memorije pretraživača, a keš aplikacije će vam pomoći u tome.

Keširanje aplikacije vam pomaže da odredite koje datoteke treba keširati, a koje ne.

Dakle, kako implementirati keš aplikacije u HTML 5?

Moramo kreirati datoteku manifesta. Datoteka "manifest" vam pomaže da definirate kako bi keširanje trebalo funkcionirati. Slijedeća je struktura datoteke "manifest":

CACHE MANIFEST # verzija 1.0 CACHE: Login.aspx

• Sve "manifestne" datoteke počinju linijom CACHE MANIFEST;
• # (heš oznaka) pomaže u određivanju verzije keš datoteke;
• Naredba CACHE određuje koje datoteke treba keširati;
• Zaglavlje "ContentType" datoteke treba biti "text/cache-manifest".

Sljedeći je manifest predmemorije prikazan pomoću ASP.NET C#:

Response.ContentType = "tekst/cache-manifest"; Response.Write("CACHE MANIFEST n"); Response.Write("# 2012-02-21 v1.0.0 n"); Response.Write("CACHE: n"); Response.Write("Login.aspx n"); Response.Flush(); response.End();

Nakon što je keš manifest generiran, sljedeći korak je povezivanje datoteke manifesta HTML stranica ispod:

Kada se ova stranica prvi put otvori, dodaje se u keš aplikacije pretraživača i ako se veza sa serverom izgubi, stranica se vraća iz keša aplikacije.

Kako osvježiti keš aplikacije pretraživača?

Predmemorija aplikacije se ažurira kada se promijeni broj verzije naveden nakon oznake "#", kao što je prikazano u sljedećem kodu:

CACHE MANIFEST # verzija 2.0 (nova) CACHE: Login.aspx Aboutus.aspx NETWORK: Pages.aspx

Šta je rezervni u kešu aplikacije?

Rezervna komanda u predmemoriji aplikacije pomaže vam da odredite datoteku koja bi trebala biti prikazana kada server nije dostupan.

Na primjer, u manifestu ispod kažemo da ako neko posjeti "/home" kada server ne radi, onda treba vratiti stranicu "homeoffline.html":

NAZAD: /home/ /homeoffline.html

Šta je mreža u kešu aplikacije?

Mrežna komanda specificira datoteke koje ne treba keširati. Na primjer, kod u nastavku kaže da stranica "home.aspx" nikada ne bi trebala biti keširana i ne bi trebala biti dostupna van mreže:

MREŽA: home.aspx

Ova publikacija je prijevod članka " 40 važnih HTML 5 pitanja za intervju sa odgovorima» pripremio prijateljski projektni tim

Dobro loše

Posljednje ažuriranje: 04.08.2016

HTML (HyperText Markup Language) je jezik za označavanje hiperteksta koji se prvenstveno koristi za kreiranje dokumenata na Internetu. HTML je započeo svoj put ranih 90-ih kao primitivan jezik za kreiranje web stranica, i in ovog trenutka već je teško zamisliti Internet bez HTML-a. Velika većina web stranica koristi HTML na ovaj ili onaj način.

2014. godine službeno je završen rad na novom standardu - HTML5, koji je zapravo napravio revoluciju, donoseći mnogo novih stvari u HTML.

Šta je tačno HTML5 doneo?

HTML5 definira novi algoritam raščlanjivanje za kreiranje DOM strukture

dodavanje novih elemenata i oznaka, kao što su video, audio i niz drugih

redefiniranje pravila i semantike već postojećih HTML elemenata

Zapravo, s dodatkom novih funkcija, HTML5 nije postao samo nova verzija jezika za označavanje za kreiranje web stranica, već zapravo platforma za kreiranje aplikacija, a njegov opseg je otišao daleko izvan internetskog web okruženja: HTML5 je također koristi se za kreiranje mobilnih aplikacija za Android, iOS, Windows Mobile pa čak i za kreiranje desktop aplikacija za obične računare (posebno za Windows 8/8.1/10).

Kao rezultat toga, HTML 5 se u pravilu koristi uglavnom u dva značenja:

HTML 5 kao ažurirani jezik za označavanje hiperteksta, neki razvoj prethodne verzije HTML-a 4

HTML 5 kao moćna platforma za kreiranje web aplikacija, koja uključuje ne samo sam jezik za označavanje hiperteksta, ažurirani HTML, već i jezik JavaScript programiranje i kaskadne tablice css stilovi 3.

Ko je odgovoran za razvoj HTML5? Svijet to radi široki web Konzorcij (skraćeno W3C - Konzorcij World Wide Web) je nezavisna međunarodna organizacija koja definiše HTML5 standard u obliku specifikacija. Trenutna puna specifikacija na engleskom može se pogledati na https://www.w3.org/TR/html5/. I treba napomenuti da organizacija nastavlja da radi na HTML5, objavljujući ažuriranja specifikacije.

Podrška za pretraživač

Treba napomenuti da je uvijek postojao jaz između HTML5 specifikacije i upotrebe ove tehnologije u web pretraživačima. Većina pretraživača počela je implementirati HTML5 standarde čak i prije nego što su službeno objavljeni. I do sada, većina najnovijih verzija pretraživača podržava većinu HTML5 funkcionalnosti (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). Istovremeno, mnogi stariji pretraživači, kao što je Internet Explorer 8 i raniji, ne podržavaju standarde, a IE 9, 10 samo djelimično podržavaju.

Istovremeno, čak i oni pretraživači koji generalno podržavaju standarde možda neće podržavati neke pojedinačne karakteristike. I to se takođe mora uzeti u obzir u radu. Ali općenito, situacija s podrškom ove tehnologije je prilično dobra.

Da biste testirali podršku za HTML5 za određeni pretraživač, možete koristiti posebnu uslugu http://html5test.com.

Potrebni alati

Šta vam je potrebno za rad sa HTML5? Primarno, uređivač teksta da ukucate web stranice u html. Na ovog trenutka Najpopularniji i najnapredniji uređivač teksta je Notepad++ koji se može naći na http://notepad-plus-plus.org/. Njegove prednosti uključuju besplatno pozadinsko osvjetljenje html oznake. U budućnosti ću se fokusirati na ovaj uređivač teksta.

Vrijedi spomenuti i multi-platformski uređivač teksta Visual Studio Code. Ovaj urednik ima nekoliko velike prilike nego Notepad++, a osim toga, može raditi ne samo u Windows-u, već iu MacOS-u i in operativni sistemi ah baziran na linuxu.

Takođe će vam trebati web pretraživač za pokretanje i provjeru napisanih web stranica. Kao web pretraživač, možete uzeti najnoviju verziju bilo koji od uobičajenih pretraživača - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

>> Šta je HTML5

Šta je HTML5 i zašto postaje u trendu?

Pozdrav dragi čitaoci!

AT poslednjih godina Korisnik Interneta je daleko od toga da bude ograničen samo na jednog desktop računar. Gotovo svi imaju pametni telefon ili tablet.

I još jedan pojašnjavajući trenutak 2014: danas društvenim medijima više nisu alat „za pronalaženje prijatelja iz djetinjstva izgubljenih u životnom procesu“. Danas bi malo ljudi pomislilo da koristi VKontakte da pronađe cimera u prvom razredu. Današnje društvene mreže su moćni multifunkcionalni medijski portali. Centri za zabavu i posao.

Moderna kompjuterski svijet više nije vezan za mjesto ili vrijeme. usluge u oblaku pretvorili ceo svet u jedan globalni kompjuter. Gde god da se nalazite, kod kuće, u zemlji, inostranstvu, na poslu ili u javnom prevozu, imate priliku da dobijete sve mogućnosti koje pružaju provajderi sa bilo kog mesta na planeti Zemlji.

Nova verzija jezika hiperteksta HTML5 osmišljena je da bude adekvatan odgovor na sve izazove savremenog korisnika računara i interneta.

Novi jezik za izradu web stranica će biti što dinamičnije, interaktivnije i potpuno prilagođeno proizvodima masovnih medija. Kao što znate, prethodni pokušaji univerzalne standardizacije uspješno su funkcionisali neko vrijeme. Ali u posljednjih nekoliko godina dogodila se Nova Internet revolucija. Potrebe korisnika su se dramatično promijenile. Pojavilo se mnogo mobilnih operativnih sistema koji se ne uklapaju dobro sa desktop računarima.

Novi HTML5 jezik će biti višesistemski, međupretraživački. Web stranice kreirane na HTML5 tehnologiji bit će podjednako dobro čitane na desktopu, tabletu, pametnom telefonu. U bilo kojoj popularnoj RAM memoriji: Windows, iOS, Mac OS, Android, Windows Mobile, Linux i šta još postoji.

Da biste gledali videozapise na HTML5 stranici, više ne morate instalirati na svoju adobe kompjuter Flash Player. Štoviše, mnogi moderni mobilni uređaji uopće ne rade s Flash formatom. Kako gledati video zapise? Ovo će biti HTML5.

Flash tehnologija je dugo kvarila krv optimizatorima i vlasnicima web lokacija. Flash web stranice je gotovo nemoguće optimizirati i promovirati SEO tehnikama. Da biste promovirali Flash projekat, morate pribjeći vrlo skupom kontekstualnom i baner oglašavanju. Mnogi od vodećih svjetskih programera već dugo nastoje da se riješe flasha i svih problema povezanih s njim. ovu tehnologiju. Tako će novi HTML5 biti razvijen na način da korisniku više neće biti potrebne dodatne aplikacije za kvalitetnu percepciju sajtova.

Nove stranice će biti još interaktivnije i prilagođene za sve što je potrebno savremeni korisnik:

HTML5 će kombinovati obični HTML, CSS, XHTML, DHTML, Ajax. Neke zastarjele oznake se uklanjaju kako bi se smanjila težina stranice i ubrzala brzina učitavanja. Dodano je nekoliko novih oznaka koje nisu bile u prethodne verzije HTML. Opširnije obećava da će biti predstavljena tako voljenoj tražilice semantičko označavanje.

Kako web postaje sve mobilniji, HTML5 bi trebao biti potpuno kompatibilan s njim kontrola dodirom na tabletima i pametnim telefonima.

Ovoga puta, konzorcij C3W odlučio je odjednom prekinuti sve Gordijeve čvorove i riješiti sve probleme i nedosljednosti koje su se nakupile godinama postojanja interneta. Nažalost, zadatak razvoja je donekle kasnio. Početkom 2014. godine radovi još uvijek traju, a dugo očekivana najava konačnog lansiranja gotovog HTML5 proizvoda još uvijek nedostaje.

To je sve za mene.

Sada znaš, šta je HTML5 i kakve su se nove mogućnosti otvorile pred nama. Nadam se da ćete sada koristiti HTML5 svuda i uvijek dok se ne pojavi nova verzija HTML.

S poštovanjem, Vitalij Šmatov!