HTML 4, HTML 5, XHTML, типы MIME - категорический ресурс

Question

HTML 4, HTML 5, XHTML, типы MIME - категорический ресурс

Темы HTML по сравнению с XHTML и XHTML как текст/HTML по сравнению с XHTML как XHTML довольно сложны. К сожалению, трудно получить полное изображение, так как информация распространена главным образом по частям вокруг сети или прокладывается под землей глубоко на техническом жаргоне W3C. Кроме того, существует некоторая распространяемая дезинформация. Я предлагаю сделать это категорическим ТАК ресурс о теме, описывая самые важные аспекты:

HTML 4
HTML 5
XHTML 1.0 как текст/HTML, application/xml+xhtml
XHTML 1.1 как application/xml+xhtml

Каковы практические последствия каждого?
Что такое распространенные ошибки?
Какова важность надлежащих типов MIME для каждого?
Как различные браузеры обрабатывают их?

Я хотел бы видеть один ответ на технологию. Я делаю это общественной Wiki, так вместо того, чтобы внести избыточные ответы, отредактируйте ответы для завершения изображения. Не стесняйтесь запускаться с тупиков. Также не стесняйтесь редактировать этот вопрос.

29

html xhtml html5 mime-types

задан 5 revs, 3 users 63% 18 April 2010 в 22:51

5 ответов

HTML

Контроль качества

HTML5 все еще имеет довольно незрелые инструменты контроля качества
HTML 4 существует уже давно и имеет очень зрелые инструменты контроля качества.

Поддержка браузером

HTML 5 - Биты и части поддерживаются различными браузерами. Вам нужен Javascript для поддержки большинства вещей, основные структурные элементы (например,
) очень сильно падают, если Javascript недоступен. *
HTML 4 хорошо поддерживается

* Требуются некоторые пояснения и примеры.

2

ответ дан 28 November 2019 в 01:52

XHTML

QA

