Ce înseamnă div în html. Evitarea greșelilor comune în marcajul HTML5. Exemplu. Cadru frumos cu div
Orice pagină web constă din elemente aflate pe ea, iar aspectul blocului div este aproape întotdeauna responsabil pentru plasarea lor. Desigur, există și un aspect de tabel care utilizează etichete
| , și există chiar dezbateri despre ce sistem este mai bine de utilizat - bazat pe bloc sau pe tabel. Cu toate acestea, în realitate, în prezent nu veți găsi niciunul dintre site-urile moderne, populare și convenabile care utilizează doar aspect tabelar. În cel mai bun caz, este folosit doar pentru ceea ce este destinat - adică pentru a crea tabele, dar nu pentru a forma structura site-ului în sine.
Faptul este că aspectul div al site-ului vă permite să setați multe proprietăți CSS care nu sunt disponibile pentru tabele. În plus, cel mai mare dezavantaj al unui sistem de tabele este că tabelul nu va fi afișat pe ecran până când nu a fost încărcat complet de browser. Dacă întregul site este realizat într-un tabel, atunci acesta va apărea pe display numai după ce întregul cod html al paginii a fost încărcat complet. Eticheta DIV și proprietatea floatBaza sistemului de blocuri este eticheta, care este un container pentru conținut. Poate conține și alte recipiente în interiorul său. Utilizarea unei etichete DIV nu este mai dificilă decât . De regulă, structura standard a unui site este formată după cum urmează: există un container principal (deseori i se atribuie o clasă numită wrapper, container, main etc.). În interiorul acestui container există blocuri ale meniului, părții de conținut și barei laterale. În mod implicit, fiecare bloc nou este plasat pe o linie nouă. Pentru a poziționa un bloc la stânga sau la dreapta altuia (de exemplu, pentru a poziționa o bară laterală în dreapta), se folosește proprietatea float. În mod implicit, are valoarea „niciun”, dar puteți seta și valorile „stânga” și „dreapta”. Să ne uităm la această proprietate folosind un exemplu cu două blocuri. Blocare pentru conținut Blocare pentru bara laterală Acest cod va da următorul rezultat: proprietate clarăEste important de luat în considerare că proprietatea float se aplică nu numai blocului în sine în care este înregistrată, ci și elementului ulterior care va urma acestui bloc. Adică, dacă adăugăm un alt bloc celor două blocuri descrise mai sus fără a-i specifica proprietăți, atunci acesta nu va fi situat pe o linie nouă, ci va începe în dreapta celui de-al doilea bloc. Pentru a evita acest lucru, aspectul bloc div folosește proprietatea clear, care trebuie setată pentru blocul pe care dorim să îl poziționăm pe o linie nouă. Cel mai adesea, este setat la „ambele” pentru aceasta, dar îl putem seta și la „stânga” sau „dreapta” dacă dorim nu numai să poziționăm blocul pe o linie nouă, ci și să îi setăm alinierea. Să adăugăm un nou element la exemplul de mai sus: Bloc de conținut Bloc de bară laterală Bloc nou situat în partea de jos Rezultat:
Pe lângă locația blocurilor, este important să se stabilească indentări atât între blocuri, cât și în interiorul acestora. Pentru aceasta, sunt utilizate proprietățile de margine și, respectiv, de umplutură. Indentațiile sunt setate separat pentru părțile de sus, dreapta, jos și stânga ale elementului. Ele pot fi specificate pe o singură linie prin enumerarea a patru valori: Marja: 20px 10px 0 40px Un bloc cu acești parametri va fi poziționat la 20 de pixeli sub elementul părinte, la zece pixeli de la elementul din dreapta, va avea zero padding în partea de jos și va avea 40 pixeli de padding în stânga. Dacă toți aceiași indicatori sunt specificați în proprietatea padding, atunci aceștia vor fi umplutura internă pentru conținut în raport cu limitele blocului în care se află. De asemenea, puteți seta proprietăți individuale pentru marginile individuale folosind margine-sus, margine-jos, margine-stânga, margine-dreapta (și în mod similar pentru umplutură). În acest caz, dacă oricare dintre margini nu este specificată, atunci indentarea de pe partea sa va fi zero sau va fi determinată de proprietățile generale css specificate pentru blocurile de pe pagină. Elementul HTML Content Division ( ) este containerul generic pentru conținutul fluxului. Nu are niciun efect asupra conținutului sau aspectului până când este stilat folosind CSS . Sursa pentru acest exemplu interactiv este stocată într-un depozit GitHub. Dacă doriți să contribui la proiectul de exemple interactive, clonează https://github.com/mdn/interactive-examples și trimite-ne o cerere de extragere. Ca container „pur”, elementul nu reprezintă în mod inerent nimic. În schimb, este folosit pentru a grupa conținutul, astfel încât să poată fi stilat cu ușurință folosind clasa sau atributele, marcând o secțiune a unui document ca fiind scrisă într-o altă limbă (folosind atributul lang) și așa mai departe.
Notă: atributul align este învechit; nu-l mai folosi. În schimb, ar trebui să utilizați proprietăți sau tehnici CSS, cum ar fi CSS Grid sau CSS Flexbox pentru a alinia și poziționa elementele pe pagină. Note de utilizare
Orice fel de conținut aici. Ca ,
Tabelul de compatibilitate din această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere. Actualizați datele de compatibilitate pe GitHub
Buna seara prieteni! Cumva, în câteva lecții despre HTML, am vorbit și am folosit un astfel de concept precum aspectul div. Probabil că aveți întrebări, mai ales dacă sunteți începători, ce este? În articolul de astăzi, vă voi risipi toate îndoielile și vă voi răspunde la întrebări despre ce se află blocurile div Să începem să studiem. Blocuri div HTML și aspectPentru a nu vă îngrămădi și împrăștiați creierul, voi spune doar pe scurt că anterior toți designerii și dezvoltatorii web foloseau un aspect de tabel atunci când creau pagini și site-uri, în care fiecare celulă reprezenta un element specific. Arăta cam așa: Așa a fost crearea site-ului web. Acesta este un exemplu foarte primitiv, dar vă puteți imagina clar cum au fost create site-urile web în acele vremuri îndepărtate. Tehnologiile de internet nu stau pe loc și la un moment dat a venit la noi conceptul de layout html div. Și apoi, după cum se spune, totul a început. Importanța sa în dezvoltarea site-ului este cu adevărat mare. Acum crearea de site-uri web și gestionarea blocurilor html a devenit mai ușoară ca niciodată. Site-urile au început să devină frumoase și interesante. Acum întreaga lume tocmai își croiește drum. Așa putem descrie acum într-un mod simplificat modelul de utilizare a blocurilor div html. Comoditatea constă în independența blocurilor unul față de celălalt, sunt ușor de gestionat individual, mutați-le după bunul plac, adăugați stiluri, puteți seta stiluri comune prin reguli CSS pentru mai multe grupuri Div. Sunt de acord că acest lucru este convenabil. Exemple de utilizare a etichetelor divSă ne uităm la câteva exemple practice despre cum puteți aplica etichete div pe o pagină html. Într-un exemplu simplu, vom crea 4 blocuri pe pagină. Voi folosi întotdeauna Notepad++ în acest exemplu și în exemplele viitoare.
Așa că lasă-mă să explic. Avem un design< ! DOCTYPE html >este potrivit pentru browserele moderne și acceptă markup HTML 5, despre asta vom vorbi în numerele viitoare. Apoi, se deschide un container mare „părinte”.< html >. Este împerecheat și trebuie închis la sfârșit! Apoi vine deschiderea etichetei de serviciu< head >, care este, de asemenea, asociat și conține informații de serviciu despre codificare< meta charset >, cel mai important titlu de pagină SEO, descriere (nu am inclus-o aici, pentru că nu este nevoie, analizăm un aspect pur tehnic), stiluri CSS, fonturi (biblioteca Google Fonts), JavaScript sunt și ele incluse aici. Urmează eticheta< body >. Va stoca deja toate marcajele blocurilor noastre și toate containerele cu etichete. Amintiți-vă doar ca pe un „butoi” uriaș. Și, în sfârșit, iată că vin containerele noastre div.
Important! De asemenea, ele trebuie să fie închise împreună cu alte etichete. După cum puteți vedea, fiecare bloc div are un atribut de clasă după semnul egal, le puteți seta în mod independent și arbitrar. Aceste clase sunt create special pentru CSS. Adică browserul ajunge la pagină, vede blocul div și se uită la ce informații conține și merge la fișierul CSS și caută acolo clasa necesară. Puteți seta nu numai atributul de clasă, dar puteți utiliza și id-ul (identificatorul). Puteți pune întrebarea: „Ce diferență are pentru mine pe care îl folosesc?” Îți voi răspunde, poți folosi orice metodă pentru aspect. Cu o singură diferență - în ceea ce privește prioritatea, id-ul are mai multe privilegii decât clasa. Voi explica acest lucru în fișa video de mai jos. Fiecare are propriul stil de a crea site-uri web, prefer să folosesc clasa, deoarece această intrare în CSS este afișată cu un punct. selector Da, apropo, vreau să spun că antetul, bara laterală, conținutul, subsolul sunt toate selectoare CSS și vor avea deja atribute. Deci, continuăm să curățăm mizeria din capul utilizatorilor. Am creat blocuri div cu clasa, acum să trecem la CSS. Să deschidem regulile CSS pentru pagina noastră în interiorul etichetei head, adică o vom formata. Hai să o facem așa:
Intrarea va fi după cum urmează (doar copiați și lipiți în exemplul dvs. și căutați în browser) Exemplu de utilizare a etichetelor div .header ( lățime: 600 px; înălțime: 120 px; chenar: 1 px negru solid; ) .sidebar ( lățime: 200 px; înălțime: 300 px; chenar: 1 px negru solid; float: stânga; ) . conținut ( lățime: 370px; înălțime: 300px; margine: 1px negru; .footer: 130px;
În acest articol vom înțelege ce este o etichetă, unde este folosită, cum se folosește eticheta pentru a plasa imagini, texte și multe altele. De asemenea, nu în ultimul rând este important ca eticheta să fie folosită foarte des împreună cu foile de stil CSS. Ne vom ocupa și de unele dintre ele. Deci, o etichetă este un element de bloc al unei pagini html, care este conceput pentru a controla plasarea și pentru a oferi o mare varietate de proprietăți textelor, imaginilor, linkurilor și altor obiecte. În sine (fără atribute și stiluri css), eticheta nu afectează în niciun fel elementele paginilor html. Fără a folosi stiluri, eticheta are scopul de a plasa elemente pe o pagină html. Pentru a face acest lucru, eticheta trebuie să aibă atributul align. Dar haideți să nu ocolim tufișul și să trecem direct la practică. 2. Cum sunt folosite etichetele pentru a plasa blocuri de text pe o pagină html?Folosind o etichetă, puteți plasa orice element în orice parte a paginii. De exemplu, avem cuvântul „TEXT”. Pentru a o plasa, utilizați eticheta astfel: În browser arată așa: 3. Cum să plasați o imagine (imagine) folosind eticheta?Folosind eticheta, putem plasa rapid și ușor nu numai text, ci și imagini în locul necesar pe pagina html. Acest lucru se face astfel: Să presupunem că avem o imagine numită flow.jpg și este plasată în același director (în același folder) cu fișierul pe care ar trebui să fie plasată. De asemenea, are o lățime de 100 de pixeli și o înălțime de 72 de pixeli. În acest caz, etichetele sunt scrise astfel: În browser arată așa:
Folosind etichete, puteți plasa nu doar text sau imagini simple pe o pagină html, ci și linkuri. Acest lucru se face astfel: Să presupunem că trebuie să instalăm un link undeva pe o pagină html care duce la site-ul http://site. După cum ar trebui să știți deja din trecut, linkul către site-ul în sine este scris astfel: lecții
Ei bine, ne-am dat seama cum textele, imaginile și linkurile sunt plasate pe paginile de site html folosind etichete. Nu este nimic complicat aici. 5. Cum să evidențiați orice obiect pe o pagină html folosind o etichetă și stiluri CSS sau cum să faceți un cadru în jurul unui obiect folosind o etichetă și stiluri CSS?Acest subiect este puțin mai greu de înțeles, deoarece va trebui să adăugăm stiluri CSS la . Deci, de obicei, pentru stiluri este creat un fișier text separat cu o extensie css, care este conectat la pagina din antetul acesteia, adică în fișierul . Nu vom face acest lucru, ci vom scrie toate stilurile necesare direct în etichetă. Pentru a seta stiluri CSS în etichetă, utilizați stilul="stilurile trebuie scrise separate prin punct și virgulă".
7. padding-top:30px;
- marginea superioară 20 pixeli 8. padding-stânga:15px; - umpleți blocul cu verde (puteți seta și culorile în hexazecimal) După salvarea fișierului, vom vedea următoarele în browser:Aici putem scurta puțin codul de stil. De exemplu, puteți scurta codul de indentare exterior astfel:
- specificarea culorii albastre (culoarea în stiluri poate fi specificată atât în sistemul hexazecimal pentru indicarea culorilor, cât și în cuvinte obișnuite în limba engleză, precum roșu, albastru, galben)
3.dimensiune font: 12px; Desigur, dacă aveți o cantitate mare de conținut, atunci folosirea stilurilor direct în etichetă nu este convenabilă, deoarece editarea și adăugarea lor durează mult timp. Și, așa cum am scris deja în acest articol, pentru a simplifica procesarea, toate stilurile sunt plasate într-un fișier separat cu extensia css, care este inclusă în eticheta html a paginii. Dar nu vom lua în considerare acest lucru, deoarece acest subiect este un limbaj de programare complet diferit legat de designul site-ului web. Dacă doriți să înțelegeți css, html și, în general, să învățați cum să creați site-uri web folosind lecții video, vizitați site-ul meu. Și dacă intenționați să învățați cum să creați magazine online profesionale folosind motorul Magento, atunci acest lucru este cel mai ușor de făcut cu ajutorul cursului video al autorului meu. Elementul este un element bloc și are scopul de a evidenția un fragment dintr-un document pentru a schimba aspectul conținutului. De obicei, aspectul unui bloc este controlat folosind stiluri. Pentru a nu descrie de fiecare dată stilul din interiorul etichetei, puteți separa stilul într-o foaie de stil externă și puteți adăuga un parametru de clasă sau id la etichetă cu numele selectorului. Ca și în cazul altor elemente de bloc, conținutul etichetei începe întotdeauna pe o linie nouă. După aceasta se adaugă și o întrerupere de linie.... SintaxăAlinierea parametrilor Specifică alinierea conținutului etichetei. title Adaugă un sfat explicativ la conținut. Etichetă de închidere
.block2 (
Nu este permis în XHTML 1.1 Descriere... Centrul argumentelor Aliniază textul la centru. Textul este plasat orizontal în fereastra browserului sau containerul în care se află blocul de text. Liniile de text par să fie înșirate pe o axă invizibilă care se întinde în centrul paginii web. Această metodă de aliniere este utilizată în mod activ în titluri și diferite semnături, cum ar fi legendele, oferă un aspect oficial și solid designului textului;În toate celelalte cazuri, alinierea la centru este rar utilizată pentru că este incomod să citiți o cantitate mare de astfel de text.
#layer1 ( Descriere... fundal: #fc0;umplutură: 5px; #layer2 (fundal: #fff;
umplutură: 10px; parametrul TITLE
Adaugă text explicativ la container sub forma unui sfat explicativ care apare atunci când cursorul mouse-ului trece peste conținut.
Argumente Orice șir de text. Șirul trebuie să fie cuprins între ghilimele duble sau simple.
S-ar putea să vă placă și |
