Блочные и линейные элементы
Все элементы страницы можно разделить на два типа: блочные и линейные.
Содержание
Блочные элементы
Блочные элементы занимают всю доступную ширину и располагаются один под другим. Перенос слов осуществляется в границах блочного элемента.
Как пример блочных элементов можно привести абзацы. Абзацы выстраиваются один под другим, занимают всю ширину страницы. Текст в абзацах переносится по словам.
Абзацы <p>
Абзацы — основной структурный элемент Web-страницы.
Абзацы создаются с помощью элемента <p>
. Его имя происходит от английского слова «paragraph» — «абзац».
Между тегами <p>
и </p>
распологается текст абзаца.
1 2 3 4 5 6 |
<p> Тут находится текст первого абзаца. </p> <p> Тут находится текст второго абзаца. </p> |
Текст в абзацах переносится автоматически. Абзацы являются блочными элементами. В абзацы нельзя включать другие блочные элементы. Элементы <p>
включаются в элемент <body>
.
Заголовки
Заголовки бывают шести уровней.
Заголовок первого уровня является названием страницы. Он создаётся с помощью элемента <h1>
. Заголовок второго уровня разбивает страницу на логические разделы. Он создаётся с помощью элемента <h2>
. Заголовок третьего уровня разбивает разделы на смысловые части. Он создаётся с помощью элемента <h3>
и т.д.
Первым элементом на странице всегда должен быть элемент <h1>
.
Заголовки являются блочными элементами.
Элементы <h1>
, <h2>
, <h3>
, <h4>
, <h5>
и <h6>
включаются в элемент <body>
.
Размеченный текст <pre>
В XHTML пробелы и начала строк игнорируются. Если нужно обойти такое стандартное поведение обозревателя, применяют элемент <pre>
. Текст внутри элемента <pre>
выводится в том же виде, в каком он был сохранён, с соблюдением всех пробелов и новых строк.
1 2 3 4 5 6 |
<pre> Тут будут сохранены все пробелы и строки. </pre> |
Элемент <pre>
удобен для листингов — исходных кодов программ. Он позволяет сохранить все отступы. Элементы <pre>
включаются в элемент <body>
.
Линейные элементы
Линейные элементы занимают ровно столько места, сколько им необходимо. При необходимости, линейный элемент может разорваться и продолжиться на следующей строке. Линейные элементы располагаются слева направо и могут свободно включаться в текст.
К линейным элементам относятся элементы логического форматирования: <strong>
и <em>
и ссылки — элемент <a>
.
Элементы «усиление» и «эмфазис»
Линейные элементы
<strong>
и <em>
используются для расстановки логических ударений в тексте. Поскольку эти элементы линейны, они позволяют выделить букву, слово или фразу.
Обычно <strong>
отображается полужирным, а <em>
— курсивом. Но это стандартное поведение легко может быть переопределено в стилях.
Сосуществование блочных и линейных элементов
Линейные элементы могут включаться как в блочные, так и в линейные элементы. Блочные элементы включаются только в блочные элементы. В абзацы никакие блочные элементы включаться не могут.
В линейные элементы нельзя включать блочные, так как при этом нарушаются сами определения блочности и линейности.
Ссылки
С помощью элемента <a>
создаются ссылки с Web-страницы на различные ресурсы.
Для элемента <a>
определён обязательный атрибут href
, задающий подключаемый ресурс.
1 |
<a href="ресурс">текст ссылки</a> |
Ссылки являются линейными элементами. Элементы <a>
включаются в элемент <body>
и в другие блочные и линейные элементы.
<a>
нельзя включать другие элементы <a>
.Атрибут href
Атрибут href
задаёт ресурс, на который указывает ссылка.
Если файл, на который производится ссылка, находится в той же папке, что Web-страница, как значение атрибута href
указывается просто имя этого файла (обязательно с расширением) с соблюдением регистра. Например, в этой папке есть файл archive.zip. Ссылку на него можно создать таким образом:
1 2 3 4 5 6 |
<body> <h1>ЗАКАЧКА ФАЙЛА</h1> <p> Здесь находится <a href="archive.zip">архив</a> программы. </p> </body> |
А если определить для ссылки и атрибут title, код изменится следующим образом:
1 2 3 4 5 6 |
<body> <h1>ЗАКАЧКА ФАЙЛА</h1> <p> Здесь находится <a href="archive.zip" title="Для закачки щелкнуть">архив</a> программы. </p> </body> |
Если подвести указатель к ссылке, появится всплывающая подсказка.
Атрибут title
Атрибут title
позволяет определить всплывающую подсказку. Значение атрибута title
и будет её текстом.
Атрибут title
определён для всех элементов, то есть любому элементу может быть назначена всплывающая подсказка.
1 |
<body title="Всплывающая подсказка."></body> |
1 |
<p title="Всплывающая подсказка."></p> |
1 |
<strong title="Всплывающая подсказка."></strong> |
1 |
<a href="имя-файла" title="Всплывающая подсказка."></a> |
Старайтесь пояснять все непонятные фрагменты документа. Это облегчит его восприятие конечными посетителями и, значит, будет способствовать успеху Вашего проекта.