Категории контента — Руководства Web-разработчика

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

Существует три типа категорий контента:

• Основные категории контента, описывающие общие для многих элементов правила;
• Категории контента для элементов форм, описывающие общие правила для элементов форм;
• Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.

Примечание: Обратите внимание: Более подробное обсуждение данных категорий контента и их сравнительных особенностей выходит за рамки данной статьи; можно обратиться к соответствующим разделам спецификации HTML (на английском).

Метаданные

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

Элементами метаданных являются: <base>, Этот API вышел из употребления и его работа больше не гарантируется.<command>, <link>, <meta>, <noscript>, <script>, <style> и <title>.

Основной поток

Элементы основного потока обычно содержат текст и встроенный контент.

<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, Этот API вышел из употребления и его работа больше не гарантируется. <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <header>, <hgroup>, <hr>, <i> (en-US), <iframe> (en-US), <img>, <input>, <ins>, <kbd>, «>
Deprecated
<keygen> (en-US), <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object> (en-US), <ol>, <output>, <p>, <pre>, <progress>, <q> (en-US), <ruby>, <s> (en-US), <samp> (en-US), <script>, <section>, <select>, <small> (en-US), <span>, <strong>, <sub> (en-US), <sup> (en-US), <svg>, <table> (en-US), <template>, <textarea> (en-US), <time>, <ul>, <var> (en-US), <video>, <wbr> и Текст.

Несколько других элементов, которые тоже принадлежат к этому типу, но требуют определённых условий:

• <area>, только внутри элемента <map>
• <link>, при наличии атрибута itemprop (en-US)
• <meta>, при наличии атрибута itemprop (en-US)
• <style>, при наличии атрибута scoped

Секционный контент

Подобные элементы создают секции (блоки) в текущей структуре документа, определяющие область действия заголовочного контента и элементов <header> и <footer>

К этой категории принадлежат элементы <article>, <aside>, <nav> и <section>.

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

Заголовочный контент

Заголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.

Данной категории принадлежат такие элементы, как <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US) и <hgroup>.

Примечание: Элемент <header> сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.

Примечание: Стоит заметить, что элемент <hgroup> был удалён из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.

Фразовый контент

Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.

К данной категории принадлежат следующие элементы: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, Этот API вышел из употребления и его работа больше не гарантируется.<command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i> (en-US), <iframe> (en-US), <img>, <input>, <kbd>,
Deprecated
<keygen> (en-US), <label>, <mark>, <math>, <meter>, <noscript>, <object> (en-US), <output>, <progress>, <q> (en-US), <ruby>, <samp> (en-US), <script>, <select>, <small> (en-US), <span>, <strong>, <sub> (en-US), <sup> (en-US), <svg>, <textarea> (en-US), <time>, <var> (en-US), <video>, <wbr> и обычный текст (не только состоящий из символов пробелов).

Ещё несколько элементов входят в данную категорию при соблюдении особых условий:

• <a>, если содержит в себе только фразовый контент
• <area>, только внутри элемента <map>
• <del>, если содержит в себе только фразовый контент
• <ins>, если содержит в себе только фразовый контент
• <link>, при наличии атрибута itemprop (en-US)
• <map>, если содержит в себе только фразовый контент
• <meta>, при наличии атрибута itemprop (en-US)

Встроенный контент

Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: <audio>, <canvas>, <embed>, <iframe> (en-US), <img>, <math>, <object> (en-US), <svg>, <video>.

Интерактивный контент

К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем. В данную категорию входят <a>, <button>, <details>, <embed>, <iframe> (en-US),
Deprecated
<keygen> (en-US), <label>, <select> и <textarea> (en-US).
Некоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:

• <audio>, если указан атрибут controls
• <img>, если указан атрибут usemap
• <input>, если атрибут type не скрыт
• <menu>, если атрибут type имеет значение toolbar
• <object> (en-US), если указан атрибут usemap (en-US)
• <video>, если указан атрибут controls

Явный контент

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

Контент форм

Контент форм включает в себя элементы, у которых есть владелец формы, обозначенный атрибутом form. Владельцем формы является либо элемент <form>, либо элемент, id которого указан в атрибуте form.

• <button>
• <fieldset>
• <input>
• 
  Deprecated
  <keygen> (en-US)
• <label>
• <meter>
• <object> (en-US)
• <output>
• <progress>
• <select>
• <textarea> (en-US)

Данная категория включает несколько подкатегорий:

listed

Элементы, перечисленные в IDL коллекциях form. elements (en-US) и fieldset.elements. Включают <button>, <fieldset>, <input>,
Deprecated
<keygen> (en-US), <object> (en-US), <output>, <select>, и <textarea> (en-US).

labelable

