-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
111 lines (91 loc) · 6.38 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
---
title: Блочные элементы
slug: Glossary/Block-level_content
---
{{GlossarySidebar}}
Исторически HTML-элементы было принято делить на блочные и [строчные](/ru/docs/Web/HTML/Строчные_Элементы). Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
## Блочные элементы
### HTML
```html
<p>
Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать
родительский элемент абзаца.
</p>
```
### CSS
```css
p {
background-color: #8abb55;
}
```
{{ EmbedLiveSample('Block-level_Example') }}
## Использование
- Блочные элементы могут отображаться только внутри элемента {{ HTMLElement("body") }} и его потомков.
## Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
- Содержание
- : Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
- Форматирование по умолчанию
- : По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором [категорий контента](/ru/docs/Web/Guide/HTML/Content_categories). Категория «строчных» элементов примерно соответствует категории [текстового контента](/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content), а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории [потокового контента](/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток) в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.
## Элементы
Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).
- {{ HTMLElement("address") }}
- : Контактная информация.
- {{ HTMLElement("article") }}
- : Содержание статьи.
- {{ HTMLElement("aside") }}
- : Побочное содержание.
- {{ HTMLElement("blockquote") }}
- : Длинная («блочная») цитата.
- {{ HTMLElement("details") }}
- : Раскрывающийся блок с подробностями.
- {{ HTMLElement("dialog") }}
- : Диалоговое окно.
- {{ HTMLElement("dd") }}
- : Описание определения.
- {{ HTMLElement("div") }}
- : Фрагмент документа.
- {{ HTMLElement("dl") }}
- : Список определений.
- {{ HTMLElement("dt") }}
- : Термин в списке определений.
- {{ HTMLElement("fieldset") }}
- : Группирование элементов формы.
- {{ HTMLElement("figcaption") }}
- : Описание для тега {{ HTMLElement("figure") }}.
- {{ HTMLElement("figure") }}
- : Группирование медиа-контента с подписью (см. {{ HTMLElement("figcaption") }}).
- {{ HTMLElement("footer") }}
- : Нижняя часть («подвал») раздела или страницы.
- {{ HTMLElement("form") }}
- : Форма ввода.
- {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
- : Заголовки от первого до шестого уровня.
- {{ HTMLElement("header") }}
- : Верхняя часть («шапка») раздела или страницы.
- {{ HTMLElement("hgroup") }}
- : Группирование заголовков раздела или страницы.
- {{ HTMLElement("hr") }}
- : Горизонтальная разделительная линия.
- {{ HTMLElement("li") }}
- : Пункт списка.
- {{ HTMLElement("main") }}
- : Содержит основной контент, уникальный для страницы.
- {{ HTMLElement("nav") }}
- : Содержит навигационные ссылки.
- {{ HTMLElement("ol") }}
- : Упорядоченный список.
- {{ HTMLElement("p") }}
- : Текстовый абзац.
- {{ HTMLElement("pre") }}
- : Предварительно форматированный текст.
- {{ HTMLElement("section") }}
- : Раздел веб-страницы.
- {{ HTMLElement("table") }}
- : Таблица.
- {{ HTMLElement("ul") }}
- : Неупорядоченный список.
### Смотрите также
- [Строчные элементы](/ru/docs/Web/HTML/Строчные_Элементы)