Prezentarea informațiilor prin ideea modernă de hipertext este în mod inerent absurdă, dar așa este și așa funcționează. Nu te poți certa cu asta și trebuie să ții cont de asta.

Din punct de vedere limbaj modern programare, nu contează modul în care sunt reprezentate datele: tipuri stricte și o descriere preliminară obligatorie, sau fără tipuri și descrierea cerută limbajul se va „gândi” pe măsură ce algoritmul se execută.

Este important să rețineți că orice nu este „înțeles” de browser, JavaScript sau limbajul de pe server nu va fi executat. O etichetă de bloc în circumstanțele actuale se poate „transforma” într-o etichetă inline, dar o etichetă cu litere mici nu se poate transforma într-o etichetă de bloc.

Logica paginii HTML

Exemplu istoric - etichetă font HTML. A fost „nerecomandat” pentru utilizare de ceva timp. Motivația „nu este recomandată” este o trăsătură caracteristică programare modernă. Lipsa compatibilității codului „în sus” între versiuni și nicio stabilitate în dezvoltarea secvențială a versiunilor componente softwareși concepte, de asemenea.

Într-adevăr, eticheta span în HTML este mult mai practică: nu se referă doar la font. Span poate modifica multe atribute ale afișajului și utilizarea unui anumit conținut.

Șirurile au fost întotdeauna reprezentarea principală pentru orice date, dar limbajele de programare nu au definit întotdeauna acest lucru în sintaxă, iar programatorii au fost conștienți de faptul că numărul sau valoarea booleană folosită este întotdeauna un șir.

Absurditatea și obiectivitatea hipertextului în Implementări HTML: aspectul este utilizarea unui set de etichete (pereche sau unice) pentru a descrie în mod formal conținutul (date). Nici descrierea, nici conținutul nu pot fi descrise în mod rezonabil ca informații. Primul este un anumit cadru în care se încadrează un anumit conținut - date.

Cadrul este construit din cărămizi (etichete) fixate rigid, care ocupă strict anumite locuriîn design și elemente relative care sunt aranjate „pe măsură ce cardul cade”.

Puteți împărți pagina în secțiuni pentru afișarea datelor folosind tabele sau elemente de bloc și puteți „umple” structura rezultată cu date cu alte etichete. Ele sunt de obicei numite litere mici, adică poziționate într-un mod care determină oportunitatea curentă și conținutul curent.

Exemplu de span HTML: ce este și cum se descrie

Caseta verde arată un exemplu de cod pe care a fost afișat browserul fundal gri. Elementul bloc div a ajuns în centrul textului care îl urmează în cod. Primul element a fost o etichetă cu clasa scSpanLine. Apoi a fost plasat textul în care două secțiuni din acest text au fost evidențiate folosind eticheta span cu clasa scSimpleSpan.

Elementele de linie a doua și a treia sunt poziționate exact așa cum este scris în cod.

Acest exemplu arată cum funcționează span în HTML. Este evident că aceasta este doar o secvență de date. Altceva nu este evident: dezvoltatorul poate descrie această etichetă orice vrei, poți chiar să aplici regula:

• POZIȚIA: absolută;

Nu va avea niciun efect. Specificarea coordonatelor și dimensiunilor, de asemenea, nu joacă niciun rol. Centrarea sau alinierea intervalelor în HTML este inutilă. Între timp, eticheta este foarte practică și solicitată în practică. Acesta este un ambalaj foarte convenabil pentru evidențiere moment importantîn fluxul general de date.

Principalul lucru este să înțelegi asta span HTML este o modalitate de a schimba afișarea unui șir sau de a clarifica regulile de afișare a unei părți a unui șir.

Logica pentru furnizarea de informații de linie

Folosiți un limbaj descriptiv date HTML conform scopului său, adică de a descrie date, este ieri. Folosirea unui limbaj de pe partea serverului pentru a forma corpul unei pagini este modernă și „toți” dezvoltatorii o fac. Sistemele de management al conținutului (CMS) sunt deosebit de pasionate de acest lucru.

Practica reală și nevoia de a crea site-uri web live este gestionarea dinamică a cadrului paginii și a conținutului acesteia. În acest sens, eticheta span în HTML (că este pur și simplu dinamică), ca rezultat Funcționează JavaScript, vă permite să creați conținut dinamic din mers.

JavaScript funcționează ca un convertor text sursăîn format și înlocuitori etichetele necesare Cu regulile necesare CSS către fluxul de ieșire, care este distribuit în cadrul cadrului elemente de bloc pagini.

Cu cât profesionalismul dezvoltatorului este mai mare, cu atât este mai mare aspectul blocului (sau tabelul) al paginii și prezența mai puțin reală a etichetelor span statice în HTML. Ce dă asta? Dinamica. JavaScript este un algoritm care poate prelua un flux de șiruri de caractere și îl poate reda așa cum a intenționat dezvoltatorul. Etichetele span vor apărea la locul potrivit și la momentul potrivit.

Elementele din capitolul anterior sunt afișate secvenţial pe o linie orizontală. Se comportă ca un text obișnuit și pur și simplu apar unul lângă celălalt, chiar dacă au anumite dimensiuni și alte proprietăți care nu sunt legate de text. Acest lucru nu ar trebui să fie surprinzător, deoarece , Și - elemente care aparțin unui grup numit inline-block. Astfel de elemente pot avea <a href="https://radiobud.ru/ro/life-hacks-for-pc/kak-izmenit-dizain-gruppy-vkontakte-graficheskoe-oformlenie.html">marimi diferite</a>, cu toate acestea, browserul le afișează întotdeauna orizontal ca text. În acest capitol, vom afla despre diferitele grupuri de elemente în funcție de modul în care sunt așezate pe pagină.</p><p>Mai întâi, să vedem cum să afișați un element vertical sub altul. Practic, trebuie să spunem browserului: „Hei, vrem un container care se poate stivui pe verticală”. Din fericire, această etichetă de container este cunoscută ca <div>și acesta este un fel de „încheiere” a conținutului pe o linie nouă (cum ar fi o întrerupere de pagină sau o întrerupere de linie în editorii de text).</p><p>Pentru a vedea cum funcționează elementele <div>Să folosim trei dintre ele și să le setăm lățimea, înălțimea și fundalul.</p><p>Conform condițiilor de mai sus, HTML-ul va arăta astfel.</p><p> <div class="container"></div> <div class="container"></div> <div class="container"></div> </p><p>În CSS scriem o clasă .container care este asociată cu o etichetă <div> .</p><p>Container ( lățime: 200 px; înălțime: 200 px; culoare de fundal: albastru; )</p><p>Să ne uităm la asta în browser.</p><p>Arată ca un dreptunghi mare. Ce zici de separarea etichetelor? <div>unul de altul?</p><p>Container ( lățime: 200 px; înălțime: 200 px; culoare de fundal: albastru; margine de jos: 10 px; )</p><p>Grozav! Browserul afișează aceste „blocuri” unul sub celălalt, spre deosebire de exemplul nostru de formular anterior, în care elementele erau afișate pe o singură linie.</p><p>Care este diferența? Când vine vorba de afișarea etichetelor, browserul recunoaște trei grupuri de elemente:</p><ul><li>inline (minuscule);</li><li>bloc (bloc);</li><li>inline-block (linie-bloc).</li> </ul><p>Elementele în linie nu provoacă o nouă linie și arată un element lângă altul pe orizontală. Elementele bloc sunt configurate ca blocuri care se stivuiesc unul peste altul și nu apar niciodată unul lângă altul pe orizontală decât dacă folosim trucuri magice CSS (despre care vom afla în capitolul următor). Elementele inline-block acționează ca elemente inline (afișate unul lângă celălalt), dar diferă de ele prin faptul că pot fi dimensionate. De exemplu, câmpul <textarea>poate apărea ca un dreptunghi mare, dar totuși ocupă spațiu dincolo de o linie de text.</p><ul><li>Litere mici - , <span><em> , <strong> </li><li>Bloc - <div> , <p> , <article> </li><li>Bloc de linie - <input> , <textarea> </li> </ul><p>În mod implicit, elementele inline au proprietatea stilului de afișare setată la inline . Pentru elementele bloc valoarea sa este block , iar pentru elementele inline-block inline-block . Acum puteți explica de ce eticheta <span>nu include textul pe o nouă linie. Deoarece acesta este un element inline, ceea ce înseamnă că proprietatea sa de afișare este setată la inline în CSS. Având în vedere acest lucru, codul este mai jos:</p><p>Unu, doi, trei</p><p>Browserul va afișa pe o singură linie:</p><p>unu, doi, trei</p><p>Cu toate acestea, puteți schimba acest comportament adăugând o linie de CSS:</p><p>Span ( afișare: bloc; )</p><p>Acum etichetele noastre <span>sunt afișate diferit, fiecare începând pe o linie nouă, deoarece am setat proprietatea de afișare la bloc .</p><p>Pentru acest exemplu folosim <div>. S-ar putea să vă întrebați ce descrie această etichetă în document. Răspuns scurt: nimic. Folosim eticheta <div>în cazurile în care toate celelalte etichete nu sunt potrivite pentru utilizarea a ceea ce am introdus în document. În general, eticheta <div>(în combinație cu diferite clase) este folosit pentru a obține diferite efecte vizuale, ca urmare nu are o funcție de a descrie conținutul. De exemplu, dacă doriți să aveți trei coloane verticale pe site-ul dvs., s-ar putea să aveți nevoie de un element care să poată separa unele dintre elementele inline sau inline-block.</p><p>În general, este o idee bună să nu folosiți excesiv eticheta <div>, dacă este posibil.</p><p>Cu noile noastre cunoștințe despre blocuri, să ne reelaborăm codul formularului, astfel încât câmpurile formularului și descrierile lor să apară frumos unele sub altele.</p><p> <form> <div> <label for="nickname">Numele dumneavoastră:</label> </div> <div> <input type="text" id="nickname" name="nickname"> </div> <div> <label for="user-email">Email-ul tau:</label> </div> <div> <input type="email" id="user-email" name="user-email"> </div> <div> <label for="content">Conţinut:</label> </div> <div> <textarea rows="10" cols="50" id="content" name="content">