Какой тег является дочерним для doctype

Структура html-документа

Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. — «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).

doctype

Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления следующим образом:

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

Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.

Элемент html

После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента :

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

Элемент head

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

Элемент должен быть первым дочерним элементом , никакое содержимое или элементы не должны располагаться перед ним:

Элемент title

Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который должен располагаться внутри элемента :

Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:

Элемент body

Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:

     Hello, world!  

С этой темой смотрят:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Тег — корневой контейнер

Тег является корневым элементом HTML документа. Тег html сообщает браузеру, что текущий документ является HTML документом.

Синтаксис

Содержимое HTML документа

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

Пример простого HTML документа

 
 
 
 
 
 
Простой абзац со ссылкой
 

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

Тег
	Да	Да	Да	Да	Да

by Lebedev

Оцените, насколько полезна эта страница
Эти материалы могут быть вам полезны

Расшифровка DOCTYPE. Что означают параметры DOCTYPE HTML?HTML Тег HTML раздел заголовковТег HTML область контента

Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1).

Пример 12.1. Вложенность элементов в документе

HTML5 CSS 2.1 IE Cr Op Sa Fx

      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 
  

В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой (рис. 12.1).

Рис. 12.1. Дерево элементов для примера

На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу выступает тег

. Вместе с тем тег не является дочерним для тега , поскольку он расположен в контейнере

.

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

Селектор 1 > Селектор 2

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

Если снова обратиться к примеру 12.1, то стиль вида P > EM < color: red >будет установлен для первого абзаца документа, поскольку тег находится внутри контейнера

, и не даст никакого результата для второго абзаца. А все из-за того, что тег во втором абзаце расположен в контейнере , поэтому нарушается условие вложенности.

По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора же допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2).

Пример 12.2. Контекстные и дочерние селекторы

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
  

Результат данного примера показан на рис. 12.2.

Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора

На тег в примере действуют одновременно два правила: контекстный селектор (тег расположен внутри ) и дочерний селектор (тег является дочерним по отношению к

). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.

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

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 12.3 показано изменение вида списка с помощью стилей. За счёт вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 12.3).

Рис. 12.3. Список в виде меню

Для размещения текста по горизонтали к селектору LI добавляется стилевое свойство float . Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы (пример 12.3).

Пример 12.3. Использование дочерних селекторов

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Вопросы для проверки

1. Какой цвет будет у жирного курсивного текста в коде

Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам.

При использовании следующего стиля?

1. Зелёный.
2. Синий.
3. Оранжевый.
4. Оливковый.
5. Жёлтый.

2. Какой элемент является родительским для тега ?

3. Для какого тега элемент выступает родителем?

1.11.2. Метаданные документа

К метаданным относится содержимое, которое устанавливает представление или поведение остального содержимого, отношения документа с другими документами, или передает другую «внешнюю» информацию.

HTML-элементы, семантика которых связана с метаданными

• Содержание:
• 1. Элемент
• 2. Элемент
• 3. Элемент
• 4. Элемент
• 5. Элемент
• 6. Элемент

1. Элемент

Категории содержимого: нет.

Контекст, в котором этот элемент может быть использован: как первый элемент в элементе .

Пропуск тегов: начальный тег может быть пропущен, если элемент пуст, или если сразу после него идет другой HTML-элемент. Закрывающий тег может быть пропущен, если он не следует сразу за пробелом или за комментарием.

   
Тестовая страница
 

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

Набор метаданных может быть как большим, так и маленьким:

     . 

      . 

2. Элемент

Категории содержимого: метаданные.

Контекст, в котором этот элемент может быть использован: в элементе , не содержащем других элементов .

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент представляет заголовок или название документа (веб-страницы). Авторы должны использовать заголовки, которые дают поисковой системе понять, что содержится на странице, даже если заголовки используются вне контекста, например, в истории, закладках пользователя или в результатах поиска. Заголовок документа может отличаться от заголовка первого уровня, поскольку не должен стоять отдельно, когда он вырван из контекста.

 . 
Что такое Flexbox
 
.
 

Текст внутри отображается браузером в заголовке окна. Также этот текст будет содержать ссылку на ваш сайт на странице результатов поиска. Длина заголовка должна быть не более 60 символов, чтобы поместиться полностью.

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

3. Элемент

Категории содержимого: метаданные.

Контекст, в котором этот элемент может быть использован: в элементе , не содержащем других элементов .

Пропуск тегов: отсутствует закрывающий тег.

Элемент с помощью атрибута href предоставляет базовый URL документа для парсинга всех относительных URL-адресов на странице, установленных атрибутами src и href .

Атрибут target задает тип окна просмотра по умолчанию при переходе по всем гиперссылкам.

В одном документе может быть только один элемент и он должен иметь атрибут href , target или оба сразу.

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

     
Посетите страницу архивов.
  

Ссылка в приведенном выше примере будет ссылкой на https://www.example.com/news/archives.html .

4. Элемент

Категории содержимого: метаданные. Если его использование разрешено в — потоковое или текстовое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидаются метаданные. В элементе , который является дочерним элементом элемента . Если элемент разрешен в — там, где ожидается текстовое содержимое.

Пропуск тегов: отсутствует закрывающий тег.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 1. Атрибуты элемента