XHTML имеет зрелые инструменты контроля качества, но более свободные DTD (например, - это ошибка соответствия в HTML 4.01 и XHTML 1.0, но только ошибка достоверности в HTML 4.01 <code> * </code>). И это несмотря на то, что XHTML 1.0 теоретически представляет собой HTML 4.01, выраженный как XML. Существует множество различий, которые не описаны в разделе спецификации «<a href="http://www.w3.org/TR/xhtml1/#diffs" rel="nofollow noreferrer"> Различия с HTML 4 </a>». </p> <p> Документ XHTML, обслуживаемый приложением типа MIME / xhtml + xml (см. Ниже), должен на 100% соответствовать стандартам XML, т.е. он должен быть «правильно сформированным XML». Даже один неэкранированный амперсанд может привести к тому, что синтаксический анализатор (браузер) выдаст предупреждение и откажется от рендеринга документа. При создании динамических сайтов XHTML, которые могут включать в себя контент, предоставленный третьими сторонами (например, любой пользовательский ввод), необходимо проявлять большую осторожность, чтобы избежать любых недопустимых последовательностей символов, не допустить недопустимых тегов или атрибутов и правильно вложить все элементы. </p> <h2> Поддержка браузера </h2> <ul> <li> XHTML как text / html хорошо поддерживается, но вы должны пройти через <a href="http://www.w3.org/TR/xhtml-media-types/#compatGuidelines" rel="nofollow noreferrer"> совместимость </a> обручи. Если не перескочить через эти обручи, вполне допустимая страница может не отобразиться (например, <code> <script type = "text / javascript" src = "foo" /> </code>, в результате чего остальная часть документа будет рассматриваться как сценарий вместо этого HTML) или отображать другие проблемы. </li> <li> XHTML как application / xhtml + xml достаточно хорошо поддерживается большинством браузеров (могут существовать незначительные ошибки). Он вообще не работает в Internet Explorer <= 8.</li> </ul> <h2> Тип MIME application / xhtml + xml vs text / html </h2> <p> XHTML, обслуживаемый как text / html, не является ни XHTML, ни HTML. Он обрабатывается браузером как HTML, но поскольку это не HTML, он рассматривается как суп из тегов. Поскольку Internet Explorer не знает, как обрабатывать XHTML с помощью application / xhtml + xml, его нужно будет обслуживать как text / html только для IE. Это означает, что XHTML для IE всегда является супом из тегов, если только не рассматриваются различия между HTML и XHTML (см. <a href="http://www.w3.org/TR/xhtml1/#diffs" rel="nofollow noreferrer"> Различия с HTML 4 </a>). </p> <p> Добро пожаловать в мир боли. У вас возникают проблемы с прокси-сервером ниже по потоку (вам нужно варьировать кеширование в зависимости от того, какой заголовок запроса вы выполняете по условию). Структура документа изменяется (например, таблицы без тега <code> <tbody> </code> могут иметь или не иметь элемент <code> <tbody> </code> в зависимости от типа содержимого). По сути, создание двух практически идентичных документов - это большая работа. </p> <h2> XHTML и Javascript </h2> <p> Когда XHTML-документ анализируется с использованием правильного типа MIME application / xhtml + xml, могут быть различия при манипулировании элементами DOM через Javascript. Некоторые скрипты, которые не были подготовлены должным образом, могут работать по-другому или давать сбой в среде XHTML. <br /> Примеры: в HTML команда JavaScript, например <code> console.log (document.body.tagName); </code> выведет «BODY», тогда как та же команда в XHTML выведет «body ". <br /> И если у вас есть <code> <table> <tr> .. </tr> </ table </code> в разметке, <code> firstChild </code> таблицы в JavaScript будет <code> tr </code> в XHTML, но <code> TBODY </code> в HTML.</p> <h2> Преимущества использования XHTML (как application / xhtml + xml) </h2> <ul> <li> Позволяет прямое чередование других форматов XML, таких как MathML и SVG. </li> <li> Теоретически быстрее разбирается. Однако на практике разница незначительна. </li> </ul> <hr /> <p><code> * </code> Пункт требует доработки. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">3</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="28 November 2019 в 01:52 ">28 November 2019 в 01:52 </span> </div> <a class="s-link" href="/questions/273246/html-4-html-5-xhtml-tipy-mime-kategoricheskij-resurs#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-821602"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="826401" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> На самом деле это не так уж и сложно, и на самом деле это не имеет особого значения. </p> <ul> <li> HTML и XHTML отличаются только синтаксисом. </li> <li> Вы не можете использовать XHTML как XML для Internet Explorer, и вы не получите от этого никаких преимуществ в других браузерах. </li> </ul> <p> Что еще вам нужно знать? </p> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">-5</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="28 November 2019 в 01:52 ">28 November 2019 в 01:52 </span> </div> <a class="s-link" href="/questions/273246/html-4-html-5-xhtml-tipy-mime-kategoricheskij-resurs#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-826401"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="828467" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <h1> Строгий, переходный и набор фреймов </h1> <h2> Почему? </h2> <p> HTML и XHTML бывают разных видов, а именно <code> Строгий </code>, <code> Переходный </code> и <code> Набор фреймов </code>. Каждый «диалект» определяет другой набор элементов, которые разрешено использовать. </p> <p> Переход в глубину с помощью <code> Strict </code> ограничивает некоторые из ваших параметров из коробки (например, <a href="http://www.w3.org/MarkUp/2004/xhtml-faq#target" rel="nofollow noreferrer"> невозможность указать <code> целевые </code> атрибуты </a>), которые делают его запрет для многих. </p> <h2> Основные различия </h2> <blockquote> <p> Разверните </p> </blockquote> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">1</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="28 November 2019 в 01:52 ">28 November 2019 в 01:52 </span> </div> <a class="s-link" href="/questions/273246/html-4-html-5-xhtml-tipy-mime-kategoricheskij-resurs#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-828467"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/html" class="tag" title="html" rel="tag">html</a> <a href="/questions/tagged/xhtml" class="tag" title="xhtml" rel="tag">xhtml</a> <a href="/questions/tagged/html5" class="tag" title="html5" rel="tag">html5</a> <a href="/questions/tagged/mime-types" class="tag" title="mime-types" rel="tag">mime-types</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90066/kak-sdelat-div-ne-bolshe-ego-soderzhimogo" title="Как сделать div не больше его содержимого?">Как сделать div не больше его содержимого?</a> - 20 September 2015 12:27 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/182086/skrytye-funkcii-html" title="Скрытые функции HTML">Скрытые функции HTML</a> - 23 May 2017 12:18 </li> <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11648/kak-fil-trovat-danny-e-massiva-v-javaz-cript-v-client-duplicate" title="Как фильтровать данные массива в Javascript в Client [duplicate] ">Как фильтровать данные массива в Javascript в Client [duplicate] </a> - 17 June 2015 03:09 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/25182/div-chtoby-zapolnit-vy-sotu-roditel-skogo-duplicate" title="div, чтобы заполнить высоту родительского [duplicate] ">div, чтобы заполнить высоту родительского [duplicate] </a> - 15 July 2015 15:37 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/139260/instrumenty-dlja-bystree-luchshaja-zakrytaja-veb-razrabotka" title="Инструменты для быстрее, лучшая [закрытая] веб-разработка">Инструменты для быстрее, лучшая [закрытая] веб-разработка</a> - 9 December 2013 03:49 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>