Элементы, которые могут ассоциироваться с элементами <label>. Включают <button>, <input>,
Deprecated
<keygen> (en-US), <meter>, <output>, <progress>, <select> и <textarea> (en-US).

submittable

Элементы, которые могут использоваться для построения набора данных формы при отправке на сервер. Включают <button>, <input>,
Deprecated
<keygen> (en-US), <object> (en-US), <select> и <textarea> (en-US).

resettable

Элементы, которые могут быть затронуты при сбросе данных формы. Включают <input>,
Deprecated
<keygen> (en-US), <output>,<select> и <textarea> (en-US).

Существуют некоторые вторичные классификации элементов, о которых тоже полезно знать.

Элементы поддержки скриптов

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

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

• <script>
• <template>

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

Например, элементы <del> и <ins> являются прозрачными:

<p>Мы почитаем следующие истины <del><em>священными &amp; неоспоримыми</em></del> <ins>само собой разумеющимися</ins>.</p>

Если удалить эти элементы, данный фрагмент всё равно будет представлять собой валидный HTML.

<p>Мы почитаем следующие истины <em>священными &amp; неоспоримыми</em> само собой разумеющимися.</p>

Корень задания разделов.

Last modified: 21 окт. 2022 г. , by MDN contributors

Введение в HTML5

❮ Назад

Вперед ❯

HTML5 — не просто очередная версия языка гипертекстовой разметки (HTML), а новая открытая платформа (Web Applications 1.0), предназначенная для создания более мощных веб сайтов и приложений, которые поддерживают мультимедийный контент, умеют работать с программными интерфейсами, взаимодействовать с формами, структурировать документы и т.д.

Среди основных преимуществ HTML5 необходимо отметить:

• HTML5 поддерживает SVG, canvas и прочую виртуальную векторную графику поддерживаются в HTML5. В ранних версиях использование векторной графики было возможно только в сочетании с такими технологиями, как Flash, VML и т.д.
• Код стал простым и более доступным для понимания за счет появления новых и улучшения семантические роли существующих элементов. К примеру, большинство используемых ранее контейнеров div были заменены на семантические элементы section, article, nav и header, которые позволяют лучше структурировать содержимое страницы.
• Появилась поддержка геолокации, что позволяет определять местонахождение пользователя.
• Расширились возможности проигрывания мультимедийного контента (аудио, видео), что позволяет пользователям проигрывать аудио, видео или анимацию непосредственно в браузере, не устанавливая специальные приложения (FlashPlayer), утилиты или плагины.
• Появилась поддержка локального хранилища (localStorage), что позволяет хранить данные не только в кэше браузера, но и в базе данных SQL. Объект localStorage — часть глобального пространства имен и при использовании скриптов доступен из любого места.
• В HTML5 поддерживается функция веб-приложений, а это значит, что браузеры могут функционировать в качестве платформы для приложений.

В HTML5 контент страницы можно разделить на смысловые группы, которые характеризуют содержимое веб-страницы. Эти группы получили название контентных моделей (content model). Каждая модель описывает тип содержимого элемента. Содержимым элемента является текст и дочерние элементы. Элемент может принадлежать как к одной, так и к нескольким категориям.

В HTML5 различают следующие категории контента:

• Метаданные (Meta Data)
• Потоковый контент (Flow)
• Секционный контент (Sectioning)
• Заголовочный контент (Heading)
• Текстовой контент (Phrasing)
• Встроенный контент (Embedded)
• Интерактивный контент (Interactive)
• Явный контент (Palpable)

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

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

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

Метаданные

К метаданным относят элементы, которые содержат дополнительную информацию об HTML-документе, связывают его с другими документами (например, таблицами стилей css), определяют внешний вид или поведение контента на странице. На странице метаданные не отображаются.

Элементами метаданных являются:
<base> ,
<link> ,
<meta>,
<noscript>,
<script>,
<style>,
<template> и
<title>.

Потоковый контент

К потоковому содержимому относят большинство элементов, которые используются в теле документа (между тегами <body></body>) или веб-приложения относятся к потоковому контенту.

<a>,
<abbr>,
<address>,
<article>,
<aside>,
<audio>,
<b>,
<bdi>,
<bdo>,
<blockquote>,
<br>,
<button>,
<canvas>,
<cite>,
<code>,
<data>,
<datalist>,
<del>,
<details>,
<dfn>,
<dialog>,
<div>,
<dl>,
<em>,
<embed>,
<fieldset>,
<figure>,
<footer>,
<form>,
<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>,
<header>,
<hr>,
<i>,
<iframe>,
<img>,
<input>,
<ins>,
<kbd>,
<label>,
<main>,
<map>,
<mark>,
<menu>,
<meter>,
<nav>,
<noscript>,
<object>,
<ol>,
<output>,
<p>,
<picture>,
<pre>,
<progress>,
<q>,
<ruby>,
<s>,
<samp>,
<script>,
<section>,
<select>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<svg>,
<table>,
<template>,
<textarea>,
<time>,
<u>,
<ul>,
<var>,
<video>,
<wbr>.

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

