diff options
Diffstat (limited to 'files/ru/web/html/element/img/index.html')
| -rw-r--r-- | files/ru/web/html/element/img/index.html | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html index 86e976ef18..a8434854db 100644 --- a/files/ru/web/html/element/img/index.html +++ b/files/ru/web/html/element/img/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/img <p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> -<p>Приведенный выше пример показывает очень простое использование элемента <code><img></code>. Атрибут <code>src</code> обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут <code>alt</code> содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.</p> +<p>Приведённый выше пример показывает очень простое использование элемента <code><img></code>. Атрибут <code>src</code> обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут <code>alt</code> содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.</p> <p>Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:</p> @@ -40,7 +40,7 @@ translation_of: Web/HTML/Element/img <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Встроенный_контент">встроенный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>. Если элемент имеет атрибут <code>usemap</code>, он так же принадлежит к категории <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного контента</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Никакое, так как это {{Glossary("empty element", "пустой элемент")}}.</td> </tr> <tr> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/img <td>Должен иметь открывающий тег и не должен иметь закрывающий.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td> </tr> <tr> @@ -100,7 +100,7 @@ translation_of: Web/HTML/Element/img <dl> <dt>{{htmlattrdef("alt")}}</dt> <dd> - <p>Этим атрибутом задается альтернативное текстовое описание изображения.</p> + <p>Этим атрибутом задаётся альтернативное текстовое описание изображения.</p> <div class="note"> <p><strong>Заметка:</strong> Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или <a href="#Supported_image_formats">неподдерживаемый тип</a>. В этих случаях браузер может заменить изображение текстом записанным в атрибуте <code>alt</code> элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте <code>alt</code>.</p> @@ -112,7 +112,7 @@ translation_of: Web/HTML/Element/img </dd> <dt>{{htmlattrdef("crossorigin")}}</dt> <dd> - <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. <a href="/en-US/docs/Web/HTML/CORS_enabled_image">Изображения с включенной поддержкой CORS</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорченными</a>". Допустимые значения:</p> + <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. <a href="/en-US/docs/Web/HTML/CORS_enabled_image">Изображения с включённой поддержкой CORS</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорченными</a>". Допустимые значения:</p> <ul> <li><code>anonymous</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено;</li> @@ -150,7 +150,7 @@ translation_of: Web/HTML/Element/img <p>Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.</p> <div class="note"> - <p><strong>Заметка:</strong> Этот атрибут разрешен, только если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p> + <p><strong>Заметка:</strong> Этот атрибут разрешён, только если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p> </div> </dd> <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> @@ -161,16 +161,16 @@ translation_of: Web/HTML/Element/img <li><code>no-referrer</code>: Заголовок {{httpheader("Referer")}} не будет отправлен;</li> <li><code>no-referrer-when-downgrade</code>: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;</li> <li><code>origin</code>: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};</li> - <li><code>origin-when-cross-origin</code>: Переход на другие источники ограничит включенные реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;</li> - <li><code>unsafe-url</code>: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищенных {{glossary("TLS")}}, к незащищенным источникам.</li> + <li><code>origin-when-cross-origin</code>: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;</li> + <li><code>unsafe-url</code>: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых {{glossary("TLS")}}, к незащищённым источникам.</li> </ul> </dd> <dt>{{htmlattrdef("sizes")}}</dt> <dd> - <p>Список из одного или нескольких строк, разделенных запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p> + <p>Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p> <ol> - <li>Условия меда-запроса. Оно должно быть пропущено для последнего элемента.</li> + <li>Условия мёда-запроса. Оно должно быть пропущено для последнего элемента.</li> <li>Значения размера источника.</li> </ol> @@ -180,13 +180,13 @@ translation_of: Web/HTML/Element/img <dd>{{glossary("URL")}} изображения. Этот атрибут является обязательным для элемента <code><img></code>. В браузерах, поддерживающих <code>srcset</code>, <code>src</code> обрабатывается как изображение-кандидат с дескриптором плотности пикселей <code>1x</code>, если только изображение с этим дескриптором уже не определено в <code>srcset</code> или если <code>srcset</code> не содержит дескрипторы '<code>w</code>'.</dd> <dt>{{htmlattrdef("srcset")}}</dt> <dd> - <p>Список из одной или нескольких строк, разделенных запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:</p> + <p>Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:</p> <ol> <li>{{glossary("URL")}} изображения.</li> <li>Необязательного, пробела, сопровождаемого: <ul> - <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчета эффективной плотности пикселей;</li> + <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчёта эффективной плотности пикселей;</li> <li>дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '<code>x</code>'.</li> </ul> </li> @@ -196,7 +196,7 @@ translation_of: Web/HTML/Element/img <p>Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте <code>srcset</code>. Повторение дескрипторов (например, два источника в одном <code>srcset</code> с одинаковым дескриптором '<code>2x</code>') так же является недопустимым.</p> - <p>{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на свое усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>" для примера.</p> + <p>{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>" для примера.</p> </dd> <dt>{{htmlattrdef("width")}}</dt> <dd>Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd> @@ -234,7 +234,7 @@ translation_of: Web/HTML/Element/img <p>Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или {{htmlattrxref("id")}} элемента.</p> <div class="note"> - <p><strong>Заметка:</strong> Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, но был удален из <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">живого стандарта HTML</a> от {{glossary("WHATWG")}}. У него неопределенное будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a> или <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>.</p> + <p><strong>Заметка:</strong> Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, но был удалён из <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">живого стандарта HTML</a> от {{glossary("WHATWG")}}. У него неопределённое будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a> или <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>.</p> </div> </dd> <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> @@ -306,7 +306,7 @@ translation_of: Web/HTML/Element/img <h3 id="Создание_значимых_альтернативных_описаний">Создание значимых альтернативных описаний</h3> -<p>Значение атрибута <code>alt</code> должно четко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут <code>alt</code> намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.</p> +<p>Значение атрибута <code>alt</code> должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут <code>alt</code> намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.</p> <h4 id="Плохо">Плохо</h4> |