Sintaxa HTML. Reguli de bază ale limbajului HTML De ce este nevoie de un aspect valid

07.09.2020 Programe

Fluxul de puncte de cod Unicode, inclusiv intrarea în pasul de mnemonizare, va fi inițial vizibil pentru agentul utilizator ca un flux de octeți (de obicei care vin prin rețea sau din localul). Sistemul de fișiere). Octeții codifică caractere reale în funcție de un anumit codificarea caracterelor, pe care agentul utilizator îl folosește pentru a decoda octeții în caractere.

Pentru documentele XML, agenții utilizator trebuie să utilizeze acest algoritm pentru a determina codificarea caracterelor specificată de specificația XML. Această secțiune nu se aplică documentelor XML.

8.2.2.1 Analiza cu o codificare de caractere cunoscută

Când un parser HTML operează pe un flux de octeți de intrare care are o anumită codificare cunoscută, atunci codificarea caracterelor este acea codificare și - anumit.

8.2.2.2 Definirea codificării caracterelor

În unele cazuri, poate să nu fie practic să se determine fără ambiguitate codificarea înainte de a analiza documentul. Din acest motiv, această specificație oferă un mecanism în doi pași cu prescanare opțională. Implementările sunt permise, așa cum este descris mai jos, pentru a aplica un algoritm de analizare simplificat oricăror octeți disponibili înainte de a analiza documentul. Analizatorul real pornește apoi, folosind pre-codificarea preluată din această analiză preliminară și alte metadate în afara benzii. Dacă, în timp ce documentul se încarcă, agentul utilizator întâlnește o declarație de codificare a caracterelor care intră în conflict cu aceste informații, atunci analizatorul poate fi apelat din nou pentru a analiza documentul cu codificarea reală.

Agenții utilizatori trebuie să utilizeze următorul algoritm, numit algoritm de codificare, pentru a determina codarea caracterelor de utilizat la decodarea documentului în primul pas. Acest algoritm ia ca intrare orice metadate în afara benzii disponibile agentului utilizator (de exemplu, metadatele tip conținut a documentului) și toți octeții disponibili până acum și returnează codificarea caracterelor și , care tentativă sau anumit.

    Dacă utilizatorul instruiește în mod explicit agentul utilizator să înlocuiască codificarea caracterelor documentului cu o codificare specifică, este opțional să returneze codificarea respectivă cu anumit

    De obicei, agenții utilizatori își amintesc o astfel de solicitare a utilizatorului între sesiuni și uneori o aplică și documentelor din iframe.

    Agentul utilizator poate crește octeții de resurse disponibili fie la acest pas, fie la un pas ulterior al acestui algoritm. De exemplu, un agent de utilizator se poate aștepta la 500 ms sau 1024 de octeți, oricare dintre acestea survine primul. În general, pregătirea unei resurse pentru a determina codificarea îmbunătățește performanța deoarece reduce nevoia de a renunța la structurile de date utilizate în analiza după căutarea informațiilor de codificare. Cu toate acestea, dacă agentul utilizator durează prea mult pentru a obține datele pentru a determina codificarea, timpul petrecut în așteptare poate depăși orice beneficiu în urma pregătirii.

    Cerințele de conformitate pentru o declarație de codificare a caracterelor limitează aspectul acesteia la numai primii 1024 de octeți. Prin urmare, agenții utilizatori sunt încurajați să folosească algoritmul de prescanare (mai jos) așa cum este invocat de acești pași pe primii 1024 de octeți, dar să nu se oprească aici.

    Pentru fiecare rând din următorul tabel, începând de la primul și în jos, dacă sunt mai mulți octeți disponibili decât în ​​prima coloană și primii octeți ai fișierului se potrivesc cu octeții primei coloane, atunci returnați codificarea din celula a doua coloană din același rând, cu - anumitși anulați acești pași:

    octeți hexadecimale Codificare
    FE FF Big-endian UTF-16
    FF FE Little-endian UTF-16
    EF BB BF UTF-8

    Acest pas caută marcajele de ordine de octeți (BOM) Unicode.

    Faptul că acest pas vine înaintea următorului, care respectă antetul HTTP Content-Type, este o încălcare deliberată a specificației HTTP, din dorința de a fi cât mai compatibil cu conținutul mai vechi.

    Dacă stratul de transport specifică o codificare de caractere și este acceptată, va returna codificarea cu - anumitși anulați acești pași.

    Codificarea UTF-8 are un model de biți definit cu precizie. Documentele care conțin octeți mai mari de 0x7F care se potrivesc cu un model UTF-8 sunt foarte probabil să fie UTF-8, dar documentele cu secvențe de octeți care nu se potrivesc cu acesta este foarte probabil să nu fie. Prin urmare, agenții utilizatori sunt încurajați să caute această codificare comună.

    În caz contrar - returnează codificarea implicită a caracterelor de implementare sau definită de utilizator, cu - tentativă.

    În mediile gestionate sau în mediile în care codificarea documentelor poate fi obligatorie (de exemplu, pentru agenții utilizator destinati în mod special pentru utilizare în rețele noi), se recomandă o codificare UTF-8 cuprinzătoare.

    În alte medii, codificarea implicită depinde de obicei de locația utilizatorului (aproximarea limbilor și, prin urmare, de multe ori a codificărilor paginilor pe care utilizatorul este foarte probabil să le viziteze). Următorul tabel recomandă valorile implicite pe baza localizării utilizatorului, pentru compatibilitate cu conținutul vechi. Localitățile sunt identificate prin etichetele de limbă BCP 47.

    Limba locala Codificare implicită recomandată
    ar arabic windows-1256
    ba Bashkir Windows-1251
    fi Belarus Windows-1251
    bg bulgară Windows-1251
    cs ceh windows-1250
    el greacă ISO-8859-7
    et estonă windows-1257
    fa persană windows-1256
    el ebraică windows-1255
    HR croat windows-1250
    hu maghiară ISO-8859-2
    ja japonez Shift_JIS
    kk kazah Windows-1251
    ko coreeană euc-kr
    ku kurdă windows-1254
    ky Kârgâz Windows-1251
    lt lituanian windows-1257
    lv letonă windows-1257
    mk macedonean Windows-1251
    pl Lustrui ISO-8859-2
    ru Rusă Windows-1251
    sah Yakut Windows-1251
    sk slovacă windows-1250
    sl slovenă ISO-8859-2
    sr sârb Windows-1251
    tg Tadjik Windows-1251
    th thailandez windows-874
    tr turc windows-1254
    tt tătar Windows-1251
    Regatul Unit ucrainean Windows-1251
    vi vietnamez windows-1258
    zh-CN Chineză (Republica Populară Chineză) GB18030
    zh-TW Chineză (Taiwan) Mare 5
    Toate celelalte locații Windows-1252

    Conținutul acestui tabel este derivat din setările implicite Windows, Chrome și Firefox.

