Группирующие элементы div и span

<!element div - - %block>

<!attlist div %attrs;		-- %coreattrs, %i18n, %events --
	%align;	-- align, выравнивание текста -- >
<!element span - - (%inline) *		-- базовый языковый/стилевой контейнер -- >
<!element span %attrs;		-- %coreattrs, %i18n, %events -- >

Атрибуты определенные где-то еще

id, class (идентификаторы, действующие в пределах документа)
lang (языковая информация), dir (направление текста/отступ)
title (заголовок элемента)
style (текущая стилевая информация)
align (выравнивание)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (события)

Элементы div и span в сочетании с атрибутами id и class предлагают обобщенный механизм структурирования документа. Таким образом, сформировав примеры и классы и используя для них стилевые листы, программист может придать HTML-документу необходимую структуру и форму.

Предположим нужно сформировать документ на основе базы данных клиента. Так как HTML не имеет элементов, идентифицирующих такие объекты как "клиент", "телефонный номер" и т.д., для решения стоящей задачи воспользуемся элементами div и span.

В приведенном примере каждое имя клиента принадлежит классу client-last-name. Присвоим также уникальные идентификаторы каждому клиенту (client-stepanov, client-ivanov).

<div id="client-stepanov" class="client">
<span class="client-last-name">last name:</span> stepanov,
<span class="client-first-name">first name:</span> stepa
<span class="client-tel">telephone:</span> (095) 123-9442
<span class="client-email">email:</span> s.s@itep.ru">s.s@itep.ru
</div>

<div id="client-ivanov" class="client">
<span class="client-last-name">last name:</span> ivanov,
<span class="client-first-name">first name:</span> vanja
<span class="client-tel">telephone:</span> (095) 123-5442

<span class="client-email">email:</span> s.s@itep.ru">v.i@itep.ru
</div>

Позднее может быть легко добавлена стилевая информация для тонкой настройки представления записей этой базы данных.

span является строчным элементом и его зона ответственности - параграф. span не может быть использован для группирования элементов блочного уровня. div, напротив, предназначен для работы с блочными элементами. div элемент, за которым следует незакрытый p-элемент, завершает параграф. Агент пользователя помещает разрыв строки до и после div-элемента, например строка:

<p>aaaaaa<div>bbbbbb</div><div>ccccc<p>ccccc</div>
обычно развертывается в:
aaaaaa
bbbbbb
ccccc

ccccc

Агент пользователя развернет ее как:
aaaaaabbbbbbccccc
ccccc

5.3. Элементы заголовков h1, h2, h3, h4, h5, h6

<!entity % heading "h1, h2, h3, h4, h5, h6">
<!-- Существует шесть уровней заголовков, начиная с Н1 (наиважнейший), кончая Н6 -- >
<!element (%heading) - - (%inline;)*>

<!attlist (%heading) %attrs;		-- %coreattrs, %i18n, %events --
	%align;	-- align, выравнивание текста -- >

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

Визуальные броузеры отображают заголовки более высокого уровня буквами более крупного кегля. Ниже приведен пример использования div-элемента для установления связи заголовка со следующей за ним секцией документа. Это позволяет определить стиль раздела с помощью стилевых листов.

<div class="section" id="forest-elephants" >
<h1>forest elephants </h1>

В этом разделе обсуждаются менее известные лесные слоны.

… далее следует продолжение текста …
<div class="subsection" id="forest-habitant" >
<h2> habitant </h2>
Лесные слоны живут не на деревьях (:-))
… далее следует рассказ о том, где и как живут лесные слоны …

</div>
</div>

Структура может быть улучшена с помощью стилевой информации, например:

<head>
<style>
div.section { text-align: justify; font-size: 12pt }
div.subsection { text-ident: 2em }
h1 {font-style: italic; color: green }
h2 { color: green }
</style>
</head>

5.4. Элементы address

<!element address - - ((%inline;) | p) *>

<!attlist address %attrs;

-- %coreattrs, %i18n, %events -- >

Элемент address служит для введения контактного адреса с автором документа, например:

<address>
newsletter editor<br>
j. r. brown<br>
8723 buena vista, smallville, ct 01234<br>
tel: +1 (123) 456 7890
</address>

6. Спецификация языка содержимого документа. Атрибут lang

lang = language-code

Специфицирует базовый язык, на котором написан документ. Значением этого атрибута является код языка (см. RFC-1766). В пределах кода языка пробелы использоваться не должны. Значение этого кода по умолчанию "unknown". Код языка состоит из базового кода и субкода.

language-code = primary-code *( "-" subcode )

Атрибуты, определенные где-либо еще.

id, class (идентификаторы, действующие в пределах документа)
lang (языковая информация), dir (направление текста/отступ)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (события)

Ниже приведено несколько примеров кодов языка.

"en":english
"en-us":the u.s version of english

"en-cockney":the cockney version of english	(версия английского - кокни)
"i-cherokee":the cherokee language spoken by some native americans	(Чероки - язык, на котором говорят некоторые коренные американцы)

Две первые буквы базового кода зарезервированы ISO-639.

fr	французский
de	немецкий
it	итальянский
nl	голландский
el	греческий
es	испанский
pt	португальский
ar	арабский
he	еврейский
ru	русский
zh	китайский
ja	японский
hi	хинди
ur	урду

Любые две буквы субкода воспринимаются как код страны ISO3166.

7. Наследование языковых кодов

Элемент наследует информацию языкового кода согласно следующим приоритетам (сверху вниз):

Атрибут lang устанавливает значение элемента.
Глобальный элемент, имеющий атрибут lang.
http заголовок "content-language", устанавливающий значения языка, например,
content-language: en-us.
Задание языкового атрибута извне.

В ниже приведенном примере базовый язык документа является французским. Один параграф декларирован как испанский, после чего базовый язык восстанавливается. Следующий параграф включает встроенную фразу на японском, после чего следует снова текст на французском.

<html lang="fr">
<body>
… текст интерпретируется как французский …
<p lang="es">… текст интерпретируется как испанский …
<p>… текст интерпретируется снова как французский …
<p> … французский текст интерпретируется с помощью <em lang="ja"> немного японского </em> далее следует снова текст на французском …
</body>
</html>

Содержание раздела

Главная сайта