Utilizarea HTML5. HTML5 în cuvinte simple

06.04.2019 Windows 7, XP

În ultimii câțiva ani, a existat o dezvoltare activă a HTML5. Un limbaj inovator de marcare hipertext ar trebui să rezolve imediat toate problemele și problemele asociate cu proiectarea și dezvoltarea site-urilor web.

Adevărat, înainte ultimul moment nu s-a anunțat niciodată că lucrarea a fost finalizată și că s-a obținut un rezultat de succes. Pentru a înțelege mai bine ce este HTML5, este util să priviți înapoi la istoric și să analizați rezultatele pașilor anteriori în găsirea codului perfect. În ciuda lucrărilor neterminate, există tot mai multe site-uri HTML5.

HTML1 și HTML2

Primele versiuni erau foarte imperfecte și, în plus, nu erau standardizate. Fiecare designer a scris codul după cum credea el cel mai bine. Prin urmare, site-urile au fost adesea reflectate inadecvat în diferite tipuri de browsere. Prin urmare, aceste limbi au fost abandonate foarte repede.

HTML3.0

A treia versiune a dobândit deja un anumit format uniform și vă permite să faceți site-uri web de calitate decentă. Au existat însă și probleme serioase. De exemplu, în HTML3, toată formatarea și alinierea au fost făcute în cadrul codului paginii în sine.

Pagina a găzduit atât grafică, cât și scripturi. Acest lucru a crescut foarte mult greutatea paginilor web și a încetinit serios încărcarea site-ului. Treptat, ideea unui site de calitate s-a extins semnificativ. Erau necesare mult mai multe capacități de interactivitate și media. Utilizatorii de internet au devenit mult mai pretențioși cu privire la posibilitățile unui proiect web.

HTML4.1

Este considerată cea mai perfectă opțiune. Toată formatarea internă a fost mutată în foi de stil în cascadă, care funcționează ca stilurile în MS Word. În plus, tabelele în sine au fost scoase din pagini și plasate în directoare separate. Introducerea CSS a condus la conformitate aspect pagini din browser la ideile webmasterului.

Separat a început să fie localizat grafic și elemente de program. Toate acestea au dus la o reducere semnificativă a greutății codului și la accelerarea site-urilor. Oamenilor le place această situație astăzi Majoritatea site-urilor sunt realizate pe HTML4.1.

XHTML și DHTML

Încercări destul de dubioase de a face site-urile web mai standard și mai dinamice. Complexitatea codificării și strictețea excesivă a limbajului nu au contribuit la distribuirea largă a acestor versiuni.

Originile HTML5

A apărut calculatoare mobile, ecranele au devenit tactile. În același timp, fiecare producător instalează un sistem de operare pe dispozitivele sale. design propriu. Utilizatorii sunt obișnuiți să folosească computerele nu doar ca o mașină de scris electronică, ci și ca centre de divertisment media multifuncționale. Comunicarea prin videotelefonie prin internet a devenit un fenomen de masă.

Prin urmare, din noul cod erau cerute condiții moderne.

Asigurați afișare uniformă, pe mai multe platforme, în toate tipurile de browsere.
Site-ul ar trebui să fie la fel de citit pe desktop-uri, smartphone-uri și tablete ale oricărui producător.
Adaptabilitate la controlul tactil pentru computerele mobile.
Posibilitatea de a reda videoclipuri fără ajutorul unui player Flash. Multe tablete nu acceptă deloc această tehnologie.
Posibilitatea de a deschide documente de diferite formate fără aplicații suplimentare care trebuie instalate pe computer.
Creșteți performanța site-ului. Ceea ce este deosebit de important pentru internetul mobil, care oferă o viteză mai mică.
Faceți site-urile web dinamice și interactive. Un utilizator modern dorește să comunice cu o resursă de internet aproape ca și cu o persoană.

Pe scurt, HTML5 ar trebui să satisfacă cele mai sofisticate gusturi ale utilizatorilor și să permită dezvoltatorilor să creeze cu ușurință și cu ușurință site-uri web grozave.

Cât de reușită este munca de creare a celui mai perfect și standard limbaj hipertext? Aceste site-uri pot face cu adevărat multe. Dacă nu aveți un player Flash, site-ul însuși înțelege acest lucru și vă oferă să vizionați videoclipuri și să ascultați muzică folosind capacitățile sale.

Site-urile HTML5 au devenit de fapt foarte agile. În ceea ce privește caracteristicile dinamice și interactivitate, majoritatea utilizatorilor de Internet sunt obișnuiți să folosească toate aceste lucruri minunate deja la nivel subconștient.

Oamenii se bucură doar de facilități tehnologii moderne fără să ne amintim că nu a fost întotdeauna așa. Este cu totul posibil ca dezvoltarea prelungită a HTML5 să nu se termine niciodată.

Internetul și computerele se îmbunătățesc atât de repede încât este destul de greu să prezici viitorul. Poate că vor exista astfel de capacități ale computerelor pe care nimeni nu le bănuiește astăzi. Astăzi apelare vocală textul pare aproape miraculos, dar experții prevăd că literalmente peste cinci ani nimeni nu va folosi tastatura și mouse-ul. Poate că computerele vor învăța să citească gândurile oamenilor și să le înțeleagă dorințele.

Cu toții trebuie să fi auzit măcar ceva despre HTML5 - o nouă versiune a limbajului de marcare a paginii pe Internet. Este încă considerat a fi în curs de dezvoltare, deși de la aprobarea oficială Versiune curentă HTML4 a avut mai bine de cincisprezece ani - de fapt, tot timpul dezvoltării active a World Wide Web. Care sunt avantajele HTML5 și diferențele sale fundamentale față de HTML4?