• 
  <area> только внутри элемента <map>
• 
  <link> при наличии атрибута itemprop
• 
  <meta> при наличии атрибута itemprop
• 
  <style> при наличии атрибута scoped

Секционный контент

К секционному контенту относятся элементы, которые создают отдельные секции в структуре документа, существующие независимо друг от друга, такие как заголовочная часть (header), нижний колонтитул (footer) и т.д. Отметим также, что у каждой самостоятельной секции может быть свой заголовок и оглавление (outline).

Элементами секционного содержимого являются
<article>,
<aside>,
<nav> и
<section>.

Заголовочный контент

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

К элементам заголовочного контента относятся
<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6> и
<hgroup>.

Текстовой контент

К текстовому контенту относятся элементы, определяющие текст и его формат, а именно:
<abbr>,
<audio>,
<b>,
<bdo>,
<br>,
<button>,
<canvas>,
<cite>,
<code>,
<command>,
<data>,
<datalist>,
<dfn>,
<em>,
<embed>,
<i>,
<iframe>,
<img>,
<input>,
<kbd>,
<keygen>,
<label>,
<mark>,
<math>,
<meter>,
<noscript>,
<object>,
<output>,
<progress>,
<q>,
<ruby>,
<samp>,
<script>,
<select>,
<small>
<span>,
<strong>,
<sub>,
<sup>,
<svg>,
<textarea>,
<time>,
<var>,
<video>
и <wbr>.

Указанные ниже элементы также относят к текстовым при наличии определенных условий:

• <a>, если содержит только текстовой контент
• <area> только внутри элемента <map>
• <del>, если содержит только текстовой контент
• <ins>, если содержит только текстовой контент
• <link> при наличии атрибута itemprop
• <map>, если содержит в себе только текстовой контент
• <meta> при наличии атрибута itemprop

Встроенный контент

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

Встроенная контентная модель содержит следующие элементы:
<audio>,
<canvas>,
<embed>,
<iframe>,
<img>,
<math>,
<object>,
<picture>,
<svg>,
<video>.

Интерактивный контент

Интерактивными считаются элементы, разработанные для взаимодействия с пользователем. К данной контентной модели относятся элементы <a>(если присутствует атрибут href),
<button>,
<details>,
<embed>,
<iframe>,
<keygen>,
<label>,
<select> и
<textarea>.

Указанные ниже элементы также относят к интерактивным при наличии определенных условий:

• <audio>, если указан атрибут controls
• <img>, если указан атрибут usemap
• <input>, если атрибут type не скрыт (hidden)
• <menu>, если значением атрибута type является toolbar
• <object>, если указан атрибут usemap
• <video>, если указан атрибут controls

Явный контент

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

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

Вторичные категории контента

Помимо основных контентных моделей существуют также вторичные категории. Это элементы поддержки скриптов ,
<script> и
<template>, которые служат для внедрения скриптов, путем либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами. Элементами поддержки скриптов являются: Элементы
<blockquote>,
<body>,
<details>,
<dialog>,
<fieldset>,
<figure> и
<td>
относят к корневым секционным. В категорию прозрачной контентной модели входят элементы <a>,
<audio>,
<canvas>,
<del>,
<ins>,
<map>,
<object> и
<video>,
которые наследуют тип содержимого родительского элемента. Помимо собственного контента они могут содержать контент, допустимый в их родительском элементе.

Встроенное содержимое — SVG 2

Встроенное содержимое — SVG 2

12.1. Обзор

Встроенное содержимое — это содержимое, которое импортирует в документ другой ресурс или содержимое из другого словаря, которое вставляется в документ.
Это то же определение, что и встроенное содержимое HTML.

SVG поддерживает встроенный контент с использованием элементов «image» и «foreignObject».

Кроме того, SVG позволяет встраивать содержимое с использованием HTML-элементов «видео», «аудио», «iframe» и «холст».

За исключением «canvas» и «foreignObject», встроенное содержимое совместимо с подсказками ресурсов для определения приоритета загрузки внешних ресурсов.

12.2. Размещение встроенного контента

Свойства геометрии x, y, width и height определяют прямоугольную область, в которой размещается встроенное содержимое.
(прямоугольник позиционирования ).
Прямоугольник позиционирования используется как ограничивающая рамка элемента;
обратите внимание, однако, что графика может выйти за пределы прямоугольника позиционирования,
в зависимости от значения свойства overflow.

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

Атрибуты размеров HTML должны быть проанализированы и интерпретированы.
как определено в спецификации HTML [HTML].
В частности, они принимают только целочисленные значения, а не длины CSS с единицами измерения.
На элементе «холст»
атрибуты немного отличаются:
они влияют на отображаемое растровое изображение, а не только на его макет.

Свойства геометрии x и y
может быть установлен только для элементов с пространством имен HTML через CSS.

Когда встроенный контент состоит из одного ссылочного ресурса
(например, «изображение», «видео» или «холст»),
размеры прямоугольника позиционирования,
в текущей системе координат после применения всех преобразований,
определить указанный размер встроенного объекта.
Конкретный размер объекта и конечное положение должны быть определены для объекта с помощью
Алгоритм определения размера по умолчанию
определено для замененных элементов в макете CSS [css-images-3].
Подгонка объекта и положение объекта влияют на окончательный результат.
положение и размер объекта,
и может привести к тому, что он выйдет за пределы прямоугольника позиционирования.
В этом случае свойство переполнения определяет, будет ли
отображаемый объект должен быть обрезан до прямоугольника его позиционирования.

Когда встроенное содержимое состоит из фрагмента документа
(например, «чужой объект»,
«аудио» или «видео» с элементами управления, созданными пользовательским агентом,
или «видео», «аудио» или «холст», отображающий резервный HTML-контент),
прямоугольник позиционирования определяет границы
содержащий блок для размещения дочернего контента с помощью CSS.
Масштаб содержащего блока определяется в текущей системе координат,
включая все явные и неявные (например, «viewBox») преобразования.
«Внешний объект» или другой элемент, который позиционируется с использованием атрибутов макета SVG,
неявно абсолютно позиционируется для целей макета CSS.
В результате любые абсолютно позиционированные дочерние элементы
расположены относительно этого содержащего блока.
Опять же, свойство переполнения определяет
будет ли скрыто содержимое, выходящее за пределы прямоугольника позиционирования.

Нулевое значение ширины или высоты отключает визуализацию элемента и его встроенного содержимого.

Значение «авто» для ширины или высоты используется для автоматического изменения размера соответствующего элемента на основе внутренних размеров или внутреннего соотношения сторон ресурса, на который делается ссылка.
Вычисление значений с автоматическим размером следует
Алгоритм определения размера по умолчанию
определено для замененных элементов в макете CSS [css-images-3].
В частности, когда указанный ресурс не имеет внутреннего размера
(например, «iframe» или типы изображений без определенных размеров),
предполагается, что он имеет ширину 300 пикселей и высоту 150 пикселей.

Свойства позиционирования CSS (например, top и margin) не действуют при позиционировании встроенного элемента содержимого в системе координат SVG.
Однако их можно использовать для позиционирования дочерних элементов «иностранного объекта» или элемента внедрения HTML.

12.3. Элемент «изображение»

‘ изображение ’

Категории:

Графический элемент, графический элемент ссылки, визуализируемый элемент, структурно внешний элемент

Модель содержимого:

Любое количество следующих элементов в любом порядке:

• элементы анимации — ‘animate’, ‘animateMotion’, ‘animateTransform’, ‘discard’, ‘set’
• описательные элементы — ‘desc’, ‘title’, ‘metadata’

clipPath, mask, script, style

Атрибуты:

