На главную
Группировка элементов: элементы
DIV и
SPAN
Начальный тег: обязателен, Конечный тег:
обязателен
Определения атрибутов
- href =
uri
[CT]
- Этот атрибут указывает ресурс, предоставляющий
дополнительную информацию о содержимом элемента
DIV или
SPAN.
Атрибуты, определяемые в любом другом месте
-
id,
class (идентификаторы
в пределах документа)
-
lang (информация
о языке),
dir (направление
текста)
-
title (заголовок
элемента)
-
style (встроенная
информация о стиле information)
-
align (выравнивание)
-
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup (внутренние
события)
Элементы
DIV и
SPAN вместе с атрибутами
id и
class обеспечивают общий механизм
добавления в документы структуры. Эти элементы определяют встраиваемую
информацию (SPAN)
или информацию уровня блока (DIV),
но не налагают никаких других выражений для представления контекста.
Таким образом, авторы могут использовать эти элементы с
таблицами стилей, атрибутами
lang и т.д..
Предположим, Вы хотите сгенерировать документ в формате HTML на
основе базы данных информации о клиентах. Поскольку HTML не включает
элементов для идентификации таких объектов как "клиент", "номер
телефона", "адрес электронной почты" и т.д., мы используем элементы
DIV и
SPAN для достижения нужных эффектов
структуры и представления. Для структурирования информации мы могли
использовать элемент
TABLE следующим образом:
<!-- Пример данных из базы данных о клиентах: -->
<!-- Имя: Stephane Boyera, Тел.: (212) 555-1212, Email: sb@foo.org -->
<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Информация о клиенте:</SPAN>
<TABLE class="client-data">
<TR><TH>Фамилия:<TD>Boyera</TR>
<TR><TH>Имя:<TD>Stephane</TR>
<TR><TH>Тел:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>
<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Информация о клиенте:</SPAN>
<TABLE class="client-data">
<TR><TH>Фамилия:<TD>Lafon</TR>
<TR><TH>Имя:<TD>Yves</TR>
<TR><TH>Тел:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>
Затем мы легко сможем добавить объявление таблицы стиля для
настройки представления этих записей.
Другой пример см. в разделе об атрибутах
class и id.
Визуальные агенты пользователей обычно помещают символ перевода
строки перед и после элементов
DIV, например:
<P>ааааааааа<DIV>ббббббббб</DIV><DIV>ввввв<P>ввввв</DIV>
что обычно генерируется как:
ааааааааа
ббббббббб
ввввв
ввввв
Начальный тег: обязателен, Конечный тег:
обязателен
Атрибуты, определяемые в любом другом месте
-
id,
class (идентификаторы
в пределах документа)
-
lang (информация
о языке),
dir (направление
текста)
-
title (заголовок
элемента)
-
style (встроенная
информация о стиле)
-
align (выравнивание)
-
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown,
onkeyup (внутренние
события)
Заголовок кратко описывает содержание раздела, которому он
предшествует. Информация из заголовка может использоваться агентами
пользователей, например, для автоматического построения оглавления
документа.
В языке HTML существует шесть уровней заголовков:
H1 - наиболее важный - и
H6 - наименее важный. Визуальные браузеры
обычно отображают более важные заголовки более крупным шрифтом.
В следующем примере показано, как использовать элемент
DIV для того, чтобы связать заголовок
с последующим разделом документа. Это позволит Вам определить стиль
для раздела (цвет фона, шрифт и т.д.) с использованием таблиц
стилей.
<DIV class="section" id="forest-elephants" >
<H1>Лесные слоны</H1>
<P>В этом разделе мы обсуждаем менее известных лесных слонов.
...продолжение раздела...
<DIV class="subsection" id="forest-habitat" >
<H2>Ариал</H2>
<P>Лесные слоны не живут в деревьях, а среди них.
...продолжение раздела...
</DIV>
</DIV>
Эту структуру можно представить с использованием информации о
стиле, например:
<HEAD>
<TITLE>... название документа ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>
Пронумерованные разделы и ссылки
Язык HTML не генерирует
номера разделов из
заголовков. Это может выполняться агентами пользователей. Вскоре
языки описания таблиц стилей, такие как CSS, предоставят авторам
возможность управления генерацией номеров разделов (для удобства в
ссылках в печатной документации, например "См. раздел 7.2").
Некоторые люди считают
пропуск уровней заголовков дурным
тоном. Они принимают порядок заголовков H1 H2 H1, но не
принимают порядок H1 H3 H1, поскольку пропущен уровень
H2.
Начальный тег: обязателен, Конечный тег:
обязателен
Атрибуты, определяемые в любом другом месте