1. HTML5 - o nouă abordare a marcajului: multimedia în interior

Spre deosebire de limbajul de marcare HTML4 dezvoltat în anii 90, când chiar și conținutul multimedia relativ simplu era prea „greu” pentru marea majoritate a utilizatorilor de internet, în 2004, în care au început efectiv lucrările la o nouă versiune a standardului, conținutul audio era deja în plină desfășurare pe Web. și înregistrări video, atât oficiale, cât și neoficiale. A devenit o bună practică ca site-urile web să posteze filme animate și videoclipuri pe paginile lor, iar blogurile audio și podcasturile au devenit la modă.

Cu toate acestea, standardul actual nu prevedea descrierea conținutului multimedia prin intermediul limbajului în sine: pentru aceasta, a fost utilizată funcția de inserare a unui obiect („obiect”), capacitatea de a juca, care depindea dacă terți suplimentari plugin-uri compatibile cu astfel de conținut au fost instalate în browserul clientului.

Vorbind despre astfel de plugin-uri, ne referim în primul rând Adobe Flash, QuickTime sau cele mai puțin obișnuite Real Player și Silverlight. Toate acestea sunt „suplimente”, suplimente pentru browsere care nu sunt ale lor parte integrantăși acționând ca intermediari care convertesc conținutul digital descărcabil în video și sunet.

Acest sistem este încă destul de funcțional, dar lipsa standardelor general acceptate duce la faptul că diferite site-uri utilizează tehnologii diferite, pentru a vizualiza conținutul lor media, sunt necesare plugin-uri diferite și, cel mai important, deoarece astfel de plugin-uri nu sunt incluse direct în browser, acestea trebuie instalate separat.

Standardul HTML5, care este o combinație de HTML în sine, precum și CSS și JavaScript, implementează inițial o abordare fundamental diferită, în care conținutul media este o parte integrantă a codului paginii. HTML5 oferă o unitate unificată mod standard descrieri (sintaxă) conținutului audiovizual încorporat în pagini.

Pentru a integra audio sau video în HTML5, tot ce trebuie să faceți este să utilizați un set simplu de etichete care descriu ce tip de conținut intenționați să puneți („video” sau „audio”) și legăturile obișnuite către fișierele media corespunzătoare.

Desigur, HTML5 are multe alte inovații, dar aceasta este cea mai importantă dintre ele - o schimbare a abordării ideologice.

2. Problemă de compatibilitate inversă: mai întâi HTML, apoi pluginuri

Din păcate, rămâne o parte semnificativă de utilizatori din lume care au instalat browsere învechite, care sunt destul de potrivite pentru ei, dar nu acceptă toate caracteristicile HTML5. În primul rând, vorbim despre Internet. Versiunea Explorer 8, încă cel mai popular pentru acest browser. Versiunile ulterioare - IE 9 și 10 - acceptă deja aproape complet HTML5. În ceea ce privește Chrome, Opera și Safari, acestea au putut procesa etichete „video” și „audio” de câțiva ani.

Cu toate acestea, pentru a asigura compatibilitatea cu versiunea anterioară, HTML5 păstrează suportul pentru utilizarea pluginurilor (eticheta „obiect”), dar conform schemei „mai întâi HTML, apoi pluginuri”. Aceasta înseamnă că browserul trebuie mai întâi să redea pagina folosind etichetele „video” și „audio” - și numai dacă acest lucru nu se poate face, aplicați codul pluginului.

Pentru ca această abordare să funcționeze corect, puteți utiliza una dintre numeroasele biblioteci JavaScript disponibile, dintre care unele oferă o soluție complet integrată. interfata software(API) pentru gestionarea atât a conținutului HTML, cât și a obiectelor încorporate. Printre acestea, în special, poate fi numit Projekktor sau Video.js software player video, care oferă compatibilitate deplină atât cu HTML5, cât și cu browserele mai vechi care folosesc pluginuri.

3. O abordare unificată a platformelor desktop și mobile

Suport pentru noul standard HTML5 este, de asemenea, furnizat pe aproape toate dispozitivele mobile moderne, inclusiv iOS, Android și Windows Phone, care este un alt avantaj important. Webmasterul nu mai trebuie să găzduiască versiuni multiple de conținut media pentru computere și dispozitive mobile „cu drepturi depline”. Se știe că iOS este complet incompatibil cu Flash, iar sistemul de operare Android este doar parțial compatibil. În cazul HTML5, această problemă este complet eliminată.

În plus, multe moderne dispozitive mobile acceptă decodarea video hardware în formatul H.264 utilizat pe scară largă, care îi salvează încă o dată pe webmasteri muncă în plusși necesitatea de a încărca videoclipuri în mai multe codecuri diferite. Proprietarii unor astfel de dispozitive primesc o sarcină scăzută pe sistem și perioadă lungă de timp munca offline.

4. Suport pentru diferite formate video și audio

Deși HTML5 vă permite să plasați fișiere media pe pagini web cu etichete standard simple, astfel de fișiere pot fi codificate în cel mai diferite formateși o varietate de codecuri. Între timp, nu există o combinație standard de format (container) și codec care să funcționeze la fel de bine în toate browserele și sistemele mobile.

Cele mai populare containere pentru video pe Internet sunt AVI, MP4, FLV și WebM și există doar trei codecuri video principale de „rețea”: H.264, Ogg Theora și VP8. În același timp, fiecare codec este de obicei (dar nu întotdeauna) cel mai potrivit pentru propriul format de container: H.264 - MP4, Theora - OGG, VP8 - WebV.

Codecul H.264 comprimă videoclipurile cu pierderi pentru a obține fișiere Calitate superioară, dar mărime mică. În același timp, specificația prevede mai multe profiluri cu calitate diferităși gradul de compresie, astfel încât fișierele „ușoare” să poată fi difuzate către dispozitive mobile cu putere redusă și pe desktop-uri cu acces în bandă largă- Video de calitate superioară.

