Servește pentru:
– aplicați orice setări unui bloc de informații separat de pe site;
– să fie un container pentru text, imagini și alte elemente ale unui document HTML.
Element
- acest lucru este comun incorporat element care este folosit pentru elementele inline care nu introduc linii noi. Element
poate conține doar text și alte elemente inline (nu puteți pune elemente bloc acolo: titluri, liste, elemente de grupare de conținut etc.).
Din moment ce elementul
— litere mici, adică nu necesită toată lățimea ferestrei browser, atunci are nevoie doar de lățimea care este ocupată fizic de toate elementele aflate în ea. Prin urmare elementul
adesea folosit pentru a formata cuvinte individuale într-un paragraf.
În primul articol despre html, am dat o listă de etichete pe care, după părerea mea, un layout designer trebuie să le cunoască. Etichetele rămase sunt, de fapt, redundante sau chiar de prisos, după părerea mea. În acest articol aș dori să vorbesc despre elementele de bază ale html și ale etichetelor html, head, title, body, precum și div și span. Aceste etichete, în opinia mea, sunt o bază bună pentru a începe să învețe html.
Din păcate, browserele moderne sunt foarte loiale dezvoltatorilor web. Ei încearcă să interpreteze tot ce le este hrănit. Etichete neînchise, etichete în registre diferite, etichete neclare, etichete plasate unde nu ar trebui să fie etc. De exemplu, am văzut personal un site în care containerul principal era situat în interiorul corpului, iar eticheta de titlu era chiar în afara containerului principal. Totodată, site-ul arăta normal din exterior!
Sper cu adevărat că într-o zi standardele vor deveni mai stricte, iar paginile așezate incorect nu vor fi afișate corect. Adevărat, acest lucru necesită ca toate browserele să proceseze html și CSS în același mod... Ei bine, m-am lăsat dus de cap.
Ca de obicei, în astfel de cazuri, schițăm mai întâi planul lecției:
- Reguli generale
- Structura documentului
Reguli generale
Pentru început, merită să spunem că html este un limbaj destul de loial. Există o versiune de html al cărei standard este mai strict - xhtml. Încerc să mențin acest standard. Mai exact, acest standard presupune că toate etichetele sunt litere mici și închise. Chiar și cei singuri. Cum va fi prezentat mai jos. Toate atributele sunt scrise cu litere mici, iar valorile lor sunt cuprinse între ghilimele duble și sunt indicate de cantitatea în care este măsurată valoarea lor. Vom respecta aceste reguli.
Standardele prevăd o anumită aranjare a unor elemente. Dacă un element care ar trebui să fie localizat undeva este situat într-un loc diferit, aceasta este considerată o eroare. În general, un astfel de document nu trebuie procesat sau ar trebui să fie procesat cu o eroare. Dar browserele scutesc dezvoltatorii neglijenți. Mai exact, utilizatorii lor care vizualizează site-uri dezvoltate de dezvoltatori neglijenți.
Acum despre etichete. Etichetele pot fi asociate sau simple. Etichetele pereche sunt, de asemenea, împărțite în etichete bloc și etichete inline. O pereche de etichete este uneori numită container.
După cum puteți ghici, etichetele împerecheate au o pereche, iar etichetele individuale sunt singure. O pereche de etichete este formată dintr-o etichetă de deschidere și de închidere. Etichetele unice sunt atât etichete de deschidere, cât și de închidere.
Exemplu de container (etichete pereche):
continutul recipientului
Exemplu cu o singură etichetă
text pe o linie
acest text este deja pe o altă linie
Exemplul de container a folosit construcțiaAcesta este un comentariu. Tot ceea ce este inclus în două săgeți nu este analizat de browser și nu este afișat pe ecran. Aceste comentarii sunt uneori foarte convenabile de utilizat atunci când punctele de confuzie ale aspectului sau pentru a separa părțile logice ale aspectului în cod.
Etichete bloc și inline
Diferența dintre etichetele bloc și etichetele inline este că un element bloc tinde să umple întreaga lățime a ecranului (cu excepția cazului în care lățimea sa este specificată în mod explicit), iar inline ocupă exact la fel de mult spațiu ca și conținutul său. În plus, tot ce urmează unui element bloc va apărea pe o linie nouă, iar orice urmează un element în linie va apărea direct în spatele acestuia. Containerul div este implicit la nivel de bloc, iar eticheta span este inline. (Cu toate acestea, acest comportament poate fi schimbat cu ușurință folosind CSS). Să ilustrăm comportamentul acestor etichete.
Text1. Acest text ocupă toată lățimea paginii.
Acest text trece deja SUB primul text și ocupă, de asemenea, întreaga pagină
în întregime. Dar text roșu, un prizonier
în eticheta span, nu împachetează textul care îl urmează pe o nouă linie și preia
exact atat de mult spatiu cat este nevoie.
Etichetele trebuie să urmeze logic una după alta, menținând ierarhia. Când includeți o etichetă în alta, trebuie să vă asigurați că ordinea etichetelor de închidere este respectată.
Gresit:
text
Dreapta:
text
Mai este un lucru pe care vreau să-l menționez: etichetele pot avea atribute. Un atribut specifică un comportament specific sau completează într-un fel o etichetă. Atributul este scris direct în etichetă, separat printr-un spațiu de numele său, în formatul: ATTRIBUTE_NAME="VALUE[măsură]". ATTRIBUT_NAME și VALUE, cred că este clar care sunt acestea. O măsură este o desemnare a unităților de măsură. Dacă nu există o unitate de măsură, atunci nu este nevoie să inventezi una.
Exemplu de utilizare a unui atribut
Aici setăm atributul de înălțime pentru containerul div (în general, acest lucru se face cel mai bine folosind CSS, dar în acest caz, l-am scris pentru a arăta cum ar putea arăta). Atributele pot fi atribuite numai în etichetele de deschidere. Numarul de spatii nu conteaza. Puteți pune spații între numele etichetei și atribut, între numele atributului și semnul egal și între semnul egal și ghilimele. Puteți pune spații între ghilimele, dar nu între cantitate și unitățile ei de măsură! Citatele nu trebuie să fie duble, puteți folosi „ghilimele simple”, ci doar în perechi. Opțiunea „ghilimele” nu va funcționa. În acest caz, ghilimele unice, precum și tot ce urmează, vor fi interpretate ca parte a valorii atributului.
Cred că asta este tot ce am vrut să spun, practic. Deci, să trecem la asta!
Structura documentului
Ceea ce va fi descris mai jos se încadrează tocmai în categoria conformității obligatorii. Deci nu ar trebui să credeți că dacă „este afișat așa”, atunci este normal. Nu este normal.
Fiecare document trebuie inclus în etichete Aceste etichete, după cum puteți vedea, sunt împerecheate. Deci nu uitați să deschideți o astfel de etichetă la începutul documentului și să o închideți la sfârșit. În teorie, tot ce vine după eticheta de închidere