Атрибут	Описание, принимаемое значение
href	Задает адрес гиперссылки.
crossorigin	Описывает, как элемент обрабатывает CORS-запросы, предназначен для использования со ссылками на внешние ресурсы.
rel	Задает тип указанной ссылки, может содержать как одно значение, так и набор разделенных пробелами ключевых слов: alternate , dns-prefetch , icon , next , pingback , preconnect , prefetch , preload , prerender , search , serviceworker .
rev	Описывает обратное отношение текущего документа к связываемому документу, как определено атрибутом href .
media	Указывает, к какому типу медиа относится ресурс. Значение должно быть допустимым списком медиазапросов.
nonce	Используется в проверках политики безопасности контента, представляет криптографический одноразовый номер, который может использоваться политикой безопасности содержимого, чтобы определить, будет ли внешний ресурс, указанный в ссылке, загружаться и применяться к документу.
hreflang	Задает язык связанного ресурса.
type	Устанавливает подсказку для типа ссылочного ресурса.
referrerpolicy	Указывает URL источника запроса при переходе с одной страницы на другую.
sizes	Задает размеры иконок (для rel=»icon» ) для визуальных медиа, значение носит рекомендательный характер.
title	Устанавливает заголовок ссылки, альтернативное имя таблицы стилей.

Атрибут href элемента позволяет связывать HTML-документ с различным видами ресурсов, например, таблицами стилей, скриптами, альтернативными формами документа и ссылками навигации (оглавление, предыдущие и последующие страницы, уведомления об авторских правах и т.п.).

Тип связанного ресурса задается значением обязательного атрибута rel .

С помощью элемента можно создать две категории ссылок: ссылки на внешние ресурсы и гиперссылки. Например, следующий элемент ссылки создает две гиперссылки (на одну и ту же страницу):

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

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

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

5. Элемент

Категории содержимого: метаданные.

Контекст, в котором этот элемент может быть использован: если для элемента указаны атрибуты charset и http-equiv , то в элементе . Если значением атрибута не является content-type , то внутри элемента , являющимся дочерним элементом . Если присутствует атрибут name — там, где ожидаются метаданные.

Пропуск тегов: отсутствует закрывающий тег.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 2. Атрибуты элемента

Атрибут	Описание, принимаемое значение
charset	Определяет кодировку символов, используемую в документе. В документе должен быть один элемент с атрибутом charset . Необходимо использовать utf-8 или другую кодировку, совместимую с ASCII.
content	Задает значение метаданных документа или прагма директив.
http-equiv	Задает прагма директиву.
name	Устанавливает название/имя метаданных документа.

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

Для элемента обязательно должен быть определен один из атрибутов — name , http-equiv или charset . Если указан атрибут name или http-equiv , также должен присутствовать атрибут content (или пропущен, если нет соответствующих значений).

Стандартные названия метаданных

Для атрибута name доступны следующие значения (чувствительны к регистру):

• application-name — значение должно быть короткой строкой произвольной формы, содержащей название веб-приложения, которое представляет страница. Если страница не является веб-приложением, application-name не должно использоваться. В одном документе должно быть не более одного названия веб-приложения. Браузеры могут использовать название веб-приложения в пользовательском интерфейсе вместо , поскольку может содержать сообщения о состоянии и тому подобное, относящиеся к состоянию страницы в определенный момент времени, а не просто как название приложения.
• author — значение должно быть строкой произвольной формы с указанием имени одного из авторов страницы.
• description — значение должно быть строкой произвольной формы, описывающей страницу. Значение должно быть подходящим для использования в каталоге страниц, например, в поисковой системе.
• generator — значение должно быть строкой произвольной формы, которая идентифицирует один из пакетов программного обеспечения, использованных для создания документа. Это значение не должно использоваться на страницах, разметка которых не создается программным обеспечением, например на страницах, разметка которых была написана пользователем в текстовом редакторе.

• no-referrer — не передает никакую информацию о реферере.
• no-referrer-when-downgrade — передает реферальные данные только сайтам на HTTPS. Поведение браузера по умолчанию, если не указано иное.
• unsafe-url — всегда передает полный URL реферера.
• origin-when-cross-origin — отправляет полный URL при переходе на страницы в рамках одного сайта, вне зависимости от протокола, а на все остальные — только базовый домен/поддомен.

width — определяет ширину области просмотра, значением может быть определенное количество пикселей, например, width=768 или ключевое слово device-width (соответствует 100vw).

Прагма директивы

Когда атрибут http-equiv указан в элементе , элемент является прагма директивой, которая предоставляет дополнительную информацию о документе:

content-type — является альтернативной формой установки атрибута charset .

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

6. Элемент

Категории содержимого: метаданные.

Контекст, в котором этот элемент может быть использован: где ожидаются метаданные. Внутри элемента который является дочерним элементом . Внутри , где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 3. Атрибуты элемента

Атрибут	Описание, принимаемое значение
media	Указывает, к каким медиа применяются стили. Значение должно быть допустимым списком медиазапросов. Браузер должен применять стили, когда значение атрибута media соответствует среде и применяются другие соответствующие условия. Если атрибут media пропущен, по умолчанию он принимает значение all , то есть стили применяются ко всем видам медиа.
nonce	Представляет криптографический одноразовый номер, который может использоваться политикой безопасности содержимого, чтобы определить, будет ли стиль, указанный элементом, применяться к документу.
type	Устанавливает язык таблиц стилей, значение должно быть допустимым MIME-типом. Значением по умолчанию является text/css .
title	Задает альтернативное имя таблиц стилей.

Элемент позволяет авторам встраивать информацию о стилях в свои документы. Элемент не представляет какое-либо содержимое для пользователя.

Элемент желательно использовать внутри раздела .

    em 
Моя любимая книга - «Приключения Алисы в Стране чудес».