• Атрибуты aria — ‘aria-activedescendant’, ‘aria-atomic’, ‘aria-autocomplete’, ‘aria-busy’, ‘aria- проверено», «aria-colcount», «aria-colindex», «aria-colspan», «aria-controls», «aria-current», «aria-describedby», «aria-details», «aria-disabled» , ‘aria-dropeffect’, ‘aria-errormessage’, ‘aria-expanded’, ‘aria-flowto’, ‘aria-grabbed’, ‘aria-haspopup’, ‘aria-hidden’, ‘aria-invalid’, ‘ aria-keyshortcuts’, ‘aria-label’, ‘aria-labelledby’, ‘aria-level’, ‘aria-live’, ‘aria-modal’, ‘aria-multiline’, ‘aria-multiselectable’, ‘aria- ориентация», «ария-владеет», «ария-заполнитель», «ария-позинсет», «ария-нажата», «ария-только для чтения», «ария-релевантная», «ария-требуется», «ария-рольописание» , ‘aria-rowcount’, ‘aria-rowindex’, ‘aria-rowspan’, ‘aria-selected’, ‘aria-setsize’, ‘aria-sort’, ‘aria-valuemax’, ‘aria-valuemin’, ‘aria -valuenow’, ‘aria-valuetext’, ‘роль’
• основные атрибуты — ‘id’, ‘tabindex’, ‘lang’, ‘xml:space’, ‘class’, ‘style’
• атрибуты условной обработки — ‘requiredExtensions’, ‘systemLanguage’
• глобальные атрибуты событий — ‘ oncancel», «oncanplay», «oncanplaythrough», «onchange», «onclick», «onclose», «oncuechange», «ondblclick», «ondrag», «ondragend», «ondragenter», «ondragexit», «ondragleave» , ‘ondragover’, ‘ondragstart’, ‘ondrop’, ‘ondurationchange’, ‘опустошение’, ‘окончание’, ‘onerror’, ‘onfocus’, ‘oninput’, ‘oninvalid’, ‘onkeydown’, ‘onkeypress’, ‘ onkeyup», «onload», «onloadeddata», «onloadedmetadata», «onloadstart», «onmousedown», «onmouseenter», «onmouseleave», «onmousemove», «onmouseout», «onmouseover», «onmouseup», «onmousewheel» , ‘onpause’, ‘onplay’, ‘onplaying’, ‘onprogress’, ‘onratechange’, ‘onreset’, ‘onresize’, ‘onscroll’, ‘onseeked’, ‘onseeking’, ‘onselect’, ‘onshow’, ‘ onstalled», «onsubmit», «onsuspend», «ontimeupdate», «ontoggle», «onvolumechange», «onwaiting»
• атрибуты событий элемента документа — ‘oncopy’, ‘oncut’, ‘onpaste’
• графические атрибуты событий — ‘onfocusin’, ‘onfocusout’
• устаревшие атрибуты xlink — ‘xlink:href’, ‘xlink:title’
• presentation attributes —
• ‘preserveAspectRatio’
• ‘href’
• ‘crossorigin’

Geometry properties:

• x
• y
• width
• height

DOM Interfaces:

• SVGImageElement

Элемент «изображение»
указывает, что содержимое полного файла должно быть
отображается в заданный прямоугольник в текущем пользователе
система координат. Элемент «изображение» может относиться к растру.
файлы изображений, такие как PNG или JPEG, или файлы с типом MIME
«изображение/svg+xml». Соответствие SVG
зрители должны поддерживать как минимум форматы PNG, JPEG и SVG
файлы.
Файлы SVG должны обрабатываться в безопасном анимированном режиме.
если текущий документ поддерживает анимацию,
или в безопасном статическом режиме, если текущий документ является статическим.

Результатом обработки «изображения» всегда является четырехканальный
Результат RGBA. Когда «образ»
элемент ссылается на изображение (такое как многие PNG или JPEG
файлы), который имеет только три канала (RGB), то эффект
как если бы объект был преобразован в 4-канальное изображение RGBA
с альфа-каналом, равным 1. Для одноканального (оттенки серого)
растровое изображение, эффект такой, как если бы объект был преобразован
в 4-канальное изображение RGBA, где один канал из
ссылочный объект используется для вычисления трех цветовых каналов
и альфа-канал равномерно установлен на 1,

Атрибут preserveAspectRatio
определяет, как ссылочное изображение масштабируется и позиционируется, чтобы соответствовать
в размер конкретного объекта, определяемый из
прямоугольник позиционирования и свойства object-fit и object-position.
Результат применения этого атрибута определяет прямоугольник рендеринга изображения
используется для реального рендеринга изображения.
Когда ссылочное изображение является SVG,
прямоугольник рендеринга изображения определяет
область просмотра SVG, используемая для рендеринга этого SVG.

Расчеты «preserveAspectRatio»
применяются после определения размера конкретного объекта,
и имеют эффект только в том случае, если этот размер не соответствует
собственное соотношение сторон встроенного изображения.
Если используется значение объектной подгонки,
гарантирует, что размер конкретного объекта соответствует внутреннему соотношению сторон
(т. е. любое значение, отличное от заполнения по умолчанию),
тогда значение «preserveAspectRatio» не будет иметь никакого значения;
прямоугольник рендеринга изображения будет определяться
при масштабировании и позиционировании объекта с помощью CSS.
Поэтому атрибут preserveAspectRatio можно безопасно использовать.
как запасной вариант для большинства значений object-fit и object-position;
он должен быть явно установлен равным none
чтобы отключить управление соотношением сторон, независимо от значения подгонки объекта.

Соотношение сторон, используемое при
оценка атрибута preserveAspectRatio
определяется внутренним соотношением сторон ссылочного контента.
Для файла SVG соотношение сторон определяется
в свойствах внутреннего размера содержимого SVG».
Для большинства растровых изображений (PNG, JPEG) ширина и высота файла изображения в пикселях
определить внутреннее соотношение сторон.
Если встроенное изображение не имеет внутреннего соотношения сторон
(например, файл SVG без атрибута «viewBox» и явных размеров для
самый внешний элемент svg) атрибут «preserveAspectRatio»
игнорируется;
встроенное изображение рисуется так, чтобы заполнить прямоугольник позиционирования, определяемый свойствами геометрии
на элементе «изображение».

Например, если элемент изображения ссылается на PNG или JPEG
и saveAspectRatio=»xMinYMin
встречаются», то соотношение сторон растра будет
сохраняется (что означает, что коэффициент масштабирования изображения
координаты к текущим координатам пользовательского пространства будут одинаковыми
как для X, так и для Y), размер растра будет таким большим, как
возможно, гарантируя, что весь растр помещается в пределах
окно просмотра, а верхняя/левая часть растра будет выровнена по
верхняя/левая часть области просмотра, как определено атрибутами x, y, ширина и высота элемента «изображение». Если значение
«preserveAspectRatio» было «нет»
тогда соотношение сторон изображения не будет сохранено.
изображение будет подогнано таким образом, что верхний/левый угол
растр точно совпадает с координатой (x, y) и нижним/правым углом
растр точно совпадает с координатой (x+ширина, y+высота).

Для элементов «изображение», включающих изображение SVG,
атрибут preserveAspectRatio в корне
элемент в указанном изображении SVG должен игнорироваться,
и вместо этого обрабатываются так, как если бы оно не имело значения none.
(подробности см. в разделе «preserveAspectRatio»).
Это гарантирует, что атрибут preserveAspectRatio на
ссылка на «изображение» имеет предполагаемый эффект,
даже если его нет.

Когда значение атрибута «preserveAspectRatio» на «изображении»
не нет,
прямоугольник рендеринга изображения определяется
из свойств элемента «изображение»
будет точно соответствовать внутреннему соотношению сторон встроенного SVG.
Игнорирование атрибута preserveAspectRatio из встроенного SVG
поэтому обычно не будет иметь никакого эффекта.
Исключением является, если соотношение сторон этого изображения
определяется из абсолютных значений атрибутов ширины и высоты
который не соответствует соотношению сторон его «viewBox».
Это необычная ситуация, которую авторам рекомендуется избегать по многим причинам.

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

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

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

Чтобы создать ссылку на конкретный вид встроенного изображения SVG,
авторы могут использовать медиафрагменты, как определено в разделе Связывание с содержимым SVG.
Чтобы обрезать определенный участок растрового изображения,
авторы могут использовать основных идентификаторов медиафрагментов [URI фрагментов мультимедиа 1.0 (базовый)].
Любой тип фрагмента может повлиять на внутренние размеры и/или внутреннее соотношение сторон изображения.

Ресурс, на который ссылается элемент «изображение», представляет собой
отдельный документ, который генерирует собственное дерево синтаксического анализа и
объектная модель документа (если ресурс представляет собой XML). Таким образом, есть
отсутствие наследования свойств в образ.

В отличие от «use», элемент «image» не может ссылаться
элементы в файле SVG.

Определений атрибутов:

Имя	Значение	Исходное значение	Анимация
перекрестное происхождение	[анонимно | использовать-учетные данные]?	(см. определение атрибута HTML)	да

Атрибут crossorigin является атрибутом настроек CORS и, если не указано иное, следует тем же правилам обработки, что и в HTML [HTML].

Имя	Значение	Исходное значение	Анимация
ссылка	URL-адрес [URL-адрес]	(нет)	да

URL-ссылка
определение изображения для рендеринга.
Обратитесь к общей обработке, определенной для атрибутов ссылок URL, и
устаревшие атрибуты XLink.

URL-адрес обрабатывается, и ресурс извлекается
как описано в главе Связывание.

 w3.org/2000/svg">
  Это изображение ссылается на внешнее изображение
  
  <изображение х="200" у="200"
         href="myimage.png">
    
  

 

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

Пример recursive-image

Посмотреть этот пример как SVG (только браузеры с поддержкой SVG)

12.4. Элементы HTML в поддеревьях SVG

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

• «видео»
• ‘аудио’
• ‘iframe’
• ‘холст’

  w3.org/1999/xhtml">
  
  
 

HTML-элементы в пространстве имен HTML, используемые в качестве дочерних элементов «видео», «аудио», «iframe» и «холст» внутри фрагмента документа SVG, ведут себя так, как указано в HTML. Это относится, в частности, к резервному контенту;
если отрисовывается резервный контент,
встроенный элемент ведет себя как элемент SVG «foreignObject», содержащий HTML-контент.
Это произойдет, например,
для элемента «видео», если пользовательский агент не поддерживает указанные форматы видео,
или для элемента «холст», если скрипты отключены.

Спецификация HTML применима также к элементам «дорожка» и «источник».

  w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
  
    
    
  
 

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

