In acest capitol:
Sintaxa elementului
element HTML este unitatea structurală de bază a unei pagini web scrisă în limbajul HTML. Imaginea de mai jos demonstrează sintaxa elementelor. Pentru majoritatea etichetelor, sintaxa elementului va arăta la fel, cu excepția etichetelor individuale.
Toate elementele din HTML urmează același format:
- Elementul începe cu o etichetă de pornire.
- Elementul se termină cu o etichetă de închidere.
- Conținutul unui element este totul între etichetele de deschidere și de închidere.
- Unele elemente nu au conținut (elemente goale).
- Majoritatea elementelor pot conține atribute
Notă: nu uitați să puneți „ / „, îi spune browserului că elementul tău s-a încheiat și că ceea ce va fi scris după el este deja un alt element.
Elemente goale
Există mai multe elemente în HTML care nu au o etichetă de final, de exemplu sau
... Astfel de elemente sunt numite gol deoarece nu conțin niciun conținut și nu au o etichetă finală.
Elemente imbricate
Toate documentele HTML sunt compuse din elemente imbricate. Cele mai multe dintre ele pot conține fie alte elemente, fie ele însele pot fi imbricate în alte elemente, în timp ce adâncimea de imbricare a elementelor nu este limitată.
Următorul exemplu are trei elemente, dintre care două sunt imbricate:
Primul meu paragraf
Când imbricați un element în altul, aveți grijă să vă asigurați că elementul imbricat începe și se termină în același element. Deci, următorul exemplu este incorect:
Acest foarte
interesantExistă două tipuri de elemente în HTML - elemente bloc și elemente inline. Mai jos veți afla caracteristicile acestor elemente și diferența dintre ele, precum și modalități de a le controla prin regulile CSS.
Elemente de bloc
Elementele bloc sunt baza care este utilizată pentru aspectul paginilor web. Un astfel de element este un dreptunghi care ocupă implicit întreaga lățime a paginii disponibilă (dacă nu se specifică altfel în CSS), iar lungimea elementului depinde de conținutul său. Un astfel de element începe întotdeauna pe o linie nouă, adică este situat sub elementul anterior. Un element bloc poate conține alte elemente bloc și inline.
Exemple de elemente bloc:
,
- ,
- Elementele inline pot conține numai date sau alte elemente inline, în timp ce elementele bloc pot conține alte elemente bloc, elemente inline și date. Cu alte cuvinte, elementele inline nu pot stoca elemente de bloc în niciun fel.
- Elementele bloc încep întotdeauna pe o linie nouă, iar elementele minuscule nu sunt accentuate în acest fel.
- Elementele bloc ocupă toată lățimea disponibilă, de exemplu, a ferestrelor browserului, iar elementele inline au aceeași lățime ca și conținutul lor, plus valorile de umplutură, margine și chenar.
- ,
etc.
Elemente în linie
Spre deosebire de un element bloc, un element inline nu se înfășoară pe o linie nouă, ci este situat pe aceeași linie cu elementul anterior. Astfel de elemente sunt de obicei situate în interiorul elementelor bloc și lățimea lor depinde doar de conținut și de setările CSS. O altă diferență între un element inline și un element bloc este că poate conține doar conținut și alte elemente inline. Elementele bloc nu pot fi imbricate în elemente inline.
Exemple de elemente inline: , , , , etc.
Notă:în HTML5, ordinea de imbricare a etichetelor nu contează. Elementele nu mai sunt pur și simplu împărțite în bloc și inline, ci sunt grupate după semnificație și scop, reprezentând categorii de conținut.
Proprietatea de afișare CSS: modificarea tipului elementului
Cu proprietatea de afișare CSS extrem de utilă, puteți face ca un element bloc să apară în linie și invers. Pentru ca un element bloc să se comporte ca un element inline (adică să nu fie transferat pe o linie nouă), trebuie scrisă o regulă pentru el:
Display: inline;
Dacă trebuie să afișați un element în linie ca element bloc (astfel încât să apară o întrerupere de linie înainte și după element), scrieți următoarele:
Display: bloc;
Acțiune (afișare: inline) și (afișare: bloc)
De asemenea, puteți face un „hibrid” - un element bloc cu comportament inline. În acest caz, întregul conținut al unor astfel de elemente bloc va fi afișat ca de obicei, dar blocurile se vor comporta ca elemente inline, aliniindu-se pe o linie una după alta și înfășurându-se la o nouă linie numai dacă este necesar. Colapsul marjei în astfel de cazuri încetează să funcționeze. Pentru a transforma un element într-un bloc în linie, scrieți:
Display: inline-block;
Acțiune (afișare: bloc inline)
Mai jos tutorialul: Proprietatea marginii CSS. Veți învăța cum să adăugați chenare elementelor unei pagini web și ce setări le puteți aplica folosind foi de stil în cascadă.
Elementele inline sunt acele elemente ale unei pagini web care sunt o parte directă a unui alt element, cum ar fi un paragraf de text. Sunt folosite în principal pentru a schimba aspectul textului sau pentru a-l face să pară logic.
Etichetă este unul dintre elementele importante ale HTML și este destinat creării de link-uri. În funcție de prezența atributelor, numele sau eticheta href setează o legătură sau o ancoră.
Definește un caracter aldine.
Etichetă mărește dimensiunea fontului cu una față de textul normal. În HTML, dimensiunea fontului este măsurată în unități arbitrare de la 1 la 7, dimensiunea medie a textului utilizată implicit este 3. Astfel, adăugarea unei etichete mărește textul cu o unitate convențională.
Etichetă
setează un flux de linie unde se află această etichetă. Spre deosebire de eticheta de paragraf
Folosind eticheta
nu adaugă spațiu alb înaintea liniei.
Etichetă conceput pentru a accentua textul. Browserele redau un astfel de text cu caractere cursive.
Setează fontul la italic.
Etichetă este destinat pentru afișarea imaginilor în format grafic GIF, JPEG sau PNG pe o pagină web. Dacă este necesar, imaginea poate fi făcută un link către un alt fișier prin plasarea etichetei
în recipient ... În același timp, în jurul imaginii este afișată un chenar, care poate fi eliminat prin adăugarea atributului border = „0” la etichetă
.
Etichetă Reduce dimensiunea fontului cu una în comparație cu textul obișnuit. Similar în acțiune cu eticheta , dar acționează exact invers.
O etichetă generică pentru definirea unui element inline într-un document.
Etichetă conceput pentru a accentua textul. Browserele redau un astfel de text cu caractere aldine.
Afișează fontul ca indice. În acest caz, textul este situat sub linia de bază a caracterelor rămase ale liniei și dimensiunea redusă - H 2 O.
Afișează fontul ca superscript. Acțiunea sa este similară cu dar textul este afișat deasupra liniei de bază a textului - m 2.
Diferența dintre elementele bloc și inline este următoarea.
Elementele HTML sunt împărțite în elemente inline și bloc după modul în care sunt afișate pe o pagină web.
Elemente în linie
Elementele inline sunt concepute pentru a efectua unele acțiuni asupra textului, de exemplu: întreruperi de linie, italicizarea unei porțiuni de text, evidențierea logică a anumitor text și aplicarea stilurilor acestuia folosind CSS etc. În funcție de scopul elementului inline, o bucată de text este plasată între etichetele de deschidere și de închidere sau eticheta este aplicată oriunde în text, de exemplu, pentru a rupe o linie.
De exemplu:
Poate folosi elementul inline pentru a evidenția un text care atrage atenția vizitatorilor site-ului prin utilizarea stilului îndrăzneț.
Un element inline are o lățime care este egală cu lățimea conținutului său. Elementele inline nu pot conține elemente bloc în interiorul lor.
Exemple de elemente inline: , ,