HTML Блочные и встроенные элементы
Каждый HTML элемент имеет отображаемое значение по умолчанию в зависимости от типа элемента.
Есть два значения отображения: блочное (block) и встроенное (или строчное - inline).
Блочные элементы
Блочный элемент всегда начинается с новой строчки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).
<div> является блочным элементом.Это блочные элементы в HTML:
Встроенные элементы (строчные)
Встроенный элемент не начинается с новой строчки, и он занимает только столько ширины, сколько нужно.
Это <span> элемент внутри параграфа.
Это встроенные элементы в HTML:
Примечание: Встроенный (строчный) элемент не может включать в себя блочный элемент!
Элемент <div>
Элемент <div> часто используется как контейнер для других элементов HTML.
Элемент <div> не имеет необходимых атрибутов, но style, class и id являются общими.
При использовании вместе с CSS элемент <div> может использоваться для стилизации блоков содержимого:
Пример
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Попробуйте сами »
Элемент <span>
Элемент <span> - это встроенный контейнер, используемый для разметки части текста или части документа.
Элемент <span> не имеет необходимых атрибутов, но style, class и id являются общими.
При использовании вместе с CSS элемент <span> можно использовать для стилизации частей текста:
Пример
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Попробуйте сами »
Резюме
- Есть два значения отображения: блочное и встроенное
- Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину
- Встроенный элемент не начинается с новой строки, и он занимает только столько ширины, сколько нужно
- Элемент
<div>является блочным и часто используется как контейнер для других элементов HTML - Элемент
<span>- это встроенный контейнер, используемый для разметки части текста или части документа
HTML теги
| Тег | Описание |
|---|---|
| <div> | Определение раздела в документе (блочный элемент) |
| <span> | Определение раздела в документе (встроенный элемент) |
Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
HTML — Блочные и встроенные элементы - Видеоурок W3Schools
В этом видеоуроке объясняется, как отображаются различные типы элементов. В частности, блочные и встраиваемые (строчные).
Часть серии видеоуроков для обучения HTML для начинающих!
Вопросы для самоконтроля
- Какие способы отображения HTML-элементов на веб-странице?
- Какой HTML-элемент начинается с новой строки и занимает всю доступную ширину на странице?
- Какой HTML-элемент не начинается с новой строки и занимает только столько ширины, сколько нужно?
- Каким элементом является элемент
<div>? - Каким элементом является элемент
<span>? - Может ли встроенный элемент включать в себя блочный элемент?
- Может ли блочный элемент включать в себя встроенный элемент?
- Для чего чаще всего используется HTML-элемент
<div>? - Для чего чаще всего используется HTML-элемент
<span>?