Deși H.264 este un codec comercial, adică este fără drepturi de autor, este cel mai versatil: este suportat nativ în Internet Explorer, Chrome, Firefox, Safari, iOS și Android și lipsește doar în Opera, unde un astfel de videoclip este decodat doar printr-un plugin extern.

Codecul Ogg Theora, conceput inițial pentru sistemele Linux, a fost de asemenea comercial la început, dar acum este licențiat gratuit. Suportul încorporat este disponibil în browserele Chrome, Firefox și Opera, în Internet Explorer și Safari este disponibil numai prin plug-in-uri.

Codecul VP8 pentru mobil primul este distribuit de Google în condiții sursa deschisași oferă o calitate similară cu H.264 cu o complexitate mai mică de decodare. Suportul nativ este disponibil în Chrome, Firefox și Opera, precum și pe dispozitivele mobile Android.

Astfel, pentru a asigura redarea conținutului video pe aproape toate sistemele existente, este suficient să încărcați fișiere în containere MP4 în standardul de codificare H.264 și în format WebM cu codecul VP8. Deoarece dintre toate browserele desktop moderne, numai Opera nu are suport nativ pentru H.264, astfel de combinații vor fi cele mai versatile.

5. Există o vastă documentație publică

Deși nu este încă un standard definitiv, HTML5 este acceptat de marea majoritate a browserelor și dispozitivelor mobile moderne. Prin urmare, nu este surprinzător că există deja documentație publică extinsă pentru dezvoltatorii web - b despre cea mai mare parte, desigur, este publicată pe Limba engleză.

În plus, destul de multe cărți despre HTML5 au fost deja traduse în rusă, printre care, de exemplu,

27.01.14 15.5K

Introducere

În calitate de dezvoltator ASP.NET MVC, am căutat recent un loc de muncă, iar multe dintre întrebările de interviu care mi-au fost adresate erau despre HTML5 și caracteristicile sale.

Așadar, iată 40 de întrebări importante care vă vor ajuta să vă îmbunătățiți cunoștințele HTML5.

Aceste întrebări nu sunt cheia succesului atunci când îți cauți un loc de muncă, dar cu siguranță te vor ajuta să navighezi în subiect.

Să ai o vânătoare bună.

Care este relația dintre SGML, HTML, XML și XHTML?

