Когда web браузер отображает html документ содержащий картинки то графика
В этой статье рассматривается основы модели визуального форматирования. Модель визуального форматирования — это базовая концепция CSS, определяющая алгоритм обработки HTML документа для его визуального представления в браузере.
Модель визуального форматирования
Модель визуального форматирования (visual formatting model) – это набор инструкций для пользовательских агентов (браузеров), в соответствии с которыми они должны обрабатывать HTML документы для их визуального представления на экранах устройств. Это основополагающая концепция. Знание этой концепции необходимо любому веб-разработчику, т.к. в этом случае он сможет понять как тот или иной фрагмент HTML кода и стилей, применённых к нему, будет отображён в браузере.
В центре этой модели лежат boxes (боксы). Генерация boxes выполняется из HTML элементов. Это означает, что браузеру перед тем, как отобразить страницу, необходимо из HTML элементов сгенерировать boxes . Следующий этап – это расположить boxes по определённому алгоритму на веб-странице.
Этот алгоритм зависит от множества факторов:
- размеров и от того, как они заданы;
- типа боксов (block boxes, inline boxes);
- позиционирования (нормальный поток, position: absolute , position: fixed , position: sticky , float: left или float: right );
- от других элементов (вложенных и дочерних);
- от размеров viewport;
- от собственных размеров изображений и другой информации.
Рассмотрим некоторые из этих факторов.
Схема позиционирования элементов
Схема позиционирования элемента – это один из факторов, от которого будет зависеть расположение boxes на веб-странице.
По умолчанию все HTML элементы, располагаются в нормальном потоке (normal flow).
Нормальный поток — это основной алгоритм, определяющий то, как элементы должны располагаться на странице. В нормальном потоке следования элементов осуществляется в том порядке, в котором они расположены в HTML коде с учётом их вложенности.
Задание другой схемы позиционирования элементам осуществляется с помощью CSS свойств position и float . Узнать всё об этих схемах позиционирования элементов можно в этой статье.
Типы boxes
Тип бокса – это ещё один фактор, от которого будет зависеть как бокс будет располагаться на веб-странице.
Различают два основных типа боксов: блочный (block box) и строчный (inline box).
Тип бокса зависит от CSS свойства display . Из HTML элементов, имеющих display равное block , list-item , или table генерируются один или несколько блочных боксов . Из элементов inline уровня , т.е. у которых вычисленное свойство display имеет значение inline , inline-block или inline-table генерируются боксы inline уровня .
Как происходит генерация boxes
Процесс генерации boxes – это часть алгоритма модели визуального форматирования. Процесс генерации boxes из HTML элементов разберём на примерах.
Сначала рассмотрим простые примеры, когда из одного HTML элемента генерируется один бокс.
1. В этом примере из одного пустого элемента, имеющего display: block генерируется один блочный ящичек (block box):
2. В этом примере из элемента, имеющего display: inline генерируется один inline бокс :
Теперь разберём более сложные примеры.
3. Пример, в котором из одного HTML элемента генерируются несколько боксов.
В этом примере будут генерироваться:
- блочный бокс из элемента p ;
- анонимный строчный бокс, содержащий текст «Текст. » и располагающийся внутри блочного бокса.
Почему так? Это связано с тем, что блочный бокс не может в себе напрямую содержать текст. Он может содержать только другие боксы.
А так как текст не заключён в inline HTML элемент, то алгоритм модели визуального форматирования заключает его в анонимный строчный бокс (anonymous inline box).
4. Пример, в котором элемент с блочным отображением содержит в себе текст и элемент с inline отображением.
В этом примере будут генерироваться блочный бокс из элемента p (по умолчанию display: block ) и три строчных бокса в нём.
- анонимный строчный бокс, содержащий текст «Некоторый »;
- строчный бокс из элемента strong (по умолчанию display: inline) с текстом «очень важный»;
- анонимный строчный ящичек, содержащий текст « текст».
Структура сгенерированных боксов:
5. Пример, в котором разберём какие boxes будут генерироваться из элемента div ( display: block ), содержащего внутри себя текст и элемент p ( display: block ).
Из этого фрагмента будут генерироваться следующие боксы:
- блочный бокс из элемента div, т.к. он имеет display: block;
- • анонимный блочный бокс, расположенный в блочном боксе сгенерированным из div, и содержащий внутри себя анонимный строчный бокс с текстом «Текст 1»;
- блочный бокс p, находящийся в блочном боксе div и содержащий внутри себя анонимный строчный бокс с текстом «Текст 2»;
- анонимный блочный бокс, расположенный в блочном боксе div и содержащий анонимный строчный бокс с текстом «Текст 3».
Почему так? Это связано с тем, что когда строчные боксы находятся на одном уровне с блочными боксами, то каждый из строчных боксов оборачивается в анонимный блочный бокс (anonymous block box).
Блочные боксы (block boxes)
Блочный бокс представляет собой прямоугольник, имеющий ширину (width), высоту (height), внешние отступы (margin), внутренние отступы (padding), границу (border) и область для контента.
Ширину блочному боксу можно явно не задавать. В этом случае он будет иметь доступную ширину того блочного бокса, в котором он расположен.
Высоту блочному боксу тоже можно открыто не устанавливать. В этом случае высота бокса будет определяться браузером и рассчитываться таким образом, чтобы её было достаточно для отображения всех элементов, помещённых в данный бокс.
В нормальном потоке (normal flow) блочные боксы размещаются вертикально один под другим в соответствии с тем порядком, в котором они записаны в HTML коде с учётом их вложенности. В горизонтальном направлении они прикрепляются к левому краю области контента того блочного бокса, в котором каждый из них расположен.
Строчные боксы (inline box)
Строчные боксы предназначены для представления текстового контента. Они располагаются горизонтально, как строки текста. При этом если inline box не помещается в текущую строку, то он переносится (то, что не поместилось) на следующую строку.
Строчным боксам нельзя задать ширину (width) и высоту (height), т.к. их размеры браузер вычисляют самостоятельно.
Изменить высоту этих inline boxes можно с помощью CSS свойства line-height (высота линии).
Задание отступов в строчных боксах с помощью margin и padding выполняется очень редко, особенно это касается боксов, содержимое которых размещается на нескольких строках. Это связано с тем, что margin и padding в этом случае не работают. Для остальных строчных боксов, т.е. у которых содержимое располагается на одной строке, можно использовать различные отступы ( margin и padding ) за исключением margin-top и margin-bottom .
Обратите внимание, что боксы генерируются из HTML элементов, при этом тип бокса зависит от его вычисленного значения CSS свойства display . При этом один и тот же элемент в зависимости его от конечного значения CSS свойства display может генерироваться как inline box, так и block box.
Когда создаёте HTML 5 документ применяйте элементы в соответствии с их назначением (смыслом). При выборе элемента не придавайте важность CSS свойству display , которое он имеет по умолчанию. Данное значение свойства всегда можно переназначить с помощью CSS.
Итоговый пример
В завершении разберём из каких боксов будет состоять следующий HTML документ и как они будут располагаться на странице в браузере.
Структура HTML документа: тип HTML документа, заголовок HTML документа, тело HTML документа, границы HTML документа
Структура HTML документа: тип HTMLдокумента, заголовок HTML документа, тело HTML документа, границы HTML документа
Структура HTML документа. Особенности работы браузера с HTML
Когда мы разговаривали о том, что такое HTML и создавали первую HTML страницу, мы сделали это неправильно, да HTML документ был создан и мы его даже смогли посмотреть в браузере, но данный документ был неправильным с точки зрения стандарта HTML, хотя браузер «понял» и корректно отобразил страницу, но это заслуга браузера.
Прежде чем перейти к рассмотрению структуры HTML документа, давайте откроем файл в папке Lesson 1 (этот файл мы создали, когда знакомились с HTML) в браузере и воспользуемся консолью разработчика, я буду использовать для этого Google Chrome, вы можете использовать любой другой браузер.
Открыв index.htmlв браузере, нажмите F12, либо нажмите правой кнопкой мыши в области просмотра и из контекстного меню выберите пункт «Просмотреть код».
Смотрим код сформированной HTML страницы в браузере
Снизу у нас появится консоль, в которой наибольший интерес для нас в данный момент представляет вкладка Elements.
Код HTML страницы в консоли браузера
А теперь нажмите еще раз по области просмотра правой кнопкой мыши, но теперь нажмите «Просмотр код страницы».
У вас откроется новая вкладка в браузере, в которой будет отображен HTMLкод, из которого получилась данная страница, в моем случае это:
Заметили разницу? В консоли помимо текста «Hello, World!» мы видим HTML тэги, когда мы смотрим HTML код, мы этих тэгов не видим. Данный пример очень показательный по двум причинам:
- Вы увидели структуру HTML документа.
- Вы увидели, как браузер обрабатывает HTML код.
Все дело в том, что разработчики браузеров заботятся о своих пользователях в отличии от некоторых HTML разработчиков, поэтому браузеры будут исправлять некоторые ошибки разработчика, чтобы пользователь видел красивую и правильную структуру HTML документа. Здесь стоит заметить, что HTML тэги могут делиться как на одиночные и парные HTML тэги, так и на обязательные и необязательные HTML тэги, так же существуют еще и запрещенные HTML тэги. Обо всем этом мы обязательно поговорим.
В данном примере браузер сгенерировал структуру HTML документа за нас, но, тут можно подумать, что тэги, обозначающие структуру HTML документа необязательные, и этот будет глубоким заблуждением, просто браузер генерирует тэги структуры HTML документа в том случае, когда разработчик их не указал.
Из-за того, что браузер сгенерировал структуру HTML документа, мы видим разницу между консолью и исходным кодом HTML документа. В консоли всегда отображается то, что на странице. В исходном коде браузера отображается код, который получил браузер на интерпретацию, это разные вещи.
Вы, наверное, уже разобрались со структурой HTML документа, посмотрев код консоли. Но я предлагаю вам взглянуть на картинку ниже, на ней изображена структура HTMLдокумента.
Структура HTML документа
Сверху мы видим HTML тэг , этот тэг так же является частью структуры HTML документа, но браузер его не генерирует, так как по тэгам не может определить версию HTML стандарта, как раз таки для определения версии HTML документа и используется тэг . Обратите внимание: это не простой параметр. На основе версии определяются правила написания тэгов (синтаксис HTML) и набор тэгов, который может быть использован в документе и, если эти правила будут нарушены, то ваш код будет невалидным.
Далее зеленой линией обозначен тэг , который определяет границы HTML документа, весь код HTML документа за исключением декларации должен быть внутри тэгов и , иначе документ будет невалидным. Для простоты понимания структуры HTML документа можно представить, что тэги и это своеобразный контейнер, а декларация DOCTYPE это инструкция по использованию контейнера.
Но также на рисунке мы видим, что наш контейнер состоит из двух отсеков: верхний отсек – это заголовок HTML документа, в заголовке HTML документа располагается служебная информация, которая невидна пользователю за исключением названия HTML документа в тэге .
Нижний отсек – это тело HTML документа, в котором идет код, который отображается браузером на экранах пользователя в виде HTML элементов. Отметим себе, что HTML элементы – это то, что пользователь видит на экране, а HTML тэги – это то, что разработчик пишет в редакторе. Структура HTML документа очень строгая и ее не стоит нарушать, конечно, любой современный браузер будет стараться корректно отобразить HTML документ, но как только вы будете делать валидацию HTML, вы будете получать ошибки.
Да и поисковые системы начинают относиться хуже к тем сайтам, у которых HTML код невалидный. Поэтому никогда не пренебрегайте правилами HTML. Давайте теперь более подробно поговорим о структуре HTML документа.
Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэгПожалуй, самым важным элементом структуры HTML документа является его заголовок. Начало заголовка HTML документа обозначается открывающим тэгом
, конец заголовка HTML документа обозначается закрывающим тэгом .Внутри заголовка HTML документа прописывается вся необходимая служебная информация:
- В заголовке указывается кодировка HTML документа.
- Так же здесь подключатся таблицы стилей.
- Заголовок HTML документа используется для подключения файлов JavaScript.
- В заголовке расположено описание HTML документа.
- В заголовке указывается название HTML документа.
- В заголовке могут быть указаны другие мета-тэги HTML, которые позволяют браузеру корректно отображать документы, а пользователям и поисковой системы получить больше информации о сайте.
Для нас сейчас важно сделать вывод о том, что заголовок HTML документа – важный элемент его структуры, который используется для размещения служебной информации, с некоторыми особенностями мы познакомимся в других записях.
Хочу обратить ваше внимание на то, что заголовок HTML документа и HTML заголовок – разные вещи, по крайней мере в моем понимание. HTML заголовок – это тэги , , и так до , эти тэги делят документ на разделы.
Тело HTML документа: видимая часть HTML страницы. HTML тэгВ структуре HTML документа есть тело. Браузер обычно отображает содержимое тела HTML документа в области просмотра. Другими словами: тело HTML документа отображается пользователю и он даже может взаимодействовать с HTML элементами при помощи браузера, например, вводить данные в HTML формы.
Тело HTML документа является частью структуры и предназначено для отображения содержимого пользователя, хотя это не означает, что пользователь будет видеть все HTML элементы после того, как браузер проанализирует код страницы, так как некоторые HTML элементы могут быть намеренно скрыты стилями, заданными в CSS или удалены при помощи JavaScript кода.
Открывающий HTML тэг
обозначает начало тела HTML документа, закрывающий тэг обозначает его окончание. Вне тела не должно быть HTML тэгов, которые бы отображались пользователю.Вывод: тело документа – часть структуры HTML документа, которая отображается пользователю в области просмотра браузера.
Границы HTML документа. HTML тэгЕсли не быть таким уж формалистом, то HTML можно считать подмножеством XML. В XML действует незыблемое правило: один документ – один тэг. В XML так же, как и в HTML есть декларация. Как понимать это правило: один документ – один тэг. Ведь на самом деле в XML документе тэгов много? Понимать это правило нужно следующим образом: тэг один, но в него может быть вложено сколь угодно много тэгов. Этот внешний тэг называют корневым или корнем. Корень как раз-таки и является границей XML. В HTML границей документа является тэг .
Так и в HTML: весь HTML документ представляет собой один тэг , внутри которого должно быть обязательно два вложенных тэга: и . За пределами границы HTML документа, кроме декларации, ничего быть не должно, на то это и граница.
Важной особенностью структуры HTML документа является то, что за пределами . не должно быть других тэгов, а внутри могут быть только тэги и . А вот внутри тэгов и может быть сколь угодно много тэгов, правда внутри служебных, а внутри тех тэгов, которые видны пользователю.
Повторюсь, что структура HTML документа строгая и порядок написания тэгов должен быть так, как на рисунке выше.
Вывод: тэг определяет границу HTML документа, за пределами которой не должно быть других тэгов, кроме декларации. Внутри границы HTML документа могут располагаться только тэги и в том порядке, как они написаны, а внутри тэгов и можно писать сколь угодно много тэгов.
Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE
Браузер интерпретирует HTML документа. Другими словами: браузер проводит его анализ и в соответствии с этим анализом он решает, как отображать HTML документ пользователю. На данный момент используют два стандарта HTML: 4.01 и 5 (есть еще XHTML, но на это у нас будет отдельная рубрика).
Исходя из вышесказанного, браузеру нужно «понимать»: с какой версией HTML он имеет дело или может он работает не с HTML, а с xHTML? Как ему это понять, чтобы правильно отобразить документ.
Для того чтобы браузер понимал с какой версией HTML он работает, в структуре HTML документа используется декларация, для объявления декларации используется HTML тэг , мы подробно поговорим про декларацию и ее роль в структуре HTML документа в отдельной записи, сейчас важно понимать то, что она нужна для того, чтобы браузер понял, как интерпретировать код HTML.
В принципе, мы рассмотрели структуру HTML документа и довольноподробно поговорили о каждом элементе структуры и его назначении в HTML, но давайте все-таки напишем код.
Пример структуры HTML документа
Без примера структуры HTML документа публикация была бы не полной. Поэтому откройте папку HTML, которую мы создали в прошлой записи и создайте в ней папку Lesson 2. Затем откройте любой удобный для вас редактор кода и напишите в нем следующее:
Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML
Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML.
По традиции во второй части вступления к статье приведу короткую аннотацию к записи, посвященной изображениям и картинкам в HTML:
- сначала мы поговорим о том, какие возможности есть в HTML для работы с картинками и изображениями;
- затем перечислим HTML атрибуты изображений;
- далее разберемся с тем, как вставить картинку в HTML документ;
- попробуем поработать с размером изображений при помощи HTML атрибутов, изменяя высоту и ширину картинки;
- изображения в глазах HTML интерпретатора — это обычный символ, как и любая буква, которую вы вводите с клавиатуры, но для символа-картинки в HTML мы можем задать определенное поведение или выравнивание, от этого зависит то, как будет вести себя текст, находящийся рядом с изображением, или как текст будет обтекать HTML картинку;
- и завершении мы разберемся с тем, как сделать картинку ссылку в HTML.
Что мы можем делать с изображениями и картинками в HTML
Язык HTML позволяет вставлять изображения в документы. Для вставки картинок в HTML используется специальный тэг . Картинки в HTML делают документы более яркими, интересными, наглядными и привлекательными для посетителей сайтов. Так же изображения могут быть использованы для оформления HTML шаблонов, но об этом мы поговорим, когда начнем изучать CSS.
Мы не будем сейчас вдаваться в маркетинг и говорить о том, что всевозможные картинки в HTML документах привлекают внимание посетителей и позволяют их удержать, тем более мы не будем вдаваться в подробности того, как это реализуется. Сейчас нас больше интересует техническая сторона изображений в HTML.
Итак, картинки можно вставлять в HTML документ. Тэг позволяет вставить в документ изображения формата jpeg, png, gif. Браузер «понимает» какое изображение нужно вставить в том или ином месте HTML страницы при помощи специального HTML атрибута , который позволяет указать путь к папке, в которой находится изображение.
Когда мы открываем HTML документ с картинками, то браузер делает запрос на получение HTML документа и начинает его анализировать: сначала он формирует общую структуру страницы, а затем начинает анализировать: что нужно подключить к странице или другими словами, каких файлов еще не достает на данной странице (или какие ресурсы нужно подключить к HTML документу). Изображение, в отличие от других HTML элементов страницы, не является частью документа, поэтому браузер его подгружает после того, как проанализирует документ.
Или проще говоря, каждая картинка на вашей HTML странице – это дополнительный запрос браузера к серверу, на котором находится сайт. Поэтому, когда вы проводите внутреннюю оптимизацию сайта, то для ускорения работы сайта старайтесь сжимать изображения, но нужно понимать, что картинка теряет в качестве при сжатии, поэтому данный процесс – это всегда компромисс.
HTML позволяет задавать параметры отображения картинок в документе при помощи уникальных HTML атрибутов, о которых мы поговорим чуть ниже, например, средствами HTML мы можем изменять ширину и высоту картинки, задавать правила того, как текст будет обтекать изображение, сделать рамку для изображения, установить отступы, которые будут между изображениями и другими элементами HTML страницы и многое другое. Также отметим, что тэг является одиночным HTML тэгом. А элемент IMG является строчным HTML элементом.
Обо всем этом более подробно мы поговорим ниже и детально разберемся, какие средства есть в HTML для работы с картинками и изображениями.
Атрибуты изображений в HTML
Чтобы в дальнейшем не отвлекаться на пояснения, а также для того чтобы у вас появилось комплексное представление о работе с изображениями в HTML, сейчас мы приведем список уникальных атрибутов HTML изображения, вернее список уникальных атрибутов для тэга . Отметим, что для тэга доступны все универсальные HTML атрибуты и атрибуты событий. А теперь перечислим уникальные атрибуты картинок в HTML:
- Атрибут align. Для изображения в HTML можно задать способ того, как текст будет его обтекать при помощи атрибута align.
- Атрибут alt. Мы уже говорили, что картинки в HTML подгружаются после того, как браузер загрузит HTML документ. Отметим, что даже в 2016 году не в каждом населенном пункте есть широкие каналы для доступа в сеть Интернет, а сервера не всегда работают стабильно, поэтому атрибут alt, служащий для задания альтернативного текста HTML изображения, еще долго не потеряет свою актуальность. Также в некоторых браузерах отключена загрузка картинок, посетитель, у которого по тем или иным причинам не загрузилась картинка, будет видеть текст, написанный в атрибуте alt.
- Атрибут border. Данный атрибут позволяет задать толщину рамки вокруг картинки в HTML документе.
- Атрибут height. Данный атрибут позволяет задать высоту изображения в HTML
- Атрибут hspace. Этот атрибут позволяет менять горизонтальный отступ между картинкой и другими HTML элементами.
- Атрибут ismap. Данный атрибут указывает браузеру на то, что картинка в HTML документе является серверной картой-изображением.
- Атрибут longdesc. Данный атрибут служит для того, чтобы указать адрес HTML документа, в котором содержится аннотация к изображению.
- Атрибут lowsrc. При помощи атрибута lowsrc можно указать адрес, по которому находится картинка более низкого качества.
- Атрибут src. Этот атрибут позволяет задать путь к изображению, браузер перейдет по этому пути, чтобы вставить картинку в HTML документ.
- Атрибут vspace. Этот атрибут позволяет менять вертикальный отступ между картинкой и другими HTML элементами.
- Атрибут width. Данный атрибут позволяет задать ширину изображения в HTML.
- Атрибут usemap. Этот атрибут является ссылкой на тэг , содержащий координаты для клиентской карты-изображения.
Управлять отображением картинок в HTML, конечно, можно при помощи HTML атрибутов, но, поскольку мы знаем правила о том, что содержимое должно быть отделено от оформления, то для управления отображением картинок лучше все-таки использовать CSS.
Как вставить картинку в HTML документ. Учимся добавлять изображение в документ
Начнем работать с изображениями в HTML и первое, что мы научимся делать – вставлять картинки в HTML документ. Мы уже знаем, что картинки в документ вставляются при помощи специального атрибута src, который позволяет указать путь к файлу изображения. Когда мы разговаривали про ссылки в HTML, мы упоминали, что путь ссылки может быть абсолютный, а может быть относительным.
Относительный путь к файлу, в том числе и к файлу изображения, строится относительно какого-нибудь объекта, например, корня сайта или папки файловой система. А вот абсолютный путь – это такой путь, который доступен из любого места и на любом устройстве. Естественно, чаще всего для вставки изображений в HTML используют относительные пути, в отличии от HTML ссылок, но мы рассмотрим оба варианта вставки картинок в HTML.
Давайте сперва подготовим файловую систему для того, чтобы научиться вставлять картинки в HTML документ. Во-первых, на моем рабочем столе есть папка с именем «HTML», в этой папке я собираю все примеры из рубрики HTML, называя каждую папку Lesson N, где N – это номер публикации.
Для данной публикации папка с примерами называется Lesson 13. Структуру папки HTML вы можете увидеть на рисунке ниже:
Готовим файловую систему для того, чтобы разобраться с относительными путями для вставки изображений в HTML
Файл html41.jpg – это изображение из публикации, в которой мы говорили про HTML списки. Мы можем сказать, что папка HTML является родительской папкой для папки Lesson 13. HTML документ, в который мы будем вставлять картинку находится в папке Lesson 13, я его назвал img.html, смотрите изображение ниже.
В данной папке находится HTML документ, в который мы будем вставлять картинку
Давайте попробуем вставить изображение в документ img.html из родительской папки (изображение называется html41.jpg). Воспользуйтесь удобным для вас редактором (можно даже Блокнотом), но я бы рекомендовал бесплатный HTML редактор с подсветкой синтаксиса Notepad++ и создайте файл со следующим кодом:
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет расширение .html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем элемента: …имя элемента> . Между начальным и закрывающим тегами находится содержимое элемента — контент.
Элементы, представленные одиночными тегами, не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, элемент создаст кнопку с текстом Кнопка внутри.
Элементы могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов — заголовка — содержимое элемента и содержательной части — содержимое .
Структура веб-страницы
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие элементы, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
- Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем элементов: ,
, , и т.д.
- Потомок — элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
является потомком одновременно для и .
- Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 является родительским только для и . Элемент
является родительским только для .
- Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
и являются дочерними по отношению к .
- Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
являются между собой сестринскими.
Является корневым элементом документа. Все остальные элементы содержатся внутри . . Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.
Для элемента доступен атрибут, описанный в таблице ниже, а также глобальные атрибуты.
Атрибут | Описание, принимаемое значение |
---|---|
manifest | С помощью значения атрибута указывается путь к документу кэша манифеста, например: |
Раздел
. содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу. 1.2.1. ЭлементОбязательным элементом раздела является . Текст, размещенный внутри элемента , отображается в строке заголовка веб-браузера.
Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным элементом раздела является элемент . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных.
Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью элемента можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
Индексация разрешена, переход по ссылкам запрещен:
Индексация и переход по ссылкам запрещены:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh :
Для элемента доступны атрибуты, описанные в таблице ниже, а также глобальные атрибуты.
1.2.3. ЭлементВнутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
Атрибут | Описание, принимаемое значение |
---|---|
media | Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query. |
nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
type | Определяет MIME-тип подключаемого файла со стилями, в данном случае type="text/css" . |
Элемент может содержать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id ) присвоить элементу соответствующее название:
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. ЭлементЗадать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
- через директиву @import url
- с использованием элемента . Данный способ является предпочтительным.
Элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
Атрибут | Описание, принимаемое значение |
---|---|
crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
href | Основной атрибут элемента, в качестве значения выступает путь к файлу со стилями. |
hreflang | Определяет язык текста в документе, на который идет ссылка. |
media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширина х высота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширина х высота (размеры иконки задаются в пикселях), например: ; any — иконка может масштабироваться до любого размера. |
title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
Элемент позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
1.3. ЭлементВ разделе располагается все содержимое документа.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
Встраиваемое содержимое делает страницы интерактивными и мультимедийными.
Вы можете встраивать видео, аудио, pdf-документы и т.п. как из внутренних, так и внешних источников — приложений или сайтов.
HTML-элементы для встраивания ресурсов в документ
1. ЭлементКатегории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент вместе с элементом может использоваться для предоставления множественных источников изображения. Это дает браузеру возможность выбора оптимальной версии изображения, в зависимости от плотности пикселей экрана, размера области просмотра, формата изображения и других факторов. Если наиболее подходящей версии изображения среди элементов найдено не будет, то будет отображен файл, указанный в резервном элементе .
2. ЭлементКатегории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента , перед элементом . Как дочерний элемент или , перед любым потоковым содержимым или элементом .
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
Синтаксис: srcset="port-small.jpg 700w, port-medium.jpg 1200w, port-large.jpg 1600w"
Синтаксис: sizes="80vw"
sizes="(min-width: 768px) 700px"
Синтаксис: type="image/svg+xml"
Элемент позволяет указывать несколько альтернативных источников изображений для элемента или несколько альтернативных медиа-ресурсов для элементов или . Сам по себе он ничего не представляет.
Если родительским элементом является : атрибут srcset является обязательным, атрибуты media и type могут присутствовать.
Если родительским элементом является или : атрибут src является обязательным, атрибут type может присутствовать. Атрибуты srcset , sizes и media не должны присутствовать.
3. ЭлементКатегории контента: потоковое содержимое; текстовое содержимое; встраиваемое содержимое; элемент, связанный с формой; если элемент имеет атрибут usemap — интерактивное содержимое; видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
use-credentials — запрос выполняется с передачей учетных данных.
Разрешенные значения:
sync — синхронно декодирует изображение в основном потоке. Отрисовка страницы и декодирование изображения происходит одно за другим (в зависимости от положения изображения на странице).
async — отрисовка страницы и декодирование изображения выполняются параллельно.
auto — значение по умолчанию, означает отсутствие предпочтений по декодированию.
Разрешенные значения:
eager — изображение загружается немедленно (значение по умолчанию).
lazy — откладывает загрузку изображения до того момента, пока оно не появится в области просмотра. Рекомендуется указывать размеры изображений с помощью атрибутов ширины и высоты, даже если они явно заданы в CSS, чтобы предотвратить смещение макета страницы после загрузки изображения. Рекомендуется добавлять изображениям, которые находятся ниже первого экрана.
Разрешенные значения:
no-referrer — никакая информация о Referer не должна отправляться вместе с запросами к какому-либо источнику.
same-origin — Referer указывается при выполнении запроса в пределах одного источника.
origin-when-cross-origin — при выполнении запроса в пределах одного источника указывается полный URL, иначе указывается только источник.
unsafe-url — всегда указывается полный URL.
Синтаксис: srcset="port-small.jpg 700w, port-medium.jpg 1200w, port-large.jpg 1600w"
Синтаксис: sizes="80vw"
sizes="(min-width: 768px) 700px"
Элемент представляет изображение и его резервное содержимое. Атрибут src должен присутствовать, а атрибут srcset является необязательным. Если присутствует атрибут srcset , атрибут sizes также может присутствовать.
4. ЭлементКатегории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое, интерактивное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
Разрешенные значения:
allow-forms — разрешает содержимому фрейма отправлять формы. Если это ключевое слово не используется, отправка формы блокируется.
allow-modals — разрешает ресурсу открывать модальные окна (например, с помощью alert ).
allow-orientation-lock — разрешает ресурсу блокировать ориентацию экрана.
allow-pointer-lock — разрешает ресурсу блокировать курсор мыши.
allow-popups — разрешает всплывающие окна (например, window.open() , target="_ blank" или showModalDialog() ). Если это ключевое слово не используется, всплывающее окно не откроется.
allow-popups-to-escape-sandbox — разрешает всплывающим окнам не наследовать режим песочницы (например, чтобы в всплывающем окне, в котором есть JavaScript, он был разрешен без allow-scripts у фрейма).
allow-presentation — позволяет ресурсу запускать презентации.
allow-same-origin — разрешает загрузку содержимого фрейма (воспринимает это как контент из того же источника, что и родительский документ). Блокирует всплывающие окна, поэтому может использоваться для безопасного открытия контента.
allow-scripts — разрешает ресурсу запускать сценарии (но не создавать всплывающие окна).
allow-top-navigation — разрешает открывать ссылку фрейма в родительском документе.
allow-top-navigation-by-user-activation — разрешает открывать ссылку фрейма, нажатую пользователем, в родительском документе.
allow-downloads — позволяет выполнять загрузки жестом пользователя.
Разрешенные значения:
accelerometer — определяет, разрешено ли текущему документу собирать информацию об ускорении устройства через интерфейс акселерометра.
ambient-light-sensor — определяет, разрешено ли текущему документу собирать информацию о количестве света в окружающей среде вокруг устройства через интерфейс AmbientLightSensor .
autoplay — определяет, разрешено ли текущему документу автоматически воспроизводить и .
battery — определяет, разрешено ли использование API состояния батареи.
camera — разрешает доступ к камере.
fullscreen — определяет, разрешено ли фрейму воспроизводиться в полноэкранном режиме.
geolocation — определяет, разрешено ли текущему документу использовать интерфейс геолокации.
microphone — определяет, разрешено ли текущему документу использовать устройства ввода звука.
payment — определяет, разрешено ли текущему документу использовать API запроса оплаты.
Синтаксис: allow="geolocation https://google-developers.appspot.com"
Разрешенные значения:
no-referrer — никакая информация о Referer не должна отправляться вместе с запросами к какому-либо источнику.
same-origin — Referer указывается при выполнении запроса в пределах одного источника.
origin-when-cross-origin — при выполнении запроса в пределах одного источника указывается полный URL, иначе указывается только источник.
unsafe-url — всегда указывается полный URL.
Разрешенные значения:
eager — изображение загружается немедленно (значение по умолчанию)
lazy — откладывает загрузку изображения до того момента, пока оно не появится в области просмотра. Рекомендуется указывать размеры изображений с помощью атрибутов ширины и высоты, даже если они явно заданы в CSS, чтобы предотвратить смещение макета страницы после загрузки изображения. Рекомендуется добавлять изображениям, которые находятся ниже первого экрана.
Элемент используется для встраивания другого HTML-документа в текущий, при этом он полностью изолирован от JavaScript и CSS родительского элемента.
Стили браузера по умолчанию:
5. ЭлементКатегории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое, интерактивное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
Стили браузера по умолчанию:
6. ЭлементКатегории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
Элемент представляет внешний ресурс, который, в зависимости от типа ресурса, будет рассматриваться либо как изображение, либо как вложенный контекст просмотра, либо как внешний ресурс, который будет обрабатываться плагином.
7. ЭлементКатегории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента , перед любым потоковым содержимым.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты name — имя параметра, и value — значение параметра. Оба атрибута должны присутствовать.
Элемент определяет параметры плагинов, вызываемых элементом . Сам по себе он ничего не представляет.
8. ЭлементКатегории контента: потоковое содержимое; текстовое содержимое; встраиваемое содержимое; видимое содержимое; если присутствует атрибут controls — интерактивное содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
use-credentials — запрос выполняется с передачей учетных данных.
Разрешенные значения:
none — указывает, что видео не следует предварительно загружать.
metadata — указывает, что выбираются только метаданные видео (например, продолжительность).
auto — указывает, что можно загрузить весь видеофайл, даже если пользователь не собирается его воспроизводить.
Элемент используется для воспроизведения видео или фильмов, а также аудиофайлов с субтитрами. Внутри может быть предоставлено содержимое. Браузеры не должны показывать это содержимое пользователю, оно предназначено для старых веб-браузеров, которые не поддерживают видео.
9. ЭлементКатегории контента: потоковое содержимое; текстовое содержимое; встраиваемое содержимое; если присутствует атрибут controls — интерактивное содержимое; видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
use-credentials — запрос выполняется с передачей учетных данных.
Разрешенные значения:
none — указывает, что аудио не следует предварительно загружать.
metadata — указывает, что выбираются только метаданные аудио (например, продолжительность).
auto — указывает, что можно загрузить весь аудиофайл, даже если пользователь не собирается его воспроизводить.
Элемент представляет собой звук или аудиопоток. Внутри может быть предоставлено содержимое. Браузеры не должны показывать это содержимое пользователю, оно предназначен для старых веб-браузеров, которые не поддерживают звук, так что можно попробовать устаревшие звуковые плагины или показать пользователям текст, информирующий их о том, как получить доступ к звуковому содержимому.
10. ЭлементКатегории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: как дочерний элемент элементов и перед любым потоковым содержимым.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
Разрешенные значения:
subtitles — значение по умолчанию, показывает транскрипцию или перевод диалога, накладывается на видео.
captions — показывает транскрипцию или перевод диалога, звуковых эффектов, соответствующих музыкальных сигналов и другой соответствующей звуковой информации, накладывается на видео; помечен как подходящий для слабослышащих.
descriptions — выводит текстовое описание, которое синтезируется как аудио, подходит для слепых пользователей.
chapters — выводит заголовки, предназначенные для навигации по медиаресурсу. Отображается как интерактивный (потенциально вложенный) список в интерфейсе браузера.
metadata — выводит данные, предназначенные для использования скриптами. Не отображаются для пользователей.
Элемент позволяет явно указывать внешние текстовые ресурсы для медиа-элементов. Сам по себе он ничего не представляет.
11. ЭлементКатегории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибут name , задающий имя изображения-карты для ссылки из атрибута usemap .
Элемент в сочетании с элементом и любыми потомками элемента определяет изображение-карту. Элемент представляет свои дочерние элементы.
12. ЭлементКатегории контента: потоковое содержимое, текстовое содержимое.
Контекст, в котором этот элемент может быть использован: там, где ожидается текстовое содержимое, но только как предок элемента или .
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
для прямоугольника — четыре числа, первое из которых должно быть меньше третьего, а второе — меньше четвертого. Четыре точки должны представлять, соответственно, расстояние от левого края изображения до левой стороны прямоугольника, расстояние от верхнего края до верхней стороны, расстояние от левого края до правой стороны и расстояние от верхнего края до нижнего, все в пикселях;
для многоугольника — минимум шесть чисел, и количество должно быть четным. Каждая пара целых чисел должна представлять координату, заданную как расстояние от левого и верхнего края изображения в пикселях соответственно, и все координаты вместе должны представлять точки многоугольника по порядку. Также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
Разрешенные значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noopener — указывает браузеру перейти к целевому ресурсу без предоставления новому контексту просмотра доступа к документу, который его открыл. Это особенно полезно при открытии ненадежных ссылок, чтобы гарантировать, что они не могут вмешаться в исходный документ через свойство Window.opener .
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
Разрешенные значения:
rect — активная область прямоугольной формы.
circle — активная область в форме круга.
poly — активная область в форме многоугольника.
default — активная область занимает всю площадь изображения.
Разрешенные значения:
_self — страница загружается в текущее окно.
_blank — страница открывается в новом окне браузера.
_parent — страница загружается во фрейм-родитель.
_top — страница загружается в полное окно браузера.
Разрешенные значения:
no-referrer — никакая информация о Referer не должна отправляться вместе с запросами к какому-либо источнику.
same-origin — Referer указывается при выполнении запроса в пределах одного источника.
origin-when-cross-origin — при выполнении запроса в пределах одного источника указывается полный URL, иначе указывается только источник.
unsafe-url — всегда указывается полный URL.
Элемент представляет собой либо гиперссылку (если задан атрибут href ) с некоторым текстом и соответствующей областью на изображении-карте, либо неактивную область.
Если элемент представляет собой гиперссылку, в этом случае должен присутствовать атрибут alt . Если элемент не имеет атрибута href , то область карты не может быть выбрана, и атрибут alt должен быть опущен.
В обоих случаях атрибуты shape и coords определяют область карты. Оба атрибута могут быть пропущены, в этом случае область на карте будет занимать все изображение.
Атрибуты target , download , rel , hreflang , type и referrerpolicy указываются только, если задан атрибут href .
Читайте также: