HTML (HyperText Markup Language) yra standartinė kalba, naudojama tinklalapių struktūrai apibrėžti. HTML dokumentas susideda iš elementų, kurie skirstomi į įvairias kategorijas pagal jų elgseną ir paskirtį. Du pagrindiniai elementų tipai yra blokiniai ir linijiniai elementai. Šiame straipsnyje aptarsime jų skirtumus, savybes ir naudojimo pavyzdžius.

Blokiniai elementai

Blokiniai elementai užima visą prieinamą plotį konteineryje, kuriame jie yra, ir visada pradedami naujoje eilutėje. Jie sukuria "bloką" turinio, atskirtą nuo kitų elementų viršuje ir apačioje.

Savybės ir charakteristikos

• Užima visą plotį (pagal nutylėjimą).
• Pradedami naujoje eilutėje.
• Gali turėti vidinius linijinius ir kitus blokininius elementus.
• Galima nustatyti plotį, aukštį, paraštes (margins) ir atitraukas (paddings).

Dažniausiai naudojami blokiniai elementai

• <div>: Bendros paskirties konteineris, naudojamas logiškai grupuoti kitus elementus.
• <p>: Pastraipa.
• <h1> - <h6>: Antraštės (nuo didžiausios iki mažiausios).
• <ul>: Netvarkingas sąrašas.
• <ol>: Tvarkingas sąrašas.
• <li>: Sąrašo elementas.
• <form>: Forma, skirta vartotojo įvesties duomenims rinkti.
• <header>: Puslapio arba sekcijos antraštė.
• <footer>: Puslapio arba sekcijos apačia.
• <main>: Pagrindinis puslapio turinys.
• <article>: Savarankiškas turinio vienetas (pvz., straipsnis, įrašas).
• <section>: Teminė turinio grupė.
• <nav>: Navigacijos elementai.

Pavyzdžiui, <div> elementas dažnai naudojamas kaip konteineris, apgaubiantis kitus elementus, kad būtų galima juos grupuoti ir stiliuoti su CSS.

Pavyzdys

Štai pavyzdys, kaip naudojami blokiniai elementai:

Šiame pavyzdyje <div> elementas apgaubia antraštę, pastraipą ir sąrašą, sukuriant atskirą turinio bloką.

Linijiniai elementai

Linijiniai elementai užima tik tiek pločio, kiek reikia jų turiniui, ir nesukuria naujos eilutės. Jie paprastai naudojami teksto ar kitų linijinių elementų viduje.

Savybės ir charakteristikos

• Užima tik tiek pločio, kiek reikia turiniui.
• Nesukuria naujos eilutės.
• Gali būti blokinio elemento viduje.
• Plotis ir aukštis negali būti nustatyti (jie priklauso nuo turinio).
• Paraštės (margins) ir atitraukos (paddings) veikia tik horizontaliai, bet ne vertikaliai.

Dažniausiai naudojami linijiniai elementai

• <a>: Nuoroda.
• <span>: Bendros paskirties linijinis konteineris.
• <img>: Paveikslėlis.
• <strong>: Svarbus tekstas (paprastai rodomas paryškintu šriftu).
• <em>: Pabrėžtas tekstas (paprastai rodomas kursyvu).
• <br>: Eilutės lūžis.
• <code>: Programos kodas.
• <small>: Mažas tekstas.
• <sub>: Apatinis indeksas.
• <sup>: Viršutinis indeksas.

Pavyzdžiui, <a> elementas naudojamas sukurti nuorodas, o <span> elementas - teksto dalims stiliuoti.

Pavyzdys

Štai pavyzdys, kaip naudojami linijiniai elementai:

Tai yra svarbus tekstas, o tai yra pabrėžtas tekstas. Nuoroda

Šiame pavyzdyje <strong>, <em>, <a> ir <img> elementai yra įterpti į pastraipą ir nepradeda naujos eilutės.

Skirtumų apibendrinimas

Pagrindinis skirtumas tarp blokinių ir linijinių elementų yra jų elgsena išdėstant turinį:

• Blokiniai elementai užima visą plotį ir pradedami naujoje eilutėje.
• Linijiniai elementai užima tik tiek pločio, kiek reikia turiniui, ir nesukuria naujos eilutės.

Šią informaciją galima apibendrinti lentelėje:

CSS ir elementų elgsena

Naudojant CSS, galima pakeisti elementų elgseną, pvz., linijinį elementą padaryti blokinį arba atvirkščiai. Tai atliekama naudojant display savybę:

• display: block;: Elementas elgiasi kaip blokinys.
• display: inline;: Elementas elgiasi kaip linijinis.
• display: inline-block;: Elementas elgiasi kaip linijinis, bet galima nustatyti plotį ir aukštį.

Pavyzdys

Štai pavyzdys, kaip pakeisti linijinio elemento elgseną į blokinį:

Šiame pavyzdyje <span> elementas, kuris pagal nutylėjimą yra linijinis, elgsis kaip blokinys elementas, užimdamas visą plotį ir pradedamas naujoje eilutėje.

Išvados

Supratimas apie blokininius ir linijinius elementus yra būtinas norint kurti gerai struktūruotus ir vizualiai patrauklius tinklalapius. Žinant jų skirtumus ir savybes, galima efektyviai naudoti HTML ir CSS, kad būtų pasiektas norimas išdėstymas ir dizainas.

tags: #html #blokiniai #ir #linijiniai #tagai