На главную
Определения атрибутов
- id =
name
[CS]
- Этот атрибут назначает элементу имя. Имя в пределах
документа должно быть уникальным.
- class =
cdata-list
[CS]
- Этот атрибут назначает элементу имя класса или набор имен
классов. Одно и то же имя или имена классов могут быть назначены
любому числу элементов. Несколько имен классов должны быть
разделены пробелами.
Атрибут
id назначает элементу
уникальный идентификатор (который
может проверяться синтаксическим анализатором SGML). Например, следующие
абзацы распознаются по значениям их атрибутов
id:
<P id="myparagraph"> Этот абзац имеет уникальное имя.</P>
<P id="yourparagraph"> Этот абзац тоже имеет уникальное имя.</P>
Атрибут
id имеет в HTML несколько
ролей:
- Способ выбора
таблицы стиля.
- Назначение цели
(якорь) для гипертекстовых ссылок.
- Средство ссылки на определенный элемент
сценария.
- Имя объявленного объекта
OBJECT.
- В целях обработки агентами пользователей (например. для полей
идентификации при извлечении данных из страниц HTML в базу данных,
преобразовании документов HTML в другие форматы и т.д.).
Атрибут
class, с другой стороны, назначает одно
или несколько имен классов элементу; при этом элемент может называться
принадлежащим к этим классам. Имя класса может использоваться
несколькими экземплярами элемента. Атрибут
class имеет в HTML несколько
ролей:
- Способ выбора
таблицы стиля (когда автор хочет назначить информацию о стиле
набору элементов).
- Для общей обработки агентами пользователей.
Далее элемент
exampleSPAN
используется вместе с атрибутами
id и
class для пометки сообщений
документа. Сообщения отображаются в английской и русской версиях.
<!-- английские сообщения -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>
<!-- русские сообщений -->
<P><SPAN id="msg1" class="info" lang="fr">Переменная объявлена дважды</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Переменная не объявлена</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Синтаксическая ошибка в имени переменной</SPAN>
Следующие правила стиля CSS сообщат агентам пользователя о
необходимости отображения информации зеленым цветом, предупреждений
- желтым, а сообщений об ошибках - красным:
SPAN.info { color: green }
SPAN.warning { color: yellow }
SPAN.error { color: red }
Помните, что русской "msg1" и английское "msg1" не могут
отображаться в одном документе, поскольку они используют одно и то
же значение атрибута
id. Авторы могут извлечь дальнейшую
пользу, используя атрибут
id для усовершенствования
представления отдельных сообщений, указания их в качестве целей
(якорей) и т.д.
Почти каждому элементу HTML может быть назначен идентификатор и
информация о классе.
Предположим, мы пишем документ о языке программирования. Этот
документ должен включать ряд отформатированных примеров. Для
форматирования примеров мы используем элемент
PRE. Мы также назначаем цвет фона
(зеленый) всем экземплярам элемента
PRE, принадлежащим классу "example".
<HEAD>
<TITLE>... название документа...</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
...код примера...
</PRE>
</BODY>
Установив атрибут
id для этого примера, мы можем (1)
создать на него гиперссылку и (2) использовать информацию о стиле,
отличную от определенной в таблицы, для одного экземпляра информации
о стиле.
Примечание. Атрибут
id использует одно пространство имен
с атрибутом name, если он используется
для имен якорей. Подробнее см. в разделе о
якорях с id.
Некоторые элементы HTML, которые могут присутствовать внутри тега
BODY, называются элементами
"уровня блока", в то время как
другие -
"встроенными" (также называемыми
элементами "уровня текста"). Разница между ними описана ниже:
- Модель содержимого
- Обычно элементы уровня блока могут содержать встроенные элементы
и другие элементы уровня блока. Обычно встроенные элементы могут
содержать только данные и другие встроенные элементы. Этому
структурному различию свойственна идея о том, что элементы блока
создают "большие" структуры, чем встроенные элементы.
- Форматирование
- По умочланию элементы уровня блока форматируются иначе, чем
встроенные элементы. Обычно элементы уровня блока начинаются с новой
строки, а встроенные элементы - нет. Информацию о пробелах,
переносах строки и форматировании блоков см. в разделе о
тексте.
- Направление
- По техническим причинам, затрагивающим алгоритм двунаправленного
текста
[UNICODE], элементы уровня блока и встроенные элементы
различаются способами наследования информации о направлении.
Подробнее см. в разделе о
наследовании направления текста.
Таблицы стилей обеспечивают средства задания отображения
произвольных элементов, включая и то, генерируется ли элемент как
блочный или встроенный. В некоторых случаях, например, в случае
встроенного стиля для элементов списка, это может быть полезным, но
вообще говоря, авторам следует избегать такого переопределения
интерпретации элементов языка HTML.
Изменение традиционных выражений представления для элементов уровня
блока и встроенных элементов влияет на
алгоритм двунаправленного текста.
Подробнее см. раздел о
влиянии таблиц стилей на двунаправленность.
7.5.4 Группировка элементов: элементы
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.
