Блочные и встроенные элементы HTML
В этой статье объясняются блочные и встроенные элементы HTML.
Здесь объясняются различия между блочными элементами и строчными элементами, а также основные блочные и строчные элементы.
YouTube Video
Блочные и строчные элементы
HTML имеет две основные категории элементов, которые определяют, как они отображаются на экране: «блочные элементы» и «строчные элементы». Эти элементы играют важную роль в разметке страницы и напрямую влияют на их расположение. Здесь мы подробно объясним характеристики и использование каждого элемента.
Что такое блочный элемент?
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>Блочные элементы обычно занимают всю ширину страницы и отображаются на отдельной строке от других элементов. Эти элементы могут содержать внутри себя другие блочные или строчные элементы и определять общую структуру документа.
Особенности:
- Элементы начинаются с новой строки и растягиваются, чтобы занять максимально возможную ширину (обычно всю ширину родительского элемента).
- Они отделены от других блочных элементов по вертикали с помощью отступов, применяемых между ними.
- Они могут содержать внутри другие блочные или встроенные элементы.
Здесь используются следующие блочные элементы:.
- Тег
<div>часто используется для создания макетов. - Тег
<p>используется для определения абзаца. <h1>до<h6>— элементы, используемые для определения заголовков.<h1>— это самый крупный заголовок, а<h6>— самый мелкий.- Тег
<ul>создаёт ненумерованный список. - Тег
<ol>создаёт нумерованный список. - Тег
<section>определяет раздел внутри документа.
Что такое строчный элемент?
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>Строчные элементы находятся на одной строке с другими элементами и обычно занимают столько ширины, сколько необходимо для их содержимого. Эти элементы считаются частью текста и, в отличие от блочных элементов, не занимают всю строку.
Особенности:
- Элементы появляются на одной строке и располагаются рядом с другими встроенными элементами.
- Ширина элемента определяется его содержимым (текстом или изображениями).
- Они могут быть включены внутрь блочных элементов, но не наоборот.
Здесь используются следующие строчные элементы:.
- Тег
<span>используется для выделения части текста определенным стилем. - Тег
<a>определяет гиперссылку. - Тег
<img>— это элемент, используемый для встраивания изображений. <strong>выделяет важный текст (обычно отображается жирным шрифтом).<em>указывает на выделенный текст (обычно отображается курсивом).
Различия между блочными и строчными элементами
- Метод отображения: блочные элементы отображаются с новой строки и занимают всю ширину страницы, тогда как строчные элементы отображаются на одной строке с другими элементами, и их ширина определяется их содержимым.
- Обработка внутренних элементов: блочные элементы могут содержать другие блочные элементы, а также строчные элементы, но строчные элементы не могут содержать блочные элементы.
- Роль в разметке: блочные элементы в основном используются для создания структуры страницы, тогда как строчные элементы определяют небольшие элементы, такие как текст и ссылки.
Основные моменты для различия
Создание макетов: используйте блочные элементы, такие как <div>, <section>, <article> для определения крупных разделов и блоков контента.
Текстовое оформление и ссылки: используйте строчные элементы, такие как <span>, <a>, <strong>, <em>, чтобы оформить части текста или добавить ссылки.
Смешивание блочных и встроенных элементов
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>- Используются блочные элементы, такие как
<main>,<header>и<section>, которые обычно отображаются с новой строки, занимая всю ширину их родительского элемента. - Используются строчные элементы, такие как
<a>,<strong>,<span>и<img>, которые размещаются в строке и не занимают всю ширину внутри блочных элементов.
Включение встроенных элементов в блочные элементы — это распространенный паттерн. Например, в параграфе (<p>) часто используются ссылки (<a>) или выделение (<strong>). Однако, так как блоковые элементы нельзя включать в строчные элементы, важно использовать их корректно.
Резюме
Блочные элементы и строчные элементы — это два основных типа HTML-элементов, каждый из которых имеет свою роль. Блочные элементы составляют основу компоновки страницы, тогда как строчные элементы используются для оформления и управления содержимым внутри них. Понимание и правильное использование этих двух типов элементов обеспечивает эффективное написание HTML-кода.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.