SGML( Limbajul de marcare generalizat standard Standard Generalized Markup Language este un standard care definește marcarea unui document.

HTML este un limbaj de marcare care este descris folosind SGML.

Deci, cu ajutorul SGML, a fost creat un DTD (definiție tip document), la care se referă HTML și la care trebuie să adere. Prin urmare, puteți găsi întotdeauna o declarație „DOCTYPE” la începutul unei pagini HTML care specifică ce DTD va folosi browserul atunci când parsează codul paginii.

Analiza codului conform standardului SGML a fost asociată cu anumite dificultăți, așa că XML a fost creat pentru a facilita această procedură. XML folosește SGML.

De exemplu, în SGML trebuie să utilizați etichete de început și de sfârșit, în timp ce în XML puteți utiliza etichete cu auto-închidere care se închid automat (cum ar fi „” ).

XHML a fost creat din XML și a fost folosit în HTML 4.0. Prin urmare, de exemplu, în HTML bazat pe SGML, eticheta
nu este permis, dar în XHTML este permis. Puteți utiliza o definiție de document XML, așa cum se arată în exemplul următor:

Pe scurt, SGML este în centrul tuturor lucrurilor. Versiunile mai vechi de HTML se bazează pe SGML, în timp ce HTML 4.0 utilizează XHTML construit pe XML.

Ce este HTML 5?

HTML 5 este nou standard html, scopul principal care este furnizarea oricărui conținut fără utilizarea de pluginuri suplimentare, cum ar fi Flash, Silverlight etc. Conține tot ce aveți nevoie pentru a afișa animație, video, bogat GUI si altii.

HTML5 este rezultatul munca în comun la nivel mondial Web Consortium (W3C) și Grupul de lucru pentru tehnologia aplicațiilor hipertext web(WHATWG).

În HTML 5 nu avem nevoie de un DTD. De ce?

HTML 5 nu folosește SGML sau XHTML. Este complet noua dezvoltare, deci nu trebuie să faceți referire la DTD. În HTML 5, trebuie să utilizați următoarea declarație doctype, care permite browserului să identifice documentul ca HTML 5.

Dacă nu lipesc în document, va funcționa HTML 5?
Nu, browserul nu va putea identifica documentul deoarece etichetele HTML 5 și HTML 5 nu vor funcționa corect.

Ce browsere acceptă HTML 5?

Aproape toate browserele precum Safari, Google Chrome, Firefox, Opera, Internet Explorer acceptă HTML 5.

Cum s-a schimbat structura paginii la trecerea de la HTML 4 sau versiunile anterioare la HTML 5?

De obicei, o pagină web conține anteturi, subsol, navigare, conținut principal și o bară laterală. Deci, atunci când dorim să prezentăm aceste blocuri în HTML 4 cu un nume adecvat, cel mai probabil vom folosi etichete DIV. Dar HTML 5 a introdus elemente mai curate pentru aceste blocuri, ceea ce a făcut codul HTML mai lizibil.

Mai jos este o descriere a acestor elemente HTML 5 din marcajul din figură:

: Reprezintă cartușul paginii;
: Subsolul paginii;
: Elemente de navigare a paginii;
: Conținutul principal al paginii (articol);
: Folosit în cadrul unui articol pentru a împărți articolul în secțiuni;
: reprezintă o bară laterală a paginii.

Care este elementul datalist în HTML 5?

Elementul datalist din HTML 5 ajută la implementarea funcționalității de completare automată în câmpul de intrare, așa cum se arată în figura de mai jos:

Mai jos este codul HTML pentru elementul DataList:

Care sunt noile elemente de formular introduse în HTML 5?

HTML 5 introduce zece noi elemente importante de formular:

culoare;
Data;
datetime-local;
e-mail;
timp;
gamă;
telefon;
număr;
căutare.

Să luăm aceste elemente în ordine.

Dacă doriți să afișați un dialog de selectare a culorilor:

Dacă doriți să afișați dialogul calendarului:

Dacă doriți să afișați un calendar cu ora locală:

Dacă doriți să creați un câmp de introducere HTML cu validarea unei adrese de e-mail, puteți seta tipul de câmp la „e-mail”:

Pentru a valida adresa URL, utilizați tipul „url”, după cum se arată mai jos:

Dacă doriți să afișați un câmp pentru introducerea numerelor dintr-un anumit interval, utilizați tipul „număr”:

Dacă doriți să afișați un glisor, utilizați tipul „interval”:

Doriți să faceți un câmp de căutare:

Vrei să iei doar timp:

Dacă doriți să creați un câmp pentru introducerea numerelor de telefon:

Care este elementul de ieșire în HTML 5?

Elementul de ieșire este necesar atunci când doriți să afișați suma a două numere de intrare ca text.

De exemplu, aveți două câmpuri de introducere și doriți să adăugați numerele din acele două câmpuri și să afișați suma lor ca text.

Următorul este un exemplu de utilizare a elementului de ieșire în HTML 5:

+ =

Puteți înlocui „parseInt” cu „valueAsNumber” pentru simplitate. De asemenea, puteți utiliza atributul „pentru” al elementului de ieșire pentru a îmbunătăți lizibilitatea.

Ce este SVG?

SVG înseamnă grafică vectorială scalabilă. Este un limbaj grafic bazat pe text, care poate desena imagini ca text, linii, puncte și așa mai departe, permițându-vă să creați imagini ușoare și redate rapid de browser.

Este posibil să faci o imagine SVG simplă folosind HTML 5?

Să presupunem că vrem să afișăm o linie simplă ca imaginea de mai jos folosind HTML 5 și SVG:

Mai jos este codul HTML 5. Puteți vedea eticheta SVG care include o etichetă de linie care redă o linie:

Ce este canvas în HTML 5?

O pânză este o zonă a unui document HTML în care puteți desena.

Deci, cum desenați o linie simplă cu pânza?

Definiți zona pânzei;
Accesați contextul pânzei;
Desenați o imagine.

Definirea zonei pânzei

Pentru a defini zona de pânză, aveți nevoie de următorul cod HTML. Acesta definește zona în care puteți desena:

Accesarea zonei de pânză

Înainte de a începe să desenați pe zona pânzei, trebuie să obțineți o referință la contextul pânzei. Mai jos este codul pentru a face acest lucru:

var c=document.getElementById("mycanvas"); varctx=c.getContext("2d");

Desen imagine

Acum că aveți acces la contextul obiectului, puteți începe să desenați pe pânză. Așadar, mai întâi apelăm metoda de mutare și începem de la punctul 10, 10, folosim metoda liniei pentru a desena o linie și, în final, îi aplicăm hașura:

ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();

Mai jos este codul complet:

Ce sunt selectoarele în CSS?

Selectoarele vă ajută să selectați elementul căruia doriți să aplicați stilul. Ca exemplu, mai jos este un stil simplu „intro” care aplică o culoare roșie de fundal unui element HTML:

Pentru a aplica stilul „intro” unui element div, putem folosi atributul „class”, așa cum se arată în următorul bloc de cod:

Numele meu este Shivprasad koirala.

Scriu întrebări la interviu.

Cum poate fi aplicat stilul CSS folosind valoarea ID?

Să presupunem că aveți o etichetă de paragraf HTML cu id-ul „textul meu”, așa cum se arată în exemplul următor:

Acestea sunt întrebări HTML care ar putea fi puse într-un interviu.

Puteți stila folosind selectorul „#” și valoarea proprietății „id” pentru a aplica stiluri CSS etichetei de paragraf corespunzătoare. Prin urmare, pentru a stila elementul „mytext”, putem folosi selectorul „#mytext”, după cum se arată mai jos:

Să aruncăm o privire rapidă la câțiva selectori importanți

Setați un fundal galben pentru toate paragrafele și titlurile h1:

p,h1 (culoare de fundal:galben; )

Setați un fundal galben pentru toate paragrafele din interiorul unui element div:

div p (culoare de fundal: galben; )

Setați un fundal galben pentru toate paragrafele care urmează elementului div:

div+p (culoare de fundal: galben; )

Setarea unui fundal galben pentru toate elementele cu un atribut „țintă”:

a (culoare de fundal: galben; ) Întrebări interviu ASP.NET c# întrebări interviu Întrebări interviu .NET cu răspunsuri

Setați câmpurile de introducere să aibă un fundal galben atunci când primesc focalizare:

input:focus (culoare de fundal: galben; )

Setarea stilului hyperlinkurilor, în funcție de starea acestora:

a:link (culoare: verde;) a:vizitat (culoare: verde;) a:hover (culoare: roșu;) a:activ (culoare: galben;)

Cum se utilizează conținutul pe coloană în CSS?

CSS Column Break vă ajută să vă împărțiți textul în coloane verticale.

De exemplu, uitați-vă la articolul din revistă de mai jos, care este o bucată mare de text care trebuie împărțită în trei coloane cu un chenar între ele.

Aici sunt utile pauzele de coloană HTML 5.

Pentru a implementa defalcarea coloanelor, trebuie să definiți următoarele:

În câte coloane doriți să împărțiți textul?

Proprietatea column-count este utilizată pentru a determina numărul de coloane. Prefixele „webkit” și „moz” sunt necesare pentru Browsere Chromeși, respectiv, Firefox.

moz-coloană-număr:3; /* Firefox */ -webkit-column-count:3; /* Safari și Chrome */ column-count:3;

Care este distanța dintre coloane?

moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari și Chrome */ column-gap:20px;

Doriți să trasați o linie între coloane și, dacă da, cât de gros?

moz-column-rule:4px start #ff00ff; /* Firefox */ -webkit-column-rule:4px start #ff00ff; /* Safari și Chrome */ column-rule:6px start #ff00ff;

Mai jos este cod complet exemplu:

Apoi puteți aplica acest stil textului folosind atributul „class”:

Iată textul pe care doriți să îl împărțiți în 3 coloane:

Explicați modelul casetei CSS

bloc modelul css este spațiul dreptunghiular din jurul unui element HTML care definește marginile, marginile și umplutura.

Limite - Determinați suprafața maximă pe care o va conține elementul. Putem face chenarul vizibil, invizibil, putem stabili înălțimea și lățimea elementului și așa mai departe. Margini - definesc distanta dintre margini si element.

Padding - definește distanța dintre margini și elementele învecinate.

Ca exemplu, mai jos este css simplu cod care definește blocul și valorile pentru margini, margini și umplutură:

Deci, dacă aplicăm acest cod CSS la element div dat în următorul bloc de cod, rezultatul va fi așa cum se arată în figura de mai jos. Am adăugat elemente „Un text” și „Alt text” pentru a prezenta proprietatea „marjă”.

ceva text

Alt text

Spuneți-mi despre unele efecte de text în CSS 3

Aici intervievatorul se așteaptă să vorbiți despre unul dintre cele două efecte introduse în CSS 3.

Ambele efecte sunt prezentate mai jos:

Efect de umbră de text

Text special ( text-shadow: 5px 5px 5px #FF0000; )

Efectul de rupere a cuvintelor:

Ce sunt lucrătorii web și de ce sunt necesari aceștia?

Luați în considerare următoarele „grele” pentru buclă, care este executat de un miliard de ori:

funcția SomeHeavyFunction() (pentru (i = 0; i< 1000000000; i++) { x = i + x; } }

Să presupunem că acest cod este executat atunci când se face clic pe un buton. Formulare HTML. Execuția acestei funcții este sincronă. Cu alte cuvinte, browserul va aștepta ca bucla să se termine.

Ca rezultat, acest lucru poate duce la înghețarea browserului și la un mesaj de eroare, așa cum se arată în figura de mai jos:

Deci, dacă am putea pune această buclă grea într-un fișier JavaScript și să-l rulăm asincron, atunci browserul nu ar trebui să aștepte să se termine și am avea o aplicație mai receptivă.

Pentru aceasta este destinat tehnologie web worker , care permite fișierelor JavaScript să fie executate asincron.

Care sunt restricțiile pentru firul Web Worker?

Lucrătorii web nu pot modifica elemente HTML, variabile globale și unele proprietăți ale ferestrei, cum ar fi window.location . Puteți folosi tipuri date javascript, apeluri XMLHttpRequest și multe altele.

Deci, cum creezi un fir de lucru web în JavaScript?

Pentru a crea un fir de lucru web worker, trebuie să transmitem numele fișierului JavaScript constructorului Worker.

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

Pentru a trimite un mesaj către obiectul web worker, puteți utiliza metoda „postMessage”, ca în codul de mai jos:

worker.postMessage();

Când un lucrător web trimite un mesaj, îl putem primi pe apelant cu evenimentul „onmessage”.

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

Ciclul greu este plasat în fișier javascript„MyHeavyProcess.js”, mai jos este codul acestuia.

Când acest cod dorește să trimită un mesaj, folosește metoda „postMessage”, iar orice mesaj primit de la apelant este primit folosind evenimentul „onmessage”:

var x =0 self.onmessage = funcția (e) ( pentru (i = 0; i< 1000000000; i++) { x = i + x; } self.postMessage(x); };

Cum să distrugi obiectul web worker?

De ce a introdus HTML 5 evenimente trimise de server?

Una dintre nevoile cele mai comune în lumea în rețea este obținerea de actualizări de la un server. De exemplu, într-o aplicație care afișează cotațiile bursiere, browserul trebuie să primească în mod regulat cele mai recente cotații de la server.

Prin urmare, pentru a implementa acest tip de solicitare, dezvoltatorii scriu de obicei un fel de cod pull care trimite cereri către server și preia datele de acolo la intervale regulate. aceasta buna decizie, dar blochează rețeaua cu o mulțime de solicitări și, de asemenea, adaugă încărcare serverului.

Prin urmare, în loc de solicitări pull, ar fi grozav să existe un fel de soluție push. Mai simplu spus, atunci când serverul primește o actualizare, o trimite către browserele clientului. Acest lucru poate fi realizat cu „EVENIMENTE TRIMISE DE SERVER”.

În primul rând, browserul trebuie să contacteze o sursă de pe server care va trimite actualizări. Să presupunem că avem o pagină „stock.aspx” care trimite actualizări ale cotațiilor.

Pentru a face legătura către pagină, trebuie să ne legăm de obiectul sursă eveniment, așa cum se arată în codul de mai jos:

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

De asemenea, trebuie să legăm o funcție care va primi mesaje atunci când serverul trimite actualizări. Pentru a face acest lucru, trebuie să legăm o funcție la evenimentul „onmessage”, așa cum se arată în următorul cod:

source.onmessage = functie (eveniment) ( document.getElementById("rezultat").innerHTML += event.data + "
"; };

În cele din urmă, din partea serverului, trebuie să trimitem evenimente. Mai jos este o listă evenimente importante, cu comenzi care urmează să fie trimise din partea serverului.

De exemplu, dacă vrem să trimitem date, mai jos este codul ASP.NET pentru a face acest lucru. Rețineți că antetul „ContentType” este setat la „text/event-stream”:

Response.ContentType="text/event-stream"; Răspuns.Expiră=-1; Response.Write("date: " + DateTime.Now.ToString()); Response.Flush();

Pentru a cere clientului să repete cererea după 10 secunde.

Response.Write("reîncercați: 10000");

Dacă doriți să atașați un handler de evenimente pe partea clientului, utilizați metoda „addEventListener” așa cum se arată mai jos.

source.addEventListener(„mesaj”, function(e) ( console.log(e.data); ), false);

Următorul mesaj de server va provoca funcția javascript"mesaj":

eveniment: date mesaj: salut

Explicați conceptul de stocare locală în HTML 5

Adesea trebuie să stocăm informații despre un utilizator pe computerul local. Să presupunem că utilizatorul a completat pe jumătate un formular mare și dintr-o dată se pierde conexiunea la internet.

Prin urmare, ar fi bine să stocați această informație local cu utilizatorul, iar atunci când conexiunea la Internet este restabilită, utilizatorul le va folosi și le va trimite la server.

Browserele moderne au un magazin numit „ Stocare locală” („Stocare locală”), unde puteți stoca aceste informații.

Cum putem adăuga și elimina date din stocarea locală?

Datele sunt adăugate și eliminate din stocarea locală folosind o pereche cheie-valoare. Mai jos este un exemplu de cod pentru adăugarea țării " India"Cu cheia" Key001»:

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

Puteți obține date din stocarea locală folosind metoda getItem, transmițându-i valoarea cheie:

varcountry = localStorage.getItem("Key001");

De asemenea, puteți stoca obiecte JavaScript ca mai jos:

var tara = (); country.name = "India"; country.code = "I001"; localStorage.setItem(„I001”, țară); var country1 = localStorage.getItem("I001");

Dacă doriți să stocați date în format JSON, puteți utiliza funcția „JSON.stringify”:

localStorage.setItem("I001",JSON.stringify(țara));

Care este durata de viață a stocării locale?

Stocarea locală nu are o dată de expirare. Datele vor fi stocate până când utilizatorul le șterge din browser sau le ștergeți folosind codul JavaScript.

Care este diferența dintre stocarea locală și cookie-uri?

	Cookie-uri	Stocare locală
Partea client / Partea server	Datele sunt disponibile atât pe partea client, cât și pe partea serverului. Cookie-urile sunt trimise serverului la fiecare solicitare	Datele sunt disponibile numai pe partea browserului clientului. Serverul nu poate accesa datele de stocare locală până când acestea nu sunt trimise către server metoda POST sau GET
Marimea	4095 de octeți pentru fiecare cookie	5 MB pentru fiecare domeniu
Termen de valabilitate	Cookie-urile au o dată de expirare. După expirarea acestei perioade, cookie-urile sunt șterse	Nu există perioadă de păstrare. Datele vor fi stocate până când utilizatorul le șterge din browser sau le ștergeți folosind codul JavaScript

Ce este stocarea sesiunii și cum se creează?

Stocarea sesiunii este similară cu stocarea locală, dar datele sunt valabile pe durata sesiunii. Mai simplu spus, datele sunt șterse imediat ce închideți browserul.

Pentru a crea un magazin de sesiune, trebuie să utilizați constructul „sessionStorage.variablename”. În următorul cod, creăm o variabilă „clickcount”.

Dacă reîmprospătați pagina în browser, contorul va crește. Dar dacă închideți browserul și îl deschideți din nou, variabila „clickcount” va fi setată din nou la zero:

if(sessionStorage.clickcount) ( sessionStorage.clickcount=Număr(sessionStorage.clickcount)+1; ) else ( sessionStorage.clickcount = 0; )

Care este diferența dintre stocarea sesiunii și stocarea locală?

Date în depozitare locală sunt stocate pentru totdeauna, iar în stocarea sesiunii numai pe durata browserului. De îndată ce browserul se închide, datele din magazinul de sesiuni se pierd.

Ce este WebSQL?

Web SQL este bază relațională date care funcționează în partea browserului clientului. În interiorul browserului există un SGBD relațional în care puteți executa interogări SQL.

WebSQL face parte din specificația HTML 5?

Nu. Mulți îl numesc HTML 5, dar WebSQL nu face parte din specificația HTML 5. Specificația se bazează pe SQLite.

Deci, cum puteți utiliza WebSQL?

Mai întâi trebuie să deschidem baza de date folosind funcția openDatabase, așa cum se arată mai jos. Primul argument este numele bazei de date, urmat de versiune, un nume de text simplu și dimensiunea bazei de date.

var db=openDatabase("dbCustomer","1.0","Aplicația client', 2 * 1024 * 1024);

Puteți executa interogări folosind funcția „tranzacție”, apelând metoda „executăSql” în interiorul acesteia:

db.transaction(function (tx) ( tx.executeSql("CREATE TABLE IF NU EXISTS tblCust(id unique, customername)"); tx.executeSql("INSERT INTO tblcust (id, customername) VALUES(1, "shiv") "); tx.executeSql ("INSERT INTO tblcust (id, clientname) VALUES (2, "raju")"); )

În cazul în care executați o interogare „select”, obțineți datele din colecția „rezultate”, pe care o puteți parcurge și afișa rezultatele pe pagină:

db.transaction(function (tx) ( tx.executeSql("SELECT * FROM tblcust", , function (tx, results)) (pentru (i = 0; i< len; i++) { msg = "

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

"; document.querySelector("#client).innerHTML += msg; ) ), nul); ));

Ce este o aplicație cache în HTML5?

Una dintre caracteristicile cele mai solicitate de utilizatorul final este să lucreze în deconectat. Cu alte cuvinte, dacă nu este disponibilă o conexiune la internet, pagina ar trebui să fie returnată din memoria cache a browserului, iar cache-ul aplicației te va ajuta cu asta.

Cache-ul aplicației vă ajută să determinați ce fișiere ar trebui să fie stocate în cache și care nu.

Deci, cum implementăm o aplicație cache în HTML 5?

Trebuie să creăm un fișier manifest. Fișierul „manifest” vă ajută să definiți cum ar trebui să funcționeze memorarea în cache. Următoarea este structura fișierului „manifest”:

CACHE MANIFEST # versiunea 1.0 CACHE: Login.aspx

Toate fișierele „manifest” încep cu linia CACHE MANIFEST;
# (etichetă hash) ajută la specificarea versiunii fișierului cache;
Comanda CACHE determină ce fișiere ar trebui să fie stocate în cache;
Antetul „ContentType” al fișierului ar trebui să fie „text/cache-manifest”.

Următorul este manifestul cache redat folosind ASP.NET C#:

Response.ContentType = "text/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(); răspuns.Sfârșit();

Odată ce manifestul cache a fost generat, următorul pas este să conectați fișierul manifest la Pagina HTML ca mai jos:

Când această pagină este deschisă pentru prima dată, este adăugată în memoria cache a aplicației browserului, iar dacă se pierde conexiunea la server, pagina este returnată din memoria cache a aplicației.

Cum se reîmprospătează memoria cache a aplicației browser?

Memoria cache a aplicației este actualizată atunci când numărul versiunii specificat după eticheta „#” se modifică, așa cum se arată în următorul cod:

CACHE MANIFEST # versiunea 2.0 (nouă) CACHE: Login.aspx Despre noi.aspx NETWORK: Pages.aspx

Ce este alternativă în memoria cache a aplicației?

Comanda de rezervă din memoria cache a aplicației vă ajută să specificați un fișier care ar trebui să fie afișat atunci când serverul nu este disponibil.

De exemplu, în manifestul de mai jos, spunem că dacă cineva vizitează „/home” când serverul este oprit, atunci pagina „homeoffline.html” ar trebui să fie returnată:

FALLBACK: /home/ /homeoffline.html

Ce este rețeaua în memoria cache a aplicației?

Comanda de rețea specifică fișierele care nu ar trebui să fie stocate în cache. De exemplu, codul de mai jos spune că pagina „home.aspx” nu ar trebui să fie niciodată memorată în cache și nu ar trebui să fie disponibilă offline:

REȚEA: home.aspx

Această publicație este o traducere a articolului „ 40 HTML importante 5 întrebări de interviu cu răspunsuri» pregătit de o echipă de proiect prietenoasă

Rău Bun

Ultima actualizare: 04/08/2016

HTML (HyperText Markup Language) este un limbaj de marcare hipertext utilizat în principal pentru a crea documente pe Internet. HTML și-a început călătoria la începutul anilor 90 ca un limbaj primitiv pentru crearea de pagini web și în acest moment este deja greu de imaginat internetul fără HTML. Marea majoritate a site-urilor web folosesc HTML într-un fel sau altul.

În 2014, lucrările au fost finalizate oficial la un nou standard - HTML5, care de fapt a revoluționat, aducând o mulțime de lucruri noi în HTML.

Ce a adus mai exact HTML5?

HTML5 definește nou algoritm analiza pentru a crea o structură DOM

adăugarea de noi elemente și etichete, cum ar fi video, audio și o serie de altele

redefinirea regulilor și semanticii elementelor HTML preexistente

De fapt, odată cu adăugarea de noi funcții, HTML5 a devenit nu doar o nouă versiune a limbajului de marcare pentru crearea de pagini web, ci de fapt o platformă pentru crearea de aplicații, iar domeniul său de aplicare a depășit cu mult mediul web de internet: HTML5 este, de asemenea, folosit pentru a crea aplicații mobile pentru Android, ios, Windows Mobileși chiar pentru a crea aplicații desktop pentru computere obișnuite (în special, în Windows 8/8.1/10).

Ca rezultat, de regulă, HTML 5 este folosit în principal în două sensuri:

HTML 5 ca limbaj de marcare hipertext actualizat, o anumită dezvoltare a versiunii anterioare a HTML 4

HTML 5 ca o platformă puternică pentru crearea de aplicații web, care include nu numai limbajul de marcare hipertext în sine, HTML actualizat, ci și limbajul Programare JavaScriptși mese în cascadă stiluri css 3.

Cine este responsabil pentru dezvoltarea HTML5? Lumea o face rețeaua largă Consorțiu (abreviat W3C - Consorțiu World wide web) este o organizație internațională independentă care definește standardul HTML5 sub formă de specificații. Specificația completă actuală în limba engleză poate fi vizualizată la https://www.w3.org/TR/html5/ . Și trebuie menționat că organizația continuă să lucreze la HTML5, lansând actualizări ale specificației.

Suport pentru browser

Trebuie remarcat faptul că a existat întotdeauna un decalaj între specificația HTML5 și utilizarea acestei tehnologii în browserele web. Majoritatea browserelor au început să implementeze standardele HTML5 chiar înainte de a fi publicate oficial. Și până acum, majoritatea celor mai recente versiuni de browser acceptă cea mai mare parte a funcționalității HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). În același timp, multe browsere mai vechi, cum ar fi Internet Explorer 8 și versiunile anterioare, nu acceptă standardele, iar IE 9, 10 le acceptă doar parțial.

În același timp, chiar și acele browsere care acceptă în general standardele pot să nu accepte unele caracteristici individuale. Și acest lucru trebuie luat în considerare în lucrare. Dar, în general, situația cu suportul acestei tehnologii este destul de bună.

Pentru a testa compatibilitatea HTML5 pentru un anumit browser, puteți utiliza serviciul special http://html5test.com .

Instrumente necesare

De ce aveți nevoie pentru a lucra cu HTML5? Pentru inceput, editor de text pentru a tasta pagini web în html. Pe acest moment Cel mai popular și mai avansat editor de text este Notepad++, care poate fi găsit la http://notepad-plus-plus.org/. Avantajele sale includ lumina de fundal gratuită etichete html. În viitor, mă voi concentra pe acest editor de text.

De asemenea, merită menționat și editorul de text multiplatform Visual Studio Code. Acest editor are mai multe mari oportunități decât Notepad++ și, în plus, poate funcționa nu numai în Windows, ci și în MacOS și în sisteme de operare ah, bazat pe Linux.

Și veți avea nevoie, de asemenea, de un browser web pentru a rula și a verifica paginile web scrise. Ca browser web, puteți lua ultima versiune oricare dintre browserele comune - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

>> Ce este HTML5

Ce este HTML5 și de ce devine la modă?

Salutare dragi cititori!

LA anul trecut Utilizatorul de internet este departe de a fi limitat la unul singur calculator desktop. Aproape toată lumea are un smartphone sau o tabletă.

Și încă un moment clarificator al anului 2014: astăzi retele sociale nu mai sunt un instrument „pentru găsirea prietenilor din copilărie pierduți în procesul vieții”. Astăzi, puțini oameni s-ar gândi să folosească VKontakte pentru a găsi un coleg de cameră în clasa întâi. Rețelele sociale de astăzi sunt portaluri media multifuncționale puternice. Centre de divertisment și afaceri.

Modern lumea computerelor nu mai este legat de loc sau timp. servicii cloud a transformat întreaga lume într-un singur computer global. Oriunde te-ai afla, acasă, în țară, în străinătate, la serviciu sau în transportul public, ai posibilitatea de a beneficia de orice oportunități oferite de furnizorii de oriunde de pe planeta Pământ.

Noua versiune a limbajului hipertext HTML5 este concepută pentru a fi un răspuns adecvat la toate provocările unui computer modern și utilizator de internet.

Limba noua; limbaj nou pentru crearea site-urilor web va fi cât mai dinamică, cât mai interactivă și complet adaptată produselor mass-media. După cum știți, încercările anterioare de standardizare universală au funcționat cu succes de ceva timp. Dar în ultimii câțiva ani, a existat o nouă revoluție a internetului. Nevoile utilizatorilor s-au schimbat dramatic. Au apărut o mulțime de sisteme de operare mobile care nu se potrivesc bine cu computerele desktop.

Noul limbaj HTML5 va fi multi-sistem, cross-browser. Site-urile web create pe tehnologia HTML5 vor fi la fel de bine citite pe un desktop, pe o tabletă, pe un smartphone. În orice memorie RAM populară: Windows, iOS, Mac OS, Android, Windows Mobile, Linux și ce mai există.

Pentru a viziona videoclipuri pe un site HTML5, nu mai trebuie să instalați pe dvs computer adobe Flash Player. Mai mult, multe dispozitive mobile moderne nu funcționează deloc cu formatul Flash. Cum să vizionezi videoclipuri? Acesta va fi HTML5.

Tehnologia flash a stricat de mult sângele optimizatorilor și proprietarilor de site-uri. Site-urile flash sunt aproape imposibil de optimizat și promovat cu tehnici SEO. Pentru a promova un proiect Flash, trebuie să apelezi la publicitate contextuală și banner foarte costisitoare. Mulți dintre cei mai importanți dezvoltatori din lume s-au străduit de mult să scape de flash și de toate problemele asociate cu acesta. această tehnologie. Astfel, noul HTML5 va fi dezvoltat în așa fel încât utilizatorul să nu mai aibă nevoie de aplicații suplimentare pentru o percepție de înaltă calitate a site-urilor.

Noile site-uri vor fi și mai interactive și adaptate pentru tot ceea ce este atât de necesar utilizator modern:

HTML5 va combina HTML obișnuit, CSS, XHTML, DHTML, Ajax. Unele etichete învechite sunt eliminate pentru a reduce greutatea paginii și pentru a accelera viteza de încărcare. Au fost adăugate o serie de etichete noi care nu au fost incluse Versiunile anterioare HTML. Mai pe larg promite să fie prezentat atât de iubit motoare de căutare marcaj semantic.

Pe măsură ce web-ul devine din ce în ce mai mobil, HTML5 ar trebui să fie pe deplin compatibil cu control tactil pe tablete și smartphone-uri.

De data aceasta, consorțiul C3W a decis să taie toate nodurile gordiene deodată și să rezolve toate problemele și inconsecvențele care s-au acumulat de-a lungul anilor de existență a Internetului. Din păcate, sarcina dezvoltării a fost oarecum întârziată. La începutul lui 2014, lucrările sunt încă în desfășurare și încă lipsește anunțul mult așteptat al lansării finale a produsului HTML5 finit.

Asta e tot pentru mine.

Acum știi, ce este HTML5și ce noi oportunități s-au deschis în fața noastră. Sper că acum veți folosi HTML5 peste tot și întotdeauna până când apare o nouă versiune HTML.

Cu stimă, Vitali Șmatov!