Общие правила и рекомендации при написании html/xhtml кода
С чего начинается документ
Итак, с чего же начинается HTML-документ? Конечно же с описания его типа при помощи DOCTYPE! (см. 2). В первую очередь вы должны полностью осознавать какой именно тип документа вы собрались воплотить в жизнь. Впрочем, независимо от того, какой это будет документ, произвольный HTML или XHTML 1.0 Strict, вам в любом случае необходимо придерживаться общих правил форматирования (см. 4) и советам, изложенным здесь и в последующих разделах.
При помощи конструкции DOCTYPE браузер определяет с каким типом документа он имеет дело. Ниже приведены конструкции DOCTYPE для основных видов документов.
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Следует отметить, что в Интернет встречается много документов с неполной записью DOCTYPE – когда не указан URL на DTD, либо не указан вовсе. В случае отсутствия DOCTYPE в документе, браузер настраивается на тип документа по умолчанию, который, как вы сами понимаете, может отличаться от ожидаемого. Подобные неточности являются причиной многих ошибок и трудностей при работе с такими документами. Самая известная особенность связанная с указанием типа документа – это модель отображения блочных элементов, характерная для браузеров Internet Explorer (см 6.2.2). Во избежание возможных ошибок и неприятностей всегда указывайте полную запись DOCTYPE.
Модели отображения блочных элементов
Учитывая популярность браузера Internet Explorer 6.0, можно по праву сказать, что существует две модели отображения блочных элементов, или так называемых боксовых моделей (box model):
Модель Internet Explorer (IE)
Стандартная модель W3C
Модель IE говорит о том, что, если вы определяете ширину (width) блочного элемента (например элемента DIV), то величина отступа (padding) и ширина границы (border-width) входят в состав этой величины. Стандартная модель W3C утверждает обратное: величина отступа и ширина границы должны дополнять ширину элемента. В итоге имеем два абсолютно разных значений реальной (отображаемой) ширины объекта при одних и тех же значениях width, padding и border-width. Рассмотрим пример с шириной объекта равную 200 пикселей, внутренним отступом в 20 пикселей и шириной границы, чтоже равной 20 пикселям. Получаем следующую запись в CSS:
CSS фрагмент для объекта
width: 200px;
padding: 20px;
border-width: 20px;
Реальная (отображаемая) ширина объекта для модели Internet Explorer равна 200 пикселей, для модели W3C:
200 + 2*20 + 2*20 = 280 пикселей.
Рисунок, приведенный ниже, наглядно демонстрирует эти различия.
Рисунок 6‑2. Модели отображения блочных элементов.
Использование модели W3C обязывает делать дополнительные вычисления при работе с CSS. К тому же модель Internet Explorer кажется более логичной с точки зрения взаимного расположения и взаимодействия объектов. Тем не менее, стандарт есть стандарт, модель Internet Explorer следует считать устаревшей, а ориентироваться нужно на модель W3C.
Браузер Internet Explorer 6.0 поддерживает обе модели, в зависимости от того, какой тип документа указан в начале документа. Имеет значение также и то, приведена полная его запись или укороченная, без URL на DTD. Таблица, приведенная ниже, описывает поведение Internet Explorer 6.0 в зависимости от записи DOCTYPE.
Таблица 6‑2 – Конструкция DOCTYPE и модель отображения блочных элементов Internet Explorer 6.0
|
Конструкция DOCTYPE |
Режим Internet Explorer 6.0 |
|
DOCTYPE не указан |
Модель IE |
|
HTML 4.01 – не указан URL в DOCTYPE |
Модель IE |
|
HTML 4.01 – полная запись |
Модель W3C |
|
XHTML 1.0 – не указан URL в DOCTYPE |
Модель W3C |
|
XHTML 1.0 – полная запись |
Модель W3C |
Следует отметить, что есть еще одно принципиальное отличие между двумя моделями в Internet Explorer 6.0. Оно состоит в том, что стандартная модель рассматривает элемент html как отображаемый, который является контейнером для элемента body. Пример, приведенный ниже, поможет понять эту разницу.
Пример отображения свойств элемента HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="background:red">
<head>
<title>Style For HTML Element Sample</title>
</head>
<body style="background:blue; width:200px; height:150px">
<div style="background:yellow;">Content goes here ...</div>
</body>
</html>
Если убрать описание DOCTYPE, Internet Explorer 6.0 покажет совершенно иную картину.