###
  • Programe
  • Siguranță
  • Știri
  • Interesant
  • Sfat
  • Știri
  • Recenzii

    • Elemente HTML: etichete simple și pereche (etichetă de deschidere și de închidere). Elemente HTML: etichete simple și pereche (etichetă de deschidere și de închidere) Etichete HTML unice

    07.09.2020 Recenzii

    HTML este pur și simplu simplu fisier text cu extensia .htm (html). Pentru a crea cea mai simplă pagină la început, când doar te antrenezi, ai nevoie doar de un blocnotes. Deschide blocnotesul și scrie ceva text.

    Fiecare element HTML este o etichetă înconjurată de paranteze. Orice fișier, pagină html începe cu o etichetă și se termină cu o etichetă.

    Această etichetă spune pur și simplu browserului (acesta este programul în care vizualizați paginile de Internet) că acest document este un document de marcare html.

    Eticheta înseamnă începutul documentului html, iar eticheta de închidere înseamnă sfârșitul documentului html.



    În cadrul acestor etichete există câteva alte etichete importante. Imediat după etichetă sunt etichete care indică titlul paginii și corpul paginii.


    Prima mea pagină HTML




    Eticheta înseamnă titlul titlului ferestrei când este afișată această pagină.
    Acum puteți crea unul nou Document textîn notepad, copiați textul prezentat mai sus și salvați-l ca Pagina1.html și rulați-l în browser, veți vedea titlul paginii din bara de titlu a ferestrei browserului și o pagină goală, deoarece Nu afișăm nimic în corpul paginii în etichete.

    Deci, textul de mai sus va fi scheletul de bază al oricărei pagini web pentru noi.

    Etichete împerecheate și neîmperecheate!

    , , Acestea sunt doar etichete împerecheate - acele etichete care vin ca o pereche: o etichetă și închiderea acesteia, o etichetă de închidere cu simbolul /. Pentru etichetele pereche, valoarea cuprinsă între începutul etichetei și sfârșitul acesteia este acțiunea etichetei. Acțiunea va continua până când este găsită o etichetă cu simbolul /.

    Etichete nepereche – nu au o etichetă de închidere. Mai jos vom oferi exemple de astfel de etichete.

    — Titlu pagini html, unde sunt incluse Cuvinte cheie pentru motoarele de căutare, diverse scripturi etc.

    — Corpul documentului html în sine.


    Etichetă neîmperecheată.

    Notă: În cele mai multe cazuri, atunci când construiți site-uri web acum, sunt utilizate rutine gata făcute, pluginuri etc. - pentru mai mult creație rapidă site-uri, dar pentru a aplica și utiliza astfel de rutine și șabloane, mai aveți nevoie de cunoștințe minime despre aceste sesiuni.

    Etichetele HTML sunt baza limbajului HTML. Etichetele sunt folosite pentru a delimita începutul și sfârșitul elementelor în marcare.

    Fiecare document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element HTML este identificat printr-o etichetă de început (deschidere) și de sfârșit (închidere). Etichetele de deschidere și de închidere conțin numele etichetei.

    Toate elementele HTML sunt împărțite în cinci tipuri:

    • elemente goale - , ,
      , , , , , , , , , , , , ;
    • elemente cu text neformatat - , ;
    • elemente care afișează text neformatat - , ;
    • elemente dintr-un alt spațiu de nume - MathML și SVG;
    • elemente obișnuite - toate celelalte elemente.

    Tabelul arată lista plina elemente suportate de HTML4 și HTML5. Etichetele experimentale și vechi sunt excluse. Elementele adăugate la specificația HTML5 sunt evidențiate cu culoarea galbenă.

    Lista completă a elementelor HTML Tabelul 1. Elemente HTML Descrierea etichetei
    Folosit pentru a adăuga comentarii.
    Declara tipul documentului și oferă informații de bază browserului - limba și versiunea acestuia.
    Creează legături hipertext.
    Identifică textul ca abreviere sau acronim. Textul explicativ este specificat folosind atributul title.
    Specifică informațiile de contact ale autorului/proprietarului documentului sau articolului. Afișat cu caractere cursive în browser.
    Este un hyperlink cu text corespunzător unei anumite zone de pe o hartă imagine sau unei zone active din cadrul unei hărți imagine. Întotdeauna imbricat într-o etichetă.
    O secțiune de conținut care formează o parte independentă a unui document sau a unui site web, cum ar fi un articol de revistă, o postare pe blog, un comentariu.
    Reprezintă conținutul paginii care are legătură indirectă cu conținutul principal al paginii/site-ului.
    Încarcă conținut audio într-o pagină web.
    Setează un pasaj de text să fie aldine fără a adăuga accent sau importanță textului evidențiat.
    Specifică adresa de bază (URL) din care sunt calculate toate adresele relative. Acest lucru va ajuta la evitarea problemelor la mutarea paginii în altă locație, deoarece toate linkurile vor funcționa ca înainte.
    Izolează un pasaj de text scris într-o limbă în care textul este citit de la dreapta la stânga de restul textului.
    Afișează textul în direcția specificată de atributul dir, suprascriind direcția curentă a textului.
    Evidențiază textul ca citat, folosit pentru a descrie ghilimele mari.
    Reprezintă corpul documentului (conținut care nu face parte din metadatele documentului).

    		Încadrați textul într-o nouă linie.
    Creează un buton interactiv. Puteți plasa conținut în interiorul etichetei - text sau imagine.
    Container canvas pentru afișarea dinamică a imaginilor, cum ar fi imagini simple, diagrame, grafice etc. Limbajul de scripting JavaScript este folosit pentru desen.
    Adaugă o legendă la tabel. Se introduce imediat după etichetă .
    Folosit pentru a indica sursa unei citari. Afișat cu caractere cursive.
    Reprezintă o bucată de cod de program, afișată într-o familie de fonturi monospace.
    Selectează una sau mai multe coloane de tabel pentru formatare care nu conțin același tip de informații.
    Creează un grup structural de coloane care identifică multe celule omogene din punct de vedere logic.
    Elementul este folosit pentru a asocia valoarea atributului value, care este într-un format care poate fi citit de mașină și poate fi procesat de un computer, cu conținutul etichetei.
    Element container pentru un element de listă verticală. Valorile variantelor sunt plasate în elemente.
    Folosit pentru a descrie un termen dintr-o etichetă.
    Marchează textul ca șters, eliminându-l.
    Creează un widget interactiv pe care utilizatorul îl poate deschide sau închide. Reprezintă un container pentru conținut, titlul vizibil al widget-ului este plasat în etichetă.
    Identifică un cuvânt ca termen punându-l cu caractere cursive. Textul care urmează ar trebui să conțină o definiție a acestui termen.
    Un element interactiv cu care utilizatorul interacționează pentru a finaliza o sarcină, cum ar fi o casetă de dialog, un inspector sau o fereastră. Fără atributul deschis, acesta nu este vizibil pentru utilizator.
    O etichetă de container pentru secțiuni ale unui document HTML. Folosit pentru a grupa elemente de bloc pentru formatare cu stiluri.
    O etichetă de container care conține un termen și descrierea acestuia.
    Folosit pentru a specifica un termen.
    Evidențiază pasaje importante ale textului afișându-le cu caractere cursive.
    O etichetă de container pentru încorporarea conținutului interactiv extern sau a unui plugin.
    Grupează elementele înrudite într-o formă desenând o casetă în jurul lor.
    Titlu/titlu pentru element.
    O etichetă de container autonomă pentru conținut, cum ar fi ilustrații, diagrame, fotografii, exemple de cod, de obicei cu o legendă.
    Definește zona de sfârșit (subsol) a unui document sau a unei secțiuni.
    Un formular pentru colectarea și trimiterea informațiilor de la utilizatori către server. Nu funcționează fără atributul acțiune.
    Creați șase niveluri de titluri pentru secțiunile conexe.
    Un element container pentru metadatele documentelor HTML, cum ar fi , , , , .
    Secțiune pentru informații introductive despre un site sau un grup de link-uri de navigare. Poate conține unul sau mai multe titluri, logo, informații despre autor.
    O linie orizontală pentru împărțirea tematică a paragrafelor.
    Elementul rădăcină al unui document HTML. Spune browserului că acesta este un document HTML. Este un container pentru toate celelalte elemente html.
    Cursiv un pasaj de text fără a-i acorda un accent suplimentar.
    Creează un cadru inline prin încărcarea unui alt document în documentul HTML curent.
    Încorporează imagini într-un document HTML utilizând atributul src, a cărui valoare este adresa URL a imaginii încorporate.
    Creează câmpuri de formulare bogate în care utilizatorul poate introduce date.
    Evidențiază textul cu subliniere. Folosit pentru a evidenția modificările aduse unui document.
    Selectează textul care urmează să fie introdus de către utilizator utilizând tastatura într-un font monospațiu.
    Folosit pentru a stoca informații suplimentare despre pagină. Aceste informații sunt folosite de browsere pentru a procesa pagina și de motoarele de căutare pentru a o indexa. Pot exista mai multe tag-uri într-un bloc, deoarece în funcție de atributele utilizate, acestea poartă informații diferite.
    Indicator de măsurare într-un interval dat.
    O secțiune a unui document care conține link-uri de navigare pentru site.
    Definește o secțiune care nu acceptă scripting.
    Container pentru încorporarea multimedia (de exemplu, audio, video, applet-uri Java, ActiveX, PDF și Flash). De asemenea, puteți insera o altă pagină web în documentul HTML curent. Eticheta este folosită pentru a trece parametrii pluginului.
    Lista numerotata ordonata. Numerotarea poate fi numerică sau alfabetică.
    Un container cu un titlu pentru un grup de elemente.
    Specifică o opțiune/opțiune de selectat din lista derulantă , sau ,.
    Câmp pentru afișarea rezultatului unui calcul calculat cu ajutorul scriptului.

    		Paragrafe din text.
    Definește parametrii pentru pluginurile încorporate folosind elementul.
    Un element container care conține un element și zero sau mai multe elemente. În sine nu afișează nimic. Permite browserului să selecteze imaginea cea mai potrivită.
    Produce text fără formatare, păstrând spațiile și pauzele de text. Poate fi folosit pentru a afișa codul computerului, mesajele de e-mail etc.
    Un indicator al finalizării unei sarcini de orice fel.
    Definește o citație scurtă.
    Container pentru simbolurile din Asia de Est și decodarea acestora.
    Definește textul său imbricat ca componentă de bază a adnotării.
    Adaugă o scurtă descriere deasupra sau sub caracterele conținute în element, afișată într-un font mai mic.
    Marchează textul încorporat ca adnotare suplimentară.
    Afișează text alternativ dacă browserul nu acceptă elementul.
    Afișează text care nu este actual cu barat.
    Folosit pentru a afișa text reprezentând rezultatul execuției codului programului sau scriptului, precum și mesajele de sistem. Afișat cu font monospațiu.
    Folosit pentru a defini un script pe partea client (de obicei JavaScript). Conține fie text script, fie indică către un fișier script extern folosind atributul src.
    Definește o zonă logică (secțiune) a unei pagini, de obicei cu un antet.
    Un element de control care vă permite să selectați valori dintr-un set propus. Valorile variantelor sunt plasate în .
    Afișează textul într-o dimensiune mai mică a fontului.
    Specifică locația și tipul resurselor media alternative pentru , , .
    Container pentru elemente inline. Poate fi folosit pentru a formata pasaje de text, cum ar fi evidențierea cuvintelor individuale cu culoare.
    Pune accent în text, evidențiind-o cu caractere aldine.
    Include foi de stil încorporabile.
    Specifică scrierea în indice a simbolurilor, de exemplu, indicele elementului în formule chimice.
    Creează un titlu vizibil pentru etichetă. Afișat cu un triunghi umplut, făcând clic pe acesta vă permite să vizualizați detaliile titlului.
    Specifică scrierea în superscript al caracterelor.
    Etichetă pentru crearea unui tabel.
    Definește corpul tabelului.
    Creează o celulă de tabel.
    Folosit pentru a declara fragmente de cod HTML care pot fi clonate și inserate într-un document printr-un script. Conținutul unei etichete nu este un copil al acesteia.
    Creează câmpuri mari de introducere a textului.
    Definește subsolul tabelului.
    Creează un titlu de celulă de tabel.
    Definește titlul tabelului.
    Definește data/ora.
    Titlul unui document HTML care apare în partea de sus a barei de titlu a browserului. Poate apărea și în rezultatele căutării, așa că acest lucru ar trebui să fie luat în considerare atunci când furnizați un titlu.
    Creează un rând de tabel.
    Adaugă subtitrări pentru elemente și .
    Evidențiază un pasaj de text prin subliniere, fără un accent suplimentar.
    		Creează o listă cu marcatori.
    Evidențiază variabilele din programe afișându-le cu caractere cursive.
    Adaugă fișiere video pe pagină. Suporta 3 formate video: MP4, WebM, Ogg.
    Indică browserului unde se poate rupe o linie lungă.
    Cheat sheet cu etichete

    Pentru ușurință în utilizare, am grupat etichetele în secțiuni tematice, adăugând valorile proprietăților de afișare pentru fiecare etichetă. Pentru a merge la tabel, dați clic pe imagine.

    Un element HTML este unitatea structurală de bază a unei pagini web, scrisă în HTML.

    Etichete HTML asociate și unice

    Sintaxa elementelor HTML constând din etichete pereche este:

    • Elementul începe cu o etichetă de deschidere.
    • Elementul se termină cu o etichetă de închidere.
    • Conținutul unui element este totul între etichetele de deschidere și de închidere. Conținutul poate fi text și/sau alte elemente HTML.

    Notă: Nu uitați să puneți un „/” în eticheta de închidere, acesta spune browserului că elementul dvs. s-a încheiat și că ceea ce vine după el este un alt element. Dacă nu puneți caracterul „/” în eticheta de închidere, browserul îl va confunda cu un element nou imbricat într-unul anterior, despre care browserul crede că nu este încă închis.

    Sintaxa pentru elementele HTML constând din etichete individuale este:

    • Elementul constă doar dintr-o etichetă de deschidere.

    Elementele formate din etichete simple sunt numite goale. Există un total de 16 etichete individuale în HTML:

    Elemente imbricate

    Elementele HTML constând din etichete pereche pot fie să conțină orice alte elemente, fie ele însele pot fi imbricate în alte elemente, iar adâncimea de imbricare a elementelor nu este limitată.

    Următorul exemplu este format din trei elemente, dintre care două sunt imbricate:

    Primul meu paragraf

    Când un element este imbricat în altul, trebuie să vă asigurați că elementul imbricat începe și se termină în același element. Deci, de exemplu, următorul cod este incorect:

    Aceasta este foarte

    Interesant

    Aici elementul depășește limitele elementului

    Exemplu cu imbricarea corectă:

    Este foarte interesant

    Aici elementul este imbricat corect - este complet în interiorul elementului

    Caractere cu spații albe

    Browserul ignoră spațiile albe din codul HTML, așa că le puteți folosi în avantajul dvs. pentru a face codul mai ușor de citit. Caracterele spațiilor albe includ file, rupturi de rând și spații obișnuite; ele pot fi utilizate în orice cantitate. Exemplu de cod care utilizează spații albe:

    Titlu Primul meu titlu

    Primul meu paragraf

    Exemplul de cod ar putea fi scris fără a utiliza deloc spații albe, dar un astfel de cod ar fi mai puțin lizibil:

    TitluPrimul meu titlu

    Primul meu paragraf

    Pe măsură ce codul de document HTML devine mai mare și mai complex în timp, veți vedea că utilizarea spațiilor albe îmbunătățește de fapt lizibilitatea codului.

    Ați citit deja că toată limba este alcătuită din etichete. În această lecție vom arunca o privire mai atentă asupra etichetelor HTML. În limbajul HTML, etichetele sunt împărțite în etichete simple (nepereche) și etichete asociate. Deci, etichetele HTML unice constau dintr-o singură etichetă, adică nu au o etichetă de închidere. Iar descriptorii perechi au o etichetă de deschidere și de închidere.

    Etichete HTML unice

    Etichetele unice nu au o etichetă de închidere. De exemplu:
    , . Anterior ei scriau așa:
    , , acum acest stil de a scrie etichete individuale nu este relevant, așa că nu scrie așa. Cele mai utilizate etichete individuale:
    - transfer către linie nouă, - Linia de demarcație, - introduceți o imagine.

    Etichete HTML asociate

    Există mult mai multe etichete pereche. Un descriptor asociat are o etichetă de deschidere și de închidere. Eticheta asociată formează un container. Conținutul containerului este ceea ce se află între etichetele de deschidere și de închidere. În exemplul din acest articol, ați văzut eticheta Ce sunt descriptorii în HTML? , deci, aceasta este o etichetă asociată, conținutul acestei etichete este textul „Ce sunt etichetele în HTML?” Începutul său este eticheta și sfârșitul său este .

    Principala greșeală a începătorilor în scrierea etichetelor pereche este confuzia în cuibărire. De exemplu, aceasta este intrarea corectă:

    Paragraf îndrăzneț

    . Și iată eroarea:

    Paragraf îndrăzneț

    , un document HTML cu un astfel de aspect este considerat nevalid. Pentru a nu încurca imbricarea, procedați astfel: creați etichete împerecheate, apoi încorporați altele în ele, iar la sfârșit scrieți textul în ambele etichete

    Cum să scrieți corect etichetele asociate

    .

    Ce este nou în HTML5 în ceea ce privește etichetele?

    HTML5 este o extensie a HTML4, așa că reține majoritatea sau toți descriptorii din HTML4 și își adaugă proprii. HTML5 a introdus etichete speciale pentru împărțirea site-ului în blocuri principale: antet, meniu, subsol, bară laterală și conținut.

    De ce este important să înveți cum să folosești etichetele?

    Motoarele de căutare Yandex și Google sunt sensibile la aspect documente HTML, verificându-le validitatea. Ei caută cuvinte cheie incluse în descriptori speciali și așa mai departe. Dar această secțiune nu este despre asta. Acest lucru se aplică promovării (SEO).

    Cum să înveți toate etichetele HTML?

    Da, există destul de multe etichete. Dar nu este nevoie să-i învățați în mod special. Atâta timp cât exersați să scrieți ceva, toți descriptorii, perechi și singuri, vor fi rememorați cu ușurință. Cu timpul, desigur.

    Etichetă ( pl. etichete, uneori etichetă) este un element al limbajului HTML care este utilizat pentru a efectua markup text sursă pagini web. Etichetele sunt abrevieri sau abrevieri ale cuvintelor engleze incluse între paranteze unghiulare, de exemplu, tag

    …

    abrevierea cuvântului englezesc paragraf, adică textul inclus în această etichetă va fi recunoscut de browsere ca un paragraf.

    Fiecare etichetă din HTML are o semnificație specială și este responsabilă pentru afișarea anumitor date. Cazul literelor din numele etichetelor nu contează, de exemplu, eticheta

    …

    și etichetați

    …

    - Este la fel. Adică, etichetele pot fi scrise atât cu litere mici, cât și cu litere mari. Anterior, era o practică obișnuită să scrieți toate etichetele cu majuscule, astfel încât etichetele să difere de textul obișnuit. Acum nu mai este nevoie, deoarece mulți editori au evidențiere de sintaxă.

    Clasificarea etichetelor

    Există mai mult de 90 de etichete în HTML. De obicei, o etichetă afectează doar o parte a documentului, de exemplu, eticheta de antet de la primul nivel... În astfel de cazuri, se folosesc etichete asociate: deschidereȘi închidere. O etichetă de deschidere (de exemplu, ) creează efectul, iar o etichetă de închidere ( ) oprește efectul. După cum puteți vedea din exemplu, eticheta de închidere are întotdeauna acest simbol (/) - o bară oblică. Aceste etichete sunt numite se dublează.

    Unele etichete oferă un efect unic acolo unde apar. De exemplu, o etichetă de bară orizontală sau o etichetă de afișare a imaginii . Astfel de etichete nu au etichete de închidere. Astfel de etichete se numesc non-împerechete.

    Tipuri de etichete

    În plus, etichetele sunt împărțite în mai multe tipuri, care diferă prin funcțiile lor:

    • etichete cu titlul documentului;
    • elemente de bloc;
    • elemente inline;
    • elemente universale;
    • liste;
    • Mese;
    • rame.

    Această diviziune nu este strictă, așa că unele etichete sunt în grupuri diferite. De exemplu, etichete pentru crearea de liste și

      se aplică atât listelor, cât și elementelor bloc.

      Structura etichetei

      Când sunt încărcate în browser, etichetele în sine nu sunt afișate, dar afectează modul în care este afișat conținutul lor. Dacă o etichetă este scrisă greșit, este ignorată în totalitate.

      Toate etichetele au o anumită structură care trebuie urmată la scriere. În plus, aproape toate etichetele au diverse atribute care pot schimba modul în care este afișat conținutul.

      Să aruncăm o privire la structura corecta etichete care conțin atribute:

    • Propriul dvs. webmaster

      • Ca exemplu, am dat două etichete complet diferite. Primul singur - responsabil pentru afișarea imaginilor, atribut - src="logo.jpg" . Al doilea … cel asociat este responsabil pentru crearea linkurilor, atributul este href = "site" .

      Concluzia 1: Atributele pot avea etichete asociate și neîmpereche.

      Concluzia 2: Numai etichetele de deschidere pot avea atribute, etichetele de închidere nu au atribute.

      Poza pentru clarificare:

      Figura 1. Structura etichetelor HTML

      Test de atenție și cunoaștere a sintaxei HTML

      Să ne uităm la exemplul unei pagini web simple pe care ne-am uitat în lecție.