- •Вступление
- •Обозначения
- •Введение в CSS
- •Инструменты
- •Введение в CSS
- •Способы добавления стилей на страницу
- •Типы носителей
- •Базовый синтаксис CSS
- •Значения стилевых свойств
- •Селекторы тегов
- •Классы
- •Идентификаторы
- •Контекстные селекторы
- •Соседние селекторы
- •Дочерние селекторы
- •Селекторы атрибутов
- •Универсальный селектор
- •Псевдоклассы
- •Псевдоэлементы
- •Группирование
- •Наследование
- •Каскадирование
- •Валидация CSS
- •Идентификаторы и классы
- •Написание эффективного кода
- •Режимы браузеров
- •Стандартный режим
- •Почти стандартный режим
- •Режим совместимости
- •MIME-тип документа
- •Доктайп
- •Режимы Internet Explorer
- •Рекомендации
- •Принципы вёрстки слоями
- •Блочная модель
- •Схлопывающиеся отступы
- •Поток документа
- •Блочные элементы
- •Строчные элементы
- •Строчно-блочные элементы
- •Плавающие элементы
- •Позиционирование элементов
- •Наложение и порядок слоёв
- •Вёрстка с помощью таблиц
- •Особенности таблиц
- •Таблицы и стили
- •Разница между таблицами и слоями
- •Разрезание и склейка изображений
- •Макет из двух колонок
- •Макет из трех колонок
- •Тестирование в IE
- •Условные комментарии
- •Загадочное свойство hasLayout
- •Отображение в IE
- •Ошибки IE8
- •Ошибки IE7
- •Фиксированный макет с одной колонкой
- •Фиксированный двухколоночный макет
- •Фиксированный трёхколоночный макет
- •Резиновый двухколоночный макет
- •Резиновый трёхколоночный макет
- •Колонки одинаковой высоты
- •Вёрстка типовых элементов веб-страницы
- •Меню
- •Горизонтальное меню
- •Вертикальное меню
- •Меню и подменю
- •Ниспадающее меню
- •Вкладки
- •Формы
- •Нестандартный вид текстовых полей
- •Выравнивание элементов форм
- •Вёрстка сайта на практике
- •Шапка страницы
- •Основная часть
- •Подвал страницы
- •Главная страница
- •Внутренняя страница
- •Заключение
- •Структура кода
- •Новые теги
- •Применение HTML5 на практике
- •Валидация HTML5
- •Тестирование и отладка готового кода
- •Web Developer
- •Отладка кода с помощью расширения Firebug
- •Использование Firebug на практике
- •Веб-инспектор Safari
- •Opera Dragonfly
- •Средства разработчика Internet Explorer
- •Термины
Рекомендации
Несмотря на обилие различных доктайпов, их количество для перевода документа в стандартный режим не так и велико и, по сути, сводится всего к трём. Разница между этими доктайпами только в используемой версии HTML или XHTML.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 5
<!DOCTYPE html>
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Включение именно стандартного режима рекомендуется в связи с его стабильностью и практически одинаковой работой в разных браузерах. В этом режиме браузеры придерживаются спецификаций HTML и CSS, поэтому если вы верстаете по стандартам, отладка сайта сильно упрощается.
Выбор доктайпа из перечисленных выше зависит от собственных предпочтений и знаний (X)HTML. В XHTML строгий синтаксис: все теги, включая одиночные, требуется закрывать, атрибуты и теги писать только в нижнем регистре, все значения заключать в кавычки. В HTML синтаксис проще, закрывать надо не все теги, имена тегов и атрибутов можно писать в любом регистре, кавычки не обязательны.
HTML5 ещё либеральнее, в этой версии соблюдаются правила HTML4, но учтено и некоторое влияние XHTML. Так, одиночные теги можно как закрывать, так и оставлять незакрытыми, убраны обязательные атрибуты вроде type="text/css". Сам HTML5 это не просто развитие языка разметки, сколько сборник новых технологий вроде рисования, анимации, вставки видео и аудио, геолокации, локального хранилища, автономного режима сайта, новых элементов фор и многого другого. «Вкусностей» полно, и на практике плюсов гораздо больше, чем при сравнении между XHTML 1.0 и HTML 4.01.
W3 Consortium заявил, что работа над XHTML 2.0 свёрнута и все материалы переданы в рабочую группу HTML5. Это говорит о том, что дальнейшего продвижения XHTML ждать не придётся, а развитие Интернета пойдет по пути HTML.
Хотя стандарт HTML5 ещё находится в разработке, современные браузеры вполне уже поддерживают множество заявленных в нём возможностей. Так что если вы желаете их использовать на сайте, выбор доктайпа HTML5 становится очевидным.
Если посмотреть тенденции в вёрстке сайтов, также заметен отход от HTML 4.01 в пользу XHTML 1.0 и HTML5. На технологическом конкурсе сайтов WebHiTech (http://webhitech.ru) предпочтение отдавалось сайтам, свёрстанным именно по этим стандартам.
Таким образом, выбор доктайпа сокращается до двух пунктов, либо это строгий XHTML 1.0, либо
HTML5.