secvență de octeți începând cu octetul 0x3C (ASCII<), опционно – байта 0x2F (ASCII /) и, наконец, байта в диапазоне 0x41-0x5A или 0x61-0x7A (ASCII-буква) secvență de octeți începând cu: 0x3C 0x21 (ASCII "Avansați indicatorul de poziție astfel încât să indice primul octet 0x3E (ASCII >), care vine după octetul găsit 0x3C.

Orice alt octet

Nu faceți nimic cu acest octet.

  • Următorul octet: Mutați poziția pentru a indica următorul octet din fluxul de octeți de intrare și mergeți înapoi cu un pas în sus buclă.
  • Suportul pentru codificări bazate pe EBCDIC este descurajat în special. Această codificare este rar folosită pentru conținut web public. Sprijinirea UTF-32 este, de asemenea, puternic descurajată. Această codificare este folosită rar și este adesea implementată incorect.

    Această specificație nu încearcă să accepte codificări bazate pe EBCDIC și UTF-32 în algoritmii săi; suportul și utilizarea acestor codificări pot avea ca rezultat un comportament imprevizibil în implementările acestei specificații.

    8.2.2.4 Determinarea codificării în timpul parsării

    Când analizatorul solicită agentului utilizator să schimbe codificarea, agentul utilizator trebuie să efectueze următorii pași. Acest lucru se poate întâmpla dacă , discutat mai sus, eșuează atunci când caută o codificare de caractere sau dacă găsește o codificare de caractere care nu a fost codificarea propriu-zisă a fișierului.

    8.2.2.5 Preprocesarea fluxului de intrare

    Fluxul de intrare constă din caractere introduse în el ca fiind decodificate sau din diferite API-uri care manipulează direct fluxul de intrare.

    Un caracter principal U+FEFF BYTE ORDER MARK trebuie ignorat dacă este prezent în .

    Cerința de a elimina caracterul U+FEFF BYTE ORDER MARK, indiferent dacă caracterul a fost folosit pentru a determina ordinea octeților, este o încălcare deliberată a Unicode, care se explică prin dorința de a îmbunătăți robustețea agenților utilizator în ceea ce privește propriile lor. transcodificatoare.

    Orice apariție a oricăror caractere din intervalele U+0001 la U+0008, U+000E la U+001F, U+007F la U+009F, U+FDD0 la U+FDEF și caracterele U+000B, U+FFFE , U+FFFF, U+1FFFE, U+1FFFF, U+2FFFE, U+2FFFF, U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE, U+5FFFF, U+6FFFE, U + 6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF, U+9FFFE, U+9FFFF, U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE, U+CFFFF , U+DFFFE, U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF, U+10FFFE și U+10FFFF sunt . Toate sunt caractere de control sau caractere Unicode permanent nedefinite (noncaractere).

    Caracterele „CR” (U+000D) și „LF” (U+000A) au o atenție specială. Toate caracterele CR trebuie convertite în caractere LF, iar orice caractere LF care vin după caracterul CR trebuie ignorate. Astfel, liniile noi în DOM HTML sunt reprezentate prin caractere LF și niciodată prin caractere CR în intrarea în .

    Următorul caracter de intrare este primul caracter din , care nu a fost încă folosit/consumat sau este ignorat în mod explicit de cerințele acestei secțiuni. Inițial acesta este primul caracter din fluxul de intrare. Caracterul de intrare curent este ultimul caracter care a fost .

    Punctul de inserare/punctul de inserare este poziția (chiar înaintea unui caracter sau chiar înainte de sfârșitul fluxului de intrare) în care este de fapt inserat conținutul inserat folosind document.write(). Punctul de inserare este relativ la poziția caracterului imediat după acesta, nu este o compensare absolută în fluxul de intrare. Punctul de inserare inițial este nedefinit.

    Simbolul „EOF” din tabelele următoare este un simbol conceptual care reprezintă sfârșitul lui . Dacă parser-ul este un parser generat de un script, atunci sfârșitul este atins atunci când este utilizat un caracter explicit „EOF” (inserat prin metoda document.close()). În caz contrar, caracterul „EOF” nu este un caracter real în flux, ci mai degrabă o indicație a absenței oricăror caractere ulterioare.

    Gestionarea caracterelor U+0000 NULL variază în funcție de locul în care se află caracterele. În general, acestea sunt ignorate, cu excepția cazurilor în care te poate expune cu adevărat la o lovitură. O astfel de prelucrare, dacă este necesar, se extinde la etapele de mnemonizare și de construcție a arborilor.

    DOM ca parte a limbii

    Conceptul de DOM a fost introdus pentru prima dată în HTML5 (deși a existat înainte de asta, nu a făcut parte din limbaj), documentul HTML este acum tratat ca o colecție de obiecte, mai degrabă decât etichete. Deci cum de Sintaxa HTML5 nu exista. Cu toate acestea, atunci când scrieți cod, puteți să rămâneți reguli de etichetare care au fost instalate în HTML 4.01 sau XHTML 1.0

    Sintaxa HTML 4.01

    ÎN HTMLÎnainte de a cincea versiune, existau mai multe reguli pentru scrierea codului:

    1. Modul liber folosit în HTML 4.01
      „http://www.w3.org/TR/html4/loose.dtd”>
    2. Modul strict folosit în HTML 4.01
      „http://www.w3.org/TR/html4/strict.dtd”>
    3. Exista și sintaxă asociată cu cadrele. Cadrele din HTML5 sunt considerate învechite, dar mulți dezvoltatori încă le folosesc, deoarece cadrele sunt foarte convenabile atunci când dezvoltă unele aplicații web.

    Sintaxa XHTML 1.0

    ÎN XHTML, au existat două reguli pentru scrierea codului:

    1. Modul de tranziție utilizat în XHTML 1.0
      „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    2. Modul strict folosit în XHTML 1.0
      „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

    Sintaxă HTML5 modernă

    Când utilizați HTML5, scrieți doctype la începutul documentului HTML, puteți utiliza oricare dintre sintaxele limbajului de mai sus (reguli de codificare) sau chiar combina HTML 4.01 și XHTML 1.0 între ele.

    De exemplu, nu citați valorile atributelor atribut=valoare (modul gratuit HTML 4.01 - liber), dar în același timp puneți o bară oblică etichete unice
    (mod strict XHTML 1.0 - strict).

    XHTML (strict), cel mai preferat

    Codificatorii HTML cu experiență folosesc de obicei sintaxa strictă XHTML atunci când scriu cod în HTML5, deoarece ține codificatorul pe degete, nu îi permite să se relaxeze și, prin urmare, îl protejează de posibile eroriîn cod. De asemenea, folosirea sintaxei stricte este utilă atunci când se învață programarea, deoarece acolo strictețea sintaxei este extrem de importantă.

    Sintaxă limbaj HTML

    Orez. 1.6. Afișarea unei pagini HTML simple într-un browser web

    Reguli de bază ale limbajului HTML

    Numele etichetelor HTML nu fac distincție între majuscule și minuscule, iar în XHTML sunt mici și litere mari sunt considerate diferite, iar numele etichetelor trebuie scrise cu litere mici.

    Elementele pot include text și subelemente (cum ar fi element html conţine subelementele cap şi corp din exemplul de mai sus). Elementele trebuie imbricate corect.

    Subelementele incluse într-un element trebuie să se termine înainte de închiderea elementului. De exemplu, următoarea intrare este incorectă: <а>

    În mod corect, acest fragment ar trebui să arate astfel:

    Acesta este text îngroșat și italic

    În XHTML, dacă un element nu include text și subelemente (un element gol), trebuie să aibă în continuare o etichetă de deschidere și de închidere. De exemplu, elementul br nu are conținut și provoacă o întrerupere de linie (textul continuă cu linie nouă). Cu toate acestea, conform regulilor, ar trebui să fie scris după cum urmează:

    sau pe scurt
    . Elementul trebuie scris exact în același mod


    – ieșirea unei linii orizontale.

    Etichetele de deschidere a elementului pot avea atribute, care clarifică comportamentul elementului și stabilesc valori suplimentare. Aproape fiecare etichetă are un număr mare de parametri opționali. În continuare, vor fi luate în considerare numai atributele principale ale etichetelor.

    Multe atribute din HTML sunt comune tuturor elementelor, dar unele sunt specifice a acestui element sau elemente. Toate au forma:

    attribute_name="valoare"

    De exemplu:

    Bazele limbajului de marcare hipertext"

    ÎN în acest exemplu un element div (o secțiune a unei pagini HTML care vă permite să separați documentele în blocuri logice) are un atribut id setat la mySection. element div conține un element h1 (antetul primului, sau cel mai important, nivel), care, la rândul său, conține ceva text. Valorile atributelor trebuie să fie cuprinse între ghilimele simple sau duble.

    Numele etichetelor și atributelor și valorile lor posibile sunt definite de specificația limbajului HTML și nu vă puteți crea propriile etichete sau atribute.

    Toate elementele pot avea atribute id și clasă, ale căror valori sunt folosite pentru a identifica elemente specifice (id) sau grupuri de elemente (clasă). Aceste atribute sunt utilizate în mod activ în scripturile și descrierile documentelor Stiluri CSS document.

    Există două categorii principale de elemente în HTML: blocȘi şir

    • Elemente de bloc informează de obicei despre structura documentului. Astfel de elemente încep pe o nouă linie, rupându-se de ceea ce a fost înainte. Exemple de elemente bloc sunt paragrafe, listă articole, anteturi și tabele, containere div.
    • Elemente de șir sunt conținute în elementele structurale la nivel de bloc și acoperă doar părți ale textului documentului, nu zone întregi. Un element inline nu determină apariția unei linii noi în document, deoarece sunt elemente care apar într-un paragraf de text. Exemple de elemente șir sunt link-uri, cuvinte sau expresii evidențiate, se întind în containere.

    Alexandru Kichatov

    Cum funcționează scripturile PHP

    Cu siguranță ești familiarizat cu principiul de funcționare al mașinilor controlate radio. Apăsați înainte - mașina se mișcă, apăsați spre stânga - mașina schimbă direcția roților.

    PHP funcționează exact la fel. Scrieți comenzi una după alta, iar PHP le execută secvenţial.

    Ce este un script PHP

    Un script PHP este un fișier text obișnuit cu extensia .php. Exact la fel ca html și css.

    Dar există o diferență importantă:

    Scripturile sunt lansate numai prin solicitări http în browser. Aceasta înseamnă că pentru a rula scriptul script.php, trebuie să scrieți site.ru/script.php în bara de adrese a browserului

    Dacă scriptul nu funcționează, verificați adresa URL curentă. Dacă există ceva de genul file:///D:/openserver/domains/site.ru/script.php- asta înseamnă că nu încercați să mergeți la pagina site-ului, ci să deschideți propriul fișier PHP în browser. Nu este corect.

    Serverele web sunt cel mai adesea configurate astfel încât atunci când accesați pagina principala(de exemplu site.ru) fișierul index.php sau index.html situat în rădăcina site-ului este lansat automat.

    Creați un fișier numit index.php în folderul rădăcină al site-ului și deschideți-l în editorul de text. Dacă există un fișier index.html, acesta trebuie șters.

    Daca nu il ai inca editor de text- Recomand Notepad++ ușor și gratuit, este mult mai convenabil decât notepad-ul Windows încorporat.

    Asigurați-vă că urmați codarea scripturilor. Codificarea trebuie să fie fie UTF-8 fără BOM(dacă este disponibil în editorul dvs.), sau pur și simplu UTF-8.

    Tipărirea numerelor și a șirurilor de caractere în PHP

    Comenzile PHP sunt scrise între etichete, De exemplu:

    Comanda echo este responsabilă pentru afișarea informațiilor pe ecran. După operator, este indicată valoarea care urmează să fie scoasă.

    Pentru a afișa text, acesta trebuie specificat în format simplu sau ghilimele duble:

    Comenzile din PHP sunt separate prin punct și virgulă. Pentru o citire ușoară, fiecare comandă este de obicei scrisă pe o linie nouă:

    Rezultat în browser:

    Acesta este codul PHP.

    Ieșirea codului HTML în PHP

    Codul HTML poate fi amestecat cu comenzi PHP:

    De asemenea, puteți introduce codul HTML într-un șir PHP:

    Napoleon"; ?>

    Rezultat în browser:

    Elefantul Napoleon

    Putem combina codul PHP și etichetele HTML în orice mod dorim:

    Randul 2" ?>

    Funcții în PHP

    O funcție este o comandă care efectuează o anumită acțiune, cum ar fi calcule, gestionarea fișierelor etc.

    Definirea unei funcții este simplă - are paranteze după numele ei:

    Funcția phpinfo() afișează informații despre setările PHP curente.

    Unele funcții se așteaptă să le fie transmisă o anumită valoare. De exemplu, funcția de rotunjire ceil() se așteaptă la rotunjirea unui număr:

    Funcția ceil() primește valoarea 91,5 pe care am trecut-o, o procesează (o rotunjește la 92) și returnează rezultatul. Și comanda echo primește valoarea returnată de funcție și o afișează pe ecran. Rezultatul acestui script va fi 92.

    Necesitatea închiderii etichetei în PHP

    Dacă nu există HTML sau orice altă ieșire pe ecran după comenzile PHP, atunci putem omite eticheta de închidere ?>:

    Sintaxa etichetei de deschidere scurtată în PHP

    În loc de

    În plus, putem înlocui eticheta

    Folosind o etichetă

    Acest lucru nu se aplică etichetei

    Orice limbă are o sintaxă, adică un set de reguli pentru construirea de fraze care să permită definirea unor propoziții semnificative în limba respectivă. Vom începe studiul nostru despre limbajul HTML studiind aceste reguli. Mai întâi, să deschidem Dremweaver și să creăm un document HTML simplu în modul nostru vizual obișnuit. Să vedem ce cod HTML corespunde documentului nostru.

    După cum vă amintiți, trecerea la modul de vizualizare a codului HTML se face folosind butonul Vizualizare cod. Dremweaver are un alt mod, foarte convenabil, mai ales când ai un monitor mare. Acesta este un mod „intermediar” care arată simultan atât codul, cât și documentul corespunzător. Acest lucru face mult mai ușor să ne dăm seama unde avem ce: marchem un un anumit fragment în modul vizual și vedeți imediat acest fragment în modul cod HTML. Așadar, puteți observa că HTML conține text originalîn forma sa pură și, în plus, o mulțime de cuvinte de neînțeles cuprinse între paranteze unghiulare. Aceste structuri de neînțeles sunt elementele de bază ale limbii noastre. Se numesc etichete. O etichetă constă din numele etichetei cuprins între paranteze unghiulare. Numele etichetelor pot fi scrise atât cu litere mici, cât și cu litere mari - nu contează.

    Dacă te uiți cu atenție, vei observa că multe etichete au „cealaltă jumătate” completă cu o bară oblică. Și astfel de „perechi” înconjoară fragmente din textul nostru „cu sens”. De exemplu, titlul este înconjurat de etichete

    Și

    , paragraful este înconjurat de etichete. Acest design se numește Element. Un element este o unitate de marcare. Un element constă dintr-o etichetă de deschidere, date (adică informații de conținut) și o etichetă de închidere. Astfel, scopul etichetelor este de a marca limitele elementelor.

    Să încercăm să schimbăm aspectul textului: de exemplu, un titlu în loc de un element închideți-l în elementul . Când schimbăm ceva în cod, modificările nu sunt afișate imediat în modul vizual, dar în panoul de proprietăți apare un mesaj că am schimbat codul și pentru a vedea modificările, trebuie să apăsați butonul „reîmprospătare” sau tasta „F5”.

    În loc de titlu, avem un paragraf obișnuit de text. Felicitări! Ați făcut primul pas către editarea manuală a codului HTML. Când marcați textul în elemente, este foarte important ca eticheta de deschidere să se potrivească cu aceeași etichetă de închidere. Dacă ar fi să schimbăm eticheta de deschidere în

    Și cel de închidere a rămas- ar fi o greșeală gravă. Dreamweaver este capabil să „prindă” astfel de erori și să ni le raporteze. Există elemente pentru care nu este necesară specificarea unei etichete de închidere. Un astfel de element, de exemplu, este elementul P. Sfârșitul primului paragraf poate fi indicat de începutul celui de-al doilea.

    Există elemente care nu pot avea deloc o etichetă de închidere, constând doar dintr-o etichetă de deschidere. Acest lucru se întâmplă atunci când elementul nu este destinat să marcheze text, ci poartă o încărcare semantică independentă. De exemplu imagine, element . Elementele pot fi imbricate unele în altele. De exemplu, element imbricate într-un element

    Aceasta înseamnă că imaginea este în interiorul paragrafului. Putem pune alte elemente în acest paragraf.

    De exemplu, să includem un fragment de text într-un element . Acest fragment este cu caractere cursive. Elementele nu trebuie să se „intersecteze”: dacă elementul deschis în interiorul unui element

    Atunci ar trebui să se închidă și în interior

    Dacă închidem un element „în afara” elementului său părinte, aceasta va fi o greșeală gravă, despre care ne va informa și Dreamweaver. Aici, raportează că avem etichete suprapuse. Unele etichete, pe lângă nume, pot include atribute care conțin Informații suplimentare despre acest element anume. Un atribut constă dintr-un nume de atribut și o valoare separate printr-un semn egal. De exemplu, etichetați conține atributul width, care este responsabil pentru lățimea imaginii.

    Putem schimba valoarea acestui atribut și lățimea imaginii se va schimba. Atributele speciale sunt id și class. Aceste atribute se aplică aproape oricărui element. Id vă permite să dați unui element un nume unic și astfel să-l distingeți de un număr de elemente similare. Acest nume poate fi apoi folosit: În primul rând, pentru proiectarea non-standard a unui anumit element (de exemplu, avem 2 paragrafe - elemente identice, arata, respectiv, la fel; prin atribuirea de nume folosind atributul id, putem controla designul fiecăruia dintre ele în mod individual). În al doilea rând, id-ul poate fi folosit ca țintă într-un hyperlink, adică putem face link nu doar la o pagină, ci la o anumită locație de pe aceasta. În al treilea rând, pentru nevoile programatorului (pentru anumite manipulări cu un anumit element). Clasa, spre deosebire de id, nu trebuie să fie unică. Specifică faptul că unul sau mai multe elemente aparțin unei clase specifice. Clasele sunt folosite în principal pentru nevoi de proiectare.

    De exemplu, putem marca mai multe paragrafe ca aparținând aceleiași clase. Acum avem acesta și acesta paragrafe aparținând aceleiași clase și acum le putem schimba designul dintr-o singură lovitură. Pe lângă etichete, HTML utilizează așa-numitele „substituții” (entități). Sunt necesare în două cazuri: pentru a introduce într-un document caractere care nu sunt pe tastatură (de exemplu, ghilimele „corecte”) și pentru a insera caractere care au un sens de serviciu în HTML. De exemplu, dacă avem nevoie de un parantez unghiular și îl scriem în cod așa cum este, atunci, desigur, acesta va fi perceput de browser ca o etichetă. În acest caz, în loc de paranteze unghiulare, trebuie să specificați substituții speciale care vor fi interpretate de browser ca paranteze unghiulare.

    Înlocuirile au următoarea formă: &code; Codul poate fi fie mnemonic, cuvinte speciale, fie numeric, atunci când pur și simplu

    indicați numărul simbolului. Codul numeric este precedat de un hash. Există un număr mare de coduri mnemonice pentru o varietate de caractere, dar cu ajutorul unui cod numeric putem indica absolut orice caracter disponibil într-un anumit font, chiar și unul pentru care nu există cod mnemonic.

    Deci, elementele, etichetele, atributele și substituțiile sunt principalele „blocuri” din care este construit un document HTML. Dar în orice construcție trebuie să respectăm câteva reguli de bază: mai întâi puneți fundația, construiți pereții, acoperiți clădirea cu un acoperiș etc. Construcția unui document HTML are și propriile legi, care se reflectă în structura documentului. Ne-am dat seama mai mult sau mai puțin de marcajul textului. Te-ai asigurat că documentul se bazează pe textul tău, împărțit în elemente folosind etichete. Cu toate acestea, puteți vedea o serie de alte elemente care nu sunt clare cu ce se referă. Ele sunt situate într-o manieră strict definită.

    Documentul începe cu această linie:. Aceasta este așa-numita declarație de versiune HTML. Cert este că, după cum vă amintiți, în timpul scurt, dar plin de evenimente a istoriei dezvoltării sale, HTML a fost lansat în mai multe versiuni. Pentru ca browserul să poată afișa corect acest document, el trebuie să știe în ce HTML este scris. În acest caz, această linie indică faptul că avem de-a face cu versiunea HTML 4.01. După declarație, începe documentul în sine. Este închisă într-un element . Vedem eticheta de deschidere, iar la sfârșitul documentului există o etichetă de închidere.

    În interiorul unui element două sunt situate unul în spatele celuilalt elemente obligatorii: și, după el,

    . , adică antetul conține informații de serviciu care nu sunt afișate în fereastra browserului, de exemplu, elementul conține numele documentului, care este afișat în titlul ferestrei. <body>- acesta este corpul documentului - include conținutul documentului nostru, i.e. ceea ce vedem în fereastra browserului.</p> <p>Dacă descrii toate acestea grafic, obții următoarea diagramă. Este interesant de observat că din punctul de vedere al specificației, un document HTML minim trebuie să conțină doar două elemente: o declarație de versiune HTML și un element TITLE - titlul documentului. Toate celelalte elemente, strict vorbind, sunt opționale. Adevărat, este clar că valoarea informațională a unui astfel de document va fi foarte îndoielnică.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </div> </div> <div class="grid_4"> <ul id="sidebar"> <div class="widget cat-lists"> <div class="outer"> <div class="menu-sidebar-container"> <ul id="menu-sidebar" class="menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://remzhuk.ru/ro/category/program/">Programe</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://remzhuk.ru/ro/category/security/">Siguranță</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://remzhuk.ru/ro/category/news/">Știri</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://remzhuk.ru/ro/category/interesting/">Interesant</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://remzhuk.ru/ro/category/tips/">Sfat</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://remzhuk.ru/ro/category/news/">Știri</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://remzhuk.ru/ro/category/reviews/">Recenzii</a></li> </ul> </div> </div> <script> function fd() { var menu = document.querySelector('.menu-wrapper') // Using a class instead, see note below. menu.classList.toggle('active'); } function fds(e) { var menu = document.querySelector('.' + e) // Using a class instead, see note below. menu.classList.toggle('active'); } </script> </div> <li id="text-46" class="widget widget_text"> <div class="textwidget"> </div> </li> <li id="text-9" class="widget widget_text"> <div class="textwidget"> <div class="subscription" id="sidebar-sub"> <div class="gradient-sub"></div> <p class="head-sub">Alăturaţi-ne!</p> <p class="description-sub">Peste 6.000 de persoane s-au abonat deja. <br>Obțineți cele mai recente articole.</p> <form action="/" method="post" target="_blank" id="subscr-form-6292" onsubmit="return jc_chkscrfrm(this, false, false, false, false)"> <input type="text" name="lead_email" class="sr-required" placeholder="Introduceți adresa dvs. de email" maxlength="100"> <button type="submit" name="lead_subscribe" value="Abonati-va">ABONATI-VA</button> </form> <div class="ribbon"></div> </div> </div> </li> <li id="text-36" class="widget widget_text"> <div class="textwidget"> </div> </li> <div id="sticky-anchor"></div> <div id="sticky"> <div id="owl-demo2" class="owl-carousel owl-theme"> <div class="item"> </div> </div> </div> <script> var stk = true; </script> <style> #owl-demo2 .item { background: #3fbf79; margin: 10px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation { text-align: center; } //use styles below to disable ugly selection .customNavigation a { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } </style> <link href='/assets/owl.theme.css' rel='stylesheet' type='text/css'> <link href='/assets/owl.carousel.css' rel='stylesheet' type='text/css'> <link href='/assets/owl.transitions.css' rel='stylesheet' type='text/css'> </ul> </div> <div class="clear"></div> <a class="btn-floating btn-large red" href="#"></a> <footer> <script type="text/javascript"> function GoTo(link) { window.open(link.replace("_", "http://")); } </script> <div class="grid_12"> <p id="footer"><a href="https://remzhuk.ru/ro/">Știri. Siguranță. Recenzii. Programe. Sfat</a>- Copierea materialelor este strict interzisă. <br><a href="" target="_blank">despre proiect</a> <br><a href="" target="_blank">Publicitate pe site</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="/assets/modernizr.min.js"></script> <script type="text/javascript" src="/assets/jquery.slicknav.js"></script> <script type="text/javascript" src="/assets/main.js"></script> <script type="text/javascript" src="/assets/include.js"></script> <script type="text/javascript" src="/assets/jquery.fancybox.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.fancybox').fancybox(); }); </script> <script type="text/javascript"> window.___gcfg = { lang: 'ru' }; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </div> <div class="clear"></div> </footer> </div> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/postviews-cache.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <script type='text/javascript' src='/assets/form.js'></script> <script type='text/javascript' src='/assets/jquery.fancybox-1.3.8.min.js'></script> <script type='text/javascript' src='/assets/jquery.easing.min.js'></script> <script type="text/javascript"> jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } ); jQuery(document).on('ready post-load',easy_fancybox_handler); jQuery(document).on('ready',easy_fancybox_auto);</script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> <script>// <![CDATA[ $(".closed").toggleClass("show"); $(".title").click(function(){ $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium"); if ($(this).parent().hasClass("show")) $(this).children(".title_h3").css("background","#bbbbbb"); else $(this).children(".title_h3").css("background","#dddddd"); } ); // ]]></script> <script> $(".single-post .post a:has(img), .single-post .entry-content a:has(img)").fancybox(); $('.sub-menu').parent().addClass('after'); $('.mobile_menu .ya-site-form__input-text').attr('id', 'unstapble-transparent'); $('.sub-menu').parent().children('a').attr("onclick", "$(this).parent().toggleClass('active');return false;"); // $('.nav-list-mobile li a').click(function() { // $(this).parent().toggleClass('active'); // return false; // } ); function tg_menu () { $('.mobile_menu').toggleClass('active'); $('.google_search_mob').toggleClass('active'); } ; if (stk) { $(document).ready(function() { $(window).scroll(sticky_relocate); sticky_relocate(); function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').addClass('stick'); } else { $('#sticky').removeClass('stick'); } } } ); } if (carusel) { } </script> <script src="/assets/owl.carousel.min.js"></script> <script> var owl2 = $("#owl-demo2"); owl2.owlCarousel({ items : 1, //10 items above 1000px browser width lazyLoad : true, itemsDesktop : [1000,1], //5 items between 1000px and 901px itemsDesktopSmall : [900,1], // betweem 900px and 601px itemsTablet: [600,1], //2 items between 600 and 0 itemsMobile : [479,1] // itemsMobile disabled - inherit from itemsTablet option } ); // Custom Navigation Events // $(".next").click(function(){ // owl.trigger('owl.next'); // } ) // $(".prev").click(function(){ // owl.trigger('owl.prev'); // } ) owl2.trigger('owl.play',5000); //owl.play event accept autoPlay speed as second parameter // $(".stop").click(function(){ // owl.trigger('owl.stop'); // } ) </script> </html>