Разница Между Разметкой И Представлением

Прочитав комментарии к посту Firefox 3: * {display: block } ошибка , я понял, что значительная часть читателей Хабра, в том числе серьезно занимающихся веб-разработкой, не совсем правильно представляют себе что-то вроде HTML, и почему теги отображаются именно так, а не иначе.



Как всегда, начнем с истории.

Обо всём этом уже написано тысячи раз, но всё же.

HTML ведет свою «родословную» от языка с вековой историей, разработанного IBM в конце 60-х годов.

ГМЛ , предназначенный для универсальной системы обмена документами.

В середине 80-х его преемник прошел стандартизацию ISO и получил название SGML, и, наконец, в начале 90-х Бернерс-Ли разработал на его основе HTML. А могло ли быть так: мухи отдельно, котлеты отдельно? Может. И даже необходимо.

Именно так решили специалисты IBM, разработавшие GML, и отделили смысловое значение элементов документа (логическую структуру) от их внешнего вида (представления).

Логика документа (смысл его составных частей) является неотъемлемой частью самого документа, и управлять внешним видом было решено через внешние файлы стилей.

Правила составления документа (перечень тегов и правила их использования) также были перенесены во внешние файлы — ОТД .

В результате мы получаем систему из трех компонентов:

  1. ОТД — Определение правил использования элементов разметки.

    Документация — Данные размечены в соответствии с правилами DTD. Файлы стилей — Определение внешнего вида элементов разметки Версии HTML 1 и 2 включали в свою схему только первые два пункта и не предлагали авторам документов возможности подключать внешние файлы стилей, оставляя внешний вид документа на усмотрение браузера.

    Спецификация HTML 2.0 Я лишь дал рекомендации по отображению отдельных элементов документа.

    Лут побеждает. С бурным развитием интернет-торговли в середине 90-х годов инструменты HTML 2.0 стали дефицитными.

    И предприимчивая Netscape, тогдашний лидер на рынке браузеров, а вслед за ней и Mircosoft, тоже желавшая отхватить кусок пирога, начали внедрять в свои браузеры различные «расширения» языка HTML. По сути, превращая его из языка разметки в язык дизайна.

    Некоторые нововведения отражены в HTML 3.2 в виде атрибутов, таких как фон, цвет и тегов, таких как шрифт. CSS в помощь 1 В 1996 году W3C утвердил спецификацию CSS — таблиц стилей — призванную положить конец беспорядку и вернуть HTML его первоначальное назначение — определять значение элементов документа, а не их внешний вид. Те.

    дайте HTML тот же третий компонент, что и GML. Однако ничто не проходит бесследно.

    Эпоха браузерных войн и HTML 3.2 оставила серьёзный след как в браузерных движках, вынужденных поддерживать HTML-расширения, так и в умах веб-мастеров, привыкших смешивать логику и представление воедино.



    Как браузеры определяют внешний вид элементов?

    Основными «инструкциями» по парсингу HTML-документа для браузера являются: ОТД , который содержит список тегов, атрибутов, правила их размещения и другие правила форматирования документа.

    Например, определение тега стиль говорит, что тег может содержать такие данные, как CDATA для него разрешены атрибуты интернационализации (lang, dir), а также атрибуты type, media и title. Теги п И час описываются одинаково, за исключением того, что hr не может иметь содержимого, а p может содержать строковые данные.

    Обратите внимание, что в DTD нет указания, что hr следует отображать горизонтальной линией, а p следует добавлять с вертикальным дополнением! Откуда же браузер знает, что п должны быть углубления и сильный - Должно ли это быть напечатано жирным шрифтом? Ну и что вообще отвечает за нашу внешность? Да, третий компонент модели GML — это стили.

    В случае HTML это CSS. Если вы откроете URI в FireFox: ресурс://gre/res/html.css , то вы сможете увидеть те самые стили, которые по умолчанию применяются к HTML-документам.

    Вот стиль абзаца:

     
     p, dl, multicol {
       display: block;
       margin: 1em 0;
     }
     
    Но для горизонтальной линии:
     
     hr {
       display: block;
       height: 2px;
       border: 1px inset;
       margin: 0.5em auto 0.5em auto;
       color: gray;
       -moz-float-edge: margin-box;
       -moz-box-sizing: border-box;
     }
     
     hr[size="1"] {
       border-style: solid none none none;
     }
     
    Не правда ли, все просто и логично? Вернемся к поведению, описанному в Firefox 3: * {display: block } ошибка , и посмотрим, каким правилам следует FireFox при отображении основных блоков документа:
     
     html, div, map, dt, isindex, form {
       display: block;
     }
     
     body {
       display: block;
       margin: 8px;
     }
     .
    

    /* hidden elements */ area, base, basefont, head, meta, script, style, title, noembed, param { display: none; }

    Что мы имеем в итоге? И в итоге имеем следующую последовательность правил:
     
     area, base, basefont, head, meta, script, style, title, noembed, param {
        display: none;
     }
     .
    

    * { display: block; }

    Согласно правилам каскадирования, определенным CSS 2.1, правила автора имеют приоритет над правилами пользовательского агента, соответственно, второй стиль переопределяет первый и все элементы документа.

    включая теги заголовка и стиля становятся блочными, и содержимое тега стиля, имеющего тип CDATA (см.

    выше), выводится в браузер.

    Судя по всему, Opera, Safari и Konqueror делают то же самое.



    Впереди планеты всей.

    .

    как всегда Internet Explorer. Трудно сказать, как браузер Microsoft обрабатывает документы, но, судя по ряду признаков, он основан не на DTD и стилях, а на каких-то собственных представлениях о HTML. Очевидно, наследие HTML 3.2 берет свое.



    Заключение

    Помимо стандартов «де-юре», в сети, как и в других сферах, существует множество стандартов «де-факто», имеющих исторические корни.

    Подобные стандарты многими воспринимаются как данность, развивая определенную инерцию мышления.

    Столкнувшись с чем-то естественным, предсказуемым, но нарушающим привычный порядок, обладатели такой инерции удивляются и объявляют необычное ошибкой.

    Но хотелось бы напомнить пословицу: доверяй, но проверяй! А бывает, что при проверке ошибка оказывается вовсе не ошибкой, а следствием незнания, непонимания или той самой инерции мышления.



    Ссылки




    1 Название главы в книге Рика Мейера «CSS — Каскадные таблицы стилей»
Теги: #разметка #HTML #SGML #gml #html 4 #html 3.2 #HTML 2 #CSS #Firefox 3 #разработка веб-сайтов
Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.