Блочные и линейные элементы

Все элементы страницы можно разделить на два типа: блочные и линейные.

Содержание



Блочные элементы

Блочные элементыБлочные элементы занимают всю доступную ширину и располагаются один под другим. Перенос слов осуществляется в границах блочного элемента.

Как пример блочных элементов можно привести абзацы. Абзацы выстраиваются один под другим, занимают всю ширину страницы. Текст в абзацах переносится по словам.

Абзацы <p>

Абзацы — основной структурный элемент Web-страницы.

Абзацы создаются с помощью элемента <p>. Его имя происходит от английского слова «paragraph» — «абзац».

Между тегами <p> и </p>распологается текст абзаца.

Текст в абзацах переносится автоматически. Абзацы являются блочными элементами. В абзацы нельзя включать другие блочные элементы. Элементы <p> включаются в элемент <body>.

Заголовки

Заголовки бывают шести уровней.

Заголовок первого уровня является названием страницы. Он создаётся с помощью элемента <h1>. Заголовок второго уровня разбивает страницу на логические разделы. Он создаётся с помощью элемента <h2>. Заголовок третьего уровня разбивает разделы на смысловые части. Он создаётся с помощью элемента <h3> и т.д.

Первым элементом на странице всегда должен быть элемент <h1>.
Заголовки являются блочными элементами.

Заголовки нельзя включать в абзацы, а абзацы – в заголовки.

Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> включаются в элемент <body>.

Размеченный текст <pre>

В XHTML пробелы и начала строк игнорируются. Если нужно обойти такое стандартное поведение обозревателя, применяют элемент <pre>. Текст внутри элемента <pre> выводится в том же виде, в каком он был сохранён, с соблюдением всех пробелов и новых строк.

Элемент <pre> удобен для листингов — исходных кодов программ. Он позволяет сохранить все отступы. Элементы <pre> включаются в элемент <body>.

Линейные элементы

Линейные элементыЛинейные элементы занимают ровно столько места, сколько им необходимо. При необходимости, линейный элемент может разорваться и продолжиться на следующей строке. Линейные элементы располагаются слева направо и могут свободно включаться в текст.

К линейным элементам относятся элементы логического форматирования: <strong> и <em> и ссылки — элемент <a>.

Элементы «усиление» и «эмфазис»

Сосуществование блочных и линейных элементовЛинейные элементы <strong> и <em> используются для расстановки логических ударений в тексте. Поскольку эти элементы линейны, они позволяют выделить букву, слово или фразу.

Обычно <strong> отображается полужирным, а <em>курсивом. Но это стандартное поведение легко может быть переопределено в стилях.

Сосуществование блочных и линейных элементов

Линейные элементы могут включаться как в блочные, так и в линейные элементы. Блочные элементы включаются только в блочные элементы. В абзацы никакие блочные элементы включаться не могут.

В линейные элементы нельзя включать блочные, так как при этом нарушаются сами определения блочности и линейности.

Ссылки

С помощью элемента <a> создаются ссылки с Web-страницы на различные ресурсы.
Для элемента <a> определён обязательный атрибут href, задающий подключаемый ресурс.

Ссылки являются линейными элементами. Элементы <a> включаются в элемент <body> и в другие блочные и линейные элементы.

Ссылки не могут включаться одна в другую, то есть в элемент <a> нельзя включать другие элементы <a>.

Атрибут href

Атрибут href задаёт ресурс, на который указывает ссылка.

Если файл, на который производится ссылка, находится в той же папке, что Web-страница, как значение атрибута href указывается просто имя этого файла (обязательно с расширением) с соблюдением регистра. Например, в этой папке есть файл archive.zip. Ссылку на него можно создать таким образом:

А если определить для ссылки и атрибут title, код изменится следующим образом:

Если подвести указатель к ссылке, появится всплывающая подсказка.

Атрибут title

Атрибут title позволяет определить всплывающую подсказку. Значение атрибута title и будет её текстом.

Атрибут title определён для всех элементов, то есть любому элементу может быть назначена всплывающая подсказка.

Старайтесь пояснять все непонятные фрагменты документа. Это облегчит его восприятие конечными посетителями и, значит, будет способствовать успеху Вашего проекта.


Похожие материалы:

Оставить комментарий