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.