Elementy HTML blokowe i liniowe

Elementy HTML blokowe i liniowe

Ten artykuł wyjaśnia elementy blokowe i liniowe HTML.

To wyjaśnia różnice między elementami blokowymi a liniowymi, a także główne elementy blokowe i liniowe.

YouTube Video

Elementy blokowe i elementy liniowe

HTML ma dwie główne kategorie elementów, które określają sposób ich wyświetlania na ekranie: „elementy blokowe” i „elementy liniowe”. Te elementy odgrywają ważną rolę w układzie strony i bezpośrednio wpływają na ich pozycjonowanie. Tutaj szczegółowo wyjaśnimy cechy i zastosowanie każdego elementu.

Czym jest element blokowy?

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Block-Level Elements Example</title>
 7</head>
 8<body>
 9    <div>
10        <h1>This is a Block-Level Heading</h1>
11        <p>
12            This is a paragraph.
13            Block-level elements start on a new line and
14            take up the full width of their container.
15        </p>
16    </div>
17    <section>
18        <h2>Another Block-Level Section</h2>
19        <p>This is another paragraph inside a section element.</p>
20    </section>
21    <section>
22        <h2>Unordered List And Ordered List</h2>
23        <ul>
24            <li>List Item A</li>
25            <li>List Item B</li>
26            <li>List Item C</li>
27        </ul>
28        <ol>
29            <li>List Item 1</li>
30            <li>List Item 2</li>
31            <li>List Item 3</li>
32        </ol>
33    </section>
34</body>
35</html>

Elementy blokowe zazwyczaj zajmują całą szerokość strony i pojawiają się w osobnej linii od innych elementów. Te elementy mogą zawierać w sobie inne elementy blokowe lub liniowe i definiują większą strukturę dokumentu.

Funkcje:

  • Elementy te zaczynają się w nowej linii i rozszerzają tak, aby zajmować maksymalną możliwą szerokość (zazwyczaj całą szerokość elementu nadrzędnego).
  • Są one oddzielone od innych elementów blokowych w pionie, a między nimi stosowane są marginesy.
  • Mogą zawierać inne elementy blokowe lub liniowe wewnątrz siebie.

W tym miejscu wykorzystywane są następujące elementy blokowe:.

  • Znacznik <div> jest powszechnie używany do budowy układów.
  • Znacznik <p> służy do definiowania akapitu.
  • <h1> do <h6> to elementy używane do definiowania nagłówków. <h1> to największy nagłówek, a <h6> to najmniejszy.
  • Znacznik <ul> tworzy listę nieuporządkowaną.
  • Znacznik <ol> tworzy listę uporządkowaną.
  • Znacznik <section> definiuje sekcję w dokumencie.

Czym jest element liniowy?

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Inline Elements Example</title>
 7</head>
 8<body>
 9    <p>
10        This is a paragraph with
11        <a href="#">an inline link</a> and
12        <strong>some bold text</strong>.
13    </p>
14    <p>
15        You can also include <em>italicized text</em>,
16        an <img src="images/image.jpg" alt="Sample image" width="100">,
17        and a <span style="color: red;">styled span element</span>
18        within inline elements.
19    </p>
20</body>
21</html>

Elementy liniowe są umieszczane w tej samej linii co inne elementy i zazwyczaj zajmują tylko taką szerokość, jaka jest potrzebna ich zawartości. Te elementy są traktowane jako część tekstu i, w przeciwieństwie do elementów blokowych, nie zajmują całej linii.

Funkcje:

  • Elementy pojawiają się w tej samej linii i są ustawione obok innych elementów liniowych.
  • Szerokość jest określana przez zawartość elementu (tekst lub obrazy).
  • Mogą one być zawarte wewnątrz elementów blokowych, ale odwrotnie już nie.

Tutaj wykorzystano następujące elementy liniowe:.

  • Znacznik <span> jest używany do wyróżnienia części tekstu określonym stylem.
  • Znacznik <a> definiuje hiperłącze.
  • Znacznik <img> jest elementem służącym do osadzania obrazów.
  • <strong> wyróżnia ważny tekst (zwykle wyświetlany pogrubioną czcionką).
  • <em> wskazuje na tekst wyróżniony (zwykle wyświetlany kursywą).

Różnice między elementami blokowymi a liniowymi

  • Sposób wyświetlania: Elementy blokowe są wyświetlane w nowej linii i zajmują całą szerokość strony, podczas gdy elementy liniowe są wyświetlane w tej samej linii co inne elementy, a ich szerokość zależy od ich zawartości.
  • Obsługa elementów wewnętrznych: Elementy blokowe mogą zawierać inne elementy blokowe, jak również liniowe, ale elementy liniowe nie mogą zawierać elementów blokowych.
  • Rola w układzie: Elementy blokowe są głównie używane do tworzenia struktury układu strony, podczas gdy elementy liniowe definiują małe elementy, takie jak tekst i linki.

Kluczowe punkty różnicowania

Tworzenie układów: Używaj elementów blokowych, takich jak <div>, <section>, <article> do definiowania dużych sekcji i bloków treści. Dekoracja tekstu i linki: używaj elementów liniowych, takich jak <span>, <a>, <strong>, <em>, aby ozdobić części tekstu lub dodać linki.

Łączenie elementów blokowych i liniowych

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>Mixed Block-Level and Inline Elements</title>
 7</head>
 8<body>
 9  <header>
10    <h1>Main Heading with Mixed Content</h1>
11    <p>
12      This is a paragraph that contains an
13      <a href="#">inline link</a> and
14      <strong>bold text</strong>. You can also have
15      <em>italicized words</em> here.
16    </p>
17  </header>
18  <main>
19    <section>
20      <h2>Subheading with Additional Inline Elements</h2>
21      <p>
22        Here is a section that includes inline elements such as
23        <span style="color: blue;">colored text</span> and an
24        <img src="images/image.jpg" alt="Example image" width="50">.
25        This text demonstrates how inline elements work within block-level elements.
26      </p>
27    </section>
28    <section>
29      <h2>Lists with Mixed Content</h2>
30      <p>
31        This paragraph precedes a list and has
32        <a href="#">a link</a> and <strong>bold</strong> text.
33      </p>
34      <ul>
35        <li>List item with <em>italic</em> text.</li>
36        <li>List item containing <span style="color: green;">styled span</span>.</li>
37        <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38      </ul>
39    </section>
40  </main>
41</body>
42</html>
  • Elementy blokowe, takie jak <main>, <header> i <section>, są używane i zazwyczaj renderowane na nowej linii, zajmując całą szerokość elementu nadrzędnego.
  • Elementy liniowe, takie jak <a>, <strong>, <span> i <img>, są używane i umieszczane wewnątrz linii bez zajmowania pełnej szerokości w elementach blokowych.

Uwzględnianie elementów liniowych w elementach blokowych to powszechny wzorzec. Na przykład często umieszcza się linki (<a>) lub wyróżnienia (<strong>) w obrębie akapitu (<p>). Jednakże, ponieważ w elementach liniowych nie można umieszczać elementów blokowych, ważne jest, aby używać ich odpowiednio.

Podsumowanie

Elementy blokowe i elementy liniowe to dwa podstawowe rodzaje elementów HTML, z których każdy pełni swoją własną rolę. Elementy blokowe tworzą fundament układu strony, podczas gdy elementy liniowe służą do dekoracji i manipulacji szczegółowym zawartością w ich obrębie. Zrozumienie i odpowiednie wykorzystanie tych dwóch rodzajów elementów pozwala na efektywne kodowanie w HTML.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video