Блочные и строчные элементы (div, span)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 69
Автор
Рек. время прохождения 3 минуты
Упражнений 8
Комментарии 0
Тренажер HTML
Тренажер по HTML, посвященный одной из фундаментальных тем: блочным и строчным элементам. В HTML каждый элемент по умолчанию имеет свойство `display`, которое определяет, как он будет отображаться на странице. Основные типы – это блочные (например, `<div>`) и строчные (например, `<span>`). Блочные элементы занимают всю доступную ширину, создавая новую строку до и после себя. Они идеально подходят для создания крупных структурных блоков страницы. Строчные элементы, напротив, занимают только необходимое им пространство и не создают новых строк, располагаясь друг за другом в потоке текста. Они часто используются для выделения или стилизации частей текста или других строчных элементов. В этом наборе заданий вы на практике закрепите понимание разницы между `<div>` и `<span>`, научитесь использовать их для структурирования контента и стилизации отдельных фрагментов. Задания построены от простого к сложному, позволяя вам постепенно углубить свои знания. Вам нужно будет заполнять пропущенные части HTML-кода, чтобы получить корректный визуальный результат.
Список тем

Создание блочного элемента

id: 37786_block-span-exercise-1

Создайте простой блочный элемент `div`, который будет содержать текст 'Это блочный элемент'. CSS уже настроен так, чтобы придать этому блоку фон и отступы.

CSS
.block-element {
  background-color: #f0f0f0;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
HTML
<input1 class="block-element">
  Это блочный элемент
</input1>
Для создания блочного элемента используйте тег `<div>`. Помните, что `div` по умолчанию занимает всю доступную ширину и начинается с новой строки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание строчного элемента

id: 37786_block-span-exercise-2

Выделите слово 'строчный' в предложении с помощью элемента `span`. CSS придаст этому слову красный цвет и сделает его жирным.

CSS
.inline-highlight {
  color: red;
  font-weight: bold;
}
HTML
<p>
  Это пример текста, где слово <input1 class="inline-highlight">строчный</input1> элемент должно быть выделено.
</p>
Для выделения части текста внутри строки используется тег `<span>`. Он не создает переносов строк и занимает только необходимое ему место.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Визуальная разница: `div` против `span`

id: 37786_block-span-exercise-3

Добавьте два элемента `div` с текстом 'Блок 1' и 'Блок 2', а затем два элемента `span` с текстом 'Строка 1' и 'Строка 2'. Все элементы должны иметь класс `bordered`. Обратите внимание, как они располагаются на странице. CSS добавит им границы для наглядности.

CSS
.bordered {
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
  display: inline-block; /* для span, чтобы margin/padding работал нагляднее, но div все равно будет блоком */
}
.bordered-div {
  border: 1px solid green;
  margin: 5px;
  padding: 5px;
  /* div по умолчанию блочный */
}
HTML
<p>Блочные элементы:</p>
<input1 class="bordered-div">Блок 1</input1>
<input2 class="bordered-div">Блок 2</input2>

<p>Строчные элементы (с `display: inline-block` для наглядности отступов):</p>
<input3 class="bordered">Строка 1</input3>
<input4 class="bordered">Строка 2</input4>
Используйте теги `<div>` для создания блочных элементов, которые будут располагаться друг под другом. Используйте теги `<span>` для строчных элементов, которые будут располагаться в одну линию, если позволяет место. Не забудьте добавить класс `bordered` каждому элементу.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вложенные блочные элементы

id: 37786_block-span-exercise-4

Создайте внешний `div` с классом `outer-box` и внутри него вложенный `div` с классом `inner-box`. Текст 'Внутренний блок' должен находиться во вложенном `div`.

CSS
.outer-box {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid blue;
  width: 250px; /* для iframe */
}
.inner-box {
  background-color: lightcoral;
  padding: 10px;
  border: 1px solid red;
  color: white;
  text-align: center;
}
HTML
<input1 class="outer-box">
  <input2 class="inner-box">
    Внутренний блок
  </input2>
</input1>
Теги `div` можно вкладывать друг в друга для создания сложной структуры. Сначала создайте внешний `div`, а затем внутри него — внутренний. Присвойте им соответствующие классы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация текста внутри блока

id: 37786_block-span-exercise-5

Создайте `div` с классом `content-block`. Внутри него разместите предложение: 'Это обычный текст, а это <тут_span>выделенный текст</тут_span> внутри блока.'. Фраза 'выделенный текст' должна быть обернута в `span` с классом `highlight`.

CSS
.content-block {
  padding: 15px;
  border: 1px dashed #999;
  margin-bottom: 10px;
  background-color: #fafafa;
}
.highlight {
  background-color: yellow;
  font-style: italic;
  padding: 2px 4px;
  border-radius: 3px;
}
HTML
<input1 class="content-block">
  Это обычный текст, а это <input2 class="highlight">выделенный текст</input2> внутри блока.
</input1>
Сначала создайте основной контейнер `div` с классом `content-block`. Затем внутри него поместите текст. Часть текста, которую нужно стилизовать ('выделенный текст'), оберните в тег `<span>` и примените к этому `span` класс `highlight`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Блок с изображением

id: 37786_block-span-exercise-6

Создайте `div` с классом `image-container`. Внутри этого `div` уже размещено изображение с фиксированным URL. Ваша задача — правильно создать контейнер `div` вокруг изображения.

CSS
.image-container {
  border: 3px solid green;
  padding: 10px;
  width: 200px;
  margin: 10px auto;
  background-color: #e9ffe9;
}
.image-container img {
  width: 100%;
  display: block;
  height: auto;
}
HTML
<input1 class="image-container">
  <img src="https://naytikurs.ru/img/2.png" alt="Пример изображения">
</input1>
`div` часто используется как контейнер для других элементов, включая изображения, чтобы применять к группе общие стили или управлять их расположением. Оберните тег `<img>` в `div` с указанным классом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Множественное использование `span`

id: 37786_block-span-exercise-7

В предложении 'HTML это <тут_span_1>язык</тут_span_1> разметки, а CSS это <тут_span_2>язык</тут_span_2> стилей.' выделите оба слова 'язык' с помощью `span`. Первому `span` присвойте класс `html-lang`, второму — `css-lang`. CSS уже настроен.

CSS
p {
  line-height: 1.6;
}
.html-lang {
  color: orange;
  text-decoration: underline;
  font-weight: bold;
}
.css-lang {
  color: dodgerblue;
  font-weight: bold;
  background-color: #e0f3ff;
  padding: 0 3px;
}
HTML
<p>
  HTML это <input1 class="html-lang">язык</input1> разметки, а CSS это <input2 class="css-lang">язык</input2> стилей.
</p>
Вы можете использовать несколько элементов `span` в одном текстовом блоке для применения разных стилей к разным его частям. Каждому `span` можно присвоить свой класс. Оберните первое слово 'язык' в `span` с классом `html-lang`, а второе — в `span` с классом `css-lang`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание простой карточки

id: 37786_block-span-exercise-8

Создайте структуру простой карточки. Она должна состоять из трех `div`: один общий `div` с классом `card`, внутри него `div` для заголовка с классом `card-title` и текстом 'Заголовок карточки', и еще один `div` для описания с классом `card-description` и текстом 'Описание содержимого карточки.' Внутри описания выделите слово 'содержимого' тегом `span` с классом `card-highlight`.

CSS
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  max-width: 300px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  background-color: white;
}
.card-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
.card-description {
  font-size: 0.9em;
  color: #666;
  line-height: 1.5;
}
.card-highlight {
  background-color: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
}
HTML
<input1 class="card">
  <input2 class="card-title">
    Заголовок карточки
  </input2>
  <input3 class="card-description">
    Описание <input4 class="card-highlight">содержимого</input4> карточки.
  </input3>
</input1>
Используйте вложенные `div` для создания структуры карточки. Внешний `div` будет контейнером (класс `card`). Внутренние `div` — для заголовка (класс `card-title`) и описания (класс `card-description`). В тексте описания используйте `span` (класс `card-highlight`) для выделения слова.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру