- •Обзор html и css
- •Структура документа html
- •Раздел head ("шапка")
- •Раздел body ("тело документа")
- •Минимальный xhtml-документ
- •Заголовки и абзацы Заголовок (h1..H6 - header 1...6)
- •Абзац (p - paragraph)
- •Логическое и физическое форматирование. Разбивка на строки Выделения (strong, em - emphasis, span)
- •Управление разбивкой текста на строки (br, nobr, pre)
- •Секция, список Секция (div - division)
- •Список (ol - ordered list, ul - unordered list)
- •Якорь. Специальные символы Якорь (a - anchor)
- •Специальные символы
- •Минимальная структура. Заголовок и колонтитулы
- •Группы столбцов. Объединение столбцов и строк Элементы colgroup и col
- •Атрибуты colspan и rowspan
- •Вопросы
- •Единицы размеров
Управление разбивкой текста на строки (br, nobr, pre)
Как уже говорилось, разбивка на строки кода HTML-разметки не влечёт разбивки браузером на строки документа. Один из способов разрыва строки - применение блочного элемента, например, абзаца. Другой способ (исключающий добавление дополнительных отступов) - это вставка в текст элемента разрыва строки br. Существует и элемент nobr (нестандартный), имеющий противоположное назначение: текст, заключённый в него, не будет разбит браузером на строки, независимо от количества символов.
<title>Untitled Page</title>
</head>
<body>
<p>
Этот абзац будет разбит на строки
<br />
здесь и
<br />
здесь.</p>
<p>
<nobr>Этот очень длинный абзац вообще не будет разбит на строки -
пользуйтесь горизонтальной прокруткой.
Curabitur vitae tincidunt lorem... </nobr>
</p>
Листинг 2.6. элементов HTML для разбивки текста на строки (html, txt)
Рис. 2.6. Применение элементов HTML для разбивки текста на строки
<title>Пример для элемента pre</title>
</head>
<body>
<p>
Далее приведён листинг программного кода, помещённый в HTML-элемент <code>
pre</code>, и он отображается с теми же отступами, как в Visual Studio:</p>
<pre>
oDigits.onmousedown =
oSigns.onmousedown =
function(e) {
var elem = null;
if (e) elem = e.target;
else elem = window.event.srcElement;
elem.style.color = 'red';
}
oDigits.onmouseup =
oSigns.onmouseup =
function(e) {
var elem = null;
if (e) elem = e.target;
else elem = window.event.srcElement;
elem.style.color = '';
}
</pre>
Листинг 2.7. Пример для элемента pre (html, txt)
Элемент pre (преформатированный вывод) выделяет в разметке фрагмент, который браузер должен отобразить "как есть", теми же символами и с тем же разбиением на строки, включая все пробелы.
Текст внутри элемента pre может содержать физическую и логическую разметку, а также якоря, изображения и горизонтальные линейки. Весь текст в элементе будет отображен моноширинным шрифтом.
Чаще всего преформатированный вывод используется для представления исходных кодов программ, как в следующем примере.
Рис. 2.7. Пример для элемента pre
Секция, список Секция (div - division)
Не несёт никакой логической нагрузки и используется, как правило, в качестве строительного элемента при вёрстке страницы. Здесь важно провести следующее разделение между всеми элементами тела HTML-документа: строчные (inline) элементы могут занимать часть строки, а блочные (block) всегда занимают целое число строк. Большинство HTML-элементов - строчные; к блочным относятся заголовок, абзац, секция, список и таблица (а также некоторые другие элементы, которые будут рассмотрены особо).
Таким образом, с точки зрения представления на экране секция ничем не отличается от абзаца. Главное различие состоит в том, что в абзац нельзя поместить другой абзац (и вообще блочный элемент), а в секцию разрешается помещать любые другие элементы, включая секции. Поэтому в качестве универсального контейнера обычно используется именно секция. При проектировании макета веб-страницы обычно мыслят блоками: блок колонтитула, блок меню, блок основного содержимого и т.д. Как правило, каждый блок реализуется при помощи секции либо списка. Подробно использование блоков рассмотрено в лекциях "Позиционирование" и "Табличная и бестабличная вёрстка"