score 38 · Accepted Answer

Содержание.

Терминология
Языки и сериализация
Спецификации
Типы парсеров браузеров и содержимого (MIME)
Поддержка браузера
Валидаторы и определения типов документов
Особенности, ограниченные особенности и режимы стандартов.

Терминология

Одна из трудностей описания этого явно состоит в том, что терминология в официальных спецификациях изменилась с годами с тех пор, как впервые был введен HTML. Нижеследующее основано на терминологии HTML5. Кроме того, «файл» используется как общий термин для обозначения файла, документа, входного потока, потока октетов и т. Д., Чтобы избежать необходимости делать тонкие различия.

Языки и сериализация

HTML и XHTML определяются в терминах языка и сериализации.

Язык определяет словарь элементов и атрибутов и их модель содержания, то есть какие элементы разрешены внутри каких других элементов, какие атрибуты разрешены для какого элемента, а также назначение и значение каждого элемента и атрибута.

Сериализация определяет, как разметка используется для описания этих элементов и атрибутов в текстовом документе. Это включает в себя, какие теги требуются и какие могут быть выведены, а также правила для этих выводов. Он описывает такие вещи, как то, как должны быть размечены пустые элементы (например, «>» против «/>») и когда значения атрибутов должны быть заключены в кавычки.

Спецификации

Спецификация HTML 4.01 - это текущая спецификация, которая определяет как язык HTML, так и сериализацию HTML.

XML 1.0 определяет сериализацию, но оставляет определение языка другими спецификациями, которые называются «XML-приложениями»

. Используются обе спецификации XHTML 1.0 и 1.1. По сути, они используют тот же язык, что и HTML 4.01, но используют другую сериализацию, совместимую со спецификацией XML 1.0. т.е. XHTML - это приложение XML.

Спецификация HTML5 (по состоянию на 18 апреля 2010 г., черновик) описывает новый язык как для HTML, так и для XHTML. Этот язык в основном является надмножеством языка HTML 4.01, но предназначен только для обратной совместимости с существующими веб-инструментами (например, браузерами, поисковыми системами и инструментами разработки), а не с предыдущими спецификациями, в которых возникают различия. Таким образом, значения некоторых элементов иногда меняются по сравнению с более ранними спецификациями. Точно так же каждая из сериализаций обратно совместима с текущими инструментами.

Типы парсеров и содержимого браузера (MIME)

Когда текстовый файл отправляется в браузер, он анализируется в его внутренней структуре памяти (объектной модели). Для этого он использует синтаксический анализатор, который следует либо правилам сериализации HTML, либо правилам сериализации XML. Какой синтаксический анализатор он использует, зависит от того, какой тип контента он определяет, для нелокальных файлов на основе HTTP-заголовка «content-type». Внутренне, после того как файл был проанализирован, браузер обрабатывает объектную модель почти одинаково, независимо от того, была ли она изначально предоставлена с использованием сериализации HTML или XHTML.

Чтобы браузер мог использовать свой синтаксический анализатор XHTML, HTTP-заголовок типа содержимого должен быть одним из типов содержимого XML.Чаще всего это либо application / xml , либо application / xhtml + xml . Любой тип содержимого, отличный от XML, будет означать, что файл, независимо от того, соответствует ли он всем языку XHTML и правилам сериализации или нет, не будет обрабатываться браузером как XHTML.

Использование типа содержимого HTTP text / html (или в большинстве резервных сценариев, когда тип содержимого отсутствует или любой другой тип, отличный от XML) заставит браузер использовать свой анализатор сериализации HTML.

Одно из ключевых различий между двумя анализаторами заключается в том, что анализатор сериализации HTML выполняет восстановление после ошибок. Если входной файл для синтаксического анализатора не соответствует правилам сериализации HTML, синтаксический анализатор восстановится способами, реконструированными из предыдущих браузеров, и продолжит построение своей объектной модели, пока не достигнет конца файла. HTML5 содержит первое нормативное определение восстановления, но ни один из основных браузеров не предоставил реализацию алгоритма, включенного в выпускной версии по состоянию на 26 апреля 2010 года.

В отличие от этого, синтаксический анализатор сериализации XML останавливается, когда обнаруживает что-либо, что он не может интерпретировать как XML (т.е. когда он обнаруживает, что файл не является правильно сформированным XML). Это требуется от парсеров по спецификации XML 1.0.

Поддержка браузера

Большинство современных браузеров поддерживают как анализатор HTML, так и анализатор XML. Однако в Microsoft Internet Explorer версии 8.0 и более ранних синтаксический анализатор XML не может напрямую создавать объектную модель для визуализации в виде HTML-страницы.Однако структура XML может быть обработана с помощью файла XSLT для создания потока, который, в свою очередь, будет проанализирован с помощью анализатора HTML для создания объектной модели, которая может быть отображена.

Начиная с версии Internet Explorer 9 Platform Preview, XHTML, предоставляемый с использованием типа содержимого XML, можно анализировать напрямую таким же образом, как и в других современных браузерах.

Когда их XML-анализаторы обнаруживают, что их входные файлы не являются правильно сформированными XML, некоторые браузеры отображают сообщение об ошибке, а другие показывают страницу как созданную до момента, когда была обнаружена ошибка, а некоторые предлагают пользователю возможность повторно проанализируйте файл с помощью анализатора HTML.

Валидаторы и определения типов документов

Файлы HTML и XHTML могут начинаться с объявления определения типа документа (DTD), которое указывает язык и сериализацию, которые используются в документе. Валидаторы, такие как http://validator.w3.org/ , используют эту информацию для сопоставления языка и сериализации, используемых в файле, с правилами, определенными в DTD. Затем он сообщает об ошибках в зависимости от того, где нарушаются правила в DTD из-за разметки в файле.

Не все правила сериализации и языка HTML могут быть описаны в DTD, поэтому валидаторы проверяют только подмножество всех правил, описанных в спецификациях.

HTML 4.01 и XHTML 1.0 определяют DTD Strict, Transitional и Frameset, которые различаются языковыми элементами и атрибутами, которые разрешены в совместимых файлах.

Валидаторы на основе HTML5, такие как validator.nu , больше похожи на браузеры, обрабатывая страницу в соответствии с типом содержимого HTTP и используя набор правил, не основанный на DTD, так что они обнаруживают ошибки, которые невозможно описать. по DTD.

Режимы Quirks, Limited Quirks и Standards.

Браузеры не проверяют отправленные им файлы. Они также не используют какое-либо объявление DTD для определения языка или сериализации файла.Однако они используют его, чтобы угадать эпоху, в которую была создана страница, и, следовательно, вероятное поведение при синтаксическом анализе и рендеринге, которое автор ожидал от браузера в то время. Соответственно, они определяют три режима синтаксического анализа и рендеринга, известные как режим Quirks, режим Limited Quirks (или почти стандартный) и стандартный режим.

Любой файл, обслуживаемый с использованием типа содержимого XML, всегда обрабатывается в стандартном режиме. Для файлов, проанализированных с помощью парсера HTML, если DTD не предоставлено или DTD определено как очень старый, браузеры используют свой режим причуд. Вообще говоря, файлы HTML 4.01 и XHTML, обрабатываемые как text / html, будут обрабатываться в ограниченном режиме причуд, если они содержат переходное DTD, и в стандартном режиме, если используется строгое DTD.

Если DTD не распознается, режим определяется сложным набором правил. В одном из особых случаев опущены общедоступный и системный идентификаторы, а объявление выглядит просто . Это, как известно, самое короткое объявление типа документа, при котором текущие браузеры будут рассматривать файл как стандартный режим. По этой причине это объявление используется для файлов, совместимых с HTML5.