Какой тег указывает режим документа, в соответствии с которым браузер будет его отображать

Обновлено: 24.11.2024

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

Тип документа стоит первым

Самое первое, что вы должны обязательно иметь в любом HTML-документе, который вы создаете, — это объявление DTD. Если вы никогда раньше не слышали, чтобы кто-нибудь упоминал объявление DTD, не волнуйтесь. Для простоты его часто называют «типом документа», как я буду называть его в оставшейся части этой статьи.

Возможно, вам интересно, что такое «DTD» или тип документа. DTD — это сокращение от «Определение типа документа», и среди прочего оно определяет, какие элементы и атрибуты разрешено использовать в определенной разновидности HTML — да, это верно, сегодня в Интернете используются разные версии HTML, но пусть это вас не беспокоит — вам нужно позаботиться только об одном.

  1. Веб-браузеры используют его, чтобы определить, какой режим рендеринга следует использовать (подробнее о режимах рендеринга позже).
  2. Проверщики разметки смотрят на тип документа, чтобы определить, по каким правилам им следует проверять документ (подробнее об этом позже).

И то, и другое повлияет на вашу HTML/XHTML-страницу, но по-разному, что будет объяснено далее в этой статье.

Вот пример:

Теперь это может показаться вам чепухой, поэтому позвольте мне предложить несколько упрощенное объяснение того, как это устроено. Для более подробного ознакомления с тем, что именно означает каждый символ, см. статью !DOCTYPE.

Наиболее важными частями типа документа являются две строки, заключенные в кавычки. «-//W3C//DTD HTML 4.01//EN» указывает, что это документ DTD, опубликованный W3C, что DTD описывает HTML версии 4.01 и что язык, используемый в DTD, — английский.

Вторая строка, "http://www.w3.org/TR/html4/strict.dtd", представляет собой URL-адрес, указывающий на документ DTD, используемый для этого типа документа.

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

Переключение типа документа и режимы рендеринга

Если вы не укажете тип документа, браузеры все равно будут обрабатывать и отображать документ — им нужно попытаться отобразить всевозможные странные вещи, с которыми они сталкиваются в Интернете, поэтому они не всегда могут быть очень разборчивыми. . Однако без типа документа результаты могут выглядеть не так, как вы предполагали, из-за так называемого «анализа типа документа» или «переключения типа документа».

Большинство веб-браузеров, выпущенных в 21 веке, смотрят на тип документа любого HTML-документа, с которым они сталкиваются, и используют его, чтобы решить, позаботился ли автор документа о правильном написании HTML и CSS в соответствии с веб-стандартами.

Если они находят тип документа, указывающий на то, что документ хорошо закодирован, они используют так называемый «стандартный режим» при компоновке страницы. В стандартном режиме браузеры обычно пытаются отобразить страницу в соответствии со спецификациями CSS — они верят, что человек, создавший документ, знал, что делает.

С другой стороны, если они находят устаревший или неполный тип документа, они используют «режим Quirks», который более обратно совместим со старыми практиками и старыми браузерами. Режим Quirks предполагает, что документ устарел или был создан без учета веб-стандартов. Это означает, что веб-страница по-прежнему будет отображаться, но для этого потребуется гораздо больше вычислительной мощности, и вы, скорее всего, получите странный или некрасивый результат, которого вы не совсем ожидали.

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

Проверка

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

Выбор типа документа

Итак, теперь, когда вы знаете, что вам нужно вставить тип документа и для чего он используется, как вы узнаете, какой из них выбрать? Ведь не один, их много. Вы даже можете создать свой собственный, если хотите чего-то более продвинутого. Но я не буду упоминать множество различных доктайпов. Я постараюсь не усложнять и соглашусь на два.

Если ваш документ HTML, используйте это:

Если ваш документ XHTML, используйте это:

Примечание. «Настоящий» XHTML должен быть доставлен в веб-браузер в виде XML, но подробности того, как и когда это сделать, а также последствия этого выходят за рамки данной статьи.

Оба этих типа документов гарантируют, что браузеры будут использовать стандартный режим при работе с вашим документом. Наиболее заметный эффект, который окажет на вашу работу, заключается в том, что вы получите более согласованные результаты при стилизации документа с помощью CSS. Чтобы увидеть некоторые другие типы документов, которые вы могли бы использовать, W3C опубликовал список рекомендуемых DTD для использования в вашем веб-документе.

Вы могли заметить, что оба упомянутых здесь типа документов называются «строгими». Хотя это может показаться немного пугающим, это не так.