• Сериализация XML, распознающая объявления пространств имен (например, автономные SVG или XHTML).
• Элементы с пространством имен, созданные с помощью метода createElementNS DOM API.
• Элемент «foreignObject» для переноса элементов с пространством имен HTML, которые затем будут правильно проанализированы.

Другие элементы HTML в поддереве SVG,
за исключением тех, что находятся внутри элемента «foreignObject»,
должны рассматриваться как неизвестные элементы для целей рендеринга.

Многие элементы HTML будут рассматриваться парсером HTML как ошибка синтаксического анализа,
вызывая завершение фрагмента SVG.

12.5. Элемент «чужой объект»

‘ постороннийОбъект ’

Категории:

Графический элемент, отображаемый элемент, структурно внешний элемент

Модель содержимого:

Любые элементы или символьные данные.

Атрибуты:

• атрибуты aria — ‘aria-activedescendant’, ‘aria-atomic’, ‘aria-autocomplete’, ‘aria-busy’, ‘aria-checked’, ‘aria-colcount’, ‘aria- colindex», «aria-colspan», «aria-controls», «aria-current», «aria-describedby», «aria-details», «aria-disabled», «aria-dropeffect», «aria-errormessage» , ‘aria-expanded’, ‘aria-flowto’, ‘aria-grabbed’, ‘aria-haspopup’, ‘aria-hidden’, ‘aria-invalid’, ‘aria-keyshortcuts’, ‘aria-label’, ‘ aria-labelledby’, ‘aria-level’, ‘aria-live’, ‘aria-modal’, ‘aria-multiline’, ‘aria-multiselectable’, ‘aria-ориентация’, ‘aria-владеет’, ‘aria- заполнитель», «aria-posinset», «aria-pressed», «aria-readonly», «aria-relevant», «aria-required», «aria-roledescription», «aria-rowcount», «aria-rowindex» , ‘aria-rowspan’, ‘aria-selected’, ‘aria-setsize’, ‘aria-sort’, ‘aria-valuemax’, ‘aria-valuemin’, ‘aria-valuenow’, ‘aria-valuetext’, ‘ роль’
• основные атрибуты — ‘id’, ‘tabindex’, ‘lang’, ‘xml:space’, ‘class’, ‘style’
• атрибуты условной обработки — ‘requiredExtensions’, ‘systemLanguage’
• глобальные атрибуты событий — ‘ oncancel», «oncanplay», «oncanplaythrough», «onchange», «onclick», «onclose», «oncuechange», «ondblclick», «ondrag», «ondragend», «ondragenter», «ondragexit», «ondragleave» , ‘ondragover’, ‘ondragstart’, ‘ondrop’, ‘ondurationchange’, ‘опустошение’, ‘окончание’, ‘onerror’, ‘onfocus’, ‘oninput’, ‘oninvalid’, ‘onkeydown’, ‘onkeypress’, ‘ onkeyup», «onload», «onloadeddata», «onloadedmetadata», «onloadstart», «onmousedown», «onmouseenter», «onmouseleave», «onmousemove», «onmouseout», «onmouseover», «onmouseup», «onmousewheel» , ‘onpause’, ‘onplay’, ‘onplaying’, ‘onprogress’, ‘onratechange’, ‘onreset’, ‘onresize’, ‘onscroll’, ‘onseeked’, ‘onseeking’, ‘onselect’, ‘onshow’, ‘ onstalled», «onsubmit», «onsuspend», «ontimeupdate», «ontoggle», «onvolumechange», «onwaiting»
• атрибуты событий элемента документа — ‘oncopy’, ‘oncut’, ‘onpaste’
• графические атрибуты событий — ‘onfocusin’, ‘onfocusout’
• атрибуты представления —

Свойства геометрии:

5

y
• ширина
• высота

Интерфейсы DOM:

• SVGForeignObjectElement

SVG предназначен для совместимости с другими языками XML.
для описания и отображения других типов контента.
«Иностранный объект»
element позволяет включать элементы в пространство имен, отличное от SVG, которое
визуализируется в области изображения SVG с использованием других процессов пользовательского агента.
включенный иностранный графический контент подлежит SVG
преобразования, фильтры, отсечение, маскирование и композитинг.
Примеры включают
вставка выражения MathML в
рисунок SVG [MathML3],
или добавление блока сложного HTML-текста в формате CSS или входных данных формы.

Парсер HTML обрабатывает элементы внутри «foreignObject».
эквивалентны элементам внутри фрагмента HTML-документа.
Любой элемент svg или math ,
и их потомки,
будет проанализировано как находящееся в пространстве имен SVG или MathML соответственно;
все остальные теги будут проанализированы как принадлежащие пространству имен HTML.

Элементы с пространством имен SVG внутри «foreignObject» не будут отображаться,
за исключением ситуации, когда правильно определенный SVG
фрагмент, включая корневой элемент «svg»
определяется как потомок «иностранного объекта».

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

Эта спецификация не определяет, как «requiredExtensions»
значения должны быть сопоставлены для поддержки различных языков XML;
будущая спецификация может сделать это.

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

Ожидается, что коммерческие веб-браузеры
поддержка возможности встраивания SVG
HTML в формате CSS, а также содержимое MathML,
с отображаемым содержимым, подлежащим преобразованиям и компоновке, определенным во фрагменте SVG.
В настоящее время такая возможность не является обязательным требованием.

В этом абзаце требуется перенос слов
      
    
    
    
      Вот абзац, который
      требуется перенос слов.
    
  

 

12.6. Интерфейсы DOM

12.6.1. Интерфейс SVGImageElement

Объект SVGImageElement представляет элемент «изображение» в DOM.

 [Открытое=Окно]
интерфейс  SVGImageElement  : SVGGraphicsElement {
  [SameObject] атрибут только для чтения SVGAnimatedLength x;
  [SameObject] атрибут только для чтения SVGAnimatedLength y;
  [SameObject] ширина атрибута SVGAnimatedLength только для чтения;
  [SameObject] атрибут только для чтения SVGAnimatedLength высота;
  [SameObject] атрибут только для чтения SVGAnimatedPreserveAspectRatio saveAspectRatio;
  атрибут DOMString? кроссПроисхождение;
};
SVGImageElement включает SVGURIReference; 

х ,
и ,
ширина и
высота атрибуты IDL
отражают вычисленные значения x, y, ширины и
свойства высоты и соответствующие им
атрибуты представления соответственно.

сохранить соотношение сторон
Атрибут IDL отражает атрибут содержимого «preserveAspectRatio».

Атрибут crossOrigin IDL
отражает атрибут контента crossorigin.

12.6.2. Интерфейс SVGForeignObjectElement

Объект SVGForeignObjectElement представляет собой «внешний объект».
в ДОМ.

 [Открытое=Окно]
интерфейс  SVGForeignObjectElement  : SVGGraphicsElement {
  [SameObject] атрибут только для чтения SVGAnimatedLength x;
  [SameObject] атрибут только для чтения SVGAnimatedLength y;
  [SameObject] ширина атрибута SVGAnimatedLength только для чтения;
  [SameObject] атрибут только для чтения SVGAnimatedLength высота;
}; 

х ,
и ,
ширина и
высота IDL-атрибуты
отражают вычисленные значения x, y, ширины и
свойства высоты и соответствующие им
атрибуты представления соответственно.

&двоеточие; Элемент Embed External Content — HTML: Язык гипертекстовой разметки

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

Примечание: В этом разделе документируется только тот элемент, который определен как часть HTML Living Standard. Он не касается более ранней нестандартной реализации элемента.

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

Категории контента	Потоковое содержание, фразовый контент, встроенный контент, интерактивный контент, ощутимое содержание.
Разрешенный контент	Нет; это пустой элемент.
Отсутствие тега	Должен иметь начальный тег и не иметь конечного тега.
Разрешенные родители	Любой элемент, принимающий встроенное содержимое.
Неявная роль ARIA	Нет соответствующей роли
Разрешенные роли ARIA	приложение , документ , изображение , нет , презентация
Интерфейс DOM	HTMLEmbedElement

Атрибуты этого элемента включают глобальные атрибуты.

высота

Отображаемая высота ресурса в пикселях CSS. Это должно быть абсолютное значение; проценты не разрешены .

источник

URL-адрес внедряемого ресурса.

тип

Тип MIME, используемый для выбора подключаемого модуля для создания экземпляра.

ширина

Отображаемая ширина ресурса в пикселях CSS. Это должно быть абсолютное значение; проценты не разрешены .

Свойство object-position можно использовать для настройки положения встроенного объекта в фрейме элемента, а свойство object-fit — для управления тем, как регулируется размер объекта, чтобы он соответствовал фрейму.

 <вставить
  тип = "видео/быстрое время"
  src="movie.mov"
 
 
  title="Название моего видео" />
 

Используйте атрибут title элемента embed , чтобы пометить его содержимое, чтобы люди, использующие вспомогательные технологии, такие как программа чтения с экрана, могли понять, что он содержит. Значение заголовка должно кратко описывать встроенный контент. Без названия они не смогут определить встроенный контент. Этот сдвиг контекста может сбивать с толку и отнимать много времени, особенно если элемент embed содержит интерактивный контент, такой как видео или аудио.

This entry was posted in Популярное