HTML: Блочные и строчные элементы
Познакомившись со многими HTML-элементами можно заметить, что их поведение не всегда одинаковое — некоторые элементы (параграфы, списки, <pre>, <div>, заголовки, таблицы) всегда начинаются с новой строки. Они занимают всю ширину экрана. Такие элементы называются блочными. Они являются основой вёрстки HTML, так как напрямую воздействуют на то, как будут расположены элементы рядом с ними на странице.
Помимо блочных элементов существуют строчные элементы. К ним относятся ссылки (<a>), теги начертания текста (<b>, <strong>, <i>, <em>), картинки, <span>. Они не влияют на расположение соседних элементов и предназначены для придания смысловой нагрузки. В отличие от блочных элементов, строчные занимают не всю ширину экрана, а лишь то пространство, которое им необходимо
<p>A paragraph is a block-level element.</p>
<p>It takes up all the space in the width, so each paragraph starts on a new line.</p>
<span>Span is an inline element.</span>
<span>It occupies a width equal to the width of its content, so there is no line break.</span>
Задание
Добавьте два тега <span> с текстом внутри. Посмотрите, как они будут расположены
Полезное
Строчные элементы часто используют для стилизации. Например, тег
<span>используют для оборачивания участка текста. Потом этот участок стилизуют с помощью CSSВ большинстве случаев строчные элементы можно помещать внутрь блочных, а блочные нельзя помещать внутрь строчных. Исключение — ссылки. Внутрь ссылки можно помещать блочные элементы. Такое использование разрешили в стандарте HTML5
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const links = document.querySelectorAll('span');
expect(links).to.be.length(2);
});Решение учителя откроется через:
20:00