Существуют строгие и промежуточные версии как HTML, так и XHTML. Строгий в данном случае означает, что типы документов допускают меньшую презентационную разметку, чем переходный тип документа. Презентационной разметки, которая не разрешена, в любом случае не должно быть, поскольку вы должны использовать HTML для определения структуры и значения ваших документов, а CSS — для определения того, как они представлены. Использование строгого типа документа поможет вам в этом, так как валидатор предупредит вас о любых презентационных элементах или атрибутах, которые проникли в ваш код.

Объявление XML

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

Возможно, вы видели фрагмент кода, который выглядит так перед типом документа в некоторых документах XHTML:

Это называется XML-объявлением, и если оно присутствует, его необходимо вставить перед типом документа.

У Internet Explorer версии 6 есть проблема с этим — из-за этого он переключается в режим Quirks, а, как я объяснял ранее, вы, скорее всего, этого не хотите.

Вероятность того, что все это произойдет одновременно, очень мала, поэтому самый простой способ решить проблему с Internet Explorer — просто пропустить объявление XML. Однако не забывайте о типе документа!

Обзор

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

Упражнения

Вот несколько вопросов, на которые вы сможете ответить, прочитав это:

  • Каковы две основные цели включения типа документа в документы HTML?
  • Каковы преимущества использования строгого типа документа вместо переходного?
  • Почему декларация XML вызывает проблемы?
  • Одним типом документа, который я не упомянул в этой статье, является тип документа набора фреймов. Узнайте, что он делает и почему его не следует использовать.

Дополнительная литература

  • Не забудьте добавить тип документа
  • Рекомендуемые DTD для использования в веб-документе.
  • Исправьте свой сайт с помощью правильного DOCTYPE!
  • Активация правильного режима макета с помощью объявления типа документа
  • Переключатели Opera 9 DOCTYPE
  • Причудливый режим и строгий режим
  • Переходная и строгая разметка

Примечание: изначально этот материал был опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 14: Выбор правильного типа документа для HTML-документов, написанной Роджером Йоханссоном. Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2.5.

Получите полный доступ к Head First HTML and CSS, 2-е издание и более чем к 60 тысячам других игр с бесплатной 10-дневной пробной версией O'Reilly.

Есть также прямые онлайн-мероприятия, интерактивный контент, материалы для подготовки к сертификации и многое другое.

Единственное, что стоит между вами и выходом в Сеть, — это научиться говорить на языке:

Язык гипертекстовой разметки, или сокращенно HTML. Итак, приготовьтесь к урокам языка.После этой главы вы не только поймете некоторые основные элементы HTML, но и сможете немного говорить на языке HTML. Черт возьми, к концу этой книги вы будете говорить на HTML так, как будто вы выросли в Webville.

Хотите поделиться своей идеей? Продать что-нибудь? Просто нужен творческий выход? Обратитесь к Интернету — нам не нужно говорить вам, что он стал универсальной формой общения. Более того, это форма общения, в которой ВЫ можете участвовать.

Но если вы действительно хотите эффективно использовать Интернет, вам необходимо кое-что узнать о HTML, не говоря уже о том, как работает Интернет. Давайте посмотрим с высоты 30 000 футов:

Веб-серверы постоянно работают в Интернете, неустанно ожидая запросов от веб-браузеров. Какие запросы? Запросы на веб-страницы, изображения, звуки или даже видео. Когда сервер получает запрос на любой из этих ресурсов, он находит ресурс и отправляет его обратно в браузер.

Вы уже знаете, как работает браузер: вы путешествуете по Интернету и нажимаете ссылку, чтобы перейти на страницу. Этот щелчок заставляет ваш браузер запрашивать HTML-страницу с веб-сервера, извлекать ее и отображать страницу в окне браузера.

Но как браузер узнает, как отображать страницу? Вот тут-то и появляется HTML. HTML сообщает браузеру все о содержании и структуре страницы. Давайте посмотрим, как это работает.

Итак, вы знаете, что HTML — это ключ к отображению ваших страниц в браузере, но как именно выглядит HTML? И что он делает?

Давайте взглянем на HTML. представьте, что вы собираетесь создать веб-страницу для рекламы Head First Lounge, местной тусовки с хорошими мелодиями, освежающими эликсирами и беспроводным доступом. Вот что вы написали бы в HTML:

Мы пока не ожидаем, что вы знаете HTML.

К этому моменту вы должны получить представление о том, как выглядит HTML; мы собираемся подробно рассказать обо всем чуть позже. А пока изучите HTML и посмотрите, как он будет представлен в браузере на следующей странице. Обязательно внимательно следите за каждой буквенной аннотацией, а также за тем, как и где она отображается в браузере.

Когда браузер читает ваш HTML-код, он интерпретирует все теги, окружающие ваш текст. Теги — это просто слова или символы в угловых скобках, например,

Проверим, как браузер интерпретирует теги в Head First Lounge:

Глупых вопросов не бывает

В: Значит, HTML — это просто набор тегов, которыми я обрамляю свой текст?

О: Для начала. Помните, что HTML означает язык гипертекстовой разметки, поэтому HTML дает вам возможность «разметить» ваш текст с помощью тегов, которые сообщают браузеру, как структурирован ваш текст. Но есть еще и гипертекстовый аспект HTML, о котором мы поговорим чуть позже в этой книге.

В: Как браузер решает, как отображать HTML?

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

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

В: В HTML-коде Head First Lounge есть всевозможные отступы и интервалы, но я не вижу этого, когда он отображается в браузер. Почему?

A: Правильно, хороший улов. Браузеры игнорируют табуляции, возвраты и большинство пробелов в документах HTML. Вместо этого они полагаются на вашу разметку, чтобы определить, где происходит разрыв строки и абзаца.

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

В: Итак, есть два уровня заголовков,

?

A: На самом деле их шесть,

, который браузер обычно отображает с последовательно меньшим размером шрифта.Если вы не создаете сложный и большой документ, вы обычно не будете использовать заголовки за пределами

.

В: Зачем мне тег? Разве не очевидно, что это HTML-документ?

A: Тег сообщает браузеру, что ваш документ на самом деле HTML. В то время как некоторые браузеры простят вам, если вы его опустите, некоторые нет, и по мере того, как мы будем двигаться к «промышленному HTML» позже в книге, вы увидите, что очень важно включать этот тег.

< p>Q: Что делает файл файлом HTML?

A: HTML-файл – это простой текстовый файл. В отличие от файла обработки текста, в него не встроено специальное форматирование. По соглашению мы добавляем «.html» в конец имени файла, чтобы дать операционной системе лучшее представление о том, что это за файл. Но, как вы видели, действительно важно то, что мы помещаем внутрь файла.

В: Все говорят о HTML5. Используем ли мы его? Если да, то почему мы не говорим «HTML-FIVE» вместо «HTML»?

О: Вы изучаете HTML, а HTML5 — это последняя версия HTML. В последнее время HTML5 привлекает большое внимание, потому что он упрощает многие способы написания HTML и предоставляет некоторые новые функции, которые мы собираемся рассмотреть в этой книге. Он также предоставляет некоторые расширенные функции через свои интерфейсы программирования приложений (API) JavaScript, и они описаны в Head First HTML5 Programming.

В: Разметка кажется глупой. Приложения типа «что видишь, то и получишь» существуют с 70-х? Почему Интернет не основан на таком формате, как Microsoft Word или аналогичное приложение?

О: Интернет создается из текстовых файлов без каких-либо специальных символов форматирования. Это позволяет любому браузеру в любой части мира извлекать веб-страницу и понимать ее содержимое. Существуют приложения WYSIWYG, такие как Dreamweaver, и они прекрасно работают. Но в этой книге мы собираемся свести все к голому железу и начать с текста. Тогда вы в хорошей форме, чтобы понять, что ваше приложение Dreamweaver делает за кулисами.

В: Можно ли как-нибудь оставить комментарии для себя в HTML?

О: Да, если вы разместите свои комментарии между ними, браузер их полностью проигнорирует. Скажем, вы хотели написать комментарий «Вот начало контента гостиной». Вы можете сделать это следующим образом:

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

Наточите карандаш

Вы ближе к изучению HTML, чем думаете.

Вот снова HTML-код для Head First Lounge. Взгляните на теги и посмотрите, сможете ли вы угадать, что они сообщают браузеру о содержимом. Запишите свои ответы в поле справа; мы уже сделали первую пару для вас.

В этой статье приведены ответы на некоторые наиболее распространенные вопросы о режимах документов в Internet Explorer.

Исходная версия продукта: Internet Explorer
Исходный номер базы знаний: 4551933

Как Internet Explorer определяет режим документа

По умолчанию Windows Internet Explorer 8 использует режим Internet Explorer 8, а Windows Internet Explorer 9 использует режим Internet Explorer 9 и т. д. Однако Windows Internet Explorer использует несколько критериев, чтобы определить, какой режим документа использовать. Например, если HTML-страница содержит допустимое объявление (см. HTML5), Internet Explorer использует один из стандартных режимов документа. Но если действительного объявления нет, Internet Explorer использует режим Quirks. Страница отображается в режиме Quirks только при отсутствии объявления.

Устаревшая версия Microsoft Edge предназначена для взаимодействия с Интернетом и предназначена для работы в основном в режиме EdgeHTML.

Microsoft Edge версии 77 или более поздней версии использует механизм рендеринга Blink. Он не будет отображаться в режиме EdgeHTML.

Следующие правила определяют, как Internet Explorer выбирает режим документа:

Разделы (2.1.3.2–2.1.3.8), поясняемые в следующей статье, показывают, что эти правила влияют на то, как Internet Explorer выбирает между режимами документа. Большинство разделов не относятся к Microsoft Edge, если это явно не указано:

Кроме того, следующее правило определяет, как Microsoft Edge выбирает режим документа:

Эта декларация определяет, будет ли веб-страница отображать определенное поведение эмуляции режима Quirks (QME), указанное в документации MS-HTML5 и MS-CSS21.

Дополнительные сведения о настройке режимов документов см. в следующих статьях:

Что такое корпоративный режим

На блок-схеме выбора режима документа четко показано, как Internet Explorer определяет режимы документа.

Список сайтов корпоративного режима Internet Explorer 11 позволяет указать режимы документов для определенных веб-сайтов. Это поможет вам исправить проблемы совместимости, не меняя ни одной строки кода на сайте.Это дополнение к списку сайтов является продолжением нашего стремления помочь вам обновить и оставаться в курсе последних версий Internet Explorer, сохраняя при этом ваши инвестиции в существующие приложения.

Когда я использую режимы документов по сравнению с корпоративным узлом

Несмотря на то, что функции корпоративного режима обеспечивают отличную совместимость с Internet Explorer 8 или Internet Explorer 7, новые возможности режима документов помогут вам оставаться в курсе последних событий независимо от того, какие версии Internet Explorer работают в вашей среде. Поэтому мы рекомендуем начать процесс тестирования следующим образом:

  • Если на вашем предприятии в основном используется Internet Explorer 8 или Internet Explorer 7, начните тестирование в режиме предприятия.
  • Если на вашем предприятии в основном используется Internet Explorer 10 или Internet Explorer 9, начните тестирование с различных режимов работы с документами.

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

Режим предприятия имеет приоритет над режимами документов.

В чем разница между режимами документов EmulateIE7 и Internet Explorer 7

В Internet Explorer 8 корпорация Майкрософт представила параметры совместимости, позволяющие Internet Explorer действовать так, как если бы он был Internet Explorer 7. Это изменение позволяет пользователям просматривать как полностью совместимые сайты, так и просмотры совместимости веб-контента, требующие Internet Explorer 7.

Это было расширено до Internet Explorer 11 включительно, чтобы поддерживать функцию просмотра в режиме совместимости или, по крайней мере, режимы документов.

IE=7: отображение в стандартном режиме Internet Explorer 7.

IE=EmulateIE7: веб-страницы отображаются в стандартном режиме Internet Explorer 7 независимо от объявленной директивы !DOCTYPE. Если директива !DOCTYPE не объявлена, страница загружается в Quirks.

Когда вы указываете версию (например, Internet Explorer 7), вы устанавливаете требование, согласно которому страница должна использовать стандартный режим Internet Explorer 7.

Официально правила отображения веб-страниц оцениваются Internet Explorer в следующем порядке:

  • Настройки инструментов разработчика Internet Explorer: ручная установка режима браузера (строка пользовательского агента в Internet Explorer 11) и режима документа имеет приоритет над всеми остальными настройками.
  • Веб-контент/документ находится в iframe. Режим отображения или совместимости для страницы и любых содержащихся в ней iframe задается страницей. Настройки iframe (например, X-UA-совместимость для iframe) игнорируются.
  • X-UA-совместимый метатег. Это значение может быть указано в заголовке страницы, сгенерированном веб-приложением, или может быть вставлено веб-сервером или сервером приложений для выбора режима документа Internet Explorer.
  • Настройка просмотра в режиме совместимости. Если X-UA-совместимость не указана, будет применяться параметр просмотра в режиме совместимости локального браузера пользователя. Это эквивалент (для нестандартных страниц) параметра X-UA-Compatible EmulateIE7.
  • настройка — если ни один из предыдущих механизмов не используется, тег выбирает режим отображения «Стандартный» (или «Почти стандартный») или «Причудливый режим IE 5».

Подробнее об управлении режимами документов см. в разделе Устаревшие режимы документов и Internet Explorer 11.

Более общие сведения о режимах документов см. в разделе Режимы документов.

Как настроить эмуляцию браузера для элементов управления веб-браузером в Internet Explorer

По умолчанию проект WebOC загружается в режиме документов Internet Explorer 7.

Для Internet Explorer 8 и более поздних версий функция FEATURE_BROWSER_EMULATION определяет режим эмуляции по умолчанию для Internet Explorer и поддерживает следующие значения. Чтобы управлять значением этой функции с помощью реестра, добавьте имя исполняемого файла к следующему параметру и задайте значение, соответствующее желаемому параметру.

Первым тегом в любом файле HTML является тег. Это сообщает веб-браузерам, что документ является файлом HTML.

Второй тег — это тег. Информация между тегами HEAD не отображается в окне браузера, но по-прежнему важна. Это называется мета информацией. Самой важной метаинформацией в теге HEAD является сам тег. Все HTML-документы должны иметь заголовок. Как правило, название должно отражать содержание страницы (так же, как название книги отражает содержание книги), поэтому вы будете изменять это название, чтобы оно лучше описывало тип веб-страницы, которую вы создаете. Название документа появится в строке заголовка (полоса в верхней части окна браузера). Прямо сейчас посмотрите в верхнюю часть окна браузера. Там написано "базовые HTML-теги". Текст заголовка не отображается в главном окне браузера (где находится текст, который вы сейчас читаете).

Истинное содержание вашей веб-страницы начинается после тегов HTML, HEAD и TITLE. Он содержится внутри тегов.

Итак, основной скелет каждой веб-страницы выглядит следующим образом (теги всегда будут отображаться в этом порядке), и на вашей веб-странице будет только один из этих тегов):

Обратили внимание, что они есть вокруг всех тегов? Эти скобки сообщают браузеру, что текст внутри скобок следует читать как HTML-команду. Посмотрите и . Вы видите разницу? Первый, , не имеет / (косая черта). Это открывающий тег. Второй, , имеет / (это называется прямой косой чертой). Это закрывающий тег. Вы должны быть очень осторожны при закрытии тегов HTML.

Существует очень мало тегов HTML, для которых не требуется закрывающий тег, поэтому убедитесь, что вы привыкли закрывать свои теги.

Теперь мы готовы приступить к созданию истинного содержания веб-страницы, помещая информацию между тегами. Как правило, первая строка HTML-страницы представляет собой тег HEADING. Если вы думаете о ЗАГОЛОВКЕ как о части схемы документа, первый ЗАГОЛОВОК (

) будет римской цифрой два и так далее. В большинстве случаев первый заголовок на веб-странице будет таким же или похожим на заголовок документа, чтобы люди сразу знали, о чем эта страница.

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

Этот текст является примером заголовка H1

вот HTML для этого:

Этот текст является примером заголовка H1

Этот текст является примером заголовка H6

вот HTML для этого:

Этот текст является примером заголовка H6

Не забывайте ЗАКРЫВАТЬ теги HTML!

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

Теги форматирования страницы:

Эти теги влияют на расположение текста на странице:

- Абзац. Вставляет пустую строку (это похоже на двойной интервал в текстовом редакторе).

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

- Горизонтальная линия. Полезно для разделения разделов вашей страницы. Создает затененную линию поперек страницы. Заштрихованная линия, которую вы видите под этим текстом, является примером тега. Тег является одним из упомянутых мною исключений и не нуждается в закрывающем теге.

- Разрыв строки. Не вставляет пробел между строками, а просто создает разрыв между строками текста. СОВЕТ: если вы хотите создать пустые строки на своей странице, используйте несколько тегов
, а не

тег, так как браузер видит только первый

и игнорирует остальные, но видит и создает разрыв строки для всех тегов
.
Пробел (или его отсутствие) между этой строкой и строкой над ней является примером разрыва строки. Тег
не нуждается в закрывающем теге.

Теги стиля текста:

Теги стиля текста влияют на внешний вид текста на странице. Вы уже знаете о тегах стиля текста, так как постоянно используете их в текстовых процессорах, таких как MS Word. Когда вы выбираете текст и нажимаете кнопку B в MS Word, ваш текст становится жирным, верно? HTML работает так же, но нам нужно использовать теги HTML, чтобы сообщить браузеру, какой стиль текста использовать.

<р>. - Полужирный
Пример полужирного текстового тега. . – Курсив
Пример работы текстового тега, выделенного курсивом.

Помните: вы должны ЗАКРЫВАТЬ теги стилей текста так же, как вы должны закрывать теги заголовков.

Теперь давайте начнем собственно создание веб-страницы.

Чтобы начать свою страницу:

  1. Откройте Блокнот (обычно его можно найти с помощью кнопки «Пуск» в разделе «Программы» в папке «Стандартные»). Пользователи Mac: откройте TextEdit или SimpleText.
  2. Создайте свой «шаблон» (базовую страницу), который должен содержать теги, которые мы обсуждали в начале этого раздела, введя следующие теги HTML, составляющие структуру каждой веб-страницы.

Библиотека XYZ


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

СОВЕТ. Если вы умеете копировать и вставлять, вы можете скопировать и вставить теги в Блокнот. Чтобы скопировать и вставить на ПК:

  1. Возьмите мышь и поместите курсор в начало текста, нажмите левую кнопку мыши, затем наведите указатель мыши на текст. Это выделяет текст.
  2. Отпустите левую кнопку мыши.
  3. Наведите курсор на выделенный текст, щелкните правой кнопкой мыши, чтобы просмотреть параметры, и выберите "Копировать" или используйте сочетание клавиш CTRL+C, чтобы скопировать выделенный текст.
  4. Перейдите в открытое окно Блокнота и убедитесь, что курсор находится в окне Блокнота.
  5. Снова щелкните правой кнопкой мыши и выберите "Вставить" или используйте сочетание клавиш CTRL+V, чтобы вставить скопированный текст.
  6. Скопированный текст будет вставлен в окно Блокнота.

Чтобы скопировать и вставить на Mac:

  1. Возьмите мышь и поместите курсор в начало текста, нажмите и удерживайте кнопку мыши, затем наведите указатель мыши на текст. Это выделяет текст.
  2. Наведите курсор на выделенный текст, нажмите клавишу Control, нажмите и удерживайте мышь на выделенном тексте, затем выберите «Копировать» в меню или используйте сочетание клавиш Apple+C, чтобы скопировать выделенный текст.
  3. Перейдите в окно TextEdit или SimpleText и щелкните внутри него, чтобы курсор оказался в нужном месте.
  4. Снова щелкните мышью, удерживая нажатой клавишу Control, и выберите "Вставить" или используйте сочетание клавиш Apple+V, чтобы вставить скопированный текст.

Примечание по использованию TextEdit (для пользователей Mac OS X). Прежде чем приступить к созданию HTML-страницы с помощью TextEdit, измените настройки, перейдя в меню TextEdit и выбрав «Настройки». В разделе «Атрибуты нового документа» установите флажок «Сделать обычным текстом» и «Перенести текст». В разделе «Сохранение» снимите флажок «Добавить расширение «.txt» к кнопке текстовых файлов». Затем нажмите красную кнопку в верхнем левом углу окна «Настройки», чтобы сохранить эти изменения. Если вы этого не сделаете, ваша страница будет преобразована в формат RTF (Rich Text Format), что уничтожит весь ваш HTML-код.

Примечание о копировании и вставке: теги могут быть не выровнены по левому краю окна Блокнота после их вставки. Хотя это не повлияет на HTML, визуально это может вас сбить с толку, поэтому не стесняйтесь очистите теги и выровняйте их слева в окне Блокнота.

Если нет никакой разницы, я могу просто игнорировать метазаголовок X-UA-Compatible, так как я просто хочу, чтобы он отображался в наиболее стандартном режиме во всех версиях IE.

12 ответов 12

Обновление за ноябрь 2021 г.

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

Обновление за октябрь 2015 г.

Этот ответ был опубликован несколько лет назад, и теперь вопрос действительно должен звучать так: стоит ли вообще рассматривать возможность использования тега X-UA-Compatible на своем сайте? с изменениями, внесенными Microsoft в свои браузеры ( подробнее об этом ниже).

В зависимости от того, какие браузеры Microsoft вы поддерживаете, вам может не понадобиться продолжать использовать тег X-UA-Compatible. Если вам нужно поддерживать IE9 или IE8, то я бы рекомендовал использовать тег. Если вы поддерживаете только новейшие браузеры (IE11 и/или Edge), я бы вообще отказался от этого тега. Если вы используете Twitter Bootstrap и вам нужно убрать предупреждения о проверке, этот тег должен отображаться в указанном порядке. Дополнительная информация ниже:

Метатег X-UA-Compatible позволяет веб-разработчикам выбирать, в какой версии Internet Explorer должна отображаться страница. IE11 внес изменения в эти режимы; см. примечание IE11 ниже. Microsoft Edge, браузер, пришедший на смену IE11, учитывает метатег X-UA-Compatible только при определенных обстоятельствах. См. примечание к Microsoft Edge ниже.

По данным Microsoft, при использовании тега X-UA-Compatible он должен располагаться как можно выше в заголовке документа:

Если вы используете META-тег, совместимый с X-UA, поместите его как можно ближе к верхней части страницы HEAD. Internet Explorer начинает интерпретировать разметку, используя последнюю версию. Когда Internet Explorer встречает META-тег, совместимый с X-UA, он начинает заново, используя механизм указанной версии. Это удар по производительности, потому что браузер должен остановить и перезапустить анализ содержимого.

Вот ваши варианты:

  • "IE=край"
  • "IE=11"
  • "IE=ЭмулироватьIE11"
  • "IE=10"
  • "IE=ЭмулироватьIE10"
  • "IE=9"
  • "IE=ЭмулироватьIE9
  • "IE=8"
  • "IE=ЭмулироватьIE8"
  • "IE=7"
  • "IE=ЭмулироватьIE7"
  • "IE=5"

Чтобы попытаться понять, что означает каждый из них, приведем определения, предоставленные корпорацией Майкрософт:

Internet Explorer поддерживает ряд режимов совместимости документов, которые включают различные функции и могут влиять на способ отображения содержимого:

  • Пограничный режим указывает Internet Explorer отображать содержимое в максимально доступном режиме. В Internet Explorer 9 это эквивалентно режиму IE9. Если будущий выпуск Internet Explorer будет поддерживать более высокий режим совместимости, страницы, для которых задан пограничный режим, будут отображаться в самом высоком режиме, поддерживаемом этой версией. Те же самые страницы по-прежнему будут отображаться в режиме IE9 при просмотре в Internet Explorer 9. Internet Explorer поддерживает ряд режимов совместимости документов, которые включают различные функции и могут влиять на способ отображения содержимого:
  • Режим IE11 обеспечивает максимальную поддержку существующих и новых отраслевых стандартов, включая HTML5, CSS3 и другие.
  • Режим IE10 обеспечивает максимальную поддержку существующих и новых отраслевых стандартов, включая HTML5, CSS3 и другие.
  • Режим IE9 обеспечивает максимальную поддержку существующих и новых отраслевых стандартов, включая HTML5 (рабочий проект), спецификацию каскадных таблиц стилей W3C уровня 3 (рабочий проект), спецификацию масштабируемой векторной графики (SVG) 1.0 и другие. [Примечание редактора: IE 9 не поддерживает анимацию CSS3].
  • Режим IE8 поддерживает множество установленных стандартов, включая спецификацию W3C Cascading Style Sheets Level 2.1 и API Selectors W3C; он также обеспечивает ограниченную поддержку спецификации каскадных таблиц стилей W3C уровня 3 (рабочий проект) и других новых стандартов.
  • В режиме IE7 контент отображается так, как если бы он отображался в стандартном режиме Internet Explorer 7, независимо от того, содержит ли страница директиву.
  • Режим "Эмуляция IE9" указывает Internet Explorer использовать эту директиву для определения способа отображения содержимого. Директивы стандартного режима отображаются в режиме IE9, а директивы специального режима отображаются в режиме IE5. В отличие от режима IE9, режим "Эмуляция IE9" соблюдает директиву.
  • Режим "Эмуляция IE8" указывает Internet Explorer использовать эту директиву для определения способа отображения содержимого. Директивы стандартного режима отображаются в режиме IE8, а директивы специального режима отображаются в режиме IE5. В отличие от режима IE8, режим "Эмуляция IE8" соблюдает директиву.
  • Режим "Эмуляция IE7" указывает Internet Explorer использовать эту директиву для определения способа отображения содержимого. Директивы стандартного режима отображаются в стандартном режиме Internet Explorer 7, а директивы специального режима отображаются в режиме IE5. В отличие от режима IE7, режим Emulate IE7 соблюдает директиву. Для многих веб-сайтов это предпочтительный режим совместимости.
  • В режиме IE5 содержимое отображается так, как если бы оно отображалось в режиме совместимости в Internet Explorer 7, что очень похоже на то, как содержимое отображалось в Microsoft Internet Explorer 5.

IE10 ПРИМЕЧАНИЕ. В IE10 режим совместимости работает иначе, чем в более ранних версиях браузера. В IE9 и более ранних версиях режим причуд ограничивал веб-страницу функциями, поддерживаемыми IE5.5. В IE10 специальный режим соответствует отличиям, указанным в спецификации HTML5.

Лично я всегда выбираю метатег http-equiv="X-UA-Compatible" content="IE=edge", так как в старых версиях много ошибок, и я не хочу, чтобы IE решил " Режим совместимости" и показать мой сайт как IE7, а не IE8 или 9. Я всегда предпочитаю последнюю версию IE.

Начиная с IE11, граничный режим является предпочтительным режимом документа; он представляет собой максимальную поддержку современных стандартов, доступных для браузера.

Используйте объявление типа документа HTML5, чтобы включить пограничный режим:

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

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

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

Если вы в настоящее время используете x-ua-совместимый заголовок для таргетинга на устаревший режим документа, возможно, ваш сайт не будет отражать наилучшие возможности, доступные в IE11.

Microsoft Edge (замена Internet Explorer, поставляемого в комплекте с Windows 10)

Информация о X-UA-совместимом метатеге для "Edge" версии IE. От Майкрософт:

Представляем «живой» режим документа Edge

Как мы объявили в августе 2013 года, мы отказываемся от поддержки режимов документов, начиная с IE11. С нашими последними обновлениями платформы потребность в устаревших режимах документов в основном ограничивается устаревшими корпоративными веб-приложениями. С новыми архитектурными изменениями эти устаревшие режимы документов будут изолированы от изменений в «живом» режиме Edge, что поможет гарантировать гораздо более высокий уровень совместимости для клиентов, которые зависят от этих режимов, и поможет нам еще быстрее продвигаться по улучшениям в Edge. . IE по-прежнему будет учитывать режимы документов, обслуживаемые сайтами интрасети, сайтами из списка просмотра в режиме совместимости и при использовании только в режиме предприятия.

Общедоступные интернет-сайты будут отображаться на новой платформе режима Edge (игнорируя совместимость с X-UA).Наша цель состоит в том, чтобы с этого момента Edge стал «живым» режимом документа, и никаких других режимов документа в дальнейшем вводить не будет.

Поскольку Microsoft Edge больше не поддерживает режимы документов в большинстве случаев, у Microsoft есть инструмент для сканирования вашего сайта, чтобы проверить, есть ли на нем код, несовместимый с Edge.

Информация о Chrome=1 для IE

Есть также вариант chrome=1, который можно использовать или использовать вместе с одним из перечисленных выше параметров, например: . chrome=1 предназначен для Google Chrome Frame, который определяется как:

Google Chrome Frame – это плагин для браузера с открытым исходным кодом. Пользователи, у которых установлен подключаемый модуль, получают доступ к открытым веб-технологиям Google Chrome и быстродействующему движку JavaScript при открытии страниц в браузере.

Google Chrome Frame значительно расширяет возможности просмотра в Internet Explorer. Он отображает сайты с поддержкой Google Chrome Frame, используя технологию рендеринга Google Chrome, предоставляя вам доступ к последним функциям HTML5, а также функциям производительности и безопасности Google Chrome, никоим образом не прерывая ваше обычное использование браузера.

Когда установлен Google Chrome Frame, Интернет становится лучше, и вам не нужно об этом думать.

Но чтобы этот подключаемый модуль работал, необходимо использовать chrome=1 в метатеге X-UA-Compatible.

Дополнительную информацию о Chrome Frame можно найти здесь.

Примечание. Google Chrome Frame работает только с браузерами от IE6 до IE9, и его поддержка была прекращена 25 февраля 2014 года. Дополнительную информацию можно найти здесь. Спасибо @mck за ссылку.

Проверка:

HTML5:

XHTML

При использовании не возникает проблем с проверкой, если тег правильно закрыт (т. е. /> вместо > ).

Twitter Bootstrap (версия 3 и более ранние)

Команда Bootstrap настоятельно рекомендует использовать этот тег как минимум с 2014 года, а Bootlint, линтер, созданный командой twbs, продолжает выдавать предупреждение, если тег опущен. Линтер различает предупреждения и ошибки, поэтому серьезность пропуска этого тега можно считать незначительной.

Дополнительную информацию о X-UA-совместимости см. на веб-сайте Microsoft, определяющем совместимость документов.

Дополнительную информацию о требованиях Twitter Bootstrap см. на вики-странице проекта bootlint.

Читайте также: