diff options
Diffstat (limited to 'files/ru/web/html')
137 files changed, 25594 insertions, 0 deletions
diff --git a/files/ru/web/html/applying_color/index.html b/files/ru/web/html/applying_color/index.html new file mode 100644 index 0000000000..f4bd383bf8 --- /dev/null +++ b/files/ru/web/html/applying_color/index.html @@ -0,0 +1,520 @@ +--- +title: Применение цвета к HTML элементам с помощью CSS +slug: Web/HTML/Applying_color +translation_of: Web/HTML/Applying_color +--- +<div>{{HTMLRef}}</div> + +<div> +<p>Использование цвета - одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом еще до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет - одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью <span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a></span>, существует множество способов присвоить цвет <a href="/en-US/docs/Web/HTML">HTML</a> элементам, чтобы придать им желаемый вид. <span class="seoSummary">Эта статья дает базовые представления о всех способах </span>применения цвета к HTML элементам с помощью CSS<span class="seoSummary">.</span></p> +</div> + +<p>К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.</p> + +<p>Мы затронем большинство из того, что нужно знать при использовании цвета, включая {{anch("Что может иметь цвет", "список элементов, которые могут иметь цвет, и необходимые для этого CSS свойства")}}, {{anch("Как задать цвет", "как задать цвет")}}, и как {{anch("Использование цвета", "использовать его в таблицах стилей и в JS скриптах")}}. Мы также рассмотрим как {{anch("Предоставляем возможность пользователю выбрать цвет", "предоставить возможность пользователю выбрать цвет")}}. </p> + +<p>Завершим мы статью размышлениями на тему как {{anch("Using color wisely", "использовать цвет с умом")}}: как выбрать подходящий цвет, учитывая потребности людей с различными визуальными способностями.</p> + +<h2 id="Что_может_иметь_цвет">Что может иметь цвет</h2> + +<p>На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет. </p> + +<p>На фундаментальном уровне, свойство {{cssxref ("color")}} определяет цвет текста HTML элемента, а свойство {{cssxref ("background-color")}} - цвет фона элемента. Они работают практически для всех элементов.</p> + +<h3 id="Текст">Текст</h3> + +<p>Эти свойства используются для определения цвета текста, его фона и любого оформления текста.</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>Свойство color применяется к тексту и любому <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">оформлению текста</a>, например: подчеркивание, линии на текстом, перечеркивание и т.д.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>Цвет фона текста.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd> + <p>Добавляет и устанавливает параметры тени для текста. Один из параметров тени - это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}}, чтобы узнать больше.</p> + </dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd> + <p>По умолчанию, элементы оформление текста (подчеркивание, перечеркивание) используют цвет свойства <code>color</code>. Но вы можете присвоить другой цвет с помощью свойства <code>text-decoration-color</code>.</p> + </dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd> + <p>Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.</p> + </dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd> + <p>Цвет, который используется для каретки ({{Glossary("caret")}}) (курсора ввода текста). Применимо только к редактируемым элементам, таким как {{HTMLElement ("input")}} и {{HTMLElement ("textarea")}} или элементам , для которых установлен атрибут {{htmlattrxref ("contenteditable")}}.</p> + </dd> +</dl> + +<h3 id="Блоки">Блоки</h3> + +<p>Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.</p> + +<dl> + <dt>{{cssxref("Borders")}}</dt> + <dd>См. раздел {{anch("Borders")}} с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>Цвет фона блока.</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>Цвет линий, которые разделяют колонки текста.</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>Цвет контура, вокруг границы элемента. <span style="letter-spacing: -0.00278rem;">Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. </span><span style="letter-spacing: -0.00278rem;">Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.</span></dd> +</dl> + +<h3 id="Границы">Границы</h3> + +<p>Вокруг любого элемента можно создать <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">границу</a>, т.е. линию вокруг содержимого элемента. См. {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}}, чтобы узнать больше про отношения между элементами и их границами, и статью <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Оформляем Границы с Помощью CSS</a>, чтобы узнать больше про то, как применять стили к границам.</p> + +<p>Существует краткая запись {{cssxref("border")}}, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (<a href="/en-US/docs/Web/CSS/border-width">width</a>), стиль линии (<a href="/en-US/docs/Web/CSS/border-style">style</a>): сплошная (solid), штриховая (dashed) и так далее.</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>Задает единый цвет для всех сторон границы элемента.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> + <dd>Позволяет установить цвет соответствующей стороне границы элемента: <strong>border-left-color</strong> - левая граница, <strong>border-right-color</strong> - правая, <strong>border-top-color</strong> - верхняя, <strong>border-bottom-color</strong> - нижняя.</dd> + <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> + <dd>С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока - верхний край, а конец - нижний. Не путайте с началом и концом строки, где начало - это левый край, а конец - правый.</dd> + <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> + <dd>Эти свойства определяют цвет границы, расположеной ближе всего к началу и концу текста в блоке. <span style="letter-spacing: -0.00278rem;">Сторона начала и конца зависит от свойств </span>{{cssxref("writing-mode")}}, {{cssxref("direction")}} <span style="letter-spacing: -0.00278rem;">и </span>{{cssxref("text-orientation")}}<span style="letter-spacing: -0.00278rem;">, которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то </span><code>border-inline-start-color</code> п<span style="letter-spacing: -0.00278rem;">рименяется к правой стороне границы.</span></dd> +</dl> + +<h3 id="Как_можно_еще_использовать_цвет">Как можно еще использовать цвет</h3> + +<p>CSS не единственная web-технология, которая поддерживает цвет.</p> + +<dl> + <dt>HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Позволяет создавать растровую 2D-графику в элементе {{HTMLElement("canvas")}}. См. <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>, чтобы узнать больше.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics - Масштабируемая Векторная Графика)</dt> + <dd> + <p>Позволяет создавать изображения с помощью команд, которые рисуют определенные фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе {{HTMLElement ("img")}}, как и любое другое изображение.</p> + </dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>Библиотека Веб-Графики (The Web Graphics Library) - это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a>, чтобы узнать больше..</dd> +</dl> + +<h2 id="Как_задать_цвет">Как задать цвет</h2> + +<p>Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие "цвета" в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.</p> + +<p>Подробнее о каждом значения цвета, можно прочитать в статье про CSS {{cssxref("<color>")}}.</p> + +<h3 id="Ключевые_слова">Ключевые слова</h3> + +<p>Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (<code>red</code>), синий (<code>blue</code>), или оранжевый (<code>orange</code>)), оттенки серого (от черного (<code>black</code>) к белому (<code>white</code>), включая такие цвета как темносерый (<code>darkgray</code>) или светлосерый (<code>lightgrey</code>)), а также множество других смешаных цветов: <code>lightseagreen</code>, <code>cornflowerblue</code>, и <code>rebeccapurple</code>.</p> + +<p>См. {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} - полный перечень всех доступных ключевых слов.</p> + +<h3 id="RGB_значения">RGB значения</h3> + +<p>Есть три способа передачи RGB цвета в CSS.</p> + +<h4 id="Шестнадцатиричная_запись_в_виде_строки">Шестнадцатиричная запись в виде строки</h4> + +<p>Шестнадцатиричная запись передает цвет, используя шестнадцатричные числа, которые передают каждый компонент цвета (красный, зеленый и синий). Запись также может включать четвертый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент <em>необходимо</em> задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет расчитывается используя число каждого компонента дважды: <code>"#D"</code> превращается в <code>"#DD"</code>.</p> + +<p>Цвет в шестнадцатиричной записи всегда начинается с символа <code>"#"</code>. После него начинаются шестнадцатричные числа цветового кода. Запись не зависит от регистра.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>Задает полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатиричным числом <code>0xrr</code>, зеленого - <code>0xgg</code> и синего - <code>0xbb</code>.</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>Задает цвет, у которого компонент красного представлен шестнадцатиричным числом <code>0xrr</code>, зеленого - <code>0xgg</code> и синего - <code>0xbb</code>. Альфа канал представлен <code>0xaa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd> + <dt><code>"#rgb"</code></dt> + <dd>Задает цвет, у которого компонент красного представлен шестнадцатиричным числом <code>0xr</code>, зеленого - <code>0xg</code> и синего - <code>0xb</code>.</dd> + <dt><code>"#rgba"</code></dt> + <dd>Задает цвет, у которого компонент красного представлен шестнадцатиричным числом <code>0xr</code>, зеленого - <code>0xg</code> и синего - <code>0xb</code>. Альфа канал представлен <code>0xa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd> +</dl> + +<p>Например, вы можете представить непрозрачный ярко-синий цвет как <code>"#0000ff"</code> или <code>"#00f"</code>. Для того, чтобы сделать его на 25% прозачным, вы можете использовать <code>"#0000ff44"</code> или <code>"#00f4"</code>.</p> + +<h4 id="RGB_запись_в_виде_функции">RGB запись в виде функции</h4> + +<p>RGB запись в виде функции, как и шестнадцатиричная запись, представляет цвет, используя красный, зеленый и синий компоненты (также, опцинально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией {{cssxref("rgb()")}}. Данная функция принимает как вводные параметры значения красного, зеленого и синего компонентов и, опционально, четвертого компонента - значение альфа канала.</p> + +<p>Допустимые значения для каждого из этих параметров:</p> + +<dl> + <dt><code>red</code>, <code>green</code>, и <code>blue</code></dt> + <dd>Каждый параметр должен иметь {{cssxref("<integer>")}} значение между 0 и 255 (включительно), или {{cssxref("<percentage>")}} от 0% до 100%.</dd> + <dt><code>alpha</code></dt> + <dd>Альфа канал - это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% - 1.0.</dd> +</dl> + +<p>Например, ярко-красный с 50% прозрачностью может быть представлен как <code>rgb(255, 0, 0, 0.5)</code> или <code>rgb(100%, 0, 0, 50%)</code>.</p> + +<h3 id="HSL_запись_в_виде_функции">HSL запись в виде функции</h3> + +<p>Дизайнеры часто предпочитают использовать цветовую модель {{interwiki("wikipedia", "HSL and HSV", "HSL")}}, где H - Hue (оттенок), S - Saturation (насыщенность), L - Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция <code>hsl()</code> очень похожа на <code>rgb()</code> функцию.</p> + +<div style="padding-bottom: 20px;"> +<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> +<figcaption> +<p><em><strong>Рис. 1. Цилиндрическая модель HSL.</strong> Hue (оттенок) определяет фактический цвет, основыванный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентое соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого темного к самому светлому (от черного к белому). Изображение представлено пользователем <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> в <a href="https://www.wikipedia.org/">Wikipedia</a>, распространяется на правах лицензии <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> .</em></p> +</figcaption> +</figure> +</div> + +<p>Значение компонента <em>оттенок</em> (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через желтый, зеленый, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством {{cssxref("<angle>")}}, а именно - в градусах (<code>deg</code>), радианах (<code>rad</code>), градиентах (<code>grad</code>) или поворотах (<code>turn</code>). Но компонент <em>оттенок </em>никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.</p> + +<p>Компонент <em>насыщенность</em> (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).</p> + +<p>Подумайте об этом как о создании идеального цвета краски:</p> + +<ol> + <li>Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент <em>hue (оттенок)</em>: значение представляющее <strong>угол</strong> вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.</li> + <li>Далее выбирете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это <em>luminance/ lightness (яркость)</em>. Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к черному, или что-то среднее? Данный компонент определяется в процентах, где 0% - совершенный черный цвет и 100% - совершенный белый (независимо от насыщенности или оттенка). Средние значения - это буквальная серая область.</li> + <li>Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент <em>saturation (насыщенность) </em>определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.</li> +</ol> + +<p>Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.</p> + +<p>Вот несколько примеров цвета в HSL записи:</p> + +<div id="hsl-swatches"> +<div class="hidden"> +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} + +th, td { + border: 1px solid black; + padding:4px 6px; + text-align: left; +} + +th { + background-color: hsl(0, 0%, 75%); +}</pre> + +<pre class="brush: html"><table> + <thead> + <tr> + <th scope="col">Color in HSL notation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> +</table></pre> +</div> + +<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> +</div> + +<div class="note"> +<p>Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (<code>deg</code>).</p> +</div> + +<h2 id="Использование_цвета">Использование цвета</h2> + +<p>Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом {{anch("Что может иметь цвет")}}, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей ({{Glossary("stylesheet")}}) и добавлять, изменять цвет, используя {{Glossary("JavaScript")}} код.</p> + +<h3 id="Цвет_в_таблицах_стилей_CSS">Цвет в таблицах стилей CSS</h3> + +<p> </p> + +<p>Самый простой способ присвоить цвет элементу и то, как это обычно делается - это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.</p> + +<p>Давайте начнем наш пример с результата, который нам нужно достичь:</p> + +<p> </p> + +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>HTML, который создает вышеупоменутый пример:</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box boxLeft"> + <p> + This is the first box. + </p> + </div> + <div class="box boxRight"> + <p> + This is the second box. + </p> + </div> +</div></pre> + +<p>Все довольно просто: первый {{HTMLElement("div")}} используется как обертка (wrapper) содержимого, которое состоит из еще двух <code><div></code>, каждый из которых содержит один параграф ({{HTMLElement("p")}}) и имеет свой стиль.</p> + +<p>Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..</p> + +<h4 id="CSS">CSS</h4> + +<p>CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.</p> + +<pre class="brush: css">.wrapper { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p> </p> + +<p>Класс <code>.wrapper</code> определяет стиль для элемента {{HTMLElement("div")}}, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины {{cssxref("width")}}, высоты {{cssxref("height")}}, внешних {{cssxref("margin")}} и внутренних {{cssxref("padding")}} полей.</p> + +<p>Но больше всего нас интересует свойство граница {{cssxref("border")}}, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (<code>mediumturquoise</code>).</p> + +<p>Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс <code>.box</code>, который определит эти общие свойства:</p> + +<p> </p> + +<pre class="brush: css">.box { + width: 290px; + height: 100px; + margin: 0; + padding: 4px 6px; + font: 28px "Marker Felt", "Zapfino", cursive; + display: flex; + justify-content: center; + align-items: center; +}</pre> + +<p> </p> + +<p>Вкратце класс <code>.box</code> устанавливает размер каждого блока и параметры шрифта. Также мы используем <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a>, чтобы с легкостью отцентрировать содержимое каждого блока. Мы включаем режим <code>flex</code> с помощью {{cssxref("display", "display: flex")}}, и присваиваем значение center {{cssxref("justify-content")}} и {{cssxref("align-items")}}. Затем мы создаем отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.</p> + +<p> </p> + +<pre class="brush: css">.boxLeft { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p> </p> + +<p>Класс <code>.boxLeft</code>, который используется для стилизации левого блока, выравнивает контейнер по левому краю и присваивает цвета:</p> + +<ul> + <li>{{cssxref("background-color")}} определяет цвет фона блока значением <code>rgb(245, 130, 130)</code>.</li> + <li>{{cssxref("outline")}}, в отличие от привычного нам свойства <code>border</code>, не влияет на положение блока и его ширину. <code>Outline</code> представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово <code>darkred</code>, которое используется для определение цвета.</li> + <li>Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство {{cssxref("color")}} будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это черный цвет.</li> +</ul> + +<p> </p> + +<pre class="brush: css">.boxRight { + float: right; + background-color: hsl(270deg, 50%, 75%); + outline: 4px dashed rgb(110, 20, 120); + color: hsl(0deg, 100%, 100%); + text-decoration: underline wavy #88ff88; + text-shadow: 2px 2px 3px black; +}</pre> + +<p> </p> + +<p>Класс <code>.boxRight</code> описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:</p> + +<ul> + <li><code>background-color</code> определяется значением HSL: <code>hsl(270deg, 50%, 75%)</code>. Это светло-фиолетовый цвет.</li> + <li><code>Outline</code> блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (<code>rgb(110, 20, 120)</code>).</li> + <li>Цвет текста определяется свойством {{cssxref("color")}}, значение которого <code>hsl(0deg, 100%, 100%)</code>. Это один из многих способов задать белый цвет.</li> + <li>С помощью {{cssxref("text-decoration")}} мы добавляем зеленую волнистую линию под текстом.</li> + <li>И наконец, свойство {{cssxref("text-shadow")}} добавляет небольшую черную тень тексту.</li> +</ul> + +<h2 id="Предоставляем_возможность_пользователю_выбрать_цвет">Предоставляем возможность пользователю выбрать цвет</h2> + +<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> + +<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> + +<h3 id="Example_Picking_a_color">Example: Picking a color</h3> + +<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p> + +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> + +<div class="note"> +<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p> + +<pre class="brush: html"><div id="box"> + <label for="colorPicker">Border color:</label> + <input type="color" value="#8888ff" id="colorPicker"> + <p id="output"></p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p> + +<pre class="brush: css">#box { + width: 500px; + height: 200px; + border: 2px solid rgb(245, 220, 225); + padding: 4px 6px; + font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> + +<pre class="brush: js">let colorPicker = document.getElementById("colorPicker"); +let box = document.getElementById("box"); +let output = document.getElementById("output"); + +box.style.borderColor = colorPicker.value; + +colorPicker.addEventListener("input", function(event) { + box.style.borderColor = event.target.value; +}, false); + +colorPicker.addEventListener("change", function(event) { + output.innerText = "Color set to " + colorPicker.value + "."; +}, false);</pre> + +<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p> + +<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> + +<h2 id="Using_color_wisely">Using color wisely</h2> + +<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p> + +<h3 id="Finding_the_right_colors">Finding the right colors</h3> + +<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p> + +<h4 id="Base_color">Base color</h4> + +<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p> + +<ul> + <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> + <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> + <li>Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.</li> +</ul> + +<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p> + +<div class="note"> +<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p> +</div> + +<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4> + +<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p> + +<p>A few examples (all free to use as of the time this list was last revised):</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="http://paletton.com">Paletton</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> +</ul> + +<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p> + +<div class="note"> +<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p> +</div> + +<h3 id="Color_theory_resources">Color theory resources</h3> + +<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p> + +<dl> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> + <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd> + <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> + <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd> +</dl> + +<h3 id="Color_and_accessibility">Color and accessibility</h3> + +<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p> + +<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p> + +<div class="note"> +<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p> +</div> + +<p>For more information about color blindness, see the following articles:</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> +</ul> + +<h3 id="Palette_design_example">Palette design example</h3> + +<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p> + +<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> + +<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletteon.com/">Paletteon</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> + +<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p> + +<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li> +</ul> diff --git a/files/ru/web/html/attributes/index.html b/files/ru/web/html/attributes/index.html new file mode 100644 index 0000000000..44f61d6c8a --- /dev/null +++ b/files/ru/web/html/attributes/index.html @@ -0,0 +1,656 @@ +--- +title: Справочная информация по HTML атрибутам +slug: Web/HTML/Attributes +tags: + - HTML + - Reference + - Référence(2) + - Web + - Атрибут +translation_of: Web/HTML/Attributes +--- +<p>У элементов HTML есть <strong>атрибуты</strong>; это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей.</p> + +<h2 id="Список_атрибутов">Список атрибутов</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Имя атрибута</th> + <th>Элементы</th> + <th>Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hidden</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Предотвращает генерирование данного элемента, в то время как сохраняет дочерние элементы, например, элементы script, active.</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Указывает нижнюю границу верхнего диапазона.</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td> URL связанного ресурса.</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Указывает язык связанного ресурса.</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{ HTMLElement("command") }}</td> + <td>Указывает картинку, которая будет представлять команду.</td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Часто используется с CSS для стилизации заданного элемента. Значение атрибута должно быть уникальным.</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Показывает, что изображение часть серверной карты изображений.</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td></td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Указывает тип сгенерированного ключа.</td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Указывает вид дорожки текста.</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Указывает читабельный заголовок дорожки текста.</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Определяет язык для используемого элемента.</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Определяет язык скрипта, используемый в элементе.</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Задаёт список предустановленных опций для предложения пользователю.</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>Указывает, следует ли медиа элементам начинать проигрывание сначала, после их завершения.</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Указывает верхнюю границу нижнего диапазона.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>Задает URL кешированного манифеста документа.</td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Указывает максимальное допустимое значение.</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Определяет максимальное количество символов, допустимых в элементе.</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>Задаёт подсказку медиа, для которой, связанный ресурс был спроектирован.</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Определяет, какой HTTP метод использовать, когда отправлются данные формы. Может быть GET (по умолчанию) или POST.</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Показывает минимальное допустимое значение.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Показывает могут ли быть выбраны множественные значения в input типа email или file.</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td>Имя элемента. К примеру, используется сервером для определения полей отправленной формы.</td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Этот атрибут указывает, что форма не должна проверяться, когда передается на сервер.</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{ HTMLElement("details") }}</td> + <td>Указывает, отображать ли детали при загрузки страницы.</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Указывает оптимальное числовое значение.</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Определяет регулярное выражение, которое будет проверять входные данные элемента.</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Предоставляет подсказку пользователю, касательно того, что можно ввести в поле.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>URL указывающий блок постера для показа, пока пользователь играет или ищет.</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Указывает загружать ли ресурс целиком, его часть или не загружать вовсе.</td> + </tr> + <tr> + <td><code>pubdate</code></td> + <td>{{ HTMLElement("time") }}</td> + <td>Указывает, что эта дата и время являются ли датой ближайшего элемента предка {{ HTMLElement("article") }}.</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td></td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Указывает, можно ли редактировать элемент.</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Задаёт отношение целевого объекта к объекту ссылки.</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Указывает, необходимо ли заполнять этот элемент или нет.</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Указывает, отображать ли список по убыванию, вместо того, чтобы показывать его по возрастанию.</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Определяет количество строк в textarea.</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Определяет количество строк ячейки таблицы, которые следует охватывать.</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Указывает, разрешена ли проверка правописания для этого элемента.</td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{ HTMLElement("th") }}</td> + <td></td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{ HTMLElement("style") }}</td> + <td></td> + </tr> + <tr> + <td><code>seamless</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{ HTMLElement("option") }}</td> + <td>Определяет значение, которое будет выделено при загрузки страницы.</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Определяет ширину элемента (в пикселях). Если у элемента значение атрибута <code>type</code> — <code>text</code> или <code>password</code>, тогда это количество символов.</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{ HTMLElement("link") }}</td> + <td></td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td></td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>URL встраиваемого содержимого.</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{ HTMLElement("track") }}</td> + <td></td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{ HTMLElement("img") }}</td> + <td></td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Определяет первый номер, если это не 1.</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{ HTMLElement("input") }}</td> + <td></td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Определяет CSS стили, которые перепишут установленные ранее стили.</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{ HTMLElement("table") }}</td> + <td></td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Переписывает порядок Tab по умолчанию браузера и следует вместо него заданному.</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td></td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Текст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>Определяет тип элемента.</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td></td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>Определяет значение элемента по умолчанию, которое будет отображаться после загрузки страницы.</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>Примечание: в некоторых случаях, таких как {{ HTMLElement("div") }}, это устаревший атрибут, в этом случае используйте свойство CSS {{ Cssxref("width") }} вместо него. В других случаях, таких как {{ HTMLElement("canvas") }}, ширина должна быть задана этим атрибутом.</td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Указывает, следует ли переносить текст.</td> + </tr> + </tbody> + <tbody> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>Ширина границы.</p> + + <p>Примечание: это устаревший атрибут, используйте свойство CSS {{ Cssxref("border") }}.</p> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Содержит отрезок времени уже буферизованного медиа.</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Строка вызова, которая передаётся вместе с публичным ключом.</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>Определяет кодировку страницы или скрипта.</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>Указывает, следует ли отметить элемент при загрузки страницы.</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>Содержит URI, который указывает на источник цитаты или изменения.</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Часто используется вместе с CSS, чтобы стилизовать элементы с общими свойствами.</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Указывает URL файла класса аплета для загрузки и выполнения.</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Этот атрибут предоставляет абсолютный или относительный URL директории, файлы аплета .class, на которые ссылаются в хранимом атрибуте кода.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатиричный формат #RRGGBB.</p> + + <p>Примечание: это устаревший атрибут. Используйте CSS свойство {{ Cssxref("color") }}.</p> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Определяет количество столбцов в textarea.</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Определяет диапазон количества столбцов ячейки.</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>Значение, ассоциированное с <code>http-equiv</code> или <code>name</code> зависит от контекста.</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Указывает, редактируется ли содержимое элемента.</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Определяет ID элемента {{ HTMLElement("menu") }} который послужит, как контекстное меню элемента.</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Указывает, следует ли отображать пользователю кнопки воспроизведения.</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{ HTMLElement("area") }}</td> + <td>Набор значений, задающий координаты области для активного участка.</td> + </tr> + <tr> + <td> + <p><code>data</code></p> + </td> + <td> + <p>{{ HTMLElement("object") }}</p> + </td> + <td> + <p>Задаёт URL ресурса.</p> + </td> + </tr> + <tr> + <td> + <p><code>data-*</code></p> + </td> + <td> + <p><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></p> + </td> + <td> + <p>Позволяет прикрепить произвольные атрибуты для HTML элемента.</p> + </td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>Указывает дату и время, ассоциированное с элементом.</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Указывает, что дорожка должна быть доступна, если пользовательские настройки не говорят об обратном.</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Указывает, что скрипт должен быть запущен, после того как страница будет проанализирована.</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Определяет направление текста. Допустимые значения ltr (Слева направо) или rtl (Справа налево).</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td></td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Указывает, может ли пользователь взаимодействовать с элементом.</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Указывает, что ссылка используется для загрузки.</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Определяет, можно ли перетаскивать элемент.</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Указывает, что элемент принимает содержимое элемента, которое перетаскивают на него.</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Определяет тип содержимого для данных формы, когда <code>method</code> — POST.</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Описывает элементы, которые принадлежат им.</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Указывает форму, которая является владельцем элемента.</td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>Указывает действие элемента, перезаписвающее действие, указанное в форме {{ HTMLElement("form") }}.</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>ID элементов <code><th></code>, которые применяются к этому элементу.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>Примечание: в некоторых экземплярах, таких как {{ HTMLElement("div") }}, это устаревший атрибут, в этом случае используйте свойство CSS {{ Cssxref("height") }}. В других экземплярах, таких как {{ HTMLElement("canvas") }}, высота должна быть задана этим атрибутом.</td> + </tr> + </tbody> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Список типов, которые принимает сервер, обычно тип файла.</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Список поддерживаемых наборов символов.</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, +даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td> + <td>Определяет клавишную комбинацию для активизации или добавления фокуса к элементу.</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>URI адрес программы, которая обработает данные, переданные через форму.</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>Задаёт горизонтальное выравнивание элемента.</td> + </tr> + <tr> + <td><code>alt</code></td> + <td> + <p>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p> + </td> + <td>Альтернативный текст, в случае, если изображение не может быть отображено.</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Указывает, что скрипт должен быть выполнен асинхронно.</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Показывает, могут ли управляющие элементы в форме по умолчанию иметь собственные значения для автодополнения в форме.</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>На этом элементе следует автоматически сфокусироваться после загрузки страницы.</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Аудио и видео нужно воспроизвести как можно скорее.</td> + </tr> + <tr> + <td><code>autosave</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Предыдущее значения следует сохранить в выпадающем списке при загрузки страницы.</td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>Цвет фона элемента.</p> + + <p>Примечание: это устаревший атрибут. Используйте свойство CSS {{ Cssxref("background-color") }}.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Содержимое_в_сравнении_с_IDL_атрибутами">Содержимое в сравнении с IDL атрибутами</h2> + +<p>В HTML, большинство атрибутов имеют две грани: <strong>атрибут содержимого</strong> и <strong>IDL атрибут</strong>.</p> + +<p>Атрибут содержимого — это атрибут как вы его устанавливаете из содержимого (HTML-код), и его можно устанавливать или получать с помощью {{domxref("element.setAttribute()")}} или {{domxref("element.getAttribute()")}}. Атрибут содержимого всегда строка, даже когда ожидаемое значение должно быть число. Например, для того чтобы установить <code>maxlength элемента </code>{{HTMLElement("input")}} в 42 используя атрибут содержимого, вам нужно вызвать <code>setAttribute("maxlength", "42")</code> на этом элементе.</p> + +<p>IDL-атрибут также известен как свойство JavaScript. Это атрибуты, которые вы можете читать или устанавливать используя JavaScript-свойства наподобие <code class="moz-txt-verticalline">element.foo</code>. IDL-атрибут всегда собирается использовать (но может преобразовать) основной атрибут содержимого для возврата, когды вы получаете его и сохраняет в атрибут содержимого, когда вы устанавливаете его. Другими словами, IDL-атрибуты, в сущности, отражают атрибуты содержимого.</p> + +<p>Большую часть времени, IDL атрибуты возвращают их значения такими, какими они используются. Например, по умолчанию <code>type</code> для элементов {{HTMLElement("input")}} — "text", поэтому если вы установите <code>input.type="foobar"</code>, элемент <code><input></code> будет иметь тип text (по виду и по поведению) но значение атрибута содержимого "type" будет "foobar". Однако, IDL-атрибут <code>type</code> возвратит строку "text".</p> + +<p>IDL-атрибуты не всегда строки; например, <code>input.maxlength</code> число (long со знаком). Когда используете IDL атрибуты, вы читаете или устанавливаете значения желаемого типа, поэтому <code>input.maxlength</code> всегда намеревается вернуть число и когда вы устанавливаете <code>input.maxlength</code>, это требует число. Если вы передадите другой тип, это автоматически конвентируется в число, по стандартным правилам преобразования типов в JavaScript.</p> + +<p>IDL атрибуты могут <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">отображать другие типы</a> такие как unsigned long, URLs, booleans, и т.д. К несчастью нет ясных правил и способа, чтобы IDL атрибуты работали в связке с их соответствующими атрибутами содержимого в зависимости от атрибута. Большую часть времени, будет следовать <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">правилам из спецификации</a>, но иногда нет. HTML спецификации пытаются сделать это как можно дружелюбнее для разработчиков, но по различным причинам (по большинству историческим), некоторые атрибуты работают странно (<code>select.size</code>, например) и вам следует прочитать спецификацию для точного понимания того, как они работают.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/HTML/Element" title="/ru/docs/HTML/Element">HTML элементы</a></li> +</ul> diff --git a/files/ru/web/html/block-level_elements/index.html b/files/ru/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..ce640274c9 --- /dev/null +++ b/files/ru/web/html/block-level_elements/index.html @@ -0,0 +1,119 @@ +--- +title: Блочные элементы +slug: Web/HTML/Block-level_elements +tags: + - HTML + - HTML5 + - Web + - Начинающий + - Разработка +translation_of: Web/HTML/Block-level_elements +--- +<p><span class="seoSummary">Исторически HTML-элементы было принято делить на блочные и <a href="/ru/docs/Web/HTML/Строчные_Элементы" title="/en-US/docs/HTML/inline_elements">строчные</a>. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название). </span></p> + +<p>Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:</p> + +<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Блочные элементы</span></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Block-level_Example') }}</p> + +<h2 id="Использование">Использование</h2> + +<ul> + <li>Блочные элементы могут отображаться только внутри элемента {{ HTMLElement("body") }} и его потомков.</li> +</ul> + +<h2 id="Блочные_против_строчных">Блочные против строчных</h2> + +<p>Существует несколько ключевых отличий между блочными и строчными элементами:</p> + +<dl> + <dt>Содержание</dt> + <dd>Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. <span id="result_box" lang="ru"><span class="hps">Неотъемлемой частью этого</span> <span class="hps">структурного</span> <span class="hps">различия</span> <span class="hps">является идея, что</span> <span class="hps">блочные элементы</span> <span class="hps">создают</span> <span class="hps">«более крупную»</span> <span class="hps">структуру</span><span>, чем</span> <span class="hps">встроенные элементы</span><span>.</span></span></dd> + <dt>Форматирование по умолчанию</dt> + <dd>По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.</dd> +</dl> + +<p><span id="result_box" lang="ru"><span class="hps">Разделение элементов на</span> <span class="hps">блочные</span> и строчные <span class="hps">использовалось в спецификации</span> <span class="hps">HTML </span><span class="hps">до версии</span> <span class="hps">4.01</span><span>.</span> <span class="hps">В</span> <span class="hps">HTML5</span> <span class="hps">это</span> противопоставление <span class="hps">заменено более</span> <span class="hps">сложным набором </span><a href="/ru/docs/Web/Guide/HTML/Content_categories">категорий контента</a><span>.</span> <span class="atn hps">Категория </span></span>«<span lang="ru"><span>строчных</span></span>» элементов<span lang="ru"> примерно соответствует категории <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">текстового контента</a>, а для </span>«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе <span lang="ru"><span class="hps">примерно соответствуют</span> <span class="hps">категории</span> <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">потокового контента</a><span class="hps"> в</span> <span class="hps">HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент).</span><span> </span></span><span lang="ru">Кроме того, <span class="hps">есть</span> и <span class="hps">другие категории, например, интерактивный контент.</span></span></p> + +<h2 id="Элементы">Элементы</h2> + +<p><span id="result_box" lang="ru"><span class="hps">Ниже приведен</span> <span class="hps">полный список всех</span> блочных <span class="hps">элементов</span> <span class="hps">(хотя </span></span>формально <span lang="ru"><span class="hps">понятие </span></span>«<span lang="ru"><span>блочный</span></span>» не применяется <span lang="ru"><span class="hps">к</span> новым <span class="hps">элементам</span> <span class="hps">в HTML5</span><span>)</span><span>.</span></span></p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Контактная информация.</span></span></dd> + <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Содержание</span> <span class="hps">статьи.</span></span></dd> + <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Побочное содержание.</span></span></dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Длинная («блочная») цитата.</span></span></dd> + <dt>{{ HTMLElement("details") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Раскрывающийся блок с подробностями.</dd> + <dt>{{ HTMLElement("dialog") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Диалоговое окно.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Описание определения.</span></span></dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Фрагмент документа.</span></span></dd> + <dt>{{ HTMLElement("dl") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Список определений.</span></span></dd> + <dt>{{ HTMLElement("dt") }}</dt> + <dd>Термин в списке определений.</dd> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>Группирование элементов формы.</dd> + <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Описание для тега {{ HTMLElement("figure") }}.</span></span></dd> + <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> + <dd><span class="short_text" id="result_box" lang="ru">Группирование медиа-контента <span class="hps">с подписью</span></span> (см. {{ HTMLElement("figcaption") }}).</dd> + <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Нижняя часть (</span></span>«<span class="short_text" lang="ru"><span class="hps">подвал</span></span>»<span class="short_text" lang="ru"><span class="hps">) раздела или страницы</span><span class="hps">.</span></span></dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Форма ввода.</span></span></dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Заголовки от первого до шестого уровня.</span></span></dd> + <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Верхняя часть (</span></span>«<span class="short_text" lang="ru"><span class="hps">шапка</span></span>»<span class="short_text" lang="ru"><span class="hps">) раздела</span> <span class="hps">или</span><span class="hps"> страницы.</span></span></dd> + <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Группирование заголовков раздела или страницы.</dd> + <dt>{{ HTMLElement("hr") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Горизонтальная разделительная линия.</span></span></dd> + <dt>{{ HTMLElement("li") }}</dt> + <dd>Пункт списка.</dd> + <dt>{{ HTMLElement("main") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Содержит основной контент, уникальный для страницы.</dd> + <dt>{{ HTMLElement("nav") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Содержит навигационные ссылки.</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Упорядоченный список.</span></span></dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Текстовый абзац.</span></span></dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Предварительно форматированный текст.</span></span></dd> + <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Раздел</span> <span class="hps">веб-страницы</span><span>.</span></span></dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Таблица.</span></span></dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Неупорядоченный список.</span></span></dd> +</dl> +</div> + +<p> </p> + +<h3 id="See_also" name="See_also">Смотрите также</h3> + +<ul> + <li><a href="/ru/docs/Web/HTML/Строчные_Элементы">Строчные элементы</a></li> +</ul> diff --git a/files/ru/web/html/cors_enabled_image/index.html b/files/ru/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..7f856ba8af --- /dev/null +++ b/files/ru/web/html/cors_enabled_image/index.html @@ -0,0 +1,118 @@ +--- +title: Разрешение использования изображений из разных источников и canvas +slug: Web/HTML/CORS_enabled_image +tags: + - Advanced + - Canvas + - HTML + - Reference + - Security +translation_of: Web/HTML/CORS_enabled_image +--- +<p><span class="seoSummary">HTML предоставляет атрибут {{ htmlattrxref("crossorigin", "img") }} для изображений, которые в сочетании с соответствующим заголовком {{Glossary("CORS")}} позволяют использовать изображения, определённые элементом {{ HTMLElement("img") }}, загруженные из внешних источников, в {{HTMLElement("canvas")}} , как если бы они были загружены из текущего источника. </span></p> + +<p>Дополнительные сведения об использовании атрибута <code>crossorigin</code> смотрите в разделе <a href="/ru/docs/Web/HTML/CORS_settings_attributes">атрибуты параметров CORS</a>.</p> + +<h2 id="Безопасность_и_испорченные_холсты_canvas">Безопасность и испорченные холсты canvas</h2> + +<p>Поскольку пиксели в растровом изображении canvas могут поступать из различных источников, включая изображения или видео, полученные с других хостов, неизбежно могут возникнуть проблемы с безопасностью.</p> + +<p>Как только вы рисуете на холсте любые данные, которые были загружены из другого источника без одобрения CORS, холст становится <strong>испорченным</strong>. Испорченный холст - это тот, который больше не считается безопасным, и любые попытки получить данные изображения с холста вызовут исключение.</p> + +<p>Если источником внешнего содержимого является элемент HTML {{HTMLElement("img")}} или SVG {{SVGElement("svg")}}, то попытка извлечения содержимого холста не допускается.</p> + +<p>Если внешнее содержимое поступает из изображения, полученного либо из {{domxref("HTMLCanvasElement")}}, либо из {{domxref("ImageBitMap")}}, и источник изображения не соответствует тем же правилам происхождения, попытки прочитать содержимое холста блокируются.</p> + +<p>Вызов любого из следующих методов на испорченном холсте приведёт к ошибке:</p> + +<ul> + <li>Вызов {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} в контексте canvas</li> + <li>Вызов {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} на самом элементе {{HTMLElement("canvas")}}</li> + <li>Вызов {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} на canvas</li> +</ul> + +<p>Попытка обратиться к ним, когда холст испорчен, приведет к возникновению ошибки безопасности <code>SecurityError</code>. Это защищает пользователей от доступа к личным данным с помощью изображений для извлечения информации с удаленных веб-сайтов без разрешения.</p> + +<h2 id="Хранение_изображений_из_внешнего_источника">Хранение изображений из внешнего источника</h2> + +<p>В этом примере мы хотим разрешить извлечение изображений из внешнего источника и сохранение их в локальном хранилище. Реализация этого требует настройки сервера, а также написания кода для самого веб-сайта.</p> + +<h3 id="Конфигурация_веб-сервера">Конфигурация веб-сервера</h3> + +<p>Первое, что нам нужно, - это сервер, настроенный на размещение изображений с заголовком {{HTTPHeader("Access-Control-Allow-Origin")}}, настроенным на разрешение доступа к файлам изображений из разных источников.</p> + +<p>Давайте предположим, что мы обслуживаем наш сайт с помощью <a href="https://httpd.apache.org/">Apache</a>. Рассмотрим <a href="https://github.com/h5bp/server-configs-apache/blob/master/src/cross-origin/images.conf">стандартный файл конфигурации сервера Apache HTML5 для образов CORS</a>, показанный ниже:</p> + +<pre class="brush: xml"><IfModule mod_setenvif.c> + <IfModule mod_headers.c> + <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"> + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + </FilesMatch> + </IfModule> +</IfModule></pre> + +<p>Вкратце, это настраивает сервер на разрешение графических файлов (тех, что с расширениями ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz" и ".webp") для получения доступа из любой точки интернета.</p> + +<h3 id="Реализация_возможности_сохранения">Реализация возможности сохранения</h3> + +<p>Теперь, когда сервер настроен так, чтобы разрешить извлечение изображений из разных источников, мы можем написать код, который позволяет пользователю сохранять их в <a href="/ru/docs/Web/API/Web_Storage_API">локальном хранилище</a>, как если бы они обслуживались из того же домена, на котором выполняется код.</p> + +<p>Ключевым моментом является использование атрибута {{htmlattrxref("crossorigin")}} путем установки {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} в элементе {{domxref("HTMLImageElement")}} , на который будет загружено изображение. Это даёт браузеру команду на запрос доступа к другому источнику при попытке загрузить данные изображения.</p> + +<h4 id="Запуск_загрузки">Запуск загрузки</h4> + +<p>Код, который запускает загрузку (скажем, когда пользователь нажимает кнопку "Загрузить"), выглядит следующим образом:</p> + +<pre class="brush: js">function startDownload() { + let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189"; + + downloadedImg = new Image; + downloadedImg.crossOrigin = "Anonymous"; + downloadedImg.addEventListener("load", imageReceived, false); + downloadedImg.src = imageURL; +}</pre> + +<p>Здесь мы используем жёстко закодированный URL-адрес (<code>imageURL</code>), но он запросто может поступать откуда угодно. Чтобы начать загрузку изображения, мы создаём новый объект {{domxref("HTMLImageElement")}} с помощью конструктора {{domxref("HTMLImageElement.Image", "Image()")}}. Затем изображение настраивается так, чтобы разрешить загрузку из другого источника. Для этого его атрибут <code>crossOrigin</code> устанавливается на <code>"Anonymous"</code> (то есть разрешение неавторизованной загрузки изображения из перекрёстного источника). Прослушиватель событий добавляется к событию {{event("load")}}, запускаемому на элементе изображения, что означает, что данные изображения были получены.</p> + +<p>Наконец, атрибут {{domxref("HTMLImageElement.src", "src")}} изображения устанавливается в URL-адрес загружаемого изображения; это инициирует начало загрузки.</p> + +<h4 id="Получение_и_сохранение_изображения">Получение и сохранение изображения</h4> + +<p>Код, обрабатывающий недавно загруженные изображения, находится в методе <code>imageReceived()</code>:</p> + +<pre class="brush: js">function imageReceived() { + let canvas = document.createElement("canvas"); + let context = canvas.getContext("2d"); + + canvas.width = downloadedImg.width; + canvas.height = downloadedImg.height; + + context.drawImage(downloadedImg, 0, 0); + imageBox.appendChild(canvas); + + try { + localStorage.setItem("saved-image-example", canvas.toDataURL("image/png")); + } + catch(err) { + console.log("Error: " + err); + } +}</pre> + +<p><code>imageReceived()</code> вызывается для обработки события <code>"load"</code> в элементе <code>HTMLImageElement</code>, который получает загруженное изображение. Это событие срабатывает, как только все загруженные данные становятся доступными. Он начинается с создания нового элемента {{HTMLElement("canvas")}}, который мы будем использовать для преобразования изображения в URL-адрес данных и получения доступа к контексту 2D-рендеринга холста ({{domxref("CanvasRenderingContext2D")}}) в переменной <code>context</code>.</p> + +<p>Размер холста настраивается в соответствии с полученным изображением, затем изображение рисуется на холсте с помощью {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Затем холст вставляется в документ, чтобы изображение было видно.</p> + +<p>Теперь пришло время действительно сохранить изображение локально. Для этого мы используем механизм локального хранения Web Storage API, доступ к которому осуществляется через {{domxref("Window.localStorage", "localStorage")}} глобально. Метод canvas {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} используется для преобразования изображения в data:// URL, представляющий изображение PNG, которое затем сохраняется в локальном хранилище с помощью {{domxref("Storage.setItem", "setItem()")}}.</p> + +<p>Вы можете <a href="https://cors-image-example.glitch.me/">проверить</a> или <a href="https://glitch.com/edit/#!/remix/cors-image-example">переделать</a> этот пример на Glitch.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li> + <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li> + <li><a href="ru/docs/Web/API/Web_Storage_API">Веб хранилище (API)</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div> diff --git a/files/ru/web/html/cors_settings_attributes/index.html b/files/ru/web/html/cors_settings_attributes/index.html new file mode 100644 index 0000000000..686989bb0c --- /dev/null +++ b/files/ru/web/html/cors_settings_attributes/index.html @@ -0,0 +1,130 @@ +--- +title: CORS settings attributes +slug: Web/HTML/CORS_settings_attributes +translation_of: Web/HTML/Attributes/crossorigin +--- +<p><span class="seoSummary">В HTML5 некоторые теги поддерживают <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, например {{ HTMLElement("img") }} или {{ HTMLElement("video") }}, имеют атрибут <code>crossorigin</code> (<code>crossOrigin</code> свойство), которое позволяет настроить CORS запросы для данных получаемых элементом.</span> Эти атрибуты могут иметь следующие значения:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Ключевое слово</td> + <td class="header">Описание</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>CORS запросы от этого элемента не будут передавать учетные данные.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>CORS запросы от этого элемента будут передавать учетные данные.</td> + </tr> + </tbody> +</table> + +<p>По умолчанию (если значение атрибута не задано), CORS не используется вообще. Ключевое слово "anonymous" означает что не будет обмена <strong>учетных данных</strong>(user credentials) через cookies, client-side SSL сертификаты или HTTP аутентификацию как описано в <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Секции Терминология CORS спецификации</a>.</p> + +<p>Неправильное ключевое слово или пустая строка, будет обработано как <code>anonymous</code>.</p> + +<h3 id="Пример_crossorigin_с_тегом_script">Пример: crossorigin с тегом script</h3> + +<p>Используя тег {{HTMLElement("script")}} вы можете указать браузеру выполнять код <code>https://example.com/example-framework.js</code> без передачи user-credentials.</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" + crossorigin="anonymous"></script></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>13</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>11</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>{{ HTMLElement("video")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("12.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>{{ HTMLElement("video")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("12.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/En/HTTP_access_control" title="en/HTTP access control">HTTP access control</a></li> +</ul> diff --git a/files/ru/web/html/element/a/index.html b/files/ru/web/html/element/a/index.html new file mode 100644 index 0000000000..57a577fb38 --- /dev/null +++ b/files/ru/web/html/element/a/index.html @@ -0,0 +1,394 @@ +--- +title: <a> +slug: Web/HTML/Element/A +tags: + - HTML + - Веб + - Контент + - Семантика + - Содержание +translation_of: Web/HTML/Element/a +--- +<p>HTML-элемент <code><a></code> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org">MDN</a></pre> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a> </th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">текстовый контент</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">интерактивный контент</a>, скрытый контент.</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Логический_контент" title="HTML/Content_categories#Transparent_content_model">Логический контент</a>, содержащий либо <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content_categories#Flow_content">основной поток</a> (исключая <a href="/ru/docs/Web/Guide/HTML/Content_categories#interactive_content">интерактивный контент</a>), либо <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">заголовочный контент</a>.</td> + </tr> + <tr> + <th scope="row">Опускание тегов</th> + <td>Открывающий и закрывающий теги обязательны.</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элеметны</th> + <td>Любые элементы, в которых разрешён <a href="/ru/docs/Web/Guide/HTML/Content_categories#Заголовочный_контент">текстовый контент</a> или элементы, в которых разрешёны элементы <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">основного потока</a>.</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="/ru/docs/Web/HTML/Общие_атрибуты">общие атрибуты</a>.</p> + +<dl> + <dt><strong><code>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</code></strong></dt> + <dd>Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.</dd> + <dd><span style="display: none;"> </span></dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong></p> + +<ul> + <li>Атрибут может быть использован вместе с <a href="/ru/docs/Web/API/URL/createObjectURL">blob: URLs</a> и <code>data: URLs</code>, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью <span style="display: none;"> </span>JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).</li> + <li>Если представлен HTTP-заголовок <code>Content-Disposition:,</code> и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.</li> + <li>Если этот атрибут установлен и <code>Content-Disposition:</code> установлен на <code>inline</code>, Firefox отдаёт преимущество <code>Content-Disposition</code>, но в тоже время Chrome отдаёт преимущество атрибуту <code>download</code>.</li> + <li>Этот атрибут соблюдается только на ресурсах с тем же<span style="display: none;"> </span> доменом.</li> +</ul> +</div> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Единственный обязательный атрибут для опредения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут <code>href</code> указывает ссылку: либо URL, либо якорь. Якорь — это название после символа <code>#</code>, который указывает на элемент (<a href="/ru/docs/HTML/Global_attributes#attr-id">ID</a>) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, <code>file</code>, <code>ftp</code> и <code>mailto</code> работают в большинстве браузеров.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например: <code><a href="#top">Вернуться наверх</a></code>. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid" lang="en" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Это поведение указано в Спецификациях HTML5</a>.</p> +</div> + +<dl> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в <a href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> для HTML5 и <a href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> для HTML4. Используйте этот атрибут, только если задан {{htmlattrxref("href", "a")}}.</dd> + <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt> + <dd>Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:</dd> + <dd> + <ul> + <li><code>"no-referrer"</code> не отправляет заголовок <code>Referer</code>.</li> + <li><code>"no-referrer-when-downgrade"</code> не отправляет заголовок <code>Referer</code> ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.</li> + <li><code>"origin"</code> отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.</li> + <li><code>"origin-when-cross-origin"</code> отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь. </li> + <li><code>"unsafe-url"</code> отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.</li> + </ul> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Для ссылок, которые содержат атрибут <code>href</code>, этот атрибут устанавливает отношения между ссылками. Значением является <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">список значений</a>, разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является <code>void</code>, если не задано иное. Используйте этот тег, только если задан атрибут {{htmlattrxref("href", "a")}}.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:</dd> + <dd> + <ul> + <li><code>_self</code> загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.</li> + <li><code>_blank</code> загружает документ в новой окне в HTML4 или вкладке в HTML5.</li> + <li><code>_parent</code> загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как<code> _self</code>: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code> в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как <code>_self</code>.</li> + </ul> + Используйте этот атрибут только если указан {{htmlattrxref("href", "a")}}.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Используя <code>target</code>, вы должны добавлять <code>rel="noopener noreferrer"</code>, чтобы избежать эксплуатацию API <code>window.opener</code>.</p> +</div> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Этот атрибут определяет <a href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">MIME-тип</a> для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как <code>audio/wav</code>.</dd> + <dd>Используйте этот атрибут только если указан {{htmlattrxref("href", "a")}}.</dd> +</dl> + +<h3 id="Устаревшие">Устаревшие </h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми <a href="http://tools.ietf.org/html/rfc2045">список кодировок</a>. Значением по умолчанию является ISO-8859-1.</dd> +</dl> + +<div class="warning"> +<p><strong>Предупреждение:</strong> Этот атрибут является устарелым в HTML5 и <strong>не должен использоваться</strong>. Чтобы достичь такого же эффекта, используйте HTTP-заголовок <code>Content-Type</code> на ссылающемся ресурсе.</p> +</div> + +<dl> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}}{{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.</dd> + <dt><code><strong>name</strong></code><strong style="font-weight: 700; line-height: 1.5;"> </strong><strong>{{HTMLVersionInline(4)}}</strong> <strong>{{obsoleteGeneric("inline","HTML5")}}</strong></dt> + <dd>Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением <code>id</code> и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и <code>id</code>, и <code>name</code> могут быть использованы с элементом <code><a></code>, пока у них идентичные значения.</dd> + <dt><strong style="font-weight: 700; line-height: 1.5;"><code>rev</code> </strong><strong>{{HTMLVersionInline(4)}}</strong> <strong>{{obsoleteGeneric("inline","HTML5")}}</strong></dt> + <dd>Этот атрибут определяет обратную ссылку, обратные отношения атрибута <code>rel</code>. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.</dd> +</dl> + +<dl> + <dt><code>shape</code> {{HTMLVersionInline(4)}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута — <code>circle</code>, <code>default</code>, <code>polygon</code> и <code>rect</code>. Формат координат зависит от выбранной формы. Для <code>circle</code> — <code>x</code>, <code>y</code>, <code>r</code>, где <code>x</code> и <code>y</code> — пиксельные координаты центра круга и <code>r</code> — радиус в пикселях. Для rect — <code>x</code>, <code>y</code>, <code>w</code>, <code>h</code>, где <code>x</code> и <code>y</code> — координаты верхнего левого угла прямоугольника, а <code>w</code> и <code>h</code> — ширина и высота соответственно. Значениями <code>polygon</code> для координатов формы являются <code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>... Каждая пара <code>x</code>, <code>y</code> определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение <code>default</code> для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Желательно использовать атрибут <code>usemap</code> для элемента <code><a href="/ru/docs/Web/HTML/Element/img"><img></a></code> и связанного элемента <code><a href="/ru/docs/Web/HTML/Element/map"><map></a></code>, чтобы определить горячие точки вместо атрибутов формы.</p> +</div> + +<h3 id="Нестандартные">Нестандартные</h3> + +<dl> + <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt> + <dd>Этот атрибут определяет назание столбца из объекта исходных данных, который принимает связанные данные.</dd> +</dl> + +<div class="warning"> +<p><strong>Предупреждение: </strong>Этот атрибут нестандартный и <strong>не должен использоваться</strong>. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как <a href="/ru/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, чтобы динамично заполнять страницу.</p> +</div> + +<table> + <tbody> + <tr> + <td rowspan="2">Поддержка</td> + <td>Gecko</td> + <td>Presto</td> + <td>WebKit</td> + <td>Trident</td> + </tr> + <tr> + <td>Не реализована</td> + <td>Не реализована</td> + <td>Не реализована</td> + <td>IE4, IE5, IE6, IE7 (Убрана в IE8)</td> + </tr> + <tr> + <td>Нормативный документ</td> + <td colspan="4"><a href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt> + <dd>Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.</dd> +</dl> + +<div class="warning"> +<p><strong>Предупреждение: </strong>Этот атрибут нестандартный и <strong>не должен использоваться</strong>. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как <a href="/ru/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, чтобы динамично заполнять страницу.</p> +</div> + +<table> + <tbody> + <tr> + <td rowspan="2">Поддержка</td> + <td>Gecko</td> + <td>Presto</td> + <td>WebKit</td> + <td>Trident</td> + </tr> + <tr> + <td>Не реализована</td> + <td>Не реализована</td> + <td>Не реализована</td> + <td>IE4, IE5, IE6, IE7 (Убрана в IE8)</td> + </tr> + <tr> + <td>Нормативный документ</td> + <td colspan="4"><a href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("methods")}}<strong style="font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt> + <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута <code>title</code>) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Значения <code>methods</code> (MSDN)</a>.</dd> + <dt>{{htmlattrdef("urn")}}<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt> + <dd>Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё еще не определено полностью, поэтому этот атрибут не имеет значения. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">Значения <font face="Consolas, Liberation Mono, Courier, monospace">urn</font> (MSDN)</a>.</dd> +</dl> + +<h2 id="Example" name="Example">Примеры</h2> + +<h3 id="Ссылка_на_внешний_сайт" name="Ссылка_на_внешний_сайт">Ссылка на внешний сайт</h3> + +<pre class="brush: html"><!-- Ссылка на внешний файл --> +<a href="http://www.mozilla.com/">Внешняя ссылка</a> +</pre> + +<h4 id="Результат">Результат:</h4> + +<p><a class="external" href="http://www.mozilla.com/">Внешняя ссылка</a></p> + +<h3 id="Создание_кликабельной_картинки" name="Создание_кликабельной_картинки">Создание кликабельной картинки</h3> + +<pre class="brush: html"><a href="https://developer.mozilla.org/ru/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo"> +</a> +</pre> + +<h4 id="Результат_2">Результат:</h4> + +<p>{{ EmbedLiveSample("Создание_кликабельной_картинки", "320", "64") }}</p> + +<h3 id="Создания_ссылки_для_написания_письма" name="Создания_ссылки_для_написания_письма">Создания ссылки для написания письма</h3> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Отправить сообщение в никуда</a> +</pre> + +<p>Результат выглядит примерно так: <a href="mailto:nowhere@mozilla.org">Отправить сообщение в никуда</a>.</p> + +<p>Для дополнительных деталей использования <code>mailto</code>, таких как тема, текст или другое, смотрите <a href="/ru/docs/Web/Guide/HTML/Email_links">Email-ссылки</a> или {{RFC(6068)}}.</p> + +<h3 id="Создание_ссылки_с_номером_телефона" name="Создание_ссылки_с_номером_телефона">Создание ссылки с номером телефона</h3> + +<p>С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.</p> + +<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a> +</pre> + +<p>Для дополнителных деталей о протоколе <code>tel</code>, смотрите {{RFC(2806)}} и {{RFC(2396)}}.</p> + +<h3 id="Использование_download_для_сохранения_canvas_как_PNG" name="Использование_download_для_сохранения_canvas_как_PNG">Использование <code>download</code> для сохранения canvas как PNG</h3> + +<p>Если вы хотите позволить пользователю скачивать HTML canvas как картинку, вы можете создать ссылку с атрибутом <code>download</code> и данные canvas как <code>data: URL</code>:</p> + +<pre class="brush: js">var link = document.createElement("a"); +link.innerHTML = 'download image'; + +link.addEventListener("click", function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link); +</pre> + +<p class="brush: js">Вы можете посмотреть на это в действии: <a href="http://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Примечание</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Добавлен атрибут <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div> + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="Нажатие_и_фокус">Нажатие и фокус</h2> + +<p>Нажатие на {{HTMLElement("a")}} приводит (по умолчанию) к фокусировке элемента, но оно может быть разным в засивисимости от браузера и ОС.</p> + +<table> + <caption> + <p>Фокусируется ли элемент нажатием на {{HTMLElement("a")}}?</p> + </caption> + <tbody> + <tr> + <td>Настольные</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td>Да</td> + <td>Да</td> + </tr> + <tr> + <th>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> + <td>Да</td> + <td>Да</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td>Нет данных</td> + <td>Только с заданным <code>tabindex</code></td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td>Да</td> + <td>Нет данных</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td>Да</td> + <td>Да</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <td>Мобильные</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td>Только с заданным <code>tabindex</code></td> + <td>Нет данных</td> + </tr> + <tr> + <th>Chrome 35</th> + <td>Неизвестно</td> + <td>Только с заданным <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p>HTML 3.2 включает в себя только <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> и <code>title</code>.</p> + +<p>Атрибут <code>target</code> не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, <code>target</code> не допускается в «строгих» вариантах <a href="/en/XHTML" title="en/XHTML">XHTML</a>, но разрешен в формах frameset или «переходных» формах.</p> + +<h3 id="Рекомендации_по_JavaScript">Рекомендации по JavaScript</h3> + +<p>Часто якорь используется с событием <code>onclick</code>. Для избежания обновления страницы, <code>href</code> часто устанавливается на <code>#</code>, либо на <code>javascript:void(0)</code>. Оба этих значения могут привести к некоторым неожиданным ошибкам во время копирования ссылки или открытия ссылки в новой вкладке или окне. Помните об этом, чтобы сделать юзабилити удобнее, когда пользователи используют якори и Вы не допускаете стандартного поведения.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/abbr/index.html b/files/ru/web/html/element/abbr/index.html new file mode 100644 index 0000000000..c5e667922e --- /dev/null +++ b/files/ru/web/html/element/abbr/index.html @@ -0,0 +1,186 @@ +--- +title: '<abbr>: Элемент Аббревиатура' +slug: Web/HTML/Element/abbr +tags: + - HTML + - Тег + - Элемент +translation_of: Web/HTML/Element/abbr +--- +<div>{{HTMLRef}}</div> + +<p><strong>Элемент HTML «аббревиатура» (<code><abbr></code>)</strong> представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут {{htmlattrxref("title")}}. Иные значения <code>title</code>, кроме расшифровки аббревиатуры не допускаются.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам запрос.</p> + +<p>Статья <em><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting#%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D1%8B">Как помечать аббревиатуры и сделать их потянтыми</a></em> поможет понять как использовать <code><abbr></code> и связанные элементы.</p> + +<table class="htmlelt"> + <tbody> + <tr> + <th scope="row">Интерфейс DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content categories#Phrasing content">текстовый контент</a>, явный контент</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content_categories#Phrasing_content">Фразовый контент</a></td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элементы</th> + <td>Любые, поддерживающие <a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA роли</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p><span style="line-height: 21px;">Этот элемент поддерживает только </span><a href="/ru/docs/Web/HTML/Общие_атрибуты" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">. Атрибут </span>{{htmlattrxref("title")}} имеет специальное семантическое значение, когда используется вместе с элементом <code><abbr></code>. Он <em>должен</em> содержать полную расшифровку или описание аббревиатуры.</p> + +<p>Каждый элемент <code><abbr></code> независим от других. Указание <code>title</code> на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.</p> + +<h2 id="Примечания_к_использованию">Примечания к использованию</h2> + +<h3 id="Обычное_использование">Обычное использование</h3> + +<p>Необязательно помечать все аббревиатуры с помощью <code><abbr></code>. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:</p> + +<ul> + <li>Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте <code><abbr></code> c подходящим {{htmlattrxref("title")}}.</li> + <li>Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете <code><abbr></code> с атрибутом title или просто текст с описанем.</li> + <li>Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент <code><abbr></code>. В свою очередь, его использование может быть использовано для стилизации или написания сценариев.</li> + <li>Вы можете использовать <code><abbr></code> вместе с {{HTMLElement("dfn")}}, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример {{anch("Определение в абревиатуре")}} ниже.</li> +</ul> + +<h3 id="Граматческие_вопросы">Граматческие вопросы</h3> + +<p>В языках с {{interwiki("wikipedia", "grammatical number")}} (то есть, языки, в которых количество предметов влияет на грамматику предложения), используйте одинаковое граматическое число в атрибуте <code>title</code> и внутри элемента <code><abbr></code>. Это также имеет место в языках с более чем двумя грамматическими числами (например, арабский имеет не только категории единственного и множественного числа, но двойственного).</p> + +<h2 id="Стили_по-умолчанию">Стили по-умолчанию</h2> + +<p>Назначение данного элемента исключитально для удобства автора и браузеры отображают его как ({{cssxref('display')}}<code>: inline</code>) по-умолчанию, хотя его стиль по-умолчанию меняется в разных браузерах:</p> + +<ul> + <li>Некоторые браузеры, например Internet Explorer, стилизуют его как элемент {{HTMLElement("span")}}.</li> + <li>Opera, Firefox и другие добавляют подчёркивание точками к содержанию элемента.</li> + <li>Некоторые браузеры не только подчёркивают, но и меняют начертание на капитель (small caps). Чтобы избежать этого, добавьте {{cssxref('font-variant')}}<code>: none</code> в ваш CSS.</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Семантическая_пометка_аббревиатуры">Семантическая пометка аббревиатуры</h3> + +<p>Чтобы пометить аббревиатуру без задания описания или расшифровок, просто используйте <code><abbr></code> без каких-либо атрибутов, как показано в примере ниже.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Использование <abbr>HTML</abbr> – весело и легко!</p></pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample("Семантическая_пометка_аббревиатуры")}}</p> + +<h3 id="Стилизация_аббревиатуры">Стилизация аббревиатуры</h3> + +<p>Вы можете использовать CSS, чтобы задать пользовательские стили для аббревиатуры, как показано в примере ниже.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Используя <abbr>CSS</abbr>, вы можете стилизовать аббревиатуры!</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample("Стилизация_аббревиатуры")}}</p> + +<h3 id="Задание_расшифровки">Задание расшифровки</h3> + +<p>Добавление атрибута {{htmlattrxref("title")}} даёт вам возможность задать расшифровку или описание для аббревиатуры или акронима.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>Эта статья великолепна! <abbr title="Подпишусь под Каждым Словом">ППКС</abbr> +без раздумий.</p></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Задание_расшифровки")}}</p> + +<h3 id="Определение_в_абревиатуре">Определение в абревиатуре</h3> + +<p>Вы можете использовать <code><abbr></code> вместе с {{HTMLElement("dfn")}} для более формального определения абревиатуры, как показано ниже.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> +</dfn> – язык разметки, который используется для создания семантических и +структурированных веб-страниц.</p> + +<p>A <dfn id="spec">Specification</dfn> +(<abbr title="Specification">spec</abbr>) – документ, в котором описаны основные +принципы работы технологи или API и как получить к ним доступ.</p></pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Определение_в_абревиатуре", 600, 120)}}</p> + +<p>Смотрите больше примеров в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting#%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D1%8B">Как размечать аббревиатуры и делать их понятными</a>.</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Примечание</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("html.elements.abbr")}}</p> + +<h2 id="See_also" name="See_also">См. также</h2> + +<ul> + <li><a href="/ru/Learn/HTML/Element/abbr">Использование элемента <abbr></a></li> + <li>Другие <a href="/ru/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">элементы, являющиеся семантически текстовыми</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li>Устаревший элемент {{HTMLElement("acronym")}}, который был заменен элементом <code><abbr></code>.</li> +</ul> diff --git a/files/ru/web/html/element/acronym/index.html b/files/ru/web/html/element/acronym/index.html new file mode 100644 index 0000000000..ae4456dd4e --- /dev/null +++ b/files/ru/web/html/element/acronym/index.html @@ -0,0 +1,120 @@ +--- +title: <acronym> +slug: Web/HTML/Element/acronym +tags: + - Obsolete +translation_of: Web/HTML/Element/acronym +--- +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Аннотация</h2> + +<p>Элемент акронима (<code><acronym>)</code> позволяет явно указать, что данная последовательность букв, являющуюся акронимом или аббревиатурой.</p> + +<div class="note"> +<p><strong>Примечание: </strong>Этот элемент был убран из спецификации HTML5, поэтому его не рекомендуется использовать.Вместо него используйте элемент {{HTMLElement("abbr")}}.</p> +</div> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p>Этот элемент поддерживает <em>только </em><a class="new " href="/en-US/docs/HTML/global_attributes" rel="internal" title="HTML/global attributes">глобальные атрибуты</a>.</p> + +<h2 id="DOM_Interface" name="DOM_Interface">Интерефейс DOM</h2> + +<p>Этот элемент реализует интерфейс {{domxref('HTMLElement')}}.</p> + +<div class="note"><strong>Примечание: </strong>Вплоть до Gecko 1.9.2 Firefox реализует для этого элемента интерфейс {{domxref('HTMLSpanElement')}}.</div> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:html"><p>The <acronym title="World Wide Web">WWW</acronym> is only one component of the Internet.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">Стилизация по умолчанию</h2> + +<p>Хотя этого элемент употребляется чисто для удобств автора, разные браузеры отрисовывают его по-разному:</p> + +<ul> + <li>Некоторые, например, Internet Explorer, не стилизуют его, и он выглядит неотличимо от обычного {{HTMLElement("span")}}.</li> + <li>Opera, Firefox и некоторые други браузеры подчеркивают его точками.</li> + <li>Малая часть браузеров помимо подчёркивания точками также меняют начертание текста на капитель (small caps). Во избежание такого поведения, как вариант, необходимо добавить {{cssxref('font-variant')}}<code>: none</code> в CSS стиль.</li> +</ul> + +<p>Поэтому настоятельно рекомендуется, чтобы веб-авторы не полагались на стиль по умолчанию.</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коометарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">См. также:</h2> + +<ul> + <li>{{HTMLElement("abbr")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/address/index.html b/files/ru/web/html/element/address/index.html new file mode 100644 index 0000000000..3a45048f57 --- /dev/null +++ b/files/ru/web/html/element/address/index.html @@ -0,0 +1,161 @@ +--- +title: <address> +slug: Web/HTML/Element/address +tags: + - HTML + - HTML секции + - HTML справочник + - Вэб + - Элемент +translation_of: Web/HTML/Element/address +--- +<p id="Summary">{{HTMLRef}}</p> + +<p><strong>HTML- тег <code><address></code> </strong>задает контактные данные для ближайшего родительского {{HTMLElement("article")}} или {{HTMLElement("body")}} ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.</p> + +<div class="note"> +<p><strong>Примечание:</strong></p> + +<ul> + <li>Для представления адреса, который не является контактной информацией, воспользуйтесь {{HTMLElement("p")}} элементом.</li> + <li>Данный тег не должен содержать любой другой информации, кроме контактной. (пример: дата публикации - относится к {{HTMLElement("time")}} тегу ).</li> + <li>Обычно тег <span style="font-family: courier new;"><address></span> размещается внутри тега {{HTMLElement("footer")}} текущего блока, если есть хотя бы один.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th> + <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA" title="HTML/Content categories#Flow content">Основной поток</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA" title="HTML/Content categories#Flow content">Основной поток</a>, но без вложенного элемента <span style="font-family: courier new;"><address></span>, без элементов заголовка ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), без секционного контента ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}) и без {{HTMLElement("header")}} или {{HTMLElement("footer")}} элементов.</td> + </tr> + <tr> + <th scope="row">Опускание тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элеметны</th> + <td>Любой элемент, который принимает <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLElement")}} Prior to Gecko 2.0 (Firefox 4), Gecko implemented this element using the {{domxref("HTMLSpanElement")}} interface</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p><span style="line-height: 21px;">Этот элемент включает в себя </span><a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html notranslate"> <address> + You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br> + If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br> + You may also want to visit us:<br> + Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA + </address> +</pre> + +<p>Результат:</p> + +<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p> + +<p>Помимо элемента {{HTMLElement("address")}}, с такими же стандартными стилями как и он текст отображают {{HTMLElement("i")}} или {{HTMLElement("em")}} элементы, более правильно использовать его, когда имеете дело с контактной информацией, так как он передает дополнительную семантическую информацию.</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Примечания</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_в_браузерахEdit">Совместимость в браузерах<a class="button section-edit only-icon" href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/A$edit#%D0%A1%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D0%B2_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D1%85"><span>Edit</span></a></h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Функция</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Основная поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>1.0</td> + <td>5.12</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Функция</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Основная поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Секции и контуры HTML5 документа</a>.</li> +</ul> diff --git a/files/ru/web/html/element/applet/index.html b/files/ru/web/html/element/applet/index.html new file mode 100644 index 0000000000..8ff6d23951 --- /dev/null +++ b/files/ru/web/html/element/applet/index.html @@ -0,0 +1,119 @@ +--- +title: <applet> +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +<div>{{obsolete_header}}</div> + +<p>Элемент HTML апплет (<applet>) определяет включение апплета java.</p> + +<div class="note"> +<p>Примечание: {{htmlelement("applet")}} элемент был удален в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> и <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome</a> в конце 2015 года. Удаление рассматривается в <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> и <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> +</div> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<dl> + <dt>{{htmlattrdef("align")}}</dt> + <dd>Этот атрибут используется для установки апплета на странице относительно содержания, которая может течь вокруг него. В HTML 4.01 определяет значения снизу, слева, посередине, справа и сверху, в то время как Microsoft и Netscape также может поддерживать <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, и <strong>texttop</strong>.</dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <code><applet></code> element may also be rendered as alternative text.</dd> + <dt>{{htmlattrdef("archive")}}</dt> + <dd>This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.</dd> + <dt>{{htmlattrdef("code")}}</dt> + <dd>This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the <code>codebase</code> attribute.</dd> + <dt>{{htmlattrdef("codebase")}}</dt> + <dd>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</dd> + <dt>{{htmlattrdef("datafld")}}</dt> + <dd>This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.</dd> + <dt>{{htmlattrdef("datasrc")}}</dt> + <dd>Like <code>datafld</code>, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>This attribute specifies the height, in pixels, that the applet needs.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.</dd> + <dt>{{htmlattrdef("mayscript")}}</dt> + <dd>In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.</dd> + <dt>{{htmlattrdef("object")}}</dt> + <dd>This attribute specifies the URL of a serialized representation of an applet.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>This attribute specifies in pixels the width that the applet needs.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + <param name="difficulty" value="easy"> + <b>Sorry, you need Java to play this game.</b> +</applet> +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The {{htmlelement("applet")}} element was removed in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome in late 2015</a>. Removal is being considered in <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> and <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> + +<h2 id="Notes">Notes</h2> + +<p>The W3C specification does not encourage the use of <code><applet></code> and prefers the use of the {{HTMLElement("object")}} tag. Under the strict definition of HTML 4.01, this element is deprecated and entirely obsolete in HTML5.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/area/index.html b/files/ru/web/html/element/area/index.html new file mode 100644 index 0000000000..fb40396f4a --- /dev/null +++ b/files/ru/web/html/element/area/index.html @@ -0,0 +1,192 @@ +--- +title: <area> +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +<div><strong>HTML <code><area></code> элемент </strong>определяет активную область на изображении и, при желании, связывает ее с {{Glossary("Hyperlink", "гипертекстовой ссылкой")}}. Этот элемент используется только внутри элемента {{HTMLElement("map")}}.</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="en-US/docs/HTML/Content_categories">Категории содержимого</a></th> + <td><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Content_categories#Flow_content" rel="nofollow">Элементы потока</a>, <a href="ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразового контента</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Нет, это {{Glossary("пустой элемент")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td> + <p>Открывающий тег обязателен, закрывающего быть не должно.</p> + </td> + </tr> + <tr> + <th scope="row">Допустимые родительские элементы</th> + <td> + <p>Любой элемент, допускающий <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>. У элемента <code><area></code> должен быть родитель {{HTMLElement("map")}}, но он не должен быть прямым родетелем.</p> + </td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя только <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} только, {{obsolete_inline("5.0")}}</dt> + <dd>Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>С помощью этого атрибута задается альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута <strong>href</strong>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("coords")}}</dt> + <dd>Задает значения координат для активной области. Значение и количество значений зависят от значения укзанного для атрибута <strong>shape</strong>. Для <code>rect</code> или прямоугольника задаются две пары значений x,y <strong>coords</strong>: лево, верх, право и низ. Для <code>circle</code>, значения <code>x,y,r</code> где <code>x,y</code> координаты центра круга, а <code>r</code> радиус. Для <code>poly</code> или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: <code>x1,y1,x2,y2,x3,y3,</code> и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.</dd> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt> + <dd>Этот атрибут, если он добавлен, указывает, что ссылка используется для скачивания файла. Смотри {{HTMLElement("a")}} для полного описания атрибута {{htmlattrxref("download", "a")}}.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Ссылка для активной области. Это значение действующего URL. В HTML4, этот или <strong>nohref</strong> атрибут обязательный. В HTML5, данный атрибут можно пропустить при условии, что активная область не является ссылкой.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt> + <dd>Указывает язык связанного ресурса. Допустимые значения определяются <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>. Используйте данный атрибут при наналичии атрибута <strong>href</strong>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Определяет имя интерактивной области, чтобы оно могло прописатся в старых браузерах.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint of the media for which the linked resource was designed, for example <code>print and screen</code>. If omitted, it defaults to <code>all</code>. Use this attribute only if the <strong>href</strong> attribute is present.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Indicates that no hyperlink exists for the associated area. Either this attribute or the <strong>href</strong> attribute must be present in the element. + <div class="note"> + <p><strong>Usage note: </strong>This attribute is obsolete in HTML5, instead omitting the <strong>href</strong> attribute is sufficient.</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li> + <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li> + <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path. </li> + <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt> + <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link types values</a>. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <strong>href</strong> attribute is present.</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>The shape of the associated hot spot. The specifications for HTML 5 and HTML 4 define the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support <code>circ</code>, <code>polygon</code>, and <code>rectangle</code> as valid values for <strong>shape</strong>; these values are {{Non-standard_inline}}.</dd> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("target")}}</dt> + <dd>This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings: + <ul> + <li><code>_self</code>: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed HTML4 window or HTML5 browsing context.</li> + <li><code>_parent</code>: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + Use this attribute only if the <strong>href</strong> attribute is present.</dd> + <dt>{{htmlattrdef("type")}} {{obsolete_inline("5.1")}}</dt> + <dd>This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see <a class="linkification-ext external" href="https://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: https://www.w3.org/TR/html4/references.html#ref-MIMETYPES">https://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Use this attribute only if the <strong>href</strong> attribute is present.</dd> +</dl> + +<h2 id="Пример"> Пример</h2> + +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left"> + <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right"> +</map> +<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic"></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Example', 360, 160) }}</p> + +<h2 id="Notes">Notes</h2> + +<p>Under the HTML 3.2, 4.0, and 5 specifications, the closing tag <code></area></code> is forbidden.</p> + +<p>The XHTML 1.0 specification requires a trailing slash: <code><area /></code>.</p> + +<p>The <strong>id</strong>, <strong>class</strong>, and <strong>style</strong> attributes have the same meaning as the core attributes defined in the HTML 4 specification, but only Netscape and Microsoft define them.</p> + +<p>Netscape 1–level browsers do not understand the <strong>target</strong> attribute as it relates to frames.</p> + +<p>HTML 3.2 defines only <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, and <strong>shape</strong>.</p> + +<p>HTML 5.1 <a href="https://www.w3.org/TR/html51/obsolete.html#obsolete">defines</a> obsolete the attribute <strong>type</strong> on this tag.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.elements.area")}}</p> diff --git a/files/ru/web/html/element/article/index.html b/files/ru/web/html/element/article/index.html new file mode 100644 index 0000000000..88bb5e5a48 --- /dev/null +++ b/files/ru/web/html/element/article/index.html @@ -0,0 +1,148 @@ +--- +title: <article> +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - Web + - Веб + - Разделы + - Разделы HTML + - Справка + - Элемент +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><article></code></strong> представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования.</span> Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<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><article></code>, возможно, с одним или более элементами <code><section></code> внутри.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><article></code> не должен быть потомком элемента {{HTMLElement("address")}}.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примечание">Примечание</h2> + +<ul> + <li>Каждый элемент <code><article></code> должен быть идентифицирован, обычно путем добавления заголовка (элементы <a href="/ru/docs/Web/HTML/Element/Heading_Elements"><code><h1></code>-<code><h6></code></a>) в качестве дочернего элемента.</li> + <li>Когда элемент <code><article></code> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <code><article></code>, вложенными в другой <code><article></code>, являющийся публикацией в блоге.</li> + <li>Информация об авторе в элементе <code><article></code> может быть представлена через элемент {{HTMLElement("address")}}, но это не применимо к вложенным элементам <code><article></code>.</li> + <li>Дата и время публикации в элементе <code><article></code> могут быть описаны с помощью атрибута {{htmlattrxref("datetime", "time")}} элемента {{HTMLElement("time")}}. <em>Обратите внимание, что атрибут {{htmlattrxref("pubdate", "time")}} элемента {{HTMLElement("time")}} больше не является частью стандарта {{glossary("W3C")}} {{glossary("HTML5")}}.</em></li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><article class="film_review"> + <header> + <h2>Парк Юрского периода</h2> + </header> + <section class="main_review"> + <p>Динозавры были величественны!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Слишком страшно для меня.</p> + <footer> + <p> + Опубликовано + <time datetime="2015-05-16 19:00">16 мая</time> + Лизой. + </p> + </footer> + </article> + <article class="user_review"> + <p>Я согласен, динозавры мои любимцы.</p> + <footer> + <p> + Опубликовано + <time datetime="2015-05-17 19:00">17 мая</time> + Томом. + </p> + </footer> + </article> + </section> + <footer> + <p> + Опубликовано + <time datetime="2015-05-15 19:00">15 мая</time> + Стаффом. + </p> + </footer> +</article> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.article")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li class="last"><a class="deki-ns current" href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5</a>.</li> +</ul> diff --git a/files/ru/web/html/element/aside/index.html b/files/ru/web/html/element/aside/index.html new file mode 100644 index 0000000000..20c210ff79 --- /dev/null +++ b/files/ru/web/html/element/aside/index.html @@ -0,0 +1,118 @@ +--- +title: <aside> +slug: Web/HTML/Element/aside +tags: + - Element + - HTML + - HTML5 + - Web + - Веб + - Разделы + - Разделы HTML + - Справка + - Элемент +translation_of: Web/HTML/Element/aside +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><aside></code></strong> представляет собой часть документа, чье содержимое только косвенно связанно с основным содержимым документа.</span> Чаще всего представлен в виде боковой панели, сносок или меток.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><aside></code> не должен быть потомком элемента {{HTMLElement("address")}}.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примечание">Примечание</h2> + +<ul> + <li>Не используйте элемент <code><aside></code> для пометки текста в скобках, так как этот вид текста считается частью основного <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потокового контента</a>.</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><article> + <p> + Мультфильм студии Уолта Диснея <em>Русалочка</em> + был выпущен в 1989. + </p> + <aside> + <p> + Мультфильм заработал $87 миллионов во время первого выпуска. + </p> + </aside> + <p> + Подробнее об этом мультфильме... + </p> +</article></pre> + +<p>{{EmbedLiveSample("Примеры")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.aside")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}.</li> + <li><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5</a>.</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">ARIA: роль complementary</a></li> +</ul> diff --git a/files/ru/web/html/element/audio/index.html b/files/ru/web/html/element/audio/index.html new file mode 100644 index 0000000000..7993fe03be --- /dev/null +++ b/files/ru/web/html/element/audio/index.html @@ -0,0 +1,258 @@ +--- +title: <audio> +slug: Web/HTML/Element/audio +tags: + - Audio + - Element + - HTML + - HTML5 + - Media + - Multimedia + - Web + - Веб + - Встраиваемое содержимое + - Встроенный контент + - Медиа + - Справка + - Элемент + - аудио + - мультимедиа +translation_of: Web/HTML/Element/audio +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><audio></code></strong> используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута <code>src</code> или элемента {{HTMLElement("source")}} – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс {{domxref("MediaStream")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div> + + + +<p>Приведенный выше пример показывает простое использование элемента <code><audio></code>. По аналогии с элементом {{htmlelement("img")}} мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут <code>src</code>. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.</p> + +<p>Контент между открывающим и закрывающим тегами элемента <code><audio></code> (в примере выше) отображается в браузерах, которые не поддерживают этот элемент.</p> + +<p>Не все браузеры поддерживают одинаковые <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">форматы аудио</a>. Вы можете предоставить множество источников внутри вложенных элементов {{htmlelement("source")}} и тогда браузер будет использовать первый, который он понимает:</p> + +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p>Ваш браузер не поддерживает HTML5 аудио. Вот взамен + <a href="myAudio.mp4">ссылка на аудио</a></p> +</audio></pre> + +<p>Другие примечания по использованию:</p> + +<ul> + <li>если вы не укажете атрибут <code>controls</code>, тогда аудиоплеер не будет добавлять стандартные элементы управления звуком браузера. Вы можете создать ваши собственные элементы управления в помощью {{glossary("JavaScript")}} и {{domxref("HTMLMediaElement")}} {{glossary("API")}};</li> + <li>чтобы обеспечить точный контроль над вашим аудиоконтентом, {{domxref("HTMLMediaElement")}} инициирует (вызывает) множество различных <a href="#События">событий</a>;</li> + <li>вы так же можете использовать <a href="/ru/docs/Web/API/Web_Audio_API">Web Audio API</a> для непосредственной генерации и управления потоками аудио из кода {{glossary("JavaScript")}};</li> + <li>элементы <code><audio></code> не могут иметь субтитры, в отличие от элементов {{HTMLElement("video")}}. Смотрите "<a class="external" href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio/">WebVTT и аудио</a>" для более подробной информации.</li> +</ul> + +<p>Хороший источник информации по использованию HTML-элемента <code><audio></code> – это руководство для начинающих "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео- и аудиоконтент</a>".</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>Атрибут логического типа. Если он указан, аудио начнет автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла. + <div class="note"><strong>Заметка</strong>: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать ее Opt-in (вид подписки), то есть когда пользователь специально (сам) включил ее. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.</div> + </dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd> + <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке мультимедиа или нет. Допустимые значения:</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-аутентификация);</li> + <li><code>use-credentials</code>: Запрос cross-origin (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).</li> + </ul> + + <p>Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение <code>anonymous</code>. Для получения дополнительной информации смотрите "<a href="/ru/docs/Web/HTML/CORS_settings_attributes">Настройки атрибутов CORS</a>".</p> + </dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>Атрибут логического типа, который указывает, будет ли звук изначально отключен. Значением по умолчанию является <code>false</code>.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd> + <p>Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведет к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:</p> + + <ul> + <li><code>none</code>: указывает, что аудио не должно предварительно загружаться;</li> + <li><code>metadata</code>: указывает, что предварительно загружаются только метаданные аудио (например, продолжительность аудио);</li> + <li><code>auto</code>: указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;</li> + <li><em>пустая строка</em>: синоним значения <code>auto</code>.</li> + </ul> + + <p>Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение <code>metadata</code>.</p> + + <div class="note"><strong>Примечание:</strong> + + <ul> + <li>Атрибут <code>autoplay</code> имеет приоритет над <code>preload</code>. Если <code>autoplay</code> указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.</li> + <li>Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>{{glossary("URL")}} аудио для встраивания. Это является темой <a href="/ru/docs/Web/HTTP/CORS">контроля доступа HTTP</a>. Этот атрибут является необязательным; вы можете вместо него использовать элемент {{htmlelement("source")}} внутри блока audio (<code><audio></audio></code>), чтобы указать аудио для встраивания.</dd> +</dl> + +<h2 id="События">События</h2> + +<p>Этот элемент может инициировать (вызывать) различные <a href="/ru/docs/Web/Guide/Events/Media_events">события</a>.</p> + +<h2 id="Взаимодействие_с_CSS">Взаимодействие с CSS</h2> + +<p>Элемент <code><audio></code> не имеет собственного визуального вывода, если только не указан атрибут <code>controls</code>, в этом случае отображаются стандартные элементы управления браузера.</p> + +<p>Стандартные элементы управления имеют значение свойства {{cssxref("display")}}, равное <code>inline</code>, и зачастую хорошей идеей является установка этого свойства в значение <code>block</code>, чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.</p> + +<p>Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задать {{cssxref("border")}} и {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}} и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиопреера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.</p> + +<p>Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использован {{glossary("JavaScript")}} вместе с {{glossary("API")}} {{domxref("HTMLMediaElement")}} для объединения функций, которые они выполняют.</p> + +<p>"<a href="/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics">Основы стилизации видеопроигрывателя</a>" предоставляют некоторые полезные методы стилизации – они написаны в контексте {{HTMLElement("video")}}, но в значительной степени применимы и к <code><audio></code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Базовое_использование">Базовое использование</h3> + +<p>Следующий пример показывает простое использования элемента <code><audio></code> для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибута <code>autoplay</code>. Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента <code><audio></code>.</p> + +<pre class="brush: html"><!-- Простое воспроизведение аудио --> +<audio + src="AudioTest.ogg" + autoplay> + Ваш браузер не поддерживает элемент <code>audio</code>. +</audio> +</pre> + +<h3 id="Элемент_<audio>_с_элементом_<source>">Элемент <audio> с элементом <source></h3> + +<p>В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибута <code>src</code> во вложенный элемент {{HTMLElement("source")}}, а не в непосредственно элемент <code><audio></code>. Всегда полезно включать {{glossary("MIME type", "MIME-тип")}} файла в атрибут <code>type</code>, так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.</p> + +<pre class="brush: html"><audio controls="controls"> + <source src="foo.wav" type="audio/wav"> + Ваш браузер не поддерживает элемент <code>audio</code>. +</audio> +</pre> + +<h3 id="Элемент_<audio>_с_множеством_элементов_<source>">Элемент <audio> с множеством элементов <source></h3> + +<p>Этот пример включает множество элементов <code><source></code>. Браузер попытается загрузить источник из первого элемента <code><source></code> (Opus), если он не в состоянии воспроизвести его, тогда он перейдет ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:</p> + +<pre class="brush: html"><audio controls=""> + <source src="foo.opus" type="audio/ogg; codecs=opus"/> + <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> + <source src="foo.mp3" type="audio/mpeg"/> +</audio></pre> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.</p> + +<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.</p> + +<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:</p> + +<pre>1 +00:00:00 --> 00:00:45 +[Energetic techno music] + +2 +00:00:46 --> 00:00:51 +Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? + +16 +00:00:52 --> 00:01:02 +[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch? +</pre> + +<ul> + <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Субтитры и скрытые субтитры</a>.</li> + <li><a href="/ru/docs/Web/API/WebVTT_API">Формат Web Video Text Tracks (WebVTT)</a>.</li> + <li><a class="external" href="https://webaim.org/techniques/captions/">WebAIM: субтитры, стенограммы и описания аудио</a>.</li> + <li><a href="/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Понимание WCAG, Руководство 1.2 объяснения</a>.</li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Понимание критерия успешного исхода 1.2.1 | W3C Понимание WCAG 2.0</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Понимание критерия успешного исхода 1.2.2 | W3C Понимание WCAG 2.0</a></li> +</ul> + +<h2 id="Техническая_сводка">Техническая сводка</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <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>. Если элемент имеет атрибут <code>controls</code>, он так же принадлежит к категориям <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного</a> и <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явного</a> контента.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Если элемент имеет атрибут <code>src</code>: ноль или более элементов {{HTMLElement("track")}}, за которыми следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прозрачная_модель_контента">прозрачный контентет</a>, который не содержит элементов <code><audio></code> или {{HTMLElement("video")}}.<br> + Иначе: ноль или более элементов {{HTMLElement("source")}}, за которыми следует ноль или более элементов {{HTMLElement("track")}}, за которыми следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прозрачная_модель_контента">прозрачный контент</a>, который не содержит элементов <code><audio></code> или {{HTMLElement("video")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешённые роли ARIA</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLAudioElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.audio")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">Медиа форматы для HTML-элементов audio и video</a>.</li> + <li><a href="/ru/docs/Web/API/Web_Audio_API">Web Audio API</a>.</li> + <li>{{domxref("HTMLAudioElement")}}.</li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a>.</li> + <li>{{htmlelement("source")}}.</li> + <li>{{htmlelement("video")}}.</li> + <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a>.</li> + <li><a href="/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Основы кросс-браузерного audio</a>.</li> +</ul> diff --git a/files/ru/web/html/element/b/index.html b/files/ru/web/html/element/b/index.html new file mode 100644 index 0000000000..89cdf625ec --- /dev/null +++ b/files/ru/web/html/element/b/index.html @@ -0,0 +1,110 @@ +--- +title: <b> +slug: Web/HTML/Element/b +translation_of: Web/HTML/Element/b +--- +<p><strong>HTML элемент <code><b></code> </strong> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span"><code>HTMLSpanElement</code></a> interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент содержит только <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Указания_по_применению">Указания по применению</h2> + +<ul> + <li>Используйте <code><b></code> в таких случаях, как ключевые слова в кратком содержании, имена продуктов в отзыве, или других частях текста, которые обычно выделяют жирным.</li> + <li>Не путать элемент <code><b></code> с {{HTMLElement("strong")}}, {{HTMLElement("em")}}, или {{HTMLElement("mark")}} элементами. Элемент {{HTMLElement("strong")}} представляет собой текст определённой <em>важности</em>, {{HTMLElement("em")}} делает некий акцент на тексте, и элемент {{HTMLElement("mark")}} представляет собой текст определённой <em>значимости</em>. Элемент <code><b></code> не содержит специальной семантической информации, используйте его только в том случае, если другие не подошли.</li> + <li>Также не помечайте заглавия и заголовки элементом <code><b></code>. Для этих целей используйте элементы с {{HTMLElement("h1")}} до {{HTMLElement("h6")}} . К тому же CSS может изменять стандартный вид этих элементов, в результате чего они <em>не всегда </em>будут выделены жирным текстом.</li> + <li>Хорошей практикой является использование атрибута <strong>class</strong> на элементе <code><b></code> для того, чтобы передать дополнительную семантическую информацию (например, <code><b class="lead"></code> для первого предложения в абзаце). Это упрощает разработку различных стилизаций веб-документа без надобности менять его HTML-код.</li> + <li>Исторически, элемент <code><b></code> был задуман для выделения текста жирным шрифтом. Информация о стилизации устарела, начиная с HTML4, значение элемента <code><b></code> было изменено.</li> + <li>Если нет семантической причины использовать элемент <b>, использование css свойства <a href="/en-US/docs/CSS/font-weight">font-weight</a> со значением bold будет более грамотным выбором для изменения толщины текста.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: css notranslate">.keywords { + color:red; +}</pre> + +<pre class="brush: html notranslate"><p> + В этой статье описывается элемент для форматирования <b class="keywords">текста</b>. + Она объясняет его использование в документе <b class="keywords">HTML</b>. +</p> +</pre> + +<p>{{EmbedLiveSample('Пример')}}</p> + +<p>Ключевые слова с тегом <code><b></code>, отображаемые со стилем, в<span style="">ыделены жирным шрифтом.</span></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы желаете содействовать данным, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.b")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы содержащие <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li><a class="external" href="https://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/base/index.html b/files/ru/web/html/element/base/index.html new file mode 100644 index 0000000000..3ae5989fe1 --- /dev/null +++ b/files/ru/web/html/element/base/index.html @@ -0,0 +1,152 @@ +--- +title: <base> +slug: Web/HTML/Element/base +tags: + - <base> + - HTML + - атрибуты <base> + - метаданные +translation_of: Web/HTML/Element/base +--- +<p id="Summary">{{HTMLRef}}</p> + +<p><strong>HTML элемент</strong> <strong><code><base></code> </strong>определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один <strong><code><base></code></strong> элемент в одном документе. <br> + Основной адрес (URL) документа можно запросить скриптом используя {{domxref('document.baseURI')}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории элемента</a></th> + <td>Метаданные (Metadata)</td> + </tr> + <tr> + <th>Отображение на странице</th> + <td>Не отображается, это {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Открывающий, закрывающий теги</th> + <td>Без закрывающего тега.</td> + </tr> + <tr> + <th>Содержится в</th> + <td>{{HTMLElement("head")}}, {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th>Использование в ARIA roles</th> + <td>Нет</td> + </tr> + <tr> + <th>Интерфейс DOM</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты_<base>">Атрибуты <strong><code><base></code></strong></h2> + +<p><span style="line-height: 21px;">К элементу </span><strong><code><base> </code></strong><code>можно применять</code><span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты.</a></p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Базовый адрес (URL) для указания полного пути (основной, главный адрес). Если указан данный атрибут, значит этот элемент должен находиться до других элементов с атрибутами URLs. Разрешены абсолютные (внешние) и относительные (внутренние) адреса (URLs).</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Значение атрибута определяет имя контекста, которое применяется для ссылок (<span class="tag"><a></span>) и форм (<span class="tag"><form></span>). Они нужны <em>для отображения контекста</em> (пример: вкладка, окно или встроенный фрейм). Следующие ключевые слова имеют специальные значения: + <ul> + <li><strong><code>_self</code></strong>: загружает результат в текущем окне или вкладке. <em>Если атрибут не указан, является значением по умолчанию.</em></li> + <li><code>_<strong>blank</strong></code>: загружает результат в новом окне или бланке.</li> + <li><strong><code>_parent</code></strong>: загружает данные в родительском окне. Если значение <strong>_ parent </strong>не указано, используется значение <strong><code>_self</code></strong>.</li> + <li><strong><code>_top</code></strong>: загружает данные в контексте верхнего уровня (то есть, отображает полученный контекст без обратного перехода, если не имеет родительского значения). Если нет родительских данных используется как <strong><code>_self</code></strong>.</li> + </ul> + </dd> +</dl> + +<div class="note"><strong>Примечание:</strong> <code>если указано несколько элементов <base></code> , будут использованы только первые <strong>href</strong> и <strong>target</strong>; все последующие значения проигнорируются.</div> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html notranslate"><base href="http://www.example.com/page.html"> +<base target="_blank" href="http://www.example.com/page.html"> +</pre> + +<h2 id="Specifications" name="Specifications">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Указано для <code>target</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Добавлен <code>target</code></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддердка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Поддержка относительных адресов (URIs <code>href)</code> была добавлена в Gecko 2.0 (Firefox 4.0)</p> + +<p>[2] До Internet Explorer 7, <code>нахождение </code><strong><code><base> </code></strong><code>могло быть</code> в любом месте документа. Поддержка относительных адресов (URLs) была удалена в Internet Explorer 8.</p> diff --git a/files/ru/web/html/element/basefont/index.html b/files/ru/web/html/element/basefont/index.html new file mode 100644 index 0000000000..a6b396a7c2 --- /dev/null +++ b/files/ru/web/html/element/basefont/index.html @@ -0,0 +1,58 @@ +--- +title: <basefont> +slug: Web/HTML/Element/basefont +translation_of: Web/HTML/Element/basefont +--- +<div>{{obsolete_header}}</div> + +<p><span class="seoSummary">The obsolete <strong>HTML Base Font element</strong> (<strong><code><basefont></code></strong>) sets a default font fa</span><span class="seoSummary">ce, size, and color for the other elements which are descended from its parent element.</span> With this set, the font's size can then be varied relative to the base size using the {{HTMLElement("font")}} element.</p> + +<p>You should not use this element; instead, you should use CSS properties such as {{cssxref("font")}}, {{cssxref("font-family")}}, {{cssxref("font-size")}}, and {{cssxref("color")}} to change the font configuration for an element and its contents.</p> + +<h2 id="Attributes">Attributes</h2> + +<p>Like all other HTML elements, this element supports the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>This attribute contains a list of one or more font names. The document text in the default style is rendered in the first font face that the client's browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7 with 1 being the smallest and 3 the default.</dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p><strong>Do not use this element! </strong>Though once (imprecisely) normalized in HTML 3.2, it wasn't supported in all major browsers. Further, browsers, and even successive versions of browsers, never implemented it in the same way: practically, using it has always brought <em>indeterminate</em> results.</p> + +<p>The <code><basefont></code> element was deprecated in the standard at the same time as all elements related to styling only. Starting with HTML 4, HTML does not convey styling information anymore (outside the {{HTMLElement("style")}} element or the <strong>style</strong> attribute of each element). In HTML5, this element has been removed completely. For any new web development, styling should be written using <a href="/en-US/docs/CSS" title="CSS">CSS</a> only.</p> + +<p>The former behavior of the {{HTMLElement("font")}} element can be achieved, and even better controlled using the <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a> properties.</p> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the {{domxref("HTMLBaseFontElement")}} interface.</p> + +<h2 id="Example">Example</h2> + +<pre><basefont color="#FF0000" face="Helvetica" size="+2" /> +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.basefont")}}</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>HTML 3.2 supports the basefont element but only with the size attribute.</li> + <li>The strict HTML and XHTML specifications do not support this element.</li> + <li>Despite being part of transitional standards, some standards-focused browsers like Mozilla and Opera do not support this element.</li> + <li>This element can be imitated with a CSS rule on the {{HTMLElement("body")}} element.</li> + <li>XHTML 1.0 requires a trailing slash for this element: <code><basefont /></code>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/bdi/index.html b/files/ru/web/html/element/bdi/index.html new file mode 100644 index 0000000000..daf089fa86 --- /dev/null +++ b/files/ru/web/html/element/bdi/index.html @@ -0,0 +1,139 @@ +--- +title: <bdi> +slug: Web/HTML/Element/bdi +tags: + - BDI + - HTML + - Веб + - Текстовая семантика + - Элемент +translation_of: Web/HTML/Element/bdi +--- +<h2 id="Описание">Описание</h2> + +<p><strong>HTML элемент <code><bdi></code></strong><em> </em>(<em>bidirectional isolation</em>, или изоляция двунаправленности [текста]) изолирует от окружающего текста текстовый фрагмент, направление в котором может отличаться от направления окружающего текста (но не обязательно отличается).</p> + +<p>Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.</p> + +<p class="note">Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}<code>: isolate</code> к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передается только с помощью элемента <code><bdi></code>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображен корректно при использовании HTML элемента, и некорректно при использовании только CSS стилей.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>Like all other HTML elements, this element has the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>, with a slight semantic difference: the <strong>dir</strong> attribute is not inherited. If not set, its default value is the <code>auto</code> which let the browser decide the direction based on the element's content.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p> +</pre> + +<h3 id="Result">Result</h3> + +<p dir="ltr">This arabic word REDLOHECALP_CIBARA is automatically displayed right-to-left.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>16</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="ltr" id="See_also">See also</h2> + +<ul> + <li>Related HTML element: {{HTMLElement("bdo")}}</li> + <li>Related HTML properties: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/bdo/index.html b/files/ru/web/html/element/bdo/index.html new file mode 100644 index 0000000000..dc7c1201e4 --- /dev/null +++ b/files/ru/web/html/element/bdo/index.html @@ -0,0 +1,110 @@ +--- +title: '<bdo>: The Bidirectional Text Override element' +slug: Web/HTML/Element/bdo +tags: + - направление текста +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент переопределения двунаправленного текста </strong> (<strong><code><bdo></code></strong>) переопределяет текущее направление текста так, что текст внутри отображается в другом направлении.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> + + + +<p>Текстовые символы рисуются от заданной точки в указанном направлении; индивидуальная ориентация символов не меняется (к примеру, символы не зеркалятся).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Допустимый контент</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Закрывающий тег</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Допустимые родители</th> + <td>Все элементы, принимающие <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>,</td> + </tr> + <tr> + <th scope="row">Допустимые ARIA-роли</th> + <td>Любый</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} до Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует интерфейс <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> для этого элемента.</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент поддерживает <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>Направление, в котором должен отображаться текст внутри элемента. Возможные значения: + <ul> + <li><code>ltr</code>: Указывает, что текст должен идти слева направо.</li> + <li><code>rtl</code>: Указывает, что текст должен идти справа налево.</li> + </ul> + </dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><!-- Переключение направления текста --> +<p>This text will go left to right.</p> +<p><bdo dir="rtl">This text will go right +to left.</bdo></p> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Примечания">Примечания</h2> + +<p>Спецификация HTML 4 не указывала события для этого элемента; они были добавлены в XHTML.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/ru/web/html/element/blockquote/index.html b/files/ru/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..5bee0521f5 --- /dev/null +++ b/files/ru/web/html/element/blockquote/index.html @@ -0,0 +1,157 @@ +--- +title: <blockquote> +slug: Web/HTML/Element/blockquote +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="Описание">Описание</h2> + +<p><strong>HTML-элемент <code><blockquote></code> </strong>(от англ. <em>Block Quotation</em>) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри <a href="/en-US/docs/HTML/Element/blockquote#Notes" title="HTML/Element/blockquote#Notes">Примечание</a>, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте <strong>cite</strong>, тогда как текстовое представление источника может быть задано элементом {{HTMLElement("cite")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам запрос.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_контент" title="HTML/Content categories#Flow content">Основной контент</a>, секционный корень, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_контент" title="HTML/Content categories#Flow content">Основной контент</a>.</td> + </tr> + <tr> + <th scope="row">Опускание тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элеметны</th> + <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_контент" title="HTML/Content categories#Flow content">основной контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA роли</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Для данного элемента доступны<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>URL, указывающий на исходный документ или сообщение, откуда была взята цитата. Этот атрибут предназначен для того, чтобы сослаться на информацию, объясняющую контекст, или ссылки, из которых была взята цитата.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> + <p>This is a quotation taken from the Mozilla Developer Center.</p> +</blockquote> +</pre> + +<p>Результат:</p> + +<blockquote cite="http://developer.mozilla.org"> +<p>This is a quotation taken from the Mozilla Developer Center.</p> +</blockquote> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Примечание">Примечание</h2> + +<p>Чтобы изменить отступ элемента <code><blockquote></code>, используйте <a href="/en-US/docs/CSS" title="CSS">CSS</a>-свойство {{cssxref("margin")}}.</p> + +<p>Для коротких цитат используйте<code> элемент </code>{{HTMLElement("q")}}.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("q")}} для встроенных (строковых) цитат.</li> + <li>Элемент {{HTMLElement("cite")}} для указания источника.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/body/index.html b/files/ru/web/html/element/body/index.html new file mode 100644 index 0000000000..8c2cacdfe0 --- /dev/null +++ b/files/ru/web/html/element/body/index.html @@ -0,0 +1,169 @@ +--- +title: <body> +slug: Web/HTML/Element/body +tags: + - Element + - HTML + - Web + - Веб + - Корневой элемент + - Разделы + - Секционирование + - Справка + - Элемент +translation_of: Web/HTML/Element/body +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><body></code></strong> представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент <code><body></code>.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">Секционный корень</a></td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Открывающий тег может быть пропущен, если первое, что находится внутри него, не является пробелом, комментарием, элементом {{HTMLElement("script")}} или элементом {{HTMLElement("style")}}. Закрывающий тег может быть пропущен если элемент <code><body></code> содержит контент или имеет открывающий тег, и за ним сразу не следует комментарий.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Этот элемент должен быть вторым в элементе {{HTMLElement("html")}}</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Отсутствуют</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li>Элемент <code><body></code> представляет интерфейс {{domxref("HTMLBodyElement")}}.</li> + <li>Вы можете получить доступ к элементу <code><body></code> через свойство {{domxref("document.body")}}.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>Цвет текста гиперссылок, когда они выделены. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":active")}}.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>URI изображения для использования в качестве фона. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("background")}}.</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Цвет фона документа. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("background-color")}}.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>Отступ от нижнего края элемента <code><body></code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-bottom")}}.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>Отступ от левого края элемента <code><body></code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-left")}}.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>Цвет текста непосещенных гипертекстовых ссылок. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":link")}}.</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>Функция для вызова после того, как пользователь распечатал документ.</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>Функция для вызова, когда пользователь отправляет документ на печать.</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>Функция для вызова перед закрытием окна документа или переходом на другую, внешнюю, страницу в этой же вкладке.</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>Функция для вызова при потери документом фокуса.</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>Функция для вызова, когда документ не загружается должным образом.</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>Функция для вызова, когда документ получает фокус.</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>Функция для вызова, когда изменяется часть идентификатора фрагмента (начинается с символа <code>'#'</code>) текущего адреса документа.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Функция для вызова при изменении предпочитаемых языков.</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>Функция для вызова, когда документ закончил загрузку (страницы загружена).</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>Функция для вызова, когда документ получил сообщение.</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>Функция для вызова, когда происходит сбой сетевого соединения.</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>Функция для вызова, когда произошло восстановление сетевого соединения.</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>Функция для вызова, когда пользователь осуществил управление историей сеанса.</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>Функция для вызова, когда произошло продвижение пользователя вперед по истории транзакций (например, обновление страницы).</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>Функция для вызова, когда размер документа был изменен.</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>Функция для вызова, когда изменяется содержимое хранилища (<a href="/ru/docs/Web/API/Web_Storage_API">Web Storage</a>).</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>Функция для вызова, когда произошло продвижение пользователя назад по истории транзакций (например, переход на предыдущую страницу в активной вкладке).</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>Функция для вызова, когда пользователь покидает страницу (закрытие вкладки или окна браузера).</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>Отступ от правого края элемента <code><body></code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-right")}}.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>Основной цвет текста. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}}.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>Отступ от верхнего края элемента <code><body></code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-top")}}.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>Цвет текста посещенной гипертекстовой ссылки. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":visited")}}.</em></dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><html> + <head> + <title>Заголовок документа</title> + </head> + <body> + <p>Это параграф</p> + </body> +</html> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Изменен список несогласованных свойств.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ранее устаревшие атрибуты больше не поддерживаются. Определено поведение несогласованных и не стандартизированных атрибутов <code>topmargin</code>, <code>leftmargin</code>, <code>rightmargin</code> и <code>bottommargin</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Устаревшие атрибуты <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> и <code>vlink</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div> + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/ru/web/html/element/br/index.html b/files/ru/web/html/element/br/index.html new file mode 100644 index 0000000000..555d249c61 --- /dev/null +++ b/files/ru/web/html/element/br/index.html @@ -0,0 +1,111 @@ +--- +title: <br> +slug: Web/HTML/Element/br +tags: + - HTML + - Элемент +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><br></code></strong> устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> + +<div class="hidden"> +<p>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> +</div> + +<p>Как мы видим из примера выше, элемент <code><br></code> поставлен в том месте, где мы хотим перенести строку. Текст после <code><br></code> начинается со следующей строки текстового блока.</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Не используйте <strong><code><br></code></strong> для увеличения разрыва между строками в тексте; используйте <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>-свойство {{cssxref('margin')}} элемента {{HTMLElement("p")}}.</p> +</div> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p><span style="line-height: 21px;">Этот элемент включает в себя </span><a href="ru/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt> + <h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + </dt> + <dt>{{htmlattrdef("clear")}}</dt> + <dd>Определяет, где начинается следующая строка после перевода строки.</dd> +</dl> + +<h2 id="Example" name="Example">Стилизация с CSS</h2> + +<p>Элемент <code><br></code> имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.</p> + +<p>Вы можете установить значение {{cssxref("margin")}} на <code><br></code> чтобы увеличть расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство {{cssxref("line-height")}} для этой цели.</p> + +<h2 id="Example" name="Example">Примеры</h2> + +<h3 id="Простой_br">Простой br</h3> + +<p>В следующем примере мы используем элемент <code><br></code> для разрыва линий в почтовом адресе:</p> + +<pre class="brush: html">Mozilla<br> +331 E. Evelyn Avenue<br> +Mountain View, CA<br> +94041<br> +USA<br></pre> + +<p>Результат будет выглядеть так:</p> + +<p>{{ EmbedLiveSample('Простой_br', '100%', '90') }}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Разделять абзацы в тексте, используя <code><br></code> не только плохая практика, но и проблема для людей, которые используют программы чтения с экрана. Программы чтения могут сообщать о наличии элемента, но не содержимом в <code><br></code>. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана.</p> + +<h2 id="Техническая_сводка">Техническая сводка</h2> + +<ul class="htmlelt"> + <li><dfn><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></dfn> <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">текстовый контент</a>.</li> + <li><dfn>Разрешенное содержимое</dfn> Отсутствует, это {{Glossary("пустой элемент")}}.</li> + <li><dfn>Пропуск тегов</dfn>Должен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как <code><br /></code>.</li> + <li><dfn>Допустимые родительские элементы</dfn> Любой элемент, который поддерживает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">текстовый контент</a>.</li> + <li><dfn>Интерфейс DOM</dfn> {{domxref("HTMLBRElement")}}</li> +</ul> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("address")}}</li> + <li>Элемент {{HTMLElement("p")}}</li> +</ul> diff --git a/files/ru/web/html/element/canvas/index.html b/files/ru/web/html/element/canvas/index.html new file mode 100644 index 0000000000..b138e2b3a7 --- /dev/null +++ b/files/ru/web/html/element/canvas/index.html @@ -0,0 +1,183 @@ +--- +title: <canvas> +slug: Web/HTML/Element/canvas +translation_of: Web/HTML/Element/canvas +--- +<p><strong>HTML <code><canvas></code> Элемент </strong>может быть использован для отрисовки графики через скрипты (обычно используется <a href="/en-US/docs/Web/JavaScript">JavaScript</a>). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока <code><canvas></code>. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.</p> + +<p>Больше статей о canvas <a href="/en-US/docs/Web/API/Canvas_API">canvas topic page</a>.</p> + +<table class="properties" style="height: 537px; width: 437px;"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Embedded_content">embedded content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Transparent но без <a href="/en-US/docs/HTML/Content_categories#Interactive_content">interactive content</a> descendants except(соглашаться?) для {{HTMLElement("a")}} елементы, {{HTMLElement("button")}} елементы, {{HTMLElement("input")}} елементы как {{htmlattrxref("type", "input")}} атрибут is <code>checkbox</code>, <code>radio</code>, или <code>button</code>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing_content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Высота в координантном пространстве в CSS пикселях. По умолчанию 150.</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt> + <dd>Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Ширина в координантном пространстве в CSS пикселях. По умолчанию 300.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<h3 id="Обязательно_<canvas>_тег">Обязательно <code></canvas></code> тег</h3> + +<p>В отличии от {{HTMLElement("img")}} элемента, {{HTMLElement("canvas")}} элемент <strong>требует </strong>закрытия тега (<code></canvas></code>).</p> + +<h3 id="Определение_размеров_холста">Определение размеров холста</h3> + +<p>Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах <code><canvas></code>, и не используя CSS.</p> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="300"> + Извините, ваш браузер нет поддерживает&lt;canvas&gt; элемент. +</canvas> +</pre> + +<p>Если ваш холст не использует transparency, установите <code>moz-opaque</code> атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .</p> + +<pre class="brush: html notranslate"><canvas id="mycanvas" moz-opaque></canvas></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td> + <td>9.0</td> + <td>9.0<sup>[4]</sup></td> + <td>2.0<sup>[5]</sup></td> + </tr> + <tr> + <td><code>moz-opaque</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>moz-opaque</code></td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas ширина и высота were signed integers instead of unsigned integers.</p> + +<p>[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</p> + +<p>[3] Before Gecko 12.0 {{geckoRelease("12.0")}}, если JavaScript is disabled, the <code><canvas></code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Сейчас the fallback контент is rendered instead.</p> + +<p>[4] See the <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog for Opera 9.0</a>.</p> + +<p>[5] Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.</p> + +<h2 id="См.также">См.также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">MDN canvas portal</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li> + <li><a href="/en-US/demos/tag/tech:canvas">Canvas-related demos</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/caption/index.html b/files/ru/web/html/element/caption/index.html new file mode 100644 index 0000000000..e678d6a922 --- /dev/null +++ b/files/ru/web/html/element/caption/index.html @@ -0,0 +1,154 @@ +--- +title: '<caption>: The Table Caption element' +slug: Web/HTML/Element/caption +tags: + - Выравнивание + - Заголовок + - Стилизация +translation_of: Web/HTML/Element/caption +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML</strong> элемент заголовка таблицы (<strong><code><caption></code></strong>) определяет название (заголовок) таблицы. Если этот элемент используется, он <em>всегда</em> должен быть первым вложенным элементом тэга {{HTMLElement("table")}}.</span> Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>.</td> + </tr> + <tr> + <th scope="row">Парность тегов</th> + <td>Конечный тег может быть опущен, если элемент не следует сразу за ASCII пробелом или комментарием.</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Элемент {{HTMLElement("table")}} как его первый потомок</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA-роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + +<p>Следующие атрибуты устаревшие и не должны использоваться. Они описаны ниже для справки при обновлении кода и для общего сведения.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{obsolete_inline}}</dt> + <dd>Этот пронумерованный атрибут указывает как заголовок должен быть выравнен по отношению к таблице. Он может иметь одно или несколько следующих значений : + <dl> + <dt><code>left</code></dt> + <dd>Заголовок отображается слева от таблицы.</dd> + <dt><code>top</code></dt> + <dd>Заголовок отображается над таблицей.</dd> + <dt><code>right</code></dt> + <dd>Заголовок отображается справа от таблицы.</dd> + <dt><code>bottom</code></dt> + <dd>Заголовок отображается под таблицей.</dd> + </dl> + + <div class="note"><strong>Примчание к использованию: </strong>Не используйте этот атрибут, так как он устарел. Элемент {{HTMLElement("caption")}} должен быть стилизован с использованием свойств <a href="/en-US/docs/CSS">CSS</a> {{cssxref("caption-side")}} и{{cssxref("text-align")}}.</div> + </dd> +</dl> + +<h2 id="Примечание_к_использованию">Примечание к использованию</h2> + +<p>Когда элемент {{HTMLElement("table")}}, содержащий <code><caption></code> является единственным потомком элемента {{HTMLElement("figure")}}, вам следует использовать элемент {{HTMLElement("figcaption")}} вместо <code><caption></code>.</p> + +<h2 id="Пример">Пример</h2> + +<p>Просто пример, представляющий таблицу, которая содержит заголовок.</p> + +<pre class="brush: html"><table> + <caption>Example Caption</caption> + <tr> + <th>Login</th> + <th>Email</th> + </tr> + <tr> + <td>user1</td> + <td>user1@sample.com</td> + </tr> + <tr> + <td>user2</td> + <td>user2@sample.com</td> + </tr> +</table></pre> + +<div class="hidden"> +<pre class="brush: css">caption { + caption-side: top; + align: right; +} +table { + border-collapse: collapse; + border-spacing: 0px; +} +table, th, td { + border: 1px solid black; +} +</pre> +</div> + +<p>{{EmbedLiveSample('Example', 650, 100)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.caption")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие связанные с таблицей HTML элементы: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS свойства, которые могут быть применены для стилизации элемента {{HTMLElement("caption")}}: + <ul> + <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/element/cite/index.html b/files/ru/web/html/element/cite/index.html new file mode 100644 index 0000000000..62a5beb61d --- /dev/null +++ b/files/ru/web/html/element/cite/index.html @@ -0,0 +1,152 @@ +--- +title: <cite> +slug: Web/HTML/Element/cite +tags: + - HTML + - Источник + - Цитата + - Элемент +translation_of: Web/HTML/Element/cite +--- +<h2 id="Описание">Описание</h2> + +<p><strong>HTML-элемент <cite></strong> (<em>от англ. Citation</em>) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращенном виде в соответствии с правилами, используемых для добавления метаданных цитирования.</p> + +<div class="note"> +<p><strong>Об использовании:</strong></p> + +<ul> + <li>Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчет, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.</li> + <li>Спецификация W3C утверждает, что ссылка на творческую работу может содержать имя автора, в то время, как WHATWG заявляет, что она не может включать имя человена ни в коем случае.</li> + <li>Используйте атрибут {{htmlattrxref("cite", "blockquote")}} элемента {{HTMLElement("blockquote")}} или элемента {{HTMLElement("q")}} для ссылки на интернет-ресурс источника.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Для данного элемента доступны только <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html">More information can be found in <cite>[ISO-0000]</cite></pre> + +<p>{{EmbedLiveSample('Пример')}}</p> + +<h2 id="Примечание">Примечание</h2> + +<p>To avoid the default italic style from being used for the <cite> element use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("font-style")}} property.</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("blockquote")}} для длинных цитат.</li> + <li>Элемент {{HTMLElement("q")}} для встраиваимых цитат.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/code/index.html b/files/ru/web/html/element/code/index.html new file mode 100644 index 0000000000..2bc6c488e3 --- /dev/null +++ b/files/ru/web/html/element/code/index.html @@ -0,0 +1,116 @@ +--- +title: '<code>: The Inline Code element' +slug: Web/HTML/Element/code +tags: + - HTML + - Код + - Элемент +translation_of: Web/HTML/Element/code +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>Элемент HTML <code><code></code></strong> отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода.</span> По умолчанию текст содержимого отображается с использованием шрифта монопространства по умолчанию {{Glossary("user agent", "пользовательского агента")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div> + +<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам <span class="st">запрос на принятие изменений.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя только <a href="/ru/Web/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> + +<h2 id="Пример">Пример</h2> + +<p>Текстовый абзац, включающий <code><code></code>:</p> + +<pre class="brush: html notranslate"><p>The function <code>selectAll()</code> highlights all the text in the +input field so the user can, for example, copy or delete the text.</p> +</pre> + +<p>Вывод, генерируемый этим HTML, выглядит так:</p> + +<p>{{EmbedLiveSample("Example", 640, 70)}}</p> + +<h2 id="Примечания">Примечания</h2> + +<p>Для представления нескольких строк кода, оберните элемент <code><code></code> в элемент {{HTMLElement("pre")}}. Элемент <code><code></code> сам по себе представляет только один элемент кода или строку кода.</p> + +<p>CSS правило может быть определено для того, чтобы селектор <code>code</code> переопределил шрифт браузера по умолчанию. Предпочтения, установленные пользователем, могут иметь приоритет над указанными CSS.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div> + +<p>{{Compat("html.elements.code")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("command")}} (deprecated)</li> + <li>{{HTMLElement("var")}}</li> + <li>{{HTMLElement("pre")}}</li> +</ul> diff --git a/files/ru/web/html/element/col/index.html b/files/ru/web/html/element/col/index.html new file mode 100644 index 0000000000..312a30bff0 --- /dev/null +++ b/files/ru/web/html/element/col/index.html @@ -0,0 +1,236 @@ +--- +title: <col> +slug: Web/HTML/Element/col +tags: + - HTML + - Веб + - Ссылка + - Элемент + - таблицы + - табличные данные HTML +translation_of: Web/HTML/Element/col +--- +<p>{{HTMLRef}}<br> + <strong>HTML элемент</strong> <strong><code><col></code></strong> определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе {{HTMLElement("colgroup")}}.</p> + +<p>Этот элемент позволяет стилизировать столбцы с использованием CSS, но только несколько атрибутов будут иметь эффект на столбец (<a href="https://www.w3.org/TR/CSS21/tables.html#columns">смотри спецификацию CSS 2.1</a>).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">Категория контента</a></th> + <td>Нет.</td> + </tr> + <tr> + <th scope="row">Допустимый контент</th> + <td>Нет, это {{Glossary("пустой элемент")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Начальный тег обязательный, но, поскольку это элемент без контента, использование концевого тега запрещено.</td> + </tr> + <tr> + <th scope="row">Допустимые родительские теги</th> + <td>Только {{HTMLElement("colgroup")}}, хотя он может быть определён неявно, т. к. его стартовый тег не является обязательным. Тег {{HTMLElement("colgroup")}} обязан не иметь атрибута {{htmlattrxref("span", "colgroup")}}.</td> + </tr> + <tr> + <th scope="row">Допустимые <a href="https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA">ARIA </a> роли</th> + <td>Нет.</td> + </tr> + <tr> + <th scope="row">Интерфейс DOM</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">общие атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Этот перечисляемый атрибут указывает, как будет обрабатываться горизонтальное выравнивание контента каждой ячейки столбца. Возможные значения: + <ul> + <li><code>left</code>, выравнивает контент к левой стророне ячейки</li> + <li><code>center</code>, центрирует контент ячейки</li> + <li><code>right</code>, выравнивает контент к правой стророне ячейки</li> + <li><code>justify</code>, вставляет пробелы в текстовый контент так, чтобы контент был выравнен по ширине</li> + <li><code>char</code>, выравнивает текстовый контент по специальному символу с минимальным смещением, определяемым атрибутами {{htmlattrxref("char", "col")}} и {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Если этот атрибут не установлен, его значение будет переопределено от {{htmlattrxref("align", "colgroup")}} элемента {{HTMLElement("colgroup")}}, к которому этот элемент принадлежит. Если его также нет, предполагается значение <code>left</code>.</p> + + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, поскольку он устарел (не поддерживается) в последнем стандарте. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values: + + <ul> + <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "col")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Этот атрибут определяет цвет фона каждой яцейки столбца. Это один из 6-и значных кодов в шестнадцатеричной системе считсления, определенный как <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB </a>с префиксом '#'. Можно использовать одну из шестнадцати предопределенных строк: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Замечание по использованию:</strong> Не используй этот атрибут, тпоскольку он нестандартный и реализован только в некоторых версиях Microsoft Internet Explorer: элемент {{HTMLElement("col")}} должне быть стилизован с использованием <a href="/en-US/docs/CSS">CSS</a>. Для получения подобного эффекта, используй свойство <a href="/en-US/docs/CSS">CSS</a> {{cssxref("background-color")}}, для соответсвующих элементов {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "col")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "col")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>This attribute contains a positive integer indicating the number of consecutive columns the <code><col></code> element spans. If not present, its default value is <code>1</code>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>Please see the {{HTMLElement("table")}} page for examples on <code><col></code>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + + + +<p>{{Compat("html.elements.col")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>Other table-related HTML elements: {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <code><col></code> element: + <ul> + <li>the {{cssxref("width")}} property to control the width of the column;</li> + <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/element/data/index.html b/files/ru/web/html/element/data/index.html new file mode 100644 index 0000000000..776121917f --- /dev/null +++ b/files/ru/web/html/element/data/index.html @@ -0,0 +1,101 @@ +--- +title: <data> +slug: Web/HTML/Element/data +tags: + - Element + - HTML + - Reference + - Web + - Веб + - Элемент +translation_of: Web/HTML/Element/data +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><data></code></strong> связывает данное содержимое с машиночитаемым представлением.</span> Если содержимое относится к времени или дате, необходимо использовать элемент {{HTMLElement("time")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLDataElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Этот атрибут определяет машиночитаемый перевод содержимого элемента.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>Следующий пример отображает названия продуктов, а также связывает каждое имя с номером продукта.</p> + +<pre class="brush: html"><p>New Products</p> +<ul> + <li><data value="398">Mini Ketchup</data></li> + <li><data value="399">Jumbo Ketchup</data></li> + <li><data value="400">Mega Jumbo Ketchup</data></li> +</ul> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Начальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.data")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>HTML-элемент {{HTMLElement("time")}}.</li> +</ul> diff --git a/files/ru/web/html/element/datalist/index.html b/files/ru/web/html/element/datalist/index.html new file mode 100644 index 0000000000..1479b7bcf6 --- /dev/null +++ b/files/ru/web/html/element/datalist/index.html @@ -0,0 +1,113 @@ +--- +title: <datalist> +slug: Web/HTML/Element/datalist +tags: + - Element + - HTML + - HTML формы + - HTML5 + - Reference + - Web + - Веб + - Элемент +translation_of: Web/HTML/Element/datalist +--- +<p><strong>HTML-элемент<code> <datalist></code></strong> содержит набор опций ({{HTMLElement("option")}}), доступных для выбора. Выбранное значение будет установлено для элемента {{HTMLElement("input")}}, с атрибутом {{htmlattrxref("list", "input")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категория контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Либо фразовый контент, либо ноль или более элементов {{HTMLElement("option")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент, который может содержать <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLDataListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>С данным элементом можно использовать все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><label for="myBrowser">Choose a browser from this list:</label> +<input list="browsers" id="myBrowser" name="myBrowser" /> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> + <option value="Microsoft Edge"> +</datalist> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Примеры")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="Полифил">Полифил</h2> + +<p>Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифилл: <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a>.</p> + +<h2 id="Смотрите_так_же">Смотрите так же</h2> + +<ul> + <li class="last">Элемент {{HTMLElement("input")}} , в особенности его атрибут {{htmlattrxref("list", "input")}};</li> + <li class="last">Элемент {{HTMLElement("option")}}.</li> +</ul> + +<p class="last">{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/dd/index.html b/files/ru/web/html/element/dd/index.html new file mode 100644 index 0000000000..19f937c1c3 --- /dev/null +++ b/files/ru/web/html/element/dd/index.html @@ -0,0 +1,111 @@ +--- +title: '<dd>: Элемент описания определения' +slug: Web/HTML/Element/dd +tags: + - Description Details + - Element + - HTML + - Reference + - Web + - dd + - Веб + - Список определений + - Элемент + - списки +translation_of: Web/HTML/Element/dd +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><dd></code></strong> (<em>от англ. Description Details</em>) предоставляет подробности или определение предшествующего термина ({{HTMLElement("dt")}}) в списке определений ({{HTMLElement("dl")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Открывающий тег обязателен. Конечный тег может быть опущен, если за элементом {{HTMLElement("dd")}} непосредственно следует элемент <code><dd></code> или {{HTMLElement("dt")}}, или если в родительском элементе нет больше содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>{{HTMLElement("dl")}} или (в <a href="/ru/docs/Glossary/WHATWG">WHATWG</a> HTML) {{HTMLElement("div")}} который внутри элемента {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Предыдущий элемент</th> + <td>{{HTMLElement("dt")}} или другой {{HTMLElement("dd")}} элемент.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>Если значение атрибута установлено <code>yes</code>, текст определения не будет переноситься. Значение по умолчанию <code>no</code>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>Для примера смотрите <a href="/ru/docs/HTML/Element/dl#examples">образец для <dl> элемента</a>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.dd")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{HTMLELement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> +</ul> diff --git a/files/ru/web/html/element/del/index.html b/files/ru/web/html/element/del/index.html new file mode 100644 index 0000000000..ea09f3bddc --- /dev/null +++ b/files/ru/web/html/element/del/index.html @@ -0,0 +1,143 @@ +--- +title: '<del>: The Deleted Text element' +slug: Web/HTML/Element/del +tags: + - доступность +translation_of: Web/HTML/Element/del +--- +<p><span class="seoSummary">Элемент <strong>HTML <code><del></code> </strong>представляет диапазон текста, который был удален из документа. </span>Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент {{HTMLElement("ins")}} можно использовать для противоположной цели: указание текста, который был добавлен в документ.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div> + +<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>Этот элемент часто (но не обязательно) отображается с помощью применения зачеркнутого стиля к тексту.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a> или <a href="/en-US/docs/HTML/Content_categories#Flow_content">потоковый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Прозрачный</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Допустимые родители</th> + <td>Любой элемент, который принимает <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Допустимые ARIA роли</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Атрибуты этого элемента включают <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>URI для ресурса, который объясняет изменение (fнапример, протоколы соединений).</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Этот атрибут устанавливает время и дату изменение и должен представлять собой строку с допустимой датой и временем (время не является обязательным параметром - параметр опционален). Если значение не может быть проанализировано как дата с опциональм временем, элемент не будет иметь соответствующей временной отметки. Формат строки без времени смотри в {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}. Формат строки с датой и временем описан в {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local date and time string")}}.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><p><del>This text has been deleted</del>, +here is the rest of the paragraph.</p> +<del><p>This paragraph has been deleted.</p></del></pre> + +<h3 id="Результат">Результат</h3> + +<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p> + +<p><del>This paragraph has been deleted.</del></p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Присутствие элемента <code>del</code> не определено в конфигурации по умолчанию большинством технологий чтения с экрана. Его можно задать, используя свойство CSS {{cssxref("content")}}, а также {{cssxref("::before")}} и с помощью псевдоэлемента {{cssxref("::after")}}.</p> + +<pre>del::before, +del::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +del::before { + content: " [deletion start] "; +} + +del::after { + content: " [deletion end] "; +} +</pre> + +<p>Некоторые люди, использующие программы чтения с экрана, сознательно отключают определение контента, что создает дополнительную многословность. Поэтому важно не злоупотреблять этой техникой, применяя ее только в ситуациях, когда незнание контента, который был удален, может негативно повлиять на восприятие.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Короткая заметка о создании своих меток (больше доступности) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Тонкая настройка стилей уровня текста | Adrian Roselli</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.del")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("ins")}} элемент для вставки в текст</li> + <li> + <p>{{HTMLElement("s")}} элемент для зачеркивания, отдельный от представления удаленного текста</p> + </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/details/index.html b/files/ru/web/html/element/details/index.html new file mode 100644 index 0000000000..59a325fa0e --- /dev/null +++ b/files/ru/web/html/element/details/index.html @@ -0,0 +1,203 @@ +--- +title: <details> +slug: Web/HTML/Element/details +tags: + - Element + - HTML + - HTML interactive elements + - Reference + - Web + - details +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p>HTML-элемент<strong> <code><details></code></strong> используется для раскрытия скрытой (дополнительной) информации.</p> + +<p>Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <code><details> </code>является <code><summary></code>, содержимое элемента <code><summary></code> используется в качестве метки для виджета раскрытия.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</p> + +<p> </p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, sectioning root, interactive content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>One {{HTMLElement("summary")}} element followed by <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Элемент поддерживает только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><details> + <summary>Some details</summary> + <p>More info about the details.</p> +</details> + +<details open> + <summary>Even more details</summary> + <p>Here are even more details about the details.</p> +</details> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<div class="note"> +<p><strong>Примечание: </strong>Если приведенный выше пример не работает, см. {{anch("Browser compatibility")}} , чтобы определить поддерживает ли вообще ваш браузер эту функцию. </p> +</div> + +<h2 id="Примеры_стилизации">Примеры стилизации</h2> + +<p>Следуя более новой спецификации, Firefox отображает элемент summary как <code>display: list-item</code> и маркер можно стилизовать так же, как и элементы списка.</p> + +<p>Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент <code>::-webkit-details-marker</code>, с помощью которого можно стилизовать маркер. </p> + +<p>Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу <code>summary {display: block;}, а для </code>Chrome и Safari's установить <code>::-webkit-details-marker {display: none;}</code>. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно. </p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><details> + <summary>Some details</summary> + <p>More info about the details.</p> +</details></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">summary { + display: block; +} + + summary::-webkit-details-marker { + display: none; +} + +summary::before { + content: '\25B6'; + padding-right: 0.5em; +} + +details[open] > summary::before { + content: '\25BC'; +} +</pre> + +<h3 id="Result_2">Result</h3> + +<p>{{ EmbedLiveSample('Example_with_styling') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>12</td> + <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&search=details">In Development</a></td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&search=details">In Development</a></td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/ru/web/html/element/dfn/index.html b/files/ru/web/html/element/dfn/index.html new file mode 100644 index 0000000000..c34e105cbd --- /dev/null +++ b/files/ru/web/html/element/dfn/index.html @@ -0,0 +1,209 @@ +--- +title: '<dfn>: Элемент определения' +slug: Web/HTML/Element/dfn +translation_of: Web/HTML/Element/dfn +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>Элемент определения HTML</strong> (<strong><dfn><dfn></dfn></strong>) используется для указания термина, определяемого в контексте фразы или предложения.</span> Элемент{{HTMLElement("p")}}, пара{{HTMLElement("dt")}}/{{HTMLElement("dd")}} или {{HTMLElement("section")}} элемент, который является ближайшим предком <code><dfn></code> считается определением термина.</p> + +<p> </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-запрос.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории Контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но ни один {{HTMLElement("dfn")}} элемент не должен быть потомком.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Атрибуты этого элемента включают <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<p>В HTML5 {{htmlattrxref("title")}} атрибут имеет особое значение, как указано ниже.</p> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<p>Есть несколько не совсем очевидных аспектов использования элемента<code><dfn></code>. Мы рассмотрим их здесь.</p> + +<h3 id="Определяемый_термин">Определяемый термин</h3> + +<p>Определяемый термин устанавливается в соответствии с этими правилами:</p> + +<ol> + <li>Если <code><dfn></code> элемент имеет {{htmlattrxref("title")}} атрибут, значение атрибута <code>title</code> считается определяемым термином. Элемент должен по-прежнему иметь текст внутри него, но этот текст может быть аббревиатурой (возможно, с использованием{{HTMLElement("abbr")}}) или другой формой термина.</li> + <li>Если объект <code><dfn></code> содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является {{HTMLElement("abbr")}} элементом с атрибутом <code>title</code>, то строго значение <code>title</code> <code><abbr></code> элемента является определяемым термином.</li> + <li>В противном случае текстовое содержимое <code><dfn></code> элемента является определяемым термином. Это показано {{anch("Базовая идентификация термина", "в примере ниже")}}.</li> +</ol> + +<div class="note"> +<p>Если <code><dfn></code> элемент имеет атрибут <code>title</code>, он <em>должен</em> содержать определяемый термин и никакой другой текст.</p> +</div> + +<h3 id="Ссылки_на_<dfn>_элементы">Ссылки на <code><dfn></code> элементы</h3> + +<p>Если вы включаете атрибут {{htmlattrxref("id")}} в <code><dfn></code> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он еще не знает его, нажав на ссылку термина.</p> + +<p>Это показано ниже в примере {{anch("Ссылки на определения")}}.</p> + +<h2 id="Примечания_по_использованию_2">Примечания по использованию</h2> + +<ul> + <li>Элемент <code><dfn></code> отмечает определяемый термин; определение термина должно быть дано окружающим {{HTMLElement("p")}}, {{HTMLElement("section")}} или группой списков определений (обычно пара {{HTMLElement("dt")}}{{HTMLElement("dd")}}).</li> + <li>Точное значение определяемого термина определяется следующими правилами: + <ol> + <li>Если элемент <code><dfn></code> имеет {{htmlattrxref("title")}} атрибут, то термин является значением этого атрибута.</li> + <li>Иначе, если он содержит только {{HTMLElement("abbr")}} элемент с {{htmlattrxref("title")}} атрибутом, тогда термин является значением этого атрибута. Это продемонстрировано в {{anch("Использование сокращений и определений вместе")}} ниже.</li> + <li>В противном случае текстовое содержимое <code><dfn></code> элемента является определяемым термином.</li> + </ol> + </li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<p>Давайте рассмотрим несколько примеров различных сценариев использования.</p> + +<h3 id="Базовая_идентификация_термина">Базовая идентификация термина</h3> + +<p>В этом примере просто используется <code><dfn></code> элемент для нахождения местоположения термина в определении.<code>(<strong><dfn>&lt;dfn&gt;</dfn></strong>)</code></p> + +<h4 id="HTML">HTML</h4> + +<p> </p> + +<pre class="brush: html"><p><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) +используется для обозначения термина, определяемого в контексте фразы или предложения.</p> </pre> + +<p> </p> + +<p>Поскольку <code><dfn></code> элемент не имеет <code>title</code>, текстовое содержимое самого <code><dfn></code> элемента используется в качестве определяемого термина.</p> + +<h4 id="Результат">Результат</h4> + +<p>Это выглядит так в вашем браузере:</p> + +<p>{{ EmbedLiveSample('Базовая_идентификация_термина', '', '', '', 'Web/HTML/Element/dfn') }}</p> + +<h3 id="Ссылки_на_определения">Ссылки на определения</h3> + +<p>Чтобы добавить ссылки к определениям, вы создаете ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. <p><strong>Элемент определения HTML</strong> <code>(<strong><dfn>&lt;dfn&gt;</dfn></strong>)</code> используется для обозначения термина, определяемого в контексте фразы или предложения. </p></p> + +<h4 id="HTML_2">HTML</h4> + +<p> </p> + +<pre class="brush: html"><p><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) +используется для обозначения термина, определяемого в контексте фразы или предложения.</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem +vocant. Confecta res esset. Duo Reges: constructio interrete. Scrupulum, inquam, abeunti; </p> + +<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo? Equidem e Cn. Quid de +Pythagora? In schola desinis.</p> + +<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum est igitur, quid sit +voluptas; Quid enim? Non est igitur voluptas bonum. Urgent tamen et nihil remittunt. Quid +enim possumus hoc agere divinius?</p> + +<p>Из-за всего этого мы решили использовать +элемент<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> для этого проекта.</p></pre> + +<p> </p> + +<p>Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} <code>«definition-dfn»</code>, который может использоваться в качестве цели для ссылки. Позднее создается ссылка с использованием<code> <a></code> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на <code>«#definition-dfn»</code>, чтобы установить ссылку обратно на определение.</p> + +<h4 id="Результат_2">Результат</h4> + +<p>Полученный контент выглядит так:</p> + +<p>{{ EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Element/dfn') }}</p> + +<h3 id="Использование_сокращений_и_определений_вместе">Использование сокращений и определений вместе</h3> + +<p>В некоторых случаях вы можете использовать сокращение для термина при его определении. Это можно сделать с помощью<code><dfn></code> и {{HTMLElement("abbr")}} элементов вместе, например так:</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p><dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> является одним из самых +производительных научных инструментов, когда-либо созданных. +Он находится на орбите более 20 лет, просматривая небо и отправляя данные и фотографии +беспрецедентного качества и детализации.</p> + +<p>Действительно, HST, возможно, <abbr title="Hubble Space Telescope"></abbr> сделал больше +для развития науки, чем любое другое устройство, когда-либо созданное.</p> </pre> + +<p>Обратите внимание на <code><abbr></code> элемент, вложенный в <code><dfn></code>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своем атрибуте <code>title</code>. Последнее указывает на то, что сокращенный термин представляет собой определяемый термин.</p> + +<h4 id="Результат_3">Результат</h4> + +<p>Вывод приведенного выше кода выглядит следующим образом:</p> + +<p>{{ EmbedLiveSample('HTML_3', '', '', '', 'Web/HTML/Element/dfn') }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, <a href="https://github.com/mdn/browser-compat-data">просмотрите</a> https://github.com/mdn/browser-compat-data и отправьте нам pull-запрос.</div> + +<p>{{Compat("html.elements.dfn")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>Элементы, связанные со списками определений: {{HTMLElement("dl")}}{{HTMLElement("dt")}}{{HTMLElement("dd")}}</li> + <li>{{HTMLElement("abbr")}}</li> +</ul> diff --git a/files/ru/web/html/element/dialog/index.html b/files/ru/web/html/element/dialog/index.html new file mode 100644 index 0000000000..38ca0276b5 --- /dev/null +++ b/files/ru/web/html/element/dialog/index.html @@ -0,0 +1,251 @@ +--- +title: <dialog> +slug: Web/HTML/Element/dialog +tags: + - Element + - HTML + - HTML interactive elements + - Reference + - Web + - Диалог + - Экспериментальный + - Элемент +translation_of: Web/HTML/Element/dialog +--- +<div>{{SeeCompatTable}}</div> + +<p><strong>HTML-элемент <code><dialog></code> </strong>определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы <code><form></code> могут интегрироваться с диалогом с помощью указания атрибута <code>method="dialog"</code>. Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit.</p> + +<p>{{cssxref('::backdrop')}} CSS псевдо-элемент может быть использован для стилизации фона подложки элемента <code><dialog>, например для затемнения недоступного содержимого, пока диалог активен</code>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a></td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a></td> + </tr> + <tr> + <th scope="row">Опускание тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элементы</th> + <td>Любой элемент, в котором разрешен <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">основной поток</a></td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="/ru/docs/Web/HTML/Общие_атрибуты">общие атрибуты</a>. Атрибут <code>tabindex</code> не должен использоваться с <code><dialog></code> элементом.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Этот атрибут сообщает о том, что диалог активен и доступен для взаимодействия. Когда атрибут open не установлен, диалог не должен быть видим для пользователя.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Пример_1">Пример 1</h3> + +<pre class="brush: html notranslate"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="Пример_2">Пример 2</h3> + +<pre class="brush: html notranslate"><!-- Простой попап диалог с формой --> +<dialog id="favDialog"> + <form method="dialog"> + <section> + <p><label for="favAnimal">Favorite animal:</label> + <select id="favAnimal"> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select></p> + </section> + <menu> + <button id="cancel" type="reset">Cancel</button> + <button type="submit">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> + +<script> + (function() { + var updateButton = document.getElementById('updateDetails'); + var cancelButton = document.getElementById('cancel'); + var favDialog = document.getElementById('favDialog'); + + // Update button opens a modal dialog + updateButton.addEventListener('click', function() { + favDialog.showModal(); + }); + + // Form cancel button closes the dialog box + cancelButton.addEventListener('click', function() { + favDialog.close(); + }); + + })(); +</script> +</pre> + +<pre class="notranslate"><code><!-- Простой попап диалог с формой --> +<dialog id="favDialog"> + <form method="dialog"> + <section> + <p><label for="favAnimal">Favorite animal:</label> + <select id="favAnimal"> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select></p> + </section> + <menu> + <button id="cancel" type="reset">Cancel</button> + <button type="submit">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> + +<script> + (function() { + var updateButton = document.getElementById('updateDetails'); + var cancelButton = document.getElementById('cancel'); + var favDialog = document.getElementById('favDialog'); + + // Update button opens a modal dialog + updateButton.addEventListener('click', function() { + favDialog.showModal(); + }); + + // Form cancel button closes the dialog box + cancelButton.addEventListener('click', function() { + favDialog.close(); + }); + + })(); +</script></code></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Примечание</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Anchor points</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Anchor points</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Смотри {{bug("840640")}}.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Событие {{event("close")}}</li> + <li>Событие {{event("cancel")}}</li> + <li><a href="/ru/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/div/index.html b/files/ru/web/html/element/div/index.html new file mode 100644 index 0000000000..27ca73a4ae --- /dev/null +++ b/files/ru/web/html/element/div/index.html @@ -0,0 +1,148 @@ +--- +title: '<div>: Элемент разделения контента' +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - Web + - div + - Веб + - Группировка контента + - Потоковый контент + - Разделение контента + - Справка + - Элемент +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>Элемент разделения контента HTML</strong> (<code><strong><div></strong></code>) является универсальным контейнером для <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потокового контента</a>. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью {{glossary("CSS")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div> + +<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><div></code>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты {{htmlattrxref("class")}} или {{htmlattrxref("id")}}, помечать раздел документа, написанный на разных языках (используя атрибут {{htmlattrxref("lang")}}), и так далее.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a> или (в {{glossary("WHATWG")}} HTML), если родительским является элемент {{HTMLElement("dl")}}: один или несколько элементов {{HTMLElement("dt")}}, сопровождаемых одним или более элементами {{HTMLElement("dd")}}, в ряде случаев смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a> в качестве содержимого..<br> + Или (в {{glossary("WHATWG")}} HTML): элемент {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<div class="blockIndicator note"> + <p><strong>Заметка:</strong> Атрибут <code>align</code> устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства {{glossary("CSS")}} или методы, такие как <a href="/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> или <a href="/ru/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> для выравнивания и изменения положения элементов <code><div></code> на странице.</p> +</div> + +<h2 id="Примечание">Примечание</h2> + +<ul> + <li>Элемент <code><div></code> следует использовать только в том случае, если никакой другой семантический элемент (такой как {{HTMLElement("article")}} или {{HTMLElement("nav")}}) не подходит.</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<pre class="brush: html"><div> + <p>Любой тип контента. Например, + &lt;p&gt;, &lt;table&gt;. Все что угодно!</p> +</div> </pre> + +<p>Результат будет выглядеть так:</p> + +<p>{{EmbedLiveSample("Простой_пример", 650, 60)}}</p> + +<h3 id="Стилизованный_пример">Стилизованный пример</h3> + +<p>Этот пример создаёт прямоугольник с тенью, применяя стили к <code><div></code> с помощью CSS. Заметьте, что использование атрибута {{htmlattrxref("class")}} на элементе <code><div></code> даёт применение стилей <code>"shadowbox"</code> (в дословном переводе означает "теневая коробка") к элементу.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample("Стилизованный_пример", 650, 120)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени)</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Атрибут <code>align</code> больше не поддерживается</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Семантические секционные элементы: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>Элемент {{HTMLElement("span")}} для стилизации фразового контента.</li> +</ul> diff --git a/files/ru/web/html/element/dl/index.html b/files/ru/web/html/element/dl/index.html new file mode 100644 index 0000000000..511138568f --- /dev/null +++ b/files/ru/web/html/element/dl/index.html @@ -0,0 +1,223 @@ +--- +title: '<dl>: Элемент списка описаний' +slug: Web/HTML/Element/dl +tags: + - Element + - HTML + - Reference + - Web + - dl + - Веб + - Список определений + - Элемент + - списки +translation_of: Web/HTML/Element/dl +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><dl></code></strong> (<em>от англ.</em> <em>Description List</em>) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом {{HTMLElement("dt")}}) и их описаний (определяемых элементами {{HTMLElement("dd")}}). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, и если потомки элемента <code><dl></code> включают одну группу имя-значение явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Либо: Ноль или более групп каждая из которых состоит из одного или более элементов {{HTMLElement("dt")}} за которым следует один или более элементов {{HTMLElement("dd")}}, необязательно смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.<br> + Либо: Один или более элементов {{HTMLElement("div")}}, необязательно смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLDListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p><span style="line-height: 21px;">Для данного элемента доступны только </span><a href="/ru/docs/Web/HTML/Общие_атрибуты" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Одиночные_термин_и_определение">Одиночные термин и определение</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Одиночные_термин_и_определение")}}</p> + +<h3 id="Множественные_термины_с_одним_определением">Множественные термины с одним определением</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Множественные_термины_с_одним_определением")}}</p> + +<h3 id="Одиночный_термин_со_множественными_определениями">Одиночный термин со множественными определениями</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + <dd> + The Red Panda also known as the Lesser + Panda, Wah, Bear Cat or Firefox, is a + mostly herbivorous mammal, slightly larger + than a domestic cat (60 cm long). + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Одиночный_термин_со_множественными_определениями")}}</p> + +<h3 id="Множественные_термины_и_определения">Множественные термины и определения</h3> + +<p>Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путем комбинирования приведенных выше примеров.</p> + +<h3 id="Метаданные">Метаданные</h3> + +<p>Список определений очень полезен для отображения метаданных, как список пар ключ-значение.</p> + +<pre class="brush: html"><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:</p> + +<pre class="brush: css">dt:after { + content: ": "; +}</pre> + +<h3 id="Оборачивание_групп_имя-значение_в_HTMLElementdiv_элементы">Оборачивание групп имя-значение в {{HTMLElement("div")}} элементы</h3> + +<p><a href="/ru/docs/Glossary/WHATWG">WHATWG</a> HTML разрешает оборачивать каждую группу имя-значение в элементе {{HTMLElement("dl")}} в элемент {{HTMLElement("div")}}. Это может быть полезно, когда используются <a href="/ru/docs/Web/HTML/Microdata">микроданные</a> или когда <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> применяются к целой группе, или для стилевых целей.</p> + +<pre class="brush: html"><dl> + <div> + <dt>Name</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Born</dt> + <dd>1952</dd> + </div> + <div> + <dt>Birthplace</dt> + <dd>Japan</dd> + </div> + <div> + <dt>Color</dt> + <dd>Green</dd> + </div> +</dl> +</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>Не используйте данный элемент (как и элемент {{HTMLElement("ul")}}) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.</p> + +<p>Чтобы изменить отступ определений терминов, воспользуйтесь <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>-свойством {{cssxref("margin")}}.</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Каждый скринридер произносит содержимое элемента <code><dl></code> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <code><dl></code> это список. В связи с этим, убедитеcь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношенении с другими элементами списка в списке группы.</p> + +<ul> + <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt & dd</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.dl")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("dt")}}</li> + <li>Элемент {{HTMLElement("dd")}}</li> +</ul> diff --git a/files/ru/web/html/element/dt/index.html b/files/ru/web/html/element/dt/index.html new file mode 100644 index 0000000000..899aaf9fd9 --- /dev/null +++ b/files/ru/web/html/element/dt/index.html @@ -0,0 +1,102 @@ +--- +title: '<dt>: Термин для определения' +slug: Web/HTML/Element/dt +tags: + - Element + - HTML + - Reference + - Web + - dt + - Веб + - Список определений + - Элемент + - списки +translation_of: Web/HTML/Element/dt +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><dt></code> </strong>который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента {{HTMLElement("dl")}} .</span> Обычно за ним следует элемент {{HTMLElement("dd")}}. Кроме того, несколько элементов <code><dt></code> идущие друг за другом будут содержать свое определение в следующем идущем за ним элементом{{HTMLElement("dd")}}.</p> + +<p>Последующий элемент {{HTMLElement("dd")}} (<em>от англ. Description Details)</em> предоставляет определение или другой связанный текст, относящийся к термину, указанным с помощью <code><dt></code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, но без потомков {{HTMLElement("header")}}, {{HTMLElement("footer")}}, секционного контента или заголовочного контента.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Открывающий тег обязателен. Конечный тег может быть опущен, если за этим элементом непосредственно следует другой элемент <code><dt></code> или {{HTMLElement("dd")}}, или если в родительском элементе нет больше содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Перед элементом {{HTMLElement("dt")}} или {{HTMLElement("dd")}}, внутри {{HTMLElement("dl")}} или (в <a href="/ru/docs/Glossary/WHATWG">WHATWG</a> HTML) элемента {{HTMLElement("div")}} который внутри {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}} До Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует <a href="/ru/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> интерфейс для этого элемента.</td> + </tr> + </tbody> +</table> + +<h2 id="Аттрибуты">Аттрибуты</h2> + +<p>Этот элемент включает только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные аттрибуты</a>.</p> + +<h2 id="Пример">Пример</h2> + +<p>Для примера можно использовать <a href="/ru/docs//Web/HTML/Element/dl#Одиночные_термин_и_определение">образец для <code><dl></code> элемента</a>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.dt")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li> +</ul> diff --git a/files/ru/web/html/element/element/index.html b/files/ru/web/html/element/element/index.html new file mode 100644 index 0000000000..183d25eb92 --- /dev/null +++ b/files/ru/web/html/element/element/index.html @@ -0,0 +1,112 @@ +--- +title: <element> +slug: Web/HTML/Element/element +translation_of: Web/HTML/Element/element +--- +<p>{{obsolete_header}}</p> + +<div class="note"> +<p><strong>Заметка:</strong> Этот элемент удален из спецификации. Смотри <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">здесь </a>больше дополнительной информации от редактора спецификации.</p> +</div> + +<h2 id="Summary" name="Summary">Краткая информация</h2> + +<p><strong>HTML <code><element></code> element</strong> <span id="result_box" lang="ru"><span>используется для определения новых пользовательских элементов DOM</span></span>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Категория контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Прозрачный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td>???</td> + </tr> + <tr> + <th scope="row">Недопустимые теги</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные родительские элементы</span></span></th> + <td>???</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<p>Текст здесь.</p> + +<pre class="brush: html">Больше текста здесь. +</pre> + +<h2 id="Specifications" name="Specifications">Характеристики</h2> + +<p><code>Элемент <element></code> <span id="result_box" lang="ru"><span>ранее был в черновике спецификации</span></span> <a href="http://w3c.github.io/webcomponents/spec/custom/">Настраеваемых Элементов</a>, но был удален.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Web-компоненты: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/em/index.html b/files/ru/web/html/element/em/index.html new file mode 100644 index 0000000000..1ceea62afd --- /dev/null +++ b/files/ru/web/html/element/em/index.html @@ -0,0 +1,114 @@ +--- +title: '<em>: Элемент акцентирования' +slug: Web/HTML/Element/em +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><em></code> элемент</strong> отмечает акцентируемый текст. Элемент <code><em></code> может быть вложенным, причем каждый уровень вложенности указывает на большую степень акцента.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">Интерфейс DOM</th> + <td>{{domxref ("HTMLElement")}} до Gecko 1.9.2 (Firefox 4) включительно Firefox реализует интерфейс {{domxref ("HTMLSpanElement")}} для этого элемента.</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<p>Элемент <code><em></code> предназначен для слов, которые имеют подчеркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.</p> + +<p>Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS {{cssxref("font-style")}}. Используйте элемент {{HTMLElement("cite")}}, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент {{HTMLElement("i")}}, чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространенные ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент {{HTMLElement("strong")}}, чтобы пометить текст, который имеет большее значение, чем окружающий текст.</p> + +<h3 id="<_i>_против_<em>">< i> против <em></h3> + +<p>Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. <code><em></code> и <code><i></code> являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать?</p> + +<p>По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <code><em></code> представляет ударение на его содержании, в то время как элемент <code><i></code> представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать <code> <cite></code>.)</p> + +<p>Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль.</p> + +<p>Примером для <code><em></code> может быть: -«Просто <em>сделай</em> это!», или: «Мы <em>должны</em> были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение.</p> + +<p>Примером для <code><i></code> может быть: <em>«Королева Мэри</em> отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идет не о королеве по имени Мария, а о корабле по имени <em>Королева Мария</em>. Другим примером для <code><i></code> может быть: «Слово <em>‘the’ </em> это артикль».</p> + +<h2 id="Пример">Пример</h2> + +<p>Элемент <code><em></code> часто используется для указания неявного или явного контраста.</p> + +<pre class="brush: html"><p> + В HTML 5, что ранее называлось + контентом <em>уровня блока</em> теперь называется + контентом <em>потока</em>. +</p></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Пример', '', '', '', 'Web/HTML/Element/em') }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2 ('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2 ('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2 ('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div class="hidden">Таблица совместимости на этой странице создана из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-запрос.</div> + +<p>{{Compat("html.elements.em")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> diff --git a/files/ru/web/html/element/embed/index.html b/files/ru/web/html/element/embed/index.html new file mode 100644 index 0000000000..692f0b8ef6 --- /dev/null +++ b/files/ru/web/html/element/embed/index.html @@ -0,0 +1,121 @@ +--- +title: '<embed>: Вложение расширенных элементов' +slug: Web/HTML/Element/embed +tags: + - HTML + - HTML встраиваемый контент + - HTML5 + - Web + - embed + - Встраиваемый контент + - Плагины + - Расширенный контент + - Ссылка + - Элемент +translation_of: Web/HTML/Element/embed +--- +<p><strong>HTML-элемент <code><embed></code> </strong>вставляет расширенный контент в выбранное место документа. Этот контент может быть представлен от внешнего приложения или другого источника интерактивного контента, такого как плагин для браузера, например. </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> + +<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>{{Note("Этот раздел посвящен только элементу, который является частью стандарта HTML5, и никак не касается ранних, нестандартизированных его реализаций.")}}</p> + +<p>Имейте ввиду, что большинство современных браузеров посчитали устаревшей и удалили поддержку встраивания плагинов, так что использование <code><embed></code>, как правило, не рекоменуется, если вы хотите, чтобы ваш сайт одинаково работал у всех его пользователей.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Отсутствует, это {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Должен иметь открывающий тег, закрывающий тег должен быть пропущен</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элеметны</th> + <td>Любой элемент, который допускает встроенный контент</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLEmbedElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Атрибуты этого элемента включают все <a href="ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Отображает высоту ресурса в <a href="https://drafts.csswg.org/css-values/#px">CSS пикселях</a>. Это должно быть абсолютное значение; проценты <em>не</em> допустимы.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Ссылка на встраиваемый ресурс.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>MIME-тип, используемый для выбора подключаемого модуля для создания экземпляра.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Отображает ширину ресурса в <a href="https://drafts.csswg.org/css-values/#px">CSS пикселях</a>. Это должно быть абсолютное значение; проценты <em>не</em> допустимы.</dd> +</dl> + +<h2 id="Примечание">Примечание</h2> + +<p>Вы можете использовать свойство {{cssxref("object-position")}}, чтобы настроить расположение встроенного объекта в рамке элемента, а также свойство {{cssxref("object-fit")}}, чтобы контролировать регулирование размер объекта в соответствии с рамкой.</p> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><embed type="video/quicktime" src="movie.mov" width="640" height="480"> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="note"> +<p><strong>Note</strong>: До версии 45, Firefox не отображает сожержимое HTML-ресурса, но сообщает о том, что для отображения контента требуется плагин (см. {{Bug("730768")}}).</p> +</div> + + + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы, используемые для встраивания различного рода контента: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> + <li>Свойства, для позиционирования и определения размера внедренного контента в его фрейме: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/ru/web/html/element/fieldset/index.html b/files/ru/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..37aa4d325c --- /dev/null +++ b/files/ru/web/html/element/fieldset/index.html @@ -0,0 +1,170 @@ +--- +title: '<fieldset>: The Field Set element' +slug: Web/HTML/Element/fieldset +translation_of: Web/HTML/Element/fieldset +--- +<p><strong>HTML-элемент <code><fieldset></code></strong> используется для группировки нескольких элементов управления без веб-форм.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> + +<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><fieldset></code> группирует части HTML-формы, а вложенный элемент {{htmlelement("legend")}} даёт заголовок для <code><fieldset></code>. Он может иметь несколько атрибутов, самый используемый из них <code>form</code>, который содержит <code>id</code> формы {{htmlelement("form")}} на этой же странице. Этот артибут позволяет сделать <code><fieldset></code> частью формы <code><form></code> даже если он не находится внутри неё. Также вы можете отключить <code><fieldset></code> и всё его содержимое с помощью атрибута <code>disabled</code>.</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="/ru/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}</dt> + <dd>Если этот логический атрибут установлен, все элементы управления формой, вложенные в <code><fieldset></code> будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму <code><form></code>, в отличие от атрибута {{htmlattrdef("disabled")}} на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По-умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента {{HTMLElement("legend")}} не будут отключены.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>Этот атрибут принимает значение атрибута <code>id</code> элемента {{HTMLElement("form")}}, с которой вам нужно связать <code><fieldset></code>, даже если он находится вне формы.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}</dt> + <dd>Имя, связанное с группой. + <div class="note"><strong>Примечание</strong>: Заголовок для <fieldset> устанавливается первым {{HTMLElement("legend")}} внутри него.</div> + </dd> +</dl> + +<h2 id="Стилизация_с_CSS">Стилизация с CSS</h2> + +<p>Есть несколько особенностей стилизации <code><fieldset></code>. </p> + +<p>По-умолчанию, значение свойства {{cssxref("display")}} равняется <code>block</code>, что создаёт блочный контекст форматирования. Если установить значение <code>display</code> как inline-элементу <code><fieldset></code>, это будет работать как <code>inline-block</code>, в ином случае, это будет работать как <code>block</code>. По-умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет <code>min-inline-size: min-content</code> по-умолчанию.</p> + +<p>Если задан <legend>, он будет помещён поверх верхней границы. <legend> сжимается и переносится, также имеет свой контекст форматирования. Значение <code>display</code> блочное (например, <code>display: inline</code> работает как <code>block</code>).</p> + +<div class="hidden"> +<p>Требуется перевод с четвёртого абзаца и ниже</p> +</div> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_fieldset">Простой fieldset</h3> + +<p>Этот пример показывает простой <code><fieldset></code> с <code><legend></code> и единственным элементом управления внутри.</p> + +<pre class="brush: html"><form action="#"> + <fieldset> + <legend>Simple fieldset</legend> + <input type="radio" id="radio"> + <label for="radio">Spirit of radio</label> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('Простой_fieldset', '100%', '80') }}</p> + +<h3 id="Отключенный_fieldset">Отключенный fieldset</h3> + +<p>Этот пример показывает отключенный <code><fieldset></code> с двумя элементами управления внутри.</p> + +<pre class="brush: html"><form action="#"> + <fieldset disabled> + <legend>Disabled fieldset</legend> + <div> + <label for="name">Name: </label> + <input type="text" id="name" value="Chris"> + </div> + <div> + <label for="pwd">Archetype: </label> + <input type="password" id="pwd" value="Wookie"> + </div> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('Отключенный_fieldset', '100%', '110') }}</p> + +<h2 id="Техническая_сводка">Техническая сводка</h2> + + + +<table class="properties" style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">корневой раздел</a>, <a href="/en-US/docs/HTML/Content_categories#form_listed">listed</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82_%D1%84%D0%BE%D1%80%D0%BC">контент форм</a>, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td>Необязательный элемент {{HTMLElement("legend")}}, следующий в основном потоке.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент основного потока</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA roles</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Взаимодействие с DOM </th> + <td>{{domxref("HTMLFieldSetElement")}}</td> + </tr> + </tbody> +</table> + + + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Определение элемента <code>fieldset</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.elements.fieldset")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Другие связанные элементы: + <ul> + <li>{{HTMLElement("form")}}</li> + <li>{{HTMLElement("legend")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("datalist")}}</li> + <li>{{HTMLElement("optgroup")}}</li> + <li>{{HTMLElement("option")}}</li> + <li>{{HTMLElement("textarea")}}</li> + <li>{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("meter")}}</li> + </ul> + </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/figcaption/index.html b/files/ru/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..f696e4537f --- /dev/null +++ b/files/ru/web/html/element/figcaption/index.html @@ -0,0 +1,90 @@ +--- +title: '<figcaption>: Элемент подписи иллюстрации' +slug: Web/HTML/Element/figcaption +tags: + - Element + - HTML + - Reference + - Элемент +translation_of: Web/HTML/Element/figcaption +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><figcaption></code> или элемент подписи иллюстрации</strong> представляет собой подпись (заголовок) или легенду, описывающую остальную часть содержимого родистельского элемента {{HTMLElement("figure")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Элемент {{HTMLElement("figure")}}; элемент <code><figcaption></code> должен быть первым или последним потомком.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент принимает только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Для примеров <code><figcaption></code> смотрите {{HTMLElement("figure")}}.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.figcaption")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("figure")}}</li> +</ul> diff --git a/files/ru/web/html/element/figure/index.html b/files/ru/web/html/element/figure/index.html new file mode 100644 index 0000000000..2842179eff --- /dev/null +++ b/files/ru/web/html/element/figure/index.html @@ -0,0 +1,175 @@ +--- +title: '<figure>: Элемент иллюстрации с необязательной подписью' +slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - HTML grouping content + - Reference + - figure + - Диаграммы + - Иллюстрации + - Представление + - Элемент +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><figure></code> (Иллюстрация с необязательной подписью)</strong> представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента ({{HTMLElement("figcaption")}}).</span> Диаграмма и её подпись представляет собой единое целое.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> + +<div class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прочие_модели_контента">секционный корень</a>, явный контент</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Элемент {{HTMLElement("figcaption")}} за которым следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">основной поток</a>; или поточный контент за которым следует элемент {{HTMLElement("figcaption")}}; или поточный контент.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любые элементы принимающие <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">основной поток</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент поддерживает только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<ul> + <li>Обычно <code><figure></code> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесен в другую часть документа или в приложение не нарушив основной поток.</li> + <li>Являясь <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прочие_модели_контента" title="Sections and Outlines of an HTML5 document#Sectioning root">секционным корнем</a>, структура содержимого элемента <code><figure></code> исключается из основной структуры документа.</li> + <li>Подпись может быть связана с элементом <code><figure></code> с помощью вставки {{HTMLElement("figcaption")}} внутри него (как первый или последний потомок). Первый элемент <code><figcaption></code> в иллюстрации предоставляет её подпись (заголовок).</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Иллюстрации">Иллюстрации</h3> + +<pre class="brush: html"><!-- Just an image --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="The beautiful MDN logo."> +</figure> + +<!-- Image with a caption --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="The beautiful MDN logo."> + <figcaption>MDN Logo</figcaption> +</figure> +</pre> + +<div>{{EmbedLiveSample("Иллюстрации", "100%", 375)}}</div> + +<h3 id="Фрагменты_кода">Фрагменты кода</h3> + +<pre class="brush: html"><figure> + <figcaption>Get browser details using <code>navigator</code>.</figcaption> + <pre> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName + "; "; + txt+= "Browser Name: " + navigator.appName + "; "; + txt+= "Browser Version: " + navigator.appVersion + "; "; + txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; + txt+= "Platform: " + navigator.platform + "; "; + txt+= "User-agent header: " + navigator.userAgent + "; "; + console.log("NavigatorExample", txt); +} + </pre> +</figure></pre> + +<div>{{EmbedLiveSample("Фрагменты_кода", "100%", 250)}}</div> + +<h3 id="Цитирования">Цитирования</h3> + +<pre class="brush: html"><figure> + <figcaption><cite>Edsger Dijkstra:</cite></figcaption> + <blockquote>If debugging is the process of removing software bugs, + then programming must be the process of putting them in.</blockquote> +</figure> +</pre> + +<div>{{EmbedLiveSample("Цитирования")}}</div> + +<blockquote>"Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения", — Эдсгер Дейкстра.</blockquote> + +<h3 id="Стихи">Стихи</h3> + +<pre class="brush: html"><figure> + <p style="white-space:pre"> +Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, +Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: +Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire.</p> + <figcaption><cite>Venus and Adonis</cite>, + by William Shakespeare</figcaption> +</figure></pre> + +<div>{{EmbedLiveSample("Стихи", "100%", 250)}}</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>No changes from HTML 5.0.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.figure")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("figcaption")}}.</li> +</ul> diff --git a/files/ru/web/html/element/font/index.html b/files/ru/web/html/element/font/index.html new file mode 100644 index 0000000000..b3c1310ab8 --- /dev/null +++ b/files/ru/web/html/element/font/index.html @@ -0,0 +1,63 @@ +--- +title: <font> +slug: Web/HTML/Element/font +translation_of: Web/HTML/Element/font +--- +<div>{{obsolete_header}}</div> + +<h2 id="Summary">Summary</h2> + +<p><em>HTML фонт элемент</em>(<code><font></code>) определяет размер шрифта, цвета и лицо для его содержимого</p> + +<div class="note"> +<pre class="tw-data-text tw-ta tw-text-medium" dir="ltr" id="tw-target-text" style="text-align: left; height: 72px;"><span lang="ru">Примечание по применению:</span></pre> + +<p><strong>Не используйте этот элемент! </strong></p> + +<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 120px;"><span lang="ru">Хотя он был нормализован в HTML 3.2, он был устаревшим в HTML 4.01, в то время как все элементы, относящиеся только к стилю, затем устарели в HTML5.</span></pre> + +<p> </p> + +<p> </p> + +<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 336px;"><span lang="ru">Начиная с HTML 4, HTML больше не передает информацию о стиле (вне элемента {{HTMLElement ("style")}} или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS. + +Предыдущее поведение элемента {{HTMLElement ("font")}} может быть достигнуто и даже лучше контролироваться с помощью CSS CSS-свойств шрифтов.</span></pre> + +<p> </p> +</div> + +<h2 id="Атрибут">Атрибут</h2> + +<p>Как и все другие элементы, этот элемент поддерживается с <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 120px;"><span lang="ru">Этот атрибут устанавливает цвет текста, используя либо именованный цвет, либо цвет, указанный в шестнадцатеричном формате #RRGGBB.</span></pre> + </dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 312px;"><span lang="ru">Этот атрибут содержит список разделенных запятыми одного или нескольких имен шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.</span></pre> + </dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 336px;"><span lang="ru">Этот атрибут определяет размер шрифта как числовое или относительное значение. Числовые значения варьируются от 1 до 7, при этом 1 является наименьшим, а 3 - значением по умолчанию. Его можно определить с использованием относительного значения, например, +2 или -3, которые устанавливают его относительно значения атрибута {{htmlattrxref ("size", "basefont")}} {{HTMLElement ("basefont") }}, или по отношению к 3, значение по умолчанию, если оно не существует.</span></pre> + </dd> +</dl> + +<h2 id="DOM_interface">DOM interface</h2> + +<p> </p> + +<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><span lang="ru">Этот элемент реализует интерфейс {{domxref ("HTMLFontElement")}}</span></pre> + +<p> </p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.font")}}</p> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/footer/index.html b/files/ru/web/html/element/footer/index.html new file mode 100644 index 0000000000..5edcb6f5d5 --- /dev/null +++ b/files/ru/web/html/element/footer/index.html @@ -0,0 +1,113 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +tags: + - Element + - HTML + - Разделы + - Разделы HTML + - Справка + - Элемент +translation_of: Web/HTML/Element/footer +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>HTML-элемент</strong> <strong> <code><footer></code> </strong>представляет собой нижний колонтитул (футер, подвал) для своего ближайшего <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Задание_разделов_в_HTML5">секционного контента</a> или <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">секционного корня</a>. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th>Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Контент основного потока</a>, кроме <code><footer></code> и {{HTMLElement("header")}}.</td> + </tr> + <tr> + <th>Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th>Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><footer></code> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("header")}} или другого элемента <code><footer></code>.</td> + </tr> + <tr> + <th>Разрешенные ARIA роли</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th>DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примечание">Примечание</h2> + +<ul> + <li>Заключите информацию об авторе в элемент {{HTMLElement("address")}}, который может быть добавлен в элемент <code><footer></code>.</li> + <li>Элемент <code><footer></code> не относится к секционному контенту, а значит не создает новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Разделы и структура документа HTML5">структуре HTML-документа</a>.</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><footer> + Какая-то информация об авторском праве или может + информация об авторе статьи? +</footer> +</pre> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>У программа чтения с экрана <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> есть проблема, при которой она не читает элемент <code><footer></code> (не добавляет <a href="/ru/docs/Learn/Доступность/WAI-ARIA_basics#SignpostsLandmarks">роль-ориентир</a> элемента <code><footer></code> в список ориентиров). Чтобы решить эту проблему добавьте <code>role="contentinfo"</code> в элемент <code><footer></code>.</p> + +<ul> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 - AX: Нативные элементы HTML (header, footer, main, aside, nav) должны работать также, как ориентиры ARIA, но иногда они этого не делают</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.footer")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Разделы и структура документа HTML5">Разделы и структура документа HTML5.</a>.</li> + <li class="last"><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA: роль сontentinfo</a></li> +</ul> diff --git a/files/ru/web/html/element/form/index.html b/files/ru/web/html/element/form/index.html new file mode 100644 index 0000000000..fb2506c7cc --- /dev/null +++ b/files/ru/web/html/element/form/index.html @@ -0,0 +1,199 @@ +--- +title: <form> +slug: Web/HTML/Element/form +translation_of: Web/HTML/Element/form +--- +<h2 id="Summary" name="Summary">Резюме</h2> + +<p><em>Элемент HTML form</em> (<code><form></code>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.</p> + +<p>Можно использовать <code><a href="/en-US/docs/CSS/%3Avalid" rel="custom">:valid</a></code> и <code><a href="/en-US/docs/CSS/%3Ainvalid" rel="custom">:invalid</a></code> CSS псевдоклассы для стилизации <code><form></code> элемента, в зависимости от того, валиден или нет конкретный элемент {{domxref("HTMLFormElement.elements", "elements")}} внутри формы.</p> + +<h2 id="Usage_Context" name="Usage_Context">Контекст Использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Категория содержимого</td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a></td> + </tr> + <tr> + <td>Разрешённое содержимое</td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, но не содержащий <code><form></code> элементов</td> + </tr> + <tr> + <td>Пропуск тега</td> + <td>Нет. И открывающий и закрывающий тег должны быть.</td> + </tr> + <tr> + <td>Нормативный документ</td> + <td><a href="http://www.w3.org/TR/html5/forms.html#the-form-element" title="http://www.w3.org/TR/html5/forms.html#the-form-element">HTML5, section 4.10.3</a> (<a href="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3" title="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3">HTML4.01, section 17.3</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p>Как и все HTML элементы, этот элемент поддерживает <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> + <dd>Список типов содержимого, разделенных запятой, которые принимает сервер. + <div class="note"><strong>Примечание об использовании:</strong> Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте <span class="st">{{htmlattrxref("accept", "input")}}</span> атрибут заданного {{HTMLElement("input")}} элемента.</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>Разделенные пробелами <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">символьные кодировки</a>, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">ту же кодировку что и у страницы</a>.<br> + (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута {{htmlattrxref("formaction", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt> + <dd>Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута <code>autocomplete</code> на элементе формы. Возможные значения: + <ul> + <li><code>off</code>: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.</li> + <li><code>on</code>: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.</li> + </ul> + + <div class="note"> + <p><strong>Примечание: </strong>Если вы установили значение <code>off</code> <code>для</code> <code>autocomplete</code> атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение <code>off</code> для <code>autocomplete</code> каждого {{HTMLElement("input")}} элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите {{anch("Google Chrome notes")}}.</p> + </div> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd>Когда значение атрибута method равно <code>post</code>, атрибут - <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME тип</a> содержимого, которое используется, чтобы передать форму на сервер. Возможные значения: + <ul> + <li><code>application/x-www-form-urlencoded</code>: Значение по умолчанию, если атрибут не задан.</li> + <li><code>multipart/form-data</code>: Используйте это значение, если пользуетесь элементом {{HTMLElement("input")}} атрибутом <code>type</code> установленным в "file".</li> + <li><code>text/plain (HTML5)</code></li> + </ul> + + <p>Это значение может быть переписано атрибутом {{htmlattrxref("formenctype", "button")}} на элементе {{HTMLElement("button")}} или {{HTMLElement("input")}}.</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd><a href="/en-US/docs/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> метод, который браузер использует, для отправки формы. Возможные значения: + <ul> + <li><code>post</code>: Соответствует HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST методу</a> ; данные из формы включаются в тело формы и посылаются на сервер.</li> + <li><code>get</code>: Соответствует <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET методу</a>; данные из формы добавляются к URI атрибута <code>action</code>, их разделяет '?', и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.</li> + </ul> + + <p>Это значение может быть переписано атрибутом {{htmlattrxref("formmethod", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</p> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Имя формы. В HTML 4 его использование запрещено (<code>id</code> следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.</dd> + <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом {{htmlattrxref("formnovalidate", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе, принадлежащем форме.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, <em>контекста</em> <em>просмотра </em>(например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имееют специальное значение: + <ul> + <li><code>_self</code>: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.</li> + <li><code>_blank</code>: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.</li> + <li><code>_parent</code>: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as <code>_self</code>.</li> + <li><code>_top</code>: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as <code>_self</code>.</li> + </ul> + + <p>HTML5: Это значение может быть перезаписано {{htmlattrxref("formtarget", "button")}} атрибутом на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</p> + </dd> +</dl> + +<h2 id="DOM_interface" name="DOM_interface">DOM_interface</h2> + +<p>Этот элемент реализует {{domxref("HTMLFormElement")}} интерфейс.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<pre class="brush: html"><!-- Простая форма, которая пошлёт GET запрос --> +<form action=""> + <label for="GET-name">Name:</label> + <input id="GET-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Простая форма, которая пошлёт POST запрос --> +<form action="" method="post"> + <label for="POST-name">Name:</label> + <input id="POST-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Форма с fieldset, legend, и label --> +<form action="" method="post"> + <fieldset> + <legend>Title</legend> + <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> + </fieldset> +</form> +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>novalidate</code> attribute</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>novalidate</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p><a id="Google_Chrome_notes" name="Google_Chrome_notes">[1] Интерфейс для автодополнений в Google Chrome может меняться при запросе, в зависимости от утверждения установлен ли <code>autocomplete</code> со значеним <code>off</code> на {{HTMLElement("input")}} элементах формы, так же как и на самой форме. С одной стороны, когда <code>autocomplete</code> со значеним <code>off</code> установлен для формы, но при этом не установлен для её {{HTMLElement("input")}} элементов, при запросе пользователя автоматически заполнить поля формы, Chrome может отобразить сообщение "autocomplete has been disabled for this form." С другой стороны, если и форма и её input элементы имеют <code>autocomplete</code> со значеним <code>off</code>, браузер не отобразит это сообщение. По этой причине, вам следует устанавливать атрибуту <code>autocomplete</code> значение <code>off</code> для каждого {{HTMLElement("input")}} у которого стоит нестандартное автодополнение.</a></p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Другие элементы, которые используются для создания форм: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</li> +</ul> + +<p><label>{{HTMLRef}}</label></p> diff --git a/files/ru/web/html/element/head/index.html b/files/ru/web/html/element/head/index.html new file mode 100644 index 0000000000..58b9d8deb8 --- /dev/null +++ b/files/ru/web/html/element/head/index.html @@ -0,0 +1,130 @@ +--- +title: '<head>: элемент метаданных документа' +slug: Web/HTML/Element/head +tags: + - Element + - HTML + - Web + - Веб + - Справка + - метаданные + - метаданные документа HTML +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><head></code></strong> содержит машиночитаемую информацию ({{glossary("metadata")}}) о документе, например его <a href="/ru/docs/Web/HTML/Element/title">заголовок</a>, <a href="/ru/docs/Web/HTML/Element/script">скрипты</a> и <a href="/ru/docs/Web/HTML/Element/style">страницы стилей</a>.</span></p> + +<div class="blockIndicator note"> +<p><strong>Заметка:</strong> <code><head></code> в основном содержит информацию для машинной обработки, а не для восприятия человеком. Информацию, видимую человеком, такую как заголовки верхнего уровня и перечисленные авторы, смотрите в элементе {{HTMLElement("header")}}.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td>Отсутствуют.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td> + <p>Если документ является документом {{HTMLElement("iframe")}} с атрибутом {{htmlattrxref("srcdoc", "iframe")}}, или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.</p> + + <p>Иначе, один или более элементов содержащих метаданные, один из которых является элементом {{HTMLElement("title")}}.</p> + </td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Открывающий тег может быть пропущен, если первым, что находится внутри элемента <code><head></code> является другой элемент.<br> + Закрывающий тег может быть пропущен, если первое, что следует за элементом <code><head></code> не является пробелом или комментарием.</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элеметны</th> + <td>Элемент {{HTMLElement("html")}} (<code><head></code> является его первым дочерним элементом).</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Отсутствуют.</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>{{glossary("URI")}} одного или более профилей метаданных, разделенных пробелами.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Заголовок страницы</title> + </head> +</html> +</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>HTML5-совместимые браузеры автоматически создают элемент <code><head></code>, если его теги пропущены в разметке. <a class="external" href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Такое поведение не гарантируется в старых браузерах</a>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени)</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Атрибут <code>profile</code> больше не поддерживается</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</p> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элементы, которые могут использоваться внутри <code><head></code>: + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/element/header/index.html b/files/ru/web/html/element/header/index.html new file mode 100644 index 0000000000..b9a383cc64 --- /dev/null +++ b/files/ru/web/html/element/header/index.html @@ -0,0 +1,119 @@ +--- +title: <header> +slug: Web/HTML/Element/header +tags: + - Element + - HTML + - Разделы + - Разделы HTML + - Справка + - Элемент +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><header></code></strong> представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div> + +<div 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.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, кроме <code><header></code> и {{HTMLElement("footer")}}</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><header></code> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("footer")}} или другого элемента <code><header></code>.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Примечание">Примечание</h2> + +<p>Элемент <code><header></code> не относится к секционному контенту , а значит не создает новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">структуре HTML-документа</a>. При этом элемент <code><header></code> обычно должен содержать заголовок ближайшего раздела (элементы <code>h1</code>-<code>h6</code>), но это <strong>не</strong> обязательно.</p> + +<h3 id="Историческое_употребление">Историческое употребление</h3> + +<p>Несмотря на то, что элемент <code><header></code> не попал в спецификации до {{glossary("HTML5")}}, на самом деле, он существовал с самого начала HTML. Первоначально, на самом первом веб-сайте он использовался как элемент <code><head></code>. В какой-то момент было принято решение использовать другое имя. Позже, это позволило <code><header></code> занять другую роль.</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Заголовок_страницы">Заголовок страницы</h3> + +<pre class="brush: html"><header> + <h1>Заголовок главной страницы</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header> +</pre> + +<h3 id="Заголовок_статьи">Заголовок статьи</h3> + +<pre class="brush: html"><article> + <header> + <h2>Планета Земля</h2> + <p>Опубликовано в среду, 4 октября 2017, Джейн Смит</p> + </header> + <p>Мы живем на сине-зеленой планете, на которой до сих пор так много неизведанного.</p> + <p><a href="https://janesmith.com/the-planet-earth/">Продолжить чтение...</a></p> +</article> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.header")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.</li> + <li class="last"><a class="deki-ns current" href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5</a>.</li> +</ul> diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..36a44b736e --- /dev/null +++ b/files/ru/web/html/element/heading_elements/index.html @@ -0,0 +1,242 @@ +--- +title: '<h1>–<h6>: HTML элементы заголовков секций' +slug: Web/HTML/Element/Heading_Elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<p id="Summary"><span class="seoSummary"><strong>HTML элементы <code><h1></code>–<code><h6></code></strong> представляют собой 6 уровней заголовков секций. <code><h1></code> это наибольший заголовок и<code><h6></code> - наименьший</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Поток контента</a>, заголовок контента, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразированное содержание</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любые елементы которые принимают <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Содержание потока</a>; не используй как дочерний {{HTMLElement("hgroup")}} елемент, сейчас он устарел</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ДМИП</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Эти элементы включают <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<div class="note"> +<p>Атрибут <code>align</code> устаревший; не используйте его.</p> +</div> + +<h2 id="Примечания_к_использованию">Примечания к использованию</h2> + +<ul> + <li>Информация о заголовке может использоваться пользовательскими агентами, например, для автоматического создания оглавления для документа</li> + <li>Не используйте низкие уровни чтобы снизить размер шрифта: используйте <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font-size")}} вместо.</li> + <li>Избегайте пропуск уровней заголовков: всегда начинайте с <code><h1></code>, потом используйте <code><h2></code>, и так далее.</li> + <li>Вам следует рассмотреть избегание использования <h1> более раза на страницу. Смотрите {{SectionOnPage("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Defining sections")}}.</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Все_заголовки">Все заголовки</h3> + +<p>Следующий код показывает все уровни заголовков в действии</p> + +<pre class="brush: html notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p>Вот результат этого кода:</p> + +<p>{{ EmbedLiveSample('Все_заголовки', '280', '300', '') }}</p> + +<h3 id="Пример_страницы">Пример страницы</h3> + +<p>Следующий код показывает несколько заголовков с некоторым содержанием под ними .</p> + +<pre class="brush: html notranslate"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>Результат кода:</p> + +<p>{{ EmbedLiveSample('Пример_страницы', '280', '480', '') }}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<h3 id="Навигация">Навигация</h3> + +<p dir="ltr" id="tw-target-text">Обычный метод навигации для пользователей программ чтения с экрана - это переход от заголовка к заголовку для быстрого определения содержимого страницы. Из-за этого важно не пропускать один или несколько уровней заголовка. Это может создать путаницу, так как человеку, который движется по этому пути, может быть интересно узнать, где находится отсутствующий заголовок.</p> + +<h4 id="Не_делай">Не делай</h4> + +<pre class="notranslate"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="Делай">Делай</h4> + +<pre class="notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="Расположение">Расположение</h4> + +<p dir="ltr" id="tw-target-text">Заголовки могут быть вложены в подразделы, чтобы отразить организацию содержимого страницы. Большинство программ чтения с экрана также могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:</p> + +<ol> + <li><code>h1</code> Жуки + + <ol> + <li><code>h2</code> Этимология</li> + <li><code>h2</code> Распределение и разнообразие</li> + <li><code>h2</code><span> Эволюция</span> + <ol> + <li><code>h3</code> Позний полиозой</li> + <li><code>h3</code> Юрский период</li> + <li><code>h3</code> Меловойский период</li> + <li><code>h3</code><span> К</span>айнозойский период</li> + </ol> + </li> + <li><code>h2</code> Внешняя морфология + <ol> + <li><code>h3</code> Голова + <ol> + <li><code>h4</code> Рот</li> + </ol> + </li> + <li><code>h3</code> Туловище + <ol> + <li><code>h4</code> Передгрудь</li> + <li><code>h4</code> Пиероторакс</li> + </ol> + </li> + <li><code>h3</code> Ноги</li> + <li><code>h3</code> Крыла</li> + <li><code>h3</code> Живот</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Заголовки • Структура страницы • Обучающие материалы по веб-доступности WAI</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Понимание WCAG, объяснение Руководства 1.3</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Понимание критерия успеха 1.3.1 | W3C Понимание WCAG 2.0</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Понимание WCAG, Руководство 2.4 пояснения</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Понимание критерия успеха 2.4.1 | W3C Понимание WCAG 2.0 </a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Понимание критерия успеха 2.4.6 | W3C Понимание WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Понимание критерия успеха 2.4.10 | W3C Понимание WCAG 2.0</a></li> +</ul> + +<h3 id="Содержание_раздела_маркировки">Содержание раздела маркировки</h3> + +<p dir="ltr" id="tw-target-text">Другим распространенным методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.</p> + +<p dir="ltr" id="tw-target-text">Содержимое секционирования можно пометить, используя комбинацию <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> и {{htmlattrxref("id")}} атрибута, с ярлыком, кратко описывающим назначение раздела. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.</p> + +<h4 id="Пример">Пример</h4> + +<pre class="notranslate"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p dir="ltr" id="tw-target-text">В этом примере технология чтения с экрана объявила бы, что есть два {{HTMLElement("nav")}} разделы, один называется «Основная навигация», а другой - «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придется расследовать каждый <code>nav</code> содержание элемента, чтобы определить их назначение.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Использование атрибута aria-labelledby</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Обозначение регионов • Структура страницы • Учебные пособия по WAC WAI</a></li> +</ul> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Характеристика</th> + <th scope="col">Статус</th> + <th scope="col">Коментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<p dir="ltr" id="tw-target-text">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p> + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> + +<div></div> diff --git a/files/ru/web/html/element/hgroup/index.html b/files/ru/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..ae21df6496 --- /dev/null +++ b/files/ru/web/html/element/hgroup/index.html @@ -0,0 +1,114 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}{{seeCompatTable}}</div> + +<div></div> + +<div class="note"> +<p><strong>Примечание использования: </strong>Этот элемент был удален из HTML5 (W3C) спецификации , но до сих пор остается в спецификации WHATWG. Он частично встроен в большинство браузеров, хотя бы поэтому врядли уйдет. Поскольку схематический алгоритм не реализован ни в одном брузере, семантика тега <code><hgroup></code> на практике реализована только теоретически. Спецификация HTML5 (W3C) дает совет как обозначать <a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">подзаголовки, альтернативные заголовки и слоганы</a>.</p> +</div> + +<p>HTML <hgroup> Элемент (HTML Headings Group Element - Элемент Группы Заголовков HTML) представляет заголовок раздела. Он определяет один заголовок, который участвует в cхеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит.</p> + +<p>Собственно текст для схематического алгоритма - это текст первого элемента заголовка HTML наивысшего ранга (т. Е. Первый {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement (" h3 ")}}, {{HTMLElement (" h4 ")}}, {{HTMLElement (" h5 ")}} или {{HTMLElement (" h6 ")}} с наименьшим числом потомков), а rank - уровень этого элемента заголовка HTML.</p> + +<p>Поэтому этот элемент группирует несколько заголовков, внося лишь основной текст в план документа. Он позволяет связывать вторичные заголовки, такие как подзаголовки, альтернативные заголовки или даже теги, с основным заголовком, без загрязнения структуры документа.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <p>Категория информации </p> + </th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p><span style="line-height: 21px;">This element only includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><hgroup> + <h1>Главный заголовок</h1> + <h2>Вторичный заголовок</h2> +</hgroup> +</pre> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>Другие элементы, связанные с разделом: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/ru/web/html/element/hr/index.html b/files/ru/web/html/element/hr/index.html new file mode 100644 index 0000000000..8776efb3aa --- /dev/null +++ b/files/ru/web/html/element/hr/index.html @@ -0,0 +1,129 @@ +--- +title: '<hr>: The Thematic Break (Horizontal Rule) element' +slug: Web/HTML/Element/hr +translation_of: Web/HTML/Element/hr +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><hr></code> элемент </strong>служит для тематического разделения абзацев.Рисует горизонтальную прямую</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div> + + + +<p>Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>It must have start tag, but must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td>{{ARIARole("separator")}}</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("presentation")}} or {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLHRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>Задает правило выравнивания.По умолчанию значение выставленно как<strong> left</strong></dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>Задает цвет линии</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>Sets the rule to have no shading.</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>Устанавливает высоту в px</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>Задает длину линии в px либо в %</dd> +</dl> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p> + Это первый параграф текста + Это первый параграф текста + Это первый параграф текста + Это первый параграф текста +</p> + +<hr> + +<p> + Это второй параграф текста + Это второй параграф текста + Это второй параграф текста + Это второй параграф текста +</p></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code><hr></code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>align</code>, <code>noshade</code>, <code>size</code>, and <code>width</code> attributes are deprecated</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.hr")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement('p')}}</li> +</ul> diff --git a/files/ru/web/html/element/html/index.html b/files/ru/web/html/element/html/index.html new file mode 100644 index 0000000000..7b1b856947 --- /dev/null +++ b/files/ru/web/html/element/html/index.html @@ -0,0 +1,121 @@ +--- +title: <html> +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - Web + - Веб + - Справка + - Элемент + - корневой элемент HTML +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>HTML-элемент <code><html></code></strong> представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него).</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td>Отсутствуют.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Один элемент {{HTMLElement("head")}}, за которым следует один элемент {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Открывающий тег может быть пропущен, если первое, что находится внутри элемента <code><html></code>, не является комментарием.<br> + В {{glossary("HTML5")}} закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом <code><html></code> следует комментарий (при наличии элемента {{HTMLElement("body")}}), то закрывающий тег пропускать нельзя.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Отсутствуют. Это корневой элемент документа.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Отсутствуют.</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Определяет {{glossary("URI")}} файла манифеста, указывающего ресурсы, которые должны быть сохранены в локальном кэше. Смотрите <a href="/en-US/docs/Web/HTML/Using_the_application_cache">Использование кэша приложений</a>.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Определяет версию HTML DTD (Document Type Definition, больше известное как {{glossary("Doctype")}}), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>Определяет {{glossary("Namespace", "пространство имен")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию <code>"http://www.w3.org/1999/xhtml"</code>. Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов <code>text/html</code>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Добавление атрибута {{htmlattrxref("lang")}} с допустимым (валидным) идентификатором языка (определены в документе IETF <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>) в элемент <code><html></code> поможет технологии чтения с экрана правильно определить язык. Идентификатор языка должен описывать язык, который используется большей частью содержимого страницы. Без него программы чтения с экрана, как правило, по умолчанию используют язык операционной системы, который может может стать причиной неправильного произношения.</p> + +<p>Добавление валидного атрибута <code>lang</code> в элемент <code><html></code> также гарантирует, что важные метаданные, содержащиеся в элементе {{HTMLElement("head")}}, например заголовок страницы {{HTMLElement("title")}}, также будут объявлены правильно.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a class="external" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Добавлена поддержка атрибута <code>manifest</code> (позже устарел). Атрибут <code>version</code> больше не поддерживается.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Устаревший атрибут <code>version</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div> + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент верхнего уровня MathML: {{MathMLElement("math")}}</li> + <li>Элемент верхнего уровня SVG: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/ru/web/html/element/image/index.html b/files/ru/web/html/element/image/index.html new file mode 100644 index 0000000000..e6a269b753 --- /dev/null +++ b/files/ru/web/html/element/image/index.html @@ -0,0 +1,19 @@ +--- +title: <image> +slug: Web/HTML/Element/image +tags: + - HTML + - Non-standard +translation_of: Web/HTML/Element/image +--- +<div>{{non-standard_header}}</div> + +<h2 id="Словарь">Словарь</h2> + +<p>Элемент HTML <code><image></code> был эксперементальным элементом, предназначенный для отображения изображений. Он никогда не был реализован, вместо него должен использоваться стандартный элемент {{HTMLElement("img")}}.</p> + +<div class="note"> +<p><strong>НИКОГДА НЕ ИСПОЛЬЗУЙТЕ ЕГО!<em> </em></strong>Для отображения изображений используйте стандартный элемент {{HTMLElement("img")}}.</p> +</div> + +<p><code>Следует обратить внимание, что до Firefox 22 элемент <image>, хоть и не поддерживался, был связан с </code>{{domxref("HTMLSpanElement")}}. Позже это было исправлено, и теперь он связан с {{domxref("HTMLElement")}} в соответствии с требованиями спецификации.</p> diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html new file mode 100644 index 0000000000..d21362cce8 --- /dev/null +++ b/files/ru/web/html/element/img/index.html @@ -0,0 +1,388 @@ +--- +title: <img> +slug: Web/HTML/Element/img +tags: + - Element + - HTML + - Web + - Веб + - Графика + - Изображение + - Картинки + - Справка + - Фотографии + - Элемент + - мультимедиа +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><img></code></strong> встраивает изображение в документ. Это <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемый элемент</a>.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> + +<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>Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:</p> + +<ul> + <li>управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты <code>crossorigin</code> и <code>referrerpolicy</code>;</li> + <li>настройка {{glossary("Intrinsic Size", "внутреннего размера")}} с использованием <code>width</code> и <code>hight</code>, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;</li> + <li>адаптивные изображения рекомендуется использовать с атрибутами <code>sizes</code> и <code>srcset</code> (смотрите также элемент {{htmlelement("picture")}} и наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>").</li> +</ul> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></dfn></th> + <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> + <td>Никакое, так как это {{Glossary("empty element", "пустой элемент")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Должен иметь открывающий тег и не должен иметь закрывающий.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешённые роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Поддерживаемые_форматы_изображений">Поддерживаемые форматы изображений</h2> + +<p>Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные {{glossary("user agent","пользовательские агенты")}} поддерживают разные наборы форматов.</p> + +<h3 id="Firefox">Firefox</h3> + +<p>Форматы изображений, поддерживаемые Firefox:</p> + +<ul> + <li><a class="external" href="https://ru.wikipedia.org/wiki/JPEG">JPEG</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/GIF">GIF</a>, включая анимированные GIF;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/PNG">PNG</a>;</li> + <li><a href="/en-US/docs/Animated_PNG_graphics">APNG</a>;</li> + <li><a href="/ru/docs/Web/SVG">SVG</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/BMP">BMP</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">BMP ICO</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">PNG ICO</a>.</li> +</ul> + +<h2 id="Ошибки_загрузки_изображения">Ошибки загрузки изображения</h2> + +<p>Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события {{htmlattrxref("onerror")}} был настроен на обработку события {{event("error")}}, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:</p> + +<ul> + <li>атрибут <code>src</code> пустой или {{glossary("null")}};</li> + <li>указанный {{glossary("URL")}} в атрибуте <code>src</code> совпадает с URL страницы, на которой в данный момент находится пользователь;</li> + <li>указанное изображение каким-то образом повреждено, что препятствует его загрузке;</li> + <li>метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <code><img></code> не было указано никаких размеров;</li> + <li>указанное изображение имеет формат, который не поддерживается {{Glossary("user agent", "пользовательским агентом")}}.</li> +</ul> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd> + <p>Этим атрибутом задается альтернативное текстовое описание изображения.</p> + + <div class="note"> + <p><strong>Заметка:</strong> Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или <a href="#Supported_image_formats">неподдерживаемый тип</a>. В этих случаях браузер может заменить изображение текстом записанным в атрибуте <code>alt</code> элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте <code>alt</code>.</p> + </div> + + <div class="note"> + <p><strong>Заметка:</strong> Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (<code>alt=""</code>) указывает, что это изображение <em>не</em> является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.</p> + </div> + </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> + + <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> + <li><code>use-credentials</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> + </ul> + + <p>Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}), ограничивая его использование в элементе {{HTMLElement("canvas")}}. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение <code>anonymous</code>. Для получения дополнительной информации смотрите "<a href="/ru/docs/Web/HTML/CORS_settings_attributes">Настройки атрибутов CORS</a>".</p> + </dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd> + <p>Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:</p> + + <ul> + <li><code>sync</code>: Декодировать изображение синхронно для одновременного отображения с другим контентом;</li> + <li><code>async</code>: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;</li> + <li><code>auto</code>: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Внутренняя высота (см. {{glossary("Intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd> + <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd> + <p>Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:</p> + + <ul> + <li><code>auto</code>: Указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритета изображения;</li> + <li><code>high</code>: Указывает браузеру, что изображение имеет <strong>высокий</strong> приоритет;</li> + <li><code>low</code>: Указывает браузеру, что изображение имеет <strong>низкий</strong> приоритет.</li> + </ul> + </dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> + <dd>Этот атрибут говорит браузеру игнорировать действительный {{glossary("Intrinsic size", "внутренний размер")}} изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а <code>narutalWidth</code>/<code>naturalHeight</code> изображения будут возвращать значения, указанные в этом атрибуте. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Объяснение</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">примеры</a>.</dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd> + <p>Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.</p> + + <div class="note"> + <p><strong>Заметка:</strong> Этот атрибут разрешен, только если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p> + </div> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd> + <p>Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:</p> + + <ul> + <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> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd> + <p>Список из одного или нескольких строк, разделенных запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p> + + <ol> + <li>Условия меда-запроса. Оно должно быть пропущено для последнего элемента.</li> + <li>Значения размера источника.</li> + </ol> + + <p>Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. {{glossary("user agent", "Пользовательские агенты")}} используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом <code>srcset</code>, если эти источники описываются с помощью дескриптора ширины '<code>w</code>' (сокращение от width). Выбранный размер источника влияет на {{glossary("intrinsic size", "внутренний размер")}} изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут <code>srcset</code> отсутствует или не содержит значений с дискриптором '<code>w</code>', то атрибут <code>sizes</code> не будет иметь никакого эффекта.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <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> + + <ol> + <li>{{glossary("URL")}} изображения.</li> + <li>Необязательного, пробела, сопровождаемого: + <ul> + <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчета эффективной плотности пикселей;</li> + <li>дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '<code>x</code>'.</li> + </ul> + </li> + </ol> + + <p>Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: <code>1x</code>.</p> + + <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> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd> + <p>Неполный {{glossary("URL")}} (начиная с '<code>#</code>') <a href="/en-US/docs/Web/HTML/Element/map">карты-изображения</a>, связанной с элементом.</p> + + <div class="note"> + <p><strong>Заметка:</strong> Вы не можете использовать этот атрибут, если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.</p> + </div> + </dd> +</dl> + +<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt> + <dd> + <p>Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства {{cssxref("float")}} и/или {{cssxref("vertical-align")}}. Вы можете так же использовать CSS-свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code><img></code>. Допустимые значения:</p> + + <ul> + <li><code>top</code>: Аналог <code>vertical-align: top</code> или <code>vertical-align: text-top</code>;</li> + <li><code>middle</code>: Аналог <code>vertical-align: -moz-middle-with-baseline</code>;</li> + <li><code>bottom</code>: Отсутствует значение по умолчанию, аналог <code>vertical-align: unset</code> или <code>vertical-align: initial</code>;</li> + <li><code>left</code>: Аналог <code>float: left</code>;</li> + <li><code>right</code>: Аналог <code>float: right</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt> + <dd>Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство {{cssxref('border')}} вместо этого атрибута.</dd> + <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt> + <dd>Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd> + <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt> + <dd> + <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> + </div> + </dd> + <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> + <dd>Имя для элемента. Вы должны использовать атрибут {{htmlattrxref("id")}} вместо этого атрибута.</dd> + <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt> + <dd>Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd> +</dl> + +<h2 id="Взаимодействие_с_CSS">Взаимодействие с CSS</h2> + +<p><code><img></code> является <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемым элементом</a>; по умолчанию он имеет значение свойства {{cssxref("display")}} равное <code>inline</code>, но его размеры по умолчанию определяются внутренними значениями (см. {{glossary("Intrinsic Size", "внутренний размер")}}) встроенного изображения. Вы можете установить на изображение такие свойства, как {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}/{{cssxref("height")}} и так далее.</p> + +<p>Однако, часто бывает полезно установить для изображений свойство {{cssxref("display")}} в значение <code>block</code>, так что вы имеете максимальный контроль над стилизацией (например, <code>margin: 0 auto</code> не работает на изображениях с <code>display: inline</code>, легче размещать изображения в контексте с окружающими элементами, когда они являются <a href="/ru/docs/Web/HTML/Block-level_elements">блочными</a>).</p> + +<p>У <code><img></code> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (<code>display: inline</code>) вместе с {{cssxref("vertical-align")}}<code>: baseline</code>, нижняя граница изображения будет размещена на базовой линии контейнера.</p> + +<p>Вы можете использовать свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code><img></code> и свойством {{cssxref("object-fit")}} регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).</p> + +<p>В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее {{glossary("Intrinsic Size", "внутренние размеры")}} не обязательны. {{glossary("SVG")}}-изображения, например, могут не иметь внутренних размеров, если для корня их элемента {{SVGElement("svg")}} не заданы <code>width</code> и <code>height</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Альтернативный_текст">Альтернативный текст</h3> + +<p>Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.</p> + +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" + alt="Логотип MDN - изображение динозавра с текстом MDN web docs"> +</pre> + +<p>{{ EmbedLiveSample('Альтернативный_текст', '100%', '70') }}</p> + +<h3 id="Изображение-ссылка">Изображение-ссылка</h3> + +<p>Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <code><img></code> внутрь элемента {{HTMLElement("a")}}. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" + alt="Посетить сайт MDN"> +</a></pre> + +<p>{{ EmbedLiveSample('Изображение-ссылка', '100%', '70') }}</p> + +<h3 id="Использование_атрибута_srcset">Использование атрибута srcset</h3> + +<p>В этом примере мы добавляем атрибут <code>srcset</code>, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в <code>src</code> на устройствах с высоким разрешением. Изображение указанное в атрибуте <code>src</code>, считается <code>1x</code> кандидатом в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>.</p> + +<pre class="brush: html"> <img src="mdn-logo-sm.png" + alt="MDN" + srcset="mdn-logo-HD.png 2x"> +</pre> + +<h3 id="Использование_атрибутов_srcset_и_sizes">Использование атрибутов srcset и sizes</h3> + +<p>Атрибут <code>src</code> игнорируется в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>, когда добавлены дескрипторы '<code>w</code>'. Когда условие медиа-запроса <code>(max-width: 600px)</code> совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиа-запросе), иначе будет загружено другое изображение.</p> + +<pre class="brush: html"> <img src="clock-demo-thumb-200.png" + alt="Часы" + srcset="clock-demo-thumb-200.png 200w, + clock-demo-thumb-400.png 400w" + sizes="(max-width: 600px) 200px, 50vw"> +</pre> + +<h2 id="Проблемы_безопасности_и_приватности">Проблемы безопасности и приватности</h2> + +<p>Хотя у элементов <code><img></code> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите "<a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Заголовок Referer: проблемы приватности и безопасности</a>" для получения дополнительной информации.</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<h3 id="Создание_значимых_альтернативных_описаний">Создание значимых альтернативных описаний</h3> + +<p>Значение атрибута <code>alt</code> должно четко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут <code>alt</code> намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.</p> + +<h4 id="Плохо">Плохо</h4> + +<pre class="brush: html example-bad"><img alt="image" src="penguin.jpg"> +</pre> + +<h4 id="Хорошо">Хорошо</h4> + +<pre class="brush: html example-good"><img alt="Пингвин на пляже." src="penguin.jpg"> +</pre> + +<p>Когда у изображения отсутствует атрибут <code>alt</code>, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности</a>.</li> + <li><a href="https://axesslab.com/alt-texts/">Альтернативные тексты: максимальное руководство — Axess Lab</a>.</li> + <li><a href="https://www.deque.com/blog/great-alt-text-introduction/">Как создать отличный альтернативный текст: введение | Deque</a>.</li> + <li><a href="/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Понимание WCAG, Руководство 1.1. объяснения</a>.</li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0</a>.</li> +</ul> + +<h3 id="Атрибут_title">Атрибут title</h3> + +<p>Атрибут {{htmlattrxref("title")}} не является приемлемой заменой атрибута <code>alt</code>. Кроме того, избегайте повторения значения атрибута <code>alt</code> в атрибуте <code>title</code>, объявленном на том же изображении.</p> + +<p>Атрибут {{htmlattrxref("title")}} также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент {{HTMLElement("figure")}} вместе с элементом {{HTMLElement("figcaption")}}.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Использование HTML-атрибута title - обновлено | The Paciello Group</a>.</li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Добавлен атрибут <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> + <p> </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a>.</li> + <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>.</li> + <li>Элементы {{HTMLElement("picture")}}, {{HTMLElement("object")}} и {{HTMLElement("embed")}}.</li> + <li>Связанные с изображениями CSS-свойства: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, и {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/ru/web/html/element/index.html b/files/ru/web/html/element/index.html new file mode 100644 index 0000000000..2fe4bfa7e7 --- /dev/null +++ b/files/ru/web/html/element/index.html @@ -0,0 +1,109 @@ +--- +title: Элемент +slug: Web/HTML/Element +tags: + - HTML + - Веб + - Справка + - элементы +translation_of: Web/HTML/Element +--- +<p>{{HTMLSidebar("Elements")}}</p> + +<p><span class="seoSummary">На этой странице собраны все {{Glossary("Element","элементы")}} {{Glossary("HTML")}}. Они сгруппированы по функциям, чтобы помочь вам найти то, что вам нужно для реализации ваших идей. Хотя это руководство написано для относительных новичков в программировании, мы хотим, чтобы оно было полезным для всех.</span></p> + +<h2 id="Основные_элементы"><span class="short_text" id="result_box" lang="ru"><span class="hps">Основные элементы</span></span></h2> + +<p><span id="result_box" lang="ru"><span class="hps">Основные элементы</span> <span class="hps">являются основой</span> <span class="hps">любого</span> <span class="hps">HTML</span> <span class="hps">документа</span><span>.</span> <span class="hps">Вы увидите</span> <span class="hps">эти элементы</span> <span class="hps">в исходном коде</span> <span class="hps">для</span> <span class="atn hps">всех веб-</span><span>страниц</span> <span class="hps">после</span> задания <span class="hps">типа документа</span> <span class="hps">на первой строке</span> <span class="hps">на странице</span><span>. </span><span>DOCTYPE</span> <span class="hps">определяет, какую версию</span> <span class="atn hps">(</span><span>X) HTML</span><span> эта</span> <span class="hps">страница</span> <span class="hps">использует.</span> <span class="hps">Элементы страницы</span> <span class="hps">находятся</span> <span class="hps">между</span> <span class="atn hps">открывающим тегом <</span><span>HTML></span> <span class="hps">и закрывающим</span> <span class="atn hps"><</span><span>/</span> <span class="hps">HTML></span><span class="hps">. Элемент</span></span>{{HTMLElement("html")}} <span lang="ru"><span class="hps">называется корневым</span> <span class="hps">элементом</span><span>.</span></span> </p> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Метаданные_документа" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">М</span></span><span class="short_text" lang="ru"><span class="hps">етаданные документа</span></span></h2> + +<p><span id="result_box" lang="ru"><span class="hps">Метаданные содержат</span> <span class="hps">информацию о странице</span><span>.</span> Они<span class="hps"> включают в себя</span> <span class="hps">информацию</span> <span class="hps">о стилях</span><span>, скрипты</span> <span class="hps">и данные</span><span>, чтобы помочь</span> <span class="atn hps">программному обеспечению</span> (<span>поисковые системы,</span> {{Glossary("Browser","браузеры")}} <span class="hps">и т.д.</span><span>) использовать и</span> <span class="hps">отображать страницу</span><span>.</span> <span class="hps">Метаданные для</span> <span class="hps">стилей</span> <span class="hps">и скрипты</span> <span class="hps">могут быть определены</span> <span class="hps">на странице</span> <span class="hps">или ссылке</span> <span class="hps">на другой файл</span><span>, который имеет</span> <span class="hps">информацию</span><span>.</span></span></p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Секционирование_содержания" style="line-height: 30px; font-size: 2.14285714285714rem;">Секционирование содержания</h2> + +<p>Секционирование содержания<span lang="ru"> <span class="hps">элементов</span> <span class="hps">позволяет разложить</span> <span class="hps">содержимое документа</span> <span class="hps">на логические части</span><span>.</span> <span class="hps">Используйте</span> <span class="hps">секционирование</span> <span class="hps">элементов для создания</span> <span class="hps">общих черт</span> <span class="hps">содержания страницы</span><span>, включая</span> шапку и подвал <span class="hps">и заголовочные элементы</span> <span class="hps">для обозначения</span> <span class="hps">разделов</span><span>.</span></span> </p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Текстовое_содержание" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Текстовое содержание</span></span></h2> + +<div id="gt-src-tools"> +<div id="tts_button"><span id="result_box" lang="ru"><span class="hps">Используйте</span> текстовые <span class="hps">элементы</span> <span class="hps">HTML для</span> <span class="hps">организации</span> <span class="hps">блоков</span> <span class="hps">или разделов</span> <span class="hps">содержания</span><span>, размещенные</span> <span class="hps">между тегами открытия</span> <span class="atn hps"><</span><span>body></span> <span class="hps">и закрытия</span> <span class="atn hps"><</span><span>/</span><span>body></span><span>.</span> <span class="hps">Важное значение для</span> <span class="atn hps">{{Glossary("accessibility")}}</span> <span class="hps">и</span> <span class="atn hps">{{Glossary("SEO")}}</span><span>,</span><span class="hps"> чтобы эти элементы</span><span class="hps"> определили</span> <span class="hps">цель или</span> <span class="hps">структуру</span> <span class="hps">этого контента</span><span>.</span></span></div> + +<div> </div> +</div> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Встроенные_текстовые_семантики" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Встроенные</span> <span class="hps">текстовые</span> <span class="hps">семантики</span></span></h2> + +<p><span id="result_box" lang="ru"><span class="hps">Используйте</span> <span class="hps">встроенную</span> в <span class="hps">HTML</span> </span><span lang="ru"><span class="hps">текстовую</span> <span class="hps">семантику</span><span>, чтобы определить</span> <span class="hps">смысл,</span> <span class="hps">структуру или</span> <span class="hps">стиль</span> <span class="hps">текста,</span> <span class="hps">линий или</span> <span class="hps">части</span> <span class="hps">текста.</span></span></p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Изображения_и_мультимедиа" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Изображения</span> <span class="hps">и</span> <span class="hps">мультимедиа</span></span></h2> + +<p><span id="result_box" lang="ru"><span class="hps">HTML</span> <span class="hps">позволяет использовать</span> <span class="hps">различные мультимедийные</span> <span class="hps">ресурсы</span><span>, такие как</span> <span class="hps">изображения</span><span>, аудио</span> <span class="hps">и</span> <span class="hps">видео.</span></span></p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Встроенное_содержание" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Встроенное содержание</span></span></h2> + +<div id="gt-src-tools"> +<div id="tts_button"><span id="result_box" lang="ru"><span class="hps">С</span><span class="hps">одержание</span> <span class="hps">мультимедийных</span> <span class="hps">HTML</span><span class="hps"> включает в себя</span> <span class="hps">другие</span> <span class="hps">материалы</span><span>, даже</span> <span class="hps">если они не</span> <span class="hps">всегда легко</span> <span class="hps">взаимодействуют.</span></span></div> + +<div> </div> +</div> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Скриптинг" style="line-height: 30px; font-size: 2.14285714285714rem;">Скриптинг</h2> + +<p>Чтобы создавать динамический контент и веб-приложения, HTML поддерживает использование скриптовых языков, наиболее известным является JavaScript. Некоторые элементы поддерживают эту возможность.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Разграничительные_правки">Разграничительные правки</h2> + +<p>Эти элементы позволяют вам отметить определённые части текста.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Содержание_таблиц" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Содержание</span> т<span class="hps">аблиц</span></span></h2> + +<p>Эти элементы используются для создания и обработки табличных данных.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Формы" style="line-height: 30px; font-size: 2.14285714285714rem;">Формы</h2> + +<p>HTML содержит некоторое количество элементов, которые используются вместе для создания форм, которые пользователь может заполнить и отправить на сервер. Доступно множество информации по этой теме в <a href="/ru/docs/Web/Guide/HTML/Forms">руководстве по HTML формам</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Интерактивные_элементы" style="line-height: 30px; font-size: 2.14285714285714rem;">Интерактивные элементы</h2> + +<p>HTML содержит в себе элементы, которые помогают создавать интерактивные объекты пользовательского интерфейса.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Веб-компоненты" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Веб-компоненты</span></span></h2> + +<p>Веб-компоненты - технология, относящаяся к HTML и делающая возможным создание и использование пользовательских элементов, как будто они в обычном HTML. Кроме того, вы можете даже создавать свои версии стандарта HTML элементов.</p> + +<div class="note"><strong>Замечание:</strong> Эти элементы определены в {{Glossary("W3C","World Wide Web Consortium")}} (W3C) <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications</a> скорее, чем в HTML спецификации. К тому же, спецификация Веб-компонентов не завершена и является темой для обсуждений.</div> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Устаревшие_и_осуждаемые_элементы" style="line-height: 30px; font-size: 2.14285714285714rem;">Устаревшие и осуждаемые элементы</h2> + +<div class="warning" style="font-size: 14px;"> +<p><strong>Предупреждение:</strong> Эти HTML элементы являются устаревшими, и их использование не рекомендуется. <strong>Вы не должны использовать их для новых проектов, а также должны заменить их в старых проектах как можно быстрее. </strong>Они перечислены здесь только в информационных целях.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/ru/web/html/element/input/button/index.html b/files/ru/web/html/element/input/button/index.html new file mode 100644 index 0000000000..984fa13988 --- /dev/null +++ b/files/ru/web/html/element/input/button/index.html @@ -0,0 +1,345 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/Input/button +tags: + - HTML формы + - Формы + - Элемент Input +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Элемент {{HTMLElement("input")}} с типом <strong><code>button</code></strong> отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события {{event("click")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + + + +<div class="note"> +<p><strong>Заметка</strong>: Хотя элементы <code><input></code> с типом <code>button</code> по-прежнему являются абсолютно корректными в HTML, новый элемент {{HTMLElement("button")}} теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента {{HTMLElement("button")}} вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Значение")}}</strong></td> + <td>{{domxref("DOMString")}} используется в качестве метки кнопки</td> + </tr> + <tr> + <td><strong>Событие</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Поддерживаемые общие атрибуты</strong></td> + <td>{{htmlattrxref("type", "input")}} и {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>Атрибуты IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Методы</strong></td> + <td>None</td> + </tr> + </tbody> +</table> + +<h2 id="Значение">Значение</h2> + +<p>Атрибут значения элементов <code><input type="button"></code> elements' {{htmlattrxref("value", "input")}} содержит строку {{domxref("DOMString")}} , которая используется в качестве метки кнопки.</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="Нажми на меня"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Если вы не укажете <code>value</code>, вы получите пустую кнопку:</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Использование_кнопок">Использование кнопок</h2> + +<p>Элементы <code><input type="button"></code> не имеют поведения по умолчанию (их двоюродные братья, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.</p> + +<h3 id="Простая_кнопка">Простая кнопка</h3> + +<p>Мы начнем с создания простой кнопки с обработчиком события {{event("click")}} , который запускает наш компьютер (ну, он переключает <code>value</code> кнопки и текстовое содержимое следующего абзаца):</p> + +<pre class="brush: html"><form> + <input type="button" value="Запустить ПК"> +</form> +<p>ПК выключен.</p></pre> + +<pre class="brush: js">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Запустить ПК') { + button.value = 'Выключить ПК'; + paragraph.textContent = 'ПК запущен!'; + } else { + button.value = 'Запустить ПК'; + paragraph.textContent = 'ПК выключен.'; + } +}</pre> + +<p>Сценарий получает ссылку на объект {{domxref("HTMLInputElement")}}, представляющий <code><input></code> в DOM, сохраняя этот параметр в переменной <code>button</code>. Затем {{domxref("EventTarget.addEventListener", "addEventListener()")}} используется для установки функции, которая будет запускаться, когда на кнопке происходят события {{event("click")}}.</p> + +<p>{{EmbedLiveSample("Простая_кнопка", 650, 100)}}</p> + +<h3 id="Добавление_сочетаний_клавиш_на_кнопки">Добавление сочетаний клавиш на кнопки</h3> + +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> + +<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> + +<div id="accesskey-example1"> +<pre class="brush: html"><form> + <input type="button" value="Start machine" accesskey="s"> +</form> +<p>The machine is stopped.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> +</div> + +<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3> + +<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="button" value="Disable me" disabled></pre> +</div> + +<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html"><input type="button" value="Enabled"></pre> + +<pre class="brush: js">const button = document.querySelector('input'); + +button.addEventListener('click', disableButton); + +function disableButton() { + button.disabled = true; + button.value = 'Disabled'; + window.setTimeout(function() { + button.disabled = false; + button.value = 'Enabled'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> + +<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></pre> + +<pre class="brush: js">const button = document.querySelector('input'); +const fieldset = document.querySelector('fieldset'); + +button.addEventListener('click', disableButton); + +function disableButton() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p> + +<h2 id="Examples">Examples</h2> + +<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> + +<pre class="brush: html"><div class="toolbar"> + <input type="color" aria-label="select pen color"> + <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> + <input type="button" value="Clear canvas"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css">body { + background: #ccc; + margin: 0; + overflow: hidden; +} + +.toolbar { + background: #ccc; + width: 150px; + height: 75px; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + +span { + position: relative; + bottom: 5px; +}</pre> +</div> + +<pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// covert degrees to radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// update sizepicker output value + +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// store mouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// update mouse pointer coordinates +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The more modern {{HTMLElement("button")}} element.</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html new file mode 100644 index 0000000000..0dcdf05619 --- /dev/null +++ b/files/ru/web/html/element/input/color/index.html @@ -0,0 +1,221 @@ +--- +title: <input type="color"> +slug: Web/HTML/Element/Input/color +tags: + - Color Picker + - Element + - Form input + - Forms + - HTML + - HTML forms + - HTML input + - Input + - Reference + - color +translation_of: Web/HTML/Element/input/color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>color</code></strong> предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.</span></p> + +<p>Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div> + +<div 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.</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>7-значная {{domxref("DOMString")}} , указывающая {{cssxref("<color>")}} в строчной шестнадцатеричной системе счисления</td> + </tr> + <tr> + <td><strong>События</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Поддерживаемые общие атрибуты</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}} и {{htmlattrxref("list", "input")}}</td> + </tr> + <tr> + <td><strong>IDL атрибуты</strong></td> + <td><code>list</code> и <code>value</code></td> + </tr> + <tr> + <td><strong>Методы</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>{{Htmlattrxref ("value","input")}} элемента {{HTMLElement ("input")}} типа <code>color</code> всегда является {{domxref ("DOMString")}}, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранен в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.</p> + +<div class="note"> +<p><strong>Примечание:</strong> установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведет к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведет к тому, что цвет будет установлен на #000000.</p> +</div> + +<h2 id="Использование_настроек_цвета">Использование настроек цвета</h2> + +<p>Входные данные типа <code>color</code> просты из-за ограниченного числа атрибутов, которые они поддерживают.</p> + +<h3 id="Предоставление_цвета_по_умолчанию">Предоставление цвета по умолчанию</h3> + +<p>Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:</p> + +<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> + +<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> + +<p>Если вы не зададите значение, то по умолчанию будет <code>#000000</code>, то есть черный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придется преобразовать их в шестнадцатеричные перед установкой значения.</p> + +<h3 id="Отслеживание_изменений_цвета">Отслеживание изменений цвета</h3> + +<p>Как и в случае с другими типами {{HTMLElement("input")}}, есть два события, которые могут быть использованы для обнаружения изменения цвета значения: {{domxref("HTMLElement/input_event", "input")}} и {{domxref("HTMLElement/change_event", "change")}}. <code>input</code> запускается на элементе <code><input></code> каждый раз, когда меняется цвет. <code>change</code> событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его {{domxref("HTMLInputElement.value", "value")}}.</p> + +<p>Вот пример, который наблюдает за изменениями со временем значения цвета:</p> + +<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +colorPicker.addEventListener("change", watchColorPicker, false); + +function watchColorPicker(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<h3 id="Выбор_значения">Выбор значения</h3> + +<p>Если реализация элемента {{HTMLElement("input")}} типа <code>color</code> в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать {{domxref("HTMLInputElement.select", " select ()")}} метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует <code>color</code>, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.</p> + +<pre class="brush: js notranslate">colorWell.select();</pre> + +<h3 id="Вариации_внешнего_вида">Вариации внешнего вида</h3> + +<p>Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:<img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>То же самое можно увидеть и в Firefox 55:<img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):</p> + +<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> + +<h2 id="Validation">Validation</h2> + +<p>Значение цветового ввода считается недопустимым, если {{Glossary("user agent")}} не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс {{cssxref(":invalid")}}.</p> + +<h2 id="Пример">Пример</h2> + +<p>Давайте создадим пример, который делает немного больше с цветом входного сигнала путем отслеживания {{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}} событий, чтобы взять новый цвет и применить его к каждому {{HTMLElement("Р")}} элемента в документе.</p> + +<h3 id="HTML">HTML</h3> + +<p>HTML довольно прост — пара абзацев описательного материала с {{HTMLElement ("input")}} типа <code>color </code>с идентификатором <code>colorWell</code>, который мы будем использовать для изменения цвета текста абзацев.</p> + +<pre class="brush: html notranslate"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> + control.</p> + +<label for="colorWell">Color:</label> +<input type="color" value="#ff0000" id="colorWell"> + +<p>Watch the paragraph colors change when you adjust the color picker. + As you make changes in the color picker, the first paragraph's + color changes, as a preview (this uses the <code>input</code> + event). When you close the color picker, the <code>change</code> + event fires, and we detect that to change every paragraph to + the selected color.</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик {{domxref("Window/load_event", "load")}} для выполнения основной работы запуска, как только страница будет полностью загружена.</p> + +<pre class="brush: js notranslate">var colorWell; +var defaultColor = "#0000ff"; + +window.addEventListener("load", startup, false); +</pre> + +<h4 id="Инициализация">Инициализация</h4> + +<p>Как только страница загружена, вызывается наш обработчик событий загрузки <code>startup()</code>:</p> + +<pre class="brush: js notranslate">function startup() { + colorWell = document.querySelector("#colorWell"); + colorWell.value = defaultColor; + colorWell.addEventListener("input", updateFirst, false); + colorWell.addEventListener("change", updateAll, false); + colorWell.select(); +} +</pre> + +<p>Это возвращает ссылку на элемент color<strong> </strong><code><input></code><strong> </strong>в переменной <code>colorWell</code>, а затем устанавливает значение входного цвета в значение <code>defaultColor</code>. То цвет входное {{domxref("HTMLElement/input_event", "input")}} событие настроено, чтобы вызвать <code>updateFirst()</code> функцию и {{domxref("HTMLElement/change_event", "change")}} событие, вызывается <code>updateAll()</code>. Они оба видны ниже.</p> + +<p>Наконец, мы вызываем {{domxref ("HTMLInputElement.select", " select ()")}} для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).</p> + +<h4 id="Реакция_на_изменение_цвета">Реакция на изменение цвета</h4> + +<p>Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция <code>updateFirst()</code> вызывается в ответ на <code>input</code> событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку <code>input</code> события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.</p> + +<pre class="brush: js notranslate">function updateFirst(event) { + var p = document.querySelector("p"); + + if (p) { + p.style.color = event.target.value; + } +}</pre> + +<p>Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие <code>change</code>. Мы обрабатываем это событие с помощью функции <code>updateAll()</code>, используя {{domxref("HTMLInputElement.value", "Event.target.value")}} для получения окончательного выбранного цвета:</p> + +<pre class="brush: js notranslate">function updateAll(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<p>Это устанавливает цвет каждого элемента {{HTMLElement("p")}} таким образом, чтобы его атрибут {{cssxref("color")}} соответствовал текущему значению входного цвета, на которое ссылаются с помощью {{domxref("Event.target", "event.target")}}.</p> + +<h3 id="Результат">Результат</h3> + +<p>Финальный результат выглядит так:</p> + +<p>{{EmbedLiveSample("Example", 700, 200)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#color-state-(type=color)')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Первоначальное определение</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.input.input-color")}}</p> + +<h2 id="Изучите_также">Изучите также</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html new file mode 100644 index 0000000000..5fb53a1437 --- /dev/null +++ b/files/ru/web/html/element/input/date/index.html @@ -0,0 +1,510 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/Input/date +translation_of: Web/HTML/Element/input/date +--- +<div>{{HTMLRef}}</div> + +<p>Элементы {{htmlelement("input")}} типа <strong><code>date</code></strong> создают поля ввода и позволяют пользователю ввести дату, либо использовать <em>text box</em> для автоматической проверки контента или использовать специальный интерфейс <em>date picker</em>. Возвращаемое значение включает год, месяц, день, но <em>не</em> время. Используйте поля ввода {{HTMLElement("input/time", "time")}} или {{HTMLElement("input/datetime-local", "datetime-local")}}, чтобы вводить время или дату+время соответственно.</p> + +<p>Отображение <strong><code>date</code></strong> различается в зависимости от браузера, кроме того не все браузеры поддерживают <strong><code>date</code></strong>. Подробнее см. {{anch("Browser compatibility")}}. В неподдерживаемых браузерах элемент будет отображаться как обычный <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-standard")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на внесение изменений.</p> + +<p>Среди браузеров со своим интерфейсом для выбора даты, есть интерфейс браузеров Chrome и Opera, который выглядит так:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>В Edge он выглядит так:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>А в Firefox выглядит так:</p> + +<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Возвращает {{domxref("DOMString")}}, с датой в формате <strong>гггг-мм-дд</strong>,<strong> </strong>или <strong>пустую строку</strong></td> + </tr> + <tr> + <td><strong>События</strong></td> + <td>{{event("change")}} и {{event("input")}}</td> + </tr> + <tr> + <td><strong>Поддерживаемые атрибуты</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Методы</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Значение">Значение</h2> + +<p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введенной в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p> + +<pre class="brush: html notranslate"><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('Значение', 600, 40)}}</p> + +<div class="blockIndicator note"> +<p><strong>Помните, что отображаемый формат даты отличается от настоящего значения <code>value</code></strong> – отображаемый формат даты будет выбран, <em>базируясь на региональных параметрах браузера пользователя</em>, тогда как значение <code>value</code> всегда имеет формат <code>гггг-мм-дд</code>.</p> +</div> + +<p>Вы также можете получить или установить значение даты в JavaScript с помощью свойств {{domxref("HTMLInputElement.value", "value")}} и {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} элемента input. Например:</p> + +<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01'; +console.log(dateControl.value); // prints "2017-06-01" +console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms) +</pre> + +<p>Этот код выбирает первый элемент {{HTMLElement("input")}}, <code>type</code> которого <code>date</code> и устанавливает значение даты в <code>2017-06-01</code> (1 Июня 2017). Затем он считывает это значение обратно в строковом и числовом форматах.</p> + +<h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2> + +<p>В дополнение к общим атрибутам для всех элементов {{HTMLElement("input")}}, у <code>"date"</code> есть следующие дополнительные атрибуты:</p> + +<table> + <thead> + <tr> + <th scope="col">Атрибут</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>Максимально возможная дата для установки</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>Минимально возможная дата для установки</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Шаг (в днях), с которым будет изменяться дата при нажатии кнопок вниз или вверх данного элемента</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>Максимально возможная дата для установки. Если {{htmlattrxref("value", "input")}} является более поздней датой, чем дата, указанная в атрибуте <code>{{anch("max")}}</code>, элемент отобразит ошибку при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Если в атрибуте <code>max</code> указано значение, не удовлетворяющее формату <code>yyyy-MM-dd</code>, значит элемент не будет иметь максимальной даты.</p> + +<p>В атрибуте <code>max</code> должна быть указана строка с датой, которая больше или равна дате, указанной в атрибуте <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>Минимально возможная дата для установки. Если {{htmlattrxref("value", "input")}} является более ранней датой, чем дата, указанная в атрибуте <code>{{anch("min")}}</code>, элемент отобразит ошибку при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Если в атрибуте <code>min</code> указано значение, не удовлетворяющее формату <code>yyyy-MM-dd</code>, значит элемент не будет иметь минимальной даты.</p> + +<p>В атрибуте <code>min</code> должна быть указана строка с датой, которая меньше или равна дате, указанной в атрибуте <code>max</code>.</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ru/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Для полей ввода <code>date</code> значение <code>step</code> задаётся в днях; и является количеством миллисекунд, равное 86 400 000 умножить на значение <code>step</code> (получаемое числовое значение хранится в миллисекундах). Стандартное значение <code>step</code> равно 1, что означает 1 день.</p> + +<div class="blockIndicator note"> +<p>Для полей ввода <code>date</code> указание для <code>step</code> значения <code>any</code> даёт такой же эффект, что и значение <code>1</code>.</p> +</div> + +<h2 id="Использование_полей_ввода_c_типом_date">Использование полей ввода c типом date</h2> + +<p>На первый взгляд, элемент <code><input type="date"></code> выглядит заманчиво — он предоставляет легкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с <code><input type="date"></code> в связи с ограниченой поддержкой браузеров.</p> + +<p>В этом разделе мы посмотрим на простые, а затем и более сложные способы использования <code><input type="date"></code>, и позже дадим советы по уменьшению влияния поддержки браузерами (смотрите {{anch("Handling browser support")}}).</p> + +<div class="blockIndicator note"> +<p>Надеемся, со временем поддержка браузерами станет повсеместной, и эта проблема исчезнет.</p> +</div> + +<h3 id="Как_использовать_date">Как использовать date?</h3> + +<p>Самый простой способ использовать <code><input type="date"></code> - это использовать его с элементами <code><input></code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>, как показано ниже:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="bday">Введите дату вашего рождения:</label> + <input type="date" id="bday" name="bday"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Как_использовать_date', 600, 40)}}</p> + +<h3 id="Установка_максимальной_и_минимальной_даты">Установка максимальной и минимальной даты</h3> + +<p>Вы можете использовать атрибуты {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}}, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату <code>2017-04-01</code> и максимальную дату <code>2017-04-30</code>. Пользователь сможет выбрать дату только из этого диапазона:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">Укажите предпочтительную дату события:</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Установка_максимальной_и_минимальной_даты', 600, 40)}}</p> + +<p>В результате выполнения кода, пользователь сможет выбрать любой день апреля 2017 года, но не сможет выбрать и даже просмотреть дни других месяцев и годов, в том числе через виджет <em>date picker</em>.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Вы <em>должны</em> уметь использовать аттрибут {{htmlattrxref("step", "input")}}, чтобы менять количество дней, на которое будет происходить шаг при изменении даты (например, чтобы сделать выбираемыми только субботы). Однако, не похоже, что это где-то применялось на данный момент.</p> +</div> + +<h3 id="Controlling_input_size">Controlling input size</h3> + +<p><code><input type="date"></code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p> + +<h2 id="Validation">Validation</h2> + +<p>By default, <code><input type="date"></code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still leave the field empty or (in browsers where the input falls back to type <code>text</code>) enter an invalid date (e.g. the 32nd of April).</p> + +<p>If you use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see {{anch("Setting maximum and minimum dates")}}), supporting browsers will display an error if you try to submit a date that is outside the set bounds. However, you'll have to check the results to be sure the value is within these dates, since they're only enforced if the date picker is fully supported on the user's device.</p> + +<p>In addition, you can use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory — again, an error will be displayed if you try to submit an empty date field. This, at least, should work in most browsers.</p> + +<p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">Choose your preferred party date (required, April 1st to 20th):</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p> + +<p>{{ EmbedLiveSample('Validation', 600, 100) }}</p> + +<p>Here's a screenshot for those of you who aren't using a supporting browser:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p> +</div> + +<h2 id="Handling_browser_support">Handling browser support</h2> + +<p>As mentioned above, the major problem with using date inputs at the time of writing is {{anch("Browser compatibility", "browser support")}}. As an example, the date picker on Firefox for Android looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> + +<p>The second problem is the more serious of the two; as we mentioned earlier, with a date input, the actual value is always normalized to the format <code>yyyy-mm-dd</code>. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates, for example:</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd yyyy</code></li> +</ul> + +<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as <code>yyyy-dd-mm</code> (whereas we want <code>yyyy-mm-dd</code>). So we still have a problem.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, and year in separate controls ({{htmlelement("select")}} elements being popular; see below for an implementation), or to use a JavaScript library such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example we create two sets of UI elements for choosing dates: a native <code><input type="date"></code> picker and a set of three {{htmlelement("select")}} elements for choosing dates in older browsers that don't support the native input.</p> + +<p>{{ EmbedLiveSample('Examples', 600, 100) }}</p> + +<h3 id="HTML">HTML</h3> + +<p>The HTML looks like so:</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeDatePicker"> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Enter your birthday:</p> + <div class="fallbackDatePicker"> + <span> + <label for="day">Day:</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Month:</label> + <select id="month" name="month"> + <option selected>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + </select> + </span> + </div> +</form></pre> + +<p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)</p> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="date"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="date"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> + +<pre class="brush: js notranslate">// define variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'date'; + +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the days and years dynamically + // (the months are always the same, therefore hardcoded) + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // Create variable to hold new number of days to inject + var dayNum; + + // 31 or 30 days? + if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') { + dayNum = 31; + } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') { + dayNum = 30; + } else { + // If month is February, calculate whether it is a leap year or not + var year = yearSelect.value; + var leap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + dayNum = leap ? 29 : 28; + } + + // inject the right number of new <option> elements into the day <select> + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // if previous day has already been set, set daySelect's value + // to that day, to avoid the day jumping back to 1 when you + // change the year + if(previousDay) { + daySelect.value = previousDay; + + // If the previous day was set to a high number, say 31, and then + // you chose a month with less total days in it (e.g. February), + // this part of the code ensures that the highest day available + // is selected, rather than showing a blank daySelect + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // get this year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// when the month or year <select> values are changed, rerun populateDays() +// in case the change affected the number of available days +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +//preserve day selection +var previousDay; + +// update what day has been set to previously +// see end of populateDays() for usage +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-date")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> +</ul> diff --git a/files/ru/web/html/element/input/datetime-local/index.html b/files/ru/web/html/element/input/datetime-local/index.html new file mode 100644 index 0000000000..99ddddd6bd --- /dev/null +++ b/files/ru/web/html/element/input/datetime-local/index.html @@ -0,0 +1,586 @@ +--- +title: <input type="datetime-local"> +slug: Web/HTML/Element/Input/datetime-local +translation_of: Web/HTML/Element/input/datetime-local +--- +<p>{{HTMLRef}}</p> + +<p>{{htmlelement("input")}} элемент типа <strong><code>datetime-local</code></strong> создает поля ввода, позволяющие легко ввести дату и время — год, месяц, день, часы и минуты.</p> + +<p>Интерфейс управления варьируется от браузера к браузеру, на данный момент поддержка носит фрагментарный характер, только с Chrome/Opera и EDGE на рабочем столе — и большинство современных мобильных версиях браузера — наличие полезной реализации. В других браузерах элемент управления сводиться до простого <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<div id="Basic_example"> +<pre class="brush: html"><input id="datetime" type="datetime-local"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<p>Для тех из вас, кто не использует поддерживающий браузер, Chrome/Opera datetime-local control выглядит как скриншот ниже. Нажатие на стрелку вниз с правой стороны приводит к выбору даты, чтобы вы могли выбрать дату; вы должны ввести время вручную.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p> + +<p>В Edge <code>datetime-local</code> элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы Вы могли легко установить дату и время. То есть, по сути, получаем два элемента <code>date</code> и <code>time</code>, объединенных в один:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing a date and time, or empty.</td> + </tr> + <tr> + <td><strong>события</strong></td> + <td>{{event("change")}} и {{event("input")}}.</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>методы</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Значение">Значение</h2> + +<p> {{domxref("DOMString")}} представление значения даты, введенной во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри {{htmlattrxref("value", "input")}} атрибута, как:</p> + +<pre class="brush: html"><label for="party">Enter a date and time for your party booking:</label> +<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> + +<p>{{ EmbedLiveSample('Value', 600, 60) }}</p> + +<p>Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического <code>значения</code> — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как дата<code>значение</code> всегда форматируется <code>yyyy-MM-ddThh:mm</code>. Когда значение передается на сервер, например, это будет выглядеть <code>partydate=2017-06-01T08:30</code>.</p> + +<div class="note"> +<p><strong>Примечание</strong>: также имейте в виду, что если такие данные поступают через http-запрос Get, двоеточие нужно экранировать для включения в параметры URL, например <code>partydate=2017-06-01T08%3A30</code>.</p> +</div> + +<p>Вы также можете получить и установить значение даты в JavaScript, используя {{domxref("HTMLInputElement.value")}} свойство, например:</p> + +<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]'); +dateControl.value = '2017-06-01T08:30';</pre> + +<h2 id="Использование_локальных_входных_данных_datetime">Использование локальных входных данных datetime</h2> + +<p>Ввод даты и времени выглядит удобно на первый взгляд — он обеспечивает простой пользовательский интерфейс для выбора даты и времени, и они нормализуют формат данных, отправляемых на сервер, независимо от локали пользователя. Тем не менее, есть проблемы с <code><input type="datetime-local"></code> из-за ограниченной поддержки браузера.</p> + +<p>Мы рассмотрим основные и более сложные способы использования <code><input type="datetime-local"></code>, затем предложим советы по устранению проблемы поддержки браузера позже (see {{anch("Handling browser support")}}).</p> + +<h3 id="Базовое_использование_локальных_полей_ввода_datetime">Базовое использование локальных полей ввода datetime</h3> + +<p>Самое простои использование <code><input type="datetime-local"></code> включает комбинацию базового <code><input></code> и {{htmlelement("label")}} элемента, как в примере ниже:</p> + +<pre class="brush: html"><form> + <label for="party">Enter a date and time for your party booking:</label> + <input id="party" type="datetime-local" name="partydate"> +</form></pre> + +<p>{{ EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40) }}</p> + +<h3 id="Установка_максимума_и_минимума_даты_и_времени">Установка максимума и минимума даты и времени</h3> + +<p>Вы можете использовать {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}} аттрибуты чтобы ограничить дату/время, которое может выбрать пользователь. В примере ниже мы устанавливает минимальные дату и время в <code>2017-06-01T08:30</code> и максимальные в <code>2017-06-30T16:30</code>:</p> + +<pre class="brush: html"> <form> + <label for="party">Enter a date and time for your party booking:</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> + </form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40) }}</p> + +<p>Как результат:</p> + +<ul> + <li>Могут быть выбраны только дни из Июня 2017 — только дни, которые входят в заданный диапазон дат доступны для выбота, и в виджете нельзя увидеть даты, не принадлежaщие Июню.</li> + <li>В зависимости от того, какой браузер Вы используете, Вы можете заметить, что вребя вне заданного диапазона не доступно к выбору (e.g. Edge), или доступно к выбору(e.g. Chrome) но невалидно (see {{anch("Validation")}}).</li> +</ul> + +<div class="note"> +<p><strong>Примечание</strong>: Существует возможность использовать {{htmlattrxref("step", "input")}} аттрибут для того, чтобы установить количество дней, которые будут пропущены каждый раз, когда дата увеличивается (например, если Вы хотите сделать доступными для выбора только Субботы). Однако, на момент написание этой статьи это нет эффективной реализации этой функции.</p> +</div> + +<h3 id="Controlling_input_size">Controlling input size</h3> + +<p><code><input type="datetime-local"></code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p> + +<h3 id="Setting_timezones">Setting timezones</h3> + +<p>One thing the <code>datetime-local</code> input type doesn't provide is a way to set the timezone/locale of the datetime. This was available in the <code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code> input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.</p> + +<p>For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code> input type. For example:</p> + +<pre class="brush: html"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> + +<p>On the other hand, if you were required to allow the user to enter a timezone along with a datetime entry, you could provide a means of inputting a timezone, such as a {{htmlelement("select")}} element:</p> + +<pre class="brush: html"><select name="timezone_offset" id="timezone-offset" class="span5"> + <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> + <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> + <option value="-10:00">(GMT -10:00) Hawaii</option> + <option value="-09:50">(GMT -9:30) Taiohae</option> + <option value="-09:00">(GMT -9:00) Alaska</option> + <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option> + + ... + +</select></pre> + +<p>In either case, the timedate and timezone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.</p> + +<div class="note"> +<p><strong>Note</strong>: The above code snippet is taken from <a href="https://gist.github.com/nodesocket/3919205">All world timezones in an HTML select element</a>.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>By default, <code><input type="datetime-local"></code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a datetime — which is helpful — but you can still fill in no value and submit, or enter an invalid datetime (e.g. the 32th of April).</p> + +<p>You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.</p> + +<p>Let's look at an example — here we've set minimum and maximum datetimes, and also made the field required:</p> + +<pre class="brush: html"><form> + <div> + <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Book party!"> + </div> +</form></pre> + +<p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p> + +<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p> + +<p>Here's'a screenshot for those of you who aren't using a supporting browser:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> + +<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p> +</div> + +<h2 id="Handling_browser_support">Handling browser support</h2> + +<p>As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the <code>datetime-local</code> picker on Firefox for Android looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> + +<p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> + +<p>The second problem is the most serious — as we mentioned earlier, with a <code>datetime-local</code> input the actual value is always normalized to the format <code>yyyy-mm-ddThh:mm</code>. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates and times, for example:</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>mm-dd-yyyy hh:mm</code> (12 hour clock)</li> + <li><code>mm-dd-yyyy hh:mm</code> (24 hour clock)</li> + <li>etc.</li> +</ul> + +<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>datetime-local</code> input. Even though the <code>datetime-local</code> input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:</p> + +<pre class="brush: html"><form> + <div> + <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label> + <input id="party" type="datetime-local" name="partydate" + min="2017-06-01T08:30" max="2017-06-30T16:30" + pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Book party!"> + </div> + <input type="hidden" id="timezone" name="timezone" value="-08:00"> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nnTnn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times.</p> + +<p>And what user is going to understand the pattern they need to enter the time and date in?</p> + +<p>We still have a problem.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>, and the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example we create two sets of UI elements for choosing datetimes — a native <code><input type="datetime-local"></code> picker, and a set of five {{htmlelement("select")}} elements for choosing dates and times in older browsers that don't support the native input.</p> + +<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p> + +<p>The HTML looks like so:</p> + +<pre class="brush: html"><form> + <div class="nativeDateTimePicker"> + <label for="party">Choose a date and time for your party:</label> + <input type="datetime-local" id="party" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Choose a date and time for your party:</p> + <div class="fallbackDateTimePicker"> + <div> + <span> + <label for="day">Day:</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Month:</label> + <select id="month" name="month"> + <option selected>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + </select> + </span> + </div> + <div> + <span> + <label for="hour">Hour:</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minute:</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) We also decided to dynamically generate the hours and months, as there are so many of them!</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="date"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="date"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeDateTimePicker'); +var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'date'; +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the days and years dynamically + // (the months are always the same, therefore hardcoded) + populateDays(monthSelect.value); + populateYears(); + populateHours(); + populateMinutes(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // Create variable to hold new number of days to inject + var dayNum; + + // 31 or 30 days? + if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') { + dayNum = 31; + } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') { + dayNum = 30; + } else { + // If month is February, calculate whether it is a leap year or not + var year = yearSelect.value; + (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28; + } + + // inject the right number of new <option> elements into the day <select> + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // if previous day has already been set, set daySelect's value + // to that day, to avoid the day jumping back to 1 when you + // change the year + if(previousDay) { + daySelect.value = previousDay; + + // If the previous day was set to a high number, say 31, and then + // you chose a month with less total days in it (e.g. February), + // this part of the code ensures that the highest day available + // is selected, rather than showing a blank daySelect + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // get this year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +function populateHours() { + // populate the hours <select> with the 24 hours of the day + for(var i = 0; i <= 23; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // populate the minutes <select> with the 60 hours of each minute + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// when the month or year <select> values are changed, rerun populateDays() +// in case the change affected the number of available days +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +//preserve day selection +var previousDay; + +// update what day has been set to previously +// see end of populateDays() for usage +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>20</td> + <td>12</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is not implemented yet. See {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p> + +<p>[2] It is recognized but there is no UI.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> +</ul> diff --git a/files/ru/web/html/element/input/datetime/index.html b/files/ru/web/html/element/input/datetime/index.html new file mode 100644 index 0000000000..6b6b0a2292 --- /dev/null +++ b/files/ru/web/html/element/input/datetime/index.html @@ -0,0 +1,29 @@ +--- +title: <input type="datetime"> +slug: Web/HTML/Element/Input/datetime +tags: + - Element + - HTML + - HTML формы + - Reference + - datetime + - Устаревший + - Формы + - Элемент + - Элемент ввода +translation_of: Web/HTML/Element/input/datetime +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p>HTML <code><input type="datetime"></code> был элементом для ввода даты и времени (час, минута, секунда и доля секунды), а также часовой пояс. <strong>Эта функция была <a class="external external-icon" href="https://github.com/whatwg/html/issues/336">удалена из WHATWG HTML</a></strong> и больше не поддерживается в браузерах.</p> + +<p>Вместо этого, браузеры реализуют (и разработчикам рекомендуется использовать) <code><a href="/ru/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>.</p> + +<p>Формат значений даты и времени, использумый этим типом описан в {{SectionOnPage("/ru/docs/Web/HTML/Date_and_time_formats", "Строки глобальной даты и времени")}}.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("input")}}</li> + <li><a href="/ru/docs/Web/HTML/Date_and_time_formats">Форматы даты и времени используемые в HTML</a></li> +</ul> diff --git a/files/ru/web/html/element/input/file/index.html b/files/ru/web/html/element/input/file/index.html new file mode 100644 index 0000000000..7e47d3be03 --- /dev/null +++ b/files/ru/web/html/element/input/file/index.html @@ -0,0 +1,439 @@ +--- +title: <input type="file"> +slug: Web/HTML/Element/Input/file +translation_of: Web/HTML/Element/input/file +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} элемент с атрибутом <strong><code>type="file"</code></strong> позволяет пользователю выбрать один файл или более из файлового хранилища своего устройства. После выбора эти файлы могут быть загружены на сервер при помощи <a href="/ru/docs/Learn/HTML/Forms">формы</a>, или обработаны JavaScript и <a href="/en-US/docs/Using_files_from_web_applications">File API</a>.</span></p> + +<div id="file-example"> +<pre class="brush: html"><input name="myFile" type="file"> +</pre> +</div> + +<p>{{EmbedLiveSample('file-example', 650, 40)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>{{domxref("DOMString")}} представляет собой путь до выбранного файла.</td> + </tr> + <tr> + <td><strong>Действия</strong></td> + <td>{{event("change")}} и{{event("input")}}</td> + </tr> + <tr> + <td><strong>Поддерживаемые атрибуты</strong></td> + <td>{{htmlattrxref("accept", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("required", "input")}}</td> + </tr> + <tr> + <td><strong>IDL атрибуты</strong></td> + <td><code>files</code> and <code>value</code></td> + </tr> + <tr> + <td><strong>Методы</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>Атрибут {{htmlattrxref("value", "input")}} элемента input содержит {{domxref("DOMString")}}, который представляет путь к выбранным файлам. Если пользователь выбрал несколько файлов, <code>value</code> представляет первый файл из списка. Отстальные файлы можно определить используя {{domxref("HTMLInputElement.files")}} свойство элемента input.</p> + +<div class="note"><strong>Note:</strong> + +<ol> + <li>Если выбрано несколько файлов, строка представляет собой первый выбранный файл. JavaScript предоставляет доступ к остальным файлам через свойство <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)"><code>FileList</code></a>.</li> + <li>Если не выбрано ни одного файла, .строка равна <code>""</code> (пустая).</li> + <li>Строка <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">начинается с <code>C:\fakepath\</code></a>, для предотвращения определения файловой структуры пользователя вредоносным ПО.</li> +</ol> +</div> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, inputs of type <code>file</code> also support:</p> + +<dl> + <dt><code>files</code></dt> + <dd>A {{domxref("FileList")}} object that lists every selected file. This list has no more than one member unless the {{htmlattrxref("multiple", "input")}} attribute is specified.</dd> +</dl> + +<h2 id="Using_file_inputs">Using file inputs</h2> + +<h3 id="A_basic_example">A basic example</h3> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose file to upload</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>This produces the following output:</p> + +<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">see it running live</a>.</p> +</div> + +<p>Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.</p> + +<p>Including the {{htmlattrxref("multiple", "input")}} attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down <kbd>Shift</kbd> or <kbd>Control</kbd>, and then clicking). If you only want the user to choose a single file per <code><input></code>, omit the <code>multiple</code> attribute.</p> + +<p>When the form is submitted, each selected file's name will be added to URL parameters in the following fashion: <code>?file=file1.txt&file=file2.txt</code></p> + +<h3 id="Getting_information_on_selected_files">Getting information on selected files</h3> + +<p>The selected files' are returned by the element's {{domxref("HTMLElement.files", "files")}} property, which is a {{domxref("FileList")}} object containing a list of {{domxref("File")}} objects. The <code>FileList</code> behaves like an array, so you can check its <code>length</code> property to get the number of selected files.</p> + +<p>Each <code>File</code> object contains the following information:</p> + +<dl> + <dt><code>name</code></dt> + <dd>The file's name.</dd> + <dt><code>lastModified</code></dt> + <dd>A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight).</dd> + <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt> + <dd>A {{jsxref("Date")}} object representing the date and time at which the file was last modified. <em>This is deprecated and should not be used. Use <code>lastModified</code> instead.</em></dd> + <dt><code>size</code></dt> + <dd>The size of the file in bytes.</dd> + <dt><code>type</code></dt> + <dd>The file's <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>.</dd> + <dt>webkitRelativePath {{non-standard_inline}}</dt> + <dd>A string specifying the file's path relative to the base directory selected in a directory picker (that is, a <code>file</code> picker in which the {{htmlattrxref("webkitdirectory", "input")}} attribute is set). <em>This is non-standard and should be used with caution.</em></dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see {{bug(1384030)}}).</p> +</div> + +<h3 id="Limiting_accepted_file_types">Limiting accepted file types</h3> + +<p>Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as <a href="/en-US/docs/Glossary/jpeg">JPEG</a> or <a href="/en-US/docs/Glossary/PNG">PNG</a>.</p> + +<p>Acceptable file types can be specified with the {{htmlattrxref("accept","input")}} attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:</p> + +<ul> + <li><code>accept="image/png"</code> or <code>accept=".png"</code> — Accepts PNG files.</li> + <li><code>accept="image/png, image/jpeg"</code> or <code>accept=".png, .jpg, .jpeg"</code> — Accept PNG or JPEG files.</li> + <li><code>accept="image/*"</code> — Accept any file with an <code>image/*</code> MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — accept anything that smells like an MS Word document.</li> +</ul> + +<p>Let's look like a more complete example:</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Choose file to upload</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>This produces a similar-looking output to the previous example:</p> + +<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">see it running live</a>.</p> +</div> + +<p>It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the <code>accept</code> value (the exact nature differs across browsers and operating systems).</p> + +<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> + +<p>The <code>accept</code> attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.</p> + +<p>Because of this, you should make sure that the <code>accept</code> attribute is backed up by appropriate server-side validation.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the {{domxref("HTMLInputElement.files")}} property, as well as showing off a few clever tricks.</p> + +<div class="note"> +<p><strong>Note</strong>: You can see the complete source code for this example on GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">see it live also</a>). We won't explain the CSS; the JavaScript is the main focus.</p> +</div> + +<p>First of all, let's look at the HTML:</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">Choose images to upload (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>No files currently selected for upload</p> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 600px; + background: #ccc; + margin: 0 auto; + padding: 20px; + border: 1px solid black; +} + +form ol { + padding-left: 0; +} + +form li, div > p { + background: #eee; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + list-style-type: none; + border: 1px solid black; +} + +form img { + height: 64px; + order: 1; +} + +form p { + line-height: 32px; + padding-left: 10px; +} + +form label, form button { + background-color: #7F9CCB; + padding: 5px 10px; + border-radius: 5px; + border: 1px ridge black; + font-size: 0.8rem; + height: auto; +} + +form label:hover, form button:hover { + background-color: #2D5BA3; + color: white; +} + +form label:active, form button:active { + background-color: #0D3F8F; + color: white; +}</pre> +</div> + +<p>This is similar to what we've seen before — nothing special to comment on.</p> + +<p>Next, let's walk through the JavaScript.</p> + +<p>In the first lines of script, we get references to the form input itself, and the {{htmlelement("div")}} element with the class of <code>.preview</code>. Next, we hide the {{htmlelement("input")}} element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers. You can activate the input element by clicking its {{htmlelement("label")}}, so it is better to visually hide the input and style the label like a button, so the user will know to interact with it if they want to upload files.</p> + +<pre class="brush: js">var input = document.querySelector('input'); +var preview = document.querySelector('.preview'); + +input.style.opacity = 0;</pre> + +<div class="note"> +<p><strong>Note:</strong> <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a> is used to hide the file input instead of <a href="/en-US/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> or <a href="/en-US/docs/Web/CSS/display"><code>display: none</code></a>, because assistive technology interprets the latter two styles to mean the file input isn't interactive.</p> +</div> + +<p>Next, we add an <a href="/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a> to the input to listen for changes to its selected value changes (in this case, when files are selected). The event listener invokes our custom <code>updateImageDisplay()</code> function.</p> + +<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre> + +<p>Whenever the <code>updateImageDisplay()</code> function is invoked, we:</p> + +<ul> + <li>Use a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> loop to empty the previous contents of the preview <code><div></code>.</li> + <li>Grab the {{domxref("FileList")}} object that contains the information on all the selected files, and store it in a variable called <code>curFiles</code>.</li> + <li>Check to see if no files were selected, by checking if<code>curFiles.length</code> is equal to 0. If so, print a message into the preview <code><div></code> stating that no files have been selected.</li> + <li>If files <em>have</em> been selected, we loop through each one, printing information about it into the preview <code><div></code>. Things to note here:</li> + <li>We use the custom <code>validFileType()</code> function to check whether the file is of the correct type (e.g. the image types specified in the <code>accept</code> attribute).</li> + <li>If it is, we: + <ul> + <li>Print out its name and file size into a list item inside the previous <code><div></code> (obtained from <code>curFiles[i].name</code> and <code>curFiles[i].size</code>). The custom <code>returnFileSize()</code> function returns a nicely-formatted version of the size in bytes/KB/MB (by default the browser reports the size in absolute bytes).</li> + <li>Generate a thumbnail preview of the image by calling <code>window.<a href="/en-US/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a>(curFiles[i])</code> and reducing the image size in the CSS, then insert that image into the list item too.</li> + </ul> + </li> + <li>If the file type is invalid, we display a message inside a list item telling the user that they need to select a different file type.</li> +</ul> + +<pre class="brush: js">function updateImageDisplay() { + while(preview.firstChild) { + preview.removeChild(preview.firstChild); + } + + var curFiles = input.files; + if(curFiles.length === 0) { + var para = document.createElement('p'); + para.textContent = 'No files currently selected for upload'; + preview.appendChild(para); + } else { + var list = document.createElement('ol'); + preview.appendChild(list); + for(var i = 0; i < curFiles.length; i++) { + var listItem = document.createElement('li'); + var para = document.createElement('p'); + if(validFileType(curFiles[i])) { + para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.'; + var image = document.createElement('img'); + image.src = window.URL.createObjectURL(curFiles[i]); + + listItem.appendChild(image); + listItem.appendChild(para); + + } else { + para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.'; + listItem.appendChild(para); + } + + list.appendChild(listItem); + } + } +}</pre> + +<p>The custom <code>validFileType()</code> function takes a {{domxref("File")}} object as a parameter, then loops through the list of allowed file types, checking if any matches the file's <code>type</code> property. If a match is found, the function returns <code>true</code>. If no match is found, it returns <code>false</code>.</p> + +<pre class="brush: js">var fileTypes = [ + 'image/jpeg', + 'image/pjpeg', + 'image/png' +] + +function validFileType(file) { + for(var i = 0; i < fileTypes.length; i++) { + if(file.type === fileTypes[i]) { + return true; + } + } + + return false; +}</pre> + +<p>The <code>returnFileSize()</code> function takes a number (of bytes, taken from the current file's <code>size</code> property), and turns it into a nicely formatted size in bytes/KB/MB.</p> + +<pre class="brush: js">function returnFileSize(number) { + if(number < 1024) { + return number + 'bytes'; + } else if(number > 1024 && number < 1048576) { + return (number/1024).toFixed(1) + 'KB'; + } else if(number > 1048576) { + return (number/1048576).toFixed(1) + 'MB'; + } +}</pre> + +<p>The example looks like this; have a play:</p> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>iOS WebKit<br> + <sup><sub>(Safari/Chrome/Firefox/etc)</sub></sup></th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(4.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> — contains a number of other useful examples related to <code><input type="file"></code> and the <a href="/en-US/docs/Web/API/File">File API</a>.</li> +</ul> diff --git a/files/ru/web/html/element/input/image/index.html b/files/ru/web/html/element/input/image/index.html new file mode 100644 index 0000000000..08b69b943a --- /dev/null +++ b/files/ru/web/html/element/input/image/index.html @@ -0,0 +1,205 @@ +--- +title: <input type="image"> +slug: Web/HTML/Element/Input/image +translation_of: Web/HTML/Element/input/image +--- +<p><code><input type="image"> - это кнопка отправки в виде изображения. Вы можете использовать атрибут src, чтобы выбрать источник изображения и атрибут alt, чтобы добавить альтернативный текст. Атрибутами width и height можно указать размер изображения в пикселях.</code></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Нету, это пустой элемент.</td> + </tr> + <tr> + <th scope="row">Необязательный закрывающийся тег</th> + <td>Обязательно должен быть открывающийся тег, и обязательно отсутствует закрывающий.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, которому доступен фразообразующий контент (<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>).</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс </th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этому элементу доступны глобальные атрибуты (<a href="/en-US/docs/HTML/Global_attributes">global attributes</a>).</p> + +<p>{{htmlattrdef("type")}}</p> + +<dl> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, here image if specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is an image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>In image input element, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form but it cannot be used when the <strong>type</strong> attribute is <code>image</code> type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>This attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element as an image map.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute defines the width of the image displayed for the button.</dd> + <dt> + <h2 id="Примеры">Примеры</h2> + </dt> +</dl> + +<h3 id="simple_input_image_example" name="simple_input_image_example">Поле в виде логотипа Firefox </h3> + +<pre class="brush: html"><input type="image" name="image" src="https://mdn.mozillademos.org/files/2917/fxlogo.png" width="50"></pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('simple_input_image_example') }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 или ранее</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<dl> + <dt> + <h2 id="Смотри_также">Смотри также</h2> + </dt> +</dl> diff --git a/files/ru/web/html/element/input/index.html b/files/ru/web/html/element/input/index.html new file mode 100644 index 0000000000..7899ede12e --- /dev/null +++ b/files/ru/web/html/element/input/index.html @@ -0,0 +1,311 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +translation_of: Web/HTML/Element/input +--- +<h2 id="Описание">Описание</h2> + +<p><strong>Элемент</strong> <strong>HTML <code><input></code></strong> используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и {{Glossary("user agent")}}, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br> + If the {{htmlattrxref("type", "input")}} has not the <code>hidden</code> value, labellable element, palpable content.</li> + <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li> + <li><dfn>Tag omission</dfn> Must have a start tag and must not have an end tag.</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLInputElement")}}</li> +</ul> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент содержит <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<ul> + <li>Расширение файла, начинающееся с символа точки (U+002E). Наприм., '.jpg, .png, .doc)</li> + <li>Валидный тип MIME без расширения</li> + <li><code>audio/*</code> для аудиофайлов {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> для видеофайлов {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> для файлов с изображениями {{HTMLVersionInline("5")}}</li> +</ul> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Тип элемента для отображения. Если этот атрибут не указан, по умолчанию используется <code>text</code>. Возможными значениями являются: + <ul> + <li><code>button</code>: Кнопка без предопределенного поведения.</li> + <li><code>checkbox</code>: Флажок («чекбокс»). Следует использовать атрибут <strong>value </strong>для определения значения, которое будет отдано этим элементом. Используйте атрибут <strong>checked</strong>, чтобы указать, должен ли флажок быть выставлен. Можно также использовать атрибут <strong>indeterminate</strong>, чтобы указать, что флажок находится в неопределённом состоянии (на большинстве платформ при этом рисуется горизонтальная линия поперёк флажка).</li> + <li><code>color</code>: {{HTMLVersionInline("5")}} Элемент управления цветом. Пользовательский интерфейс выбора цвета не имеет никаких других функций, кроме принятия простых цветов в виде текста (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">больше информации</a>).</li> + <li><code>date</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты (год, месяц и день, без времени).</li> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени (час, минута, секунда и доля секунды) в соответствии с часовым поясом UTC.</li> + <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени без часового пояса.</li> + <li><code>email</code>: {{HTMLVersionInline("5")}} Поле для редактирования адреса электронной почты. Перед отправкой проверяется, что входное значение содержит либо пустую строку, либо один действительный адрес электронной почты. Соответствуют CSS псевдо-классам {{cssxref(":valid")}} and {{cssxref(":invalid")}}.</li> + <li><code>file</code>: Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут <strong>accept</strong>, чтобы определить типы файлов, которые могут быть выбраны.</li> + <li><code>hidden</code>: Элемент управления, которые не отображается, но чье значение отправлено на сервер.</li> + <li><code>image</code>: Кнопка вставки изображения. Вы должны использовать атрибут <strong>src</strong>, чтобы определить путь к изображению и атрибут <strong>alt</strong> - для определения альтернативного текста. Вы можете использовать атрибуты <strong>height</strong> и <strong>width</strong>, чтобы определить размер вставки изображения в пикселях.</li> + <li><code>month</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода месяца и года без часового пояса.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} Элемент управления ввода числа(тип <strong>float</strong>).</li> + <li><code>password</code>: Однострочное текстовое поле, чье значение скрыто символом "звездочка". Используйте атрибуты <strong>minlength</strong> и <strong>maxlength</strong>, чтобы указать минимальную и максимальную длину значения, которое может быть введено. + <div class="blockIndicator note">Любые формы, в которых присутствует важная информация(например, пароль), должны быть обработаны через HTTPS; в настоящий момент Firefox реализует составной механизм предупреждения, направленные против небезопасных форм для входа в систему - смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>.</div> + </li> + <li><code>radio</code>: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.</li> + <li><code>range</code>: {{HTMLVersionInline("5")}}Элемент управления для ввода числа, точное значение которого не имеет значения. Этот тип управления использует следующие значения по умолчанию, если соответствующие атрибуты не указаны: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: Кнопка сброса содержимого формы в состояние по умолчанию.</li> + <li><code>search</code>: {{HTMLVersionInline("5")}}Однострочное текстовое поле для ввода строк поиска; разрывы строк автоматически удаляются из входного значения.</li> + <li><code>submit</code>: Кнопка для отправления формы.</li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода номера телефона; разрывы строк автоматически удаляются из входного значения, но никакой другой синтаксис не применяется. Можно использовать такие атрибуты как <strong>pattern</strong> и <strong>maxlength</strong>, чтобы ограничить вводимое значение.<br> + Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости..</li> + <li><code>text</code>: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.</li> + <li><code>time</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода значения времени без часового пояса.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Поле для редактирования URI. Введенное значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введенного значения. Можно использовать такие атрибуты как <strong>pattern</strong> или <strong>maxlength</strong>, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.</li> + </ul> + </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>В случае, если значением атрибута <strong>type</strong> является <code>file</code>, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделенным запятыми:</dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>Одиночный символ, который пользователь может нажать, чтобы переключить фокус на элемент управления.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Определяет "действие-подсказку", которая используется для определения того, как будет обозначаться клавиша enter на мобильных устройствах с виртуальной клавиатурой. Поддерживаемые значения: <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, и <code>send</code>; они автоматически сопоставляются с необходимой строкой (являются чувствительными к регистру).</dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Этот атрибут указывает, разрешено ли автоматическое заполнение поля браузером. Разрешено по умолчанию, даже если не указано. Данный атрибут игнорируется, если атрибут <strong>type</strong> равен <code>hidden, password,</code> <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> кнопка (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Возможные значения: + <ul> + <li><code>off</code>: Пользователь должен каждый раз полностью вводить значение в поле или документ предусматривает свой собственный метод автозаполнения; браузер не делает автоматического заполнения записи.</li> + <li><code>on</code>: Браузер автоматически заканчивает значение поля, основываясь на значениях, которые вводились пользователем ранее.</li> + </ul> + + <p>Если не атрибут <strong>autocomplete</strong> не указан в <code><input></code>, тогда браузер использует атрибут <strong>autocomplete</strong> формы, которая является родительской для данной формы. The form owner is either the <code>form</code> element that this <code><input></code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd> + <dt>{{htmlattrdef("autosave")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute should be defined as a unique value. If the value of the type attribute is <code>search</code>, previous search term values will persist in the dropdown across page load.</dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>When the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code><input></code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><input></code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>В атрибуте указывает <code>id</code> элемента {{HTMLElement("datalist")}}, в котором находится список предопределенных значений для заполнения. Браузер отображает только те варианты, которые соответствуют введенным символами. Этот атрибут игнорируется, когда атрибут <strong>type</strong> принимает значения <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> в качестве кнопки.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>Этот Boolean атрибут указывает, может ли пользователь вводить несколько значений. Этот атрибут применяется, если для атрибута type задано значение <code>email</code> или <code>file</code>; в противном случае он игнорируется. </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. + <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div> + </dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>This Boolean attribute indicates that the user cannot modify the value of the control. + <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p> + </dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<h3 id="File_inputs">File inputs</h3> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p> +</div> + +<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p> + +<pre class="brush: js">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + +<h3 id="Error_messages">Error messages</h3> + +<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p> + +<pre class="brush: html"><input type="email" x-moz-errormessage="Please specify a valid email address."> +</pre> + +<p>Note, however, that this is not standard and will not have an effect on other browsers.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="A_simple_input_box">A simple input box</h3> + +<pre class="brush: html"><!-- A basic input --> +<input type="text" name="input" value="Type here"> +</pre> + +<p><input></p> + +<h3 id="A_common_use-case_scenario">A common use-case scenario</h3> + +<pre class="brush: html"><!-- A common form that includes input tags --> +<form action="getform.php" method="get"> + First name: <input type="text" name="first_name" /><br /> + Last name: <input type="text" name="last_name" /><br /> + E-mail: <input type="email" name="user_email" /><br /> +<input type="submit" value="Submit" /> +</form> +</pre> + +<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> + +<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next" name="sometext" /> +</pre> + +<p>The result is:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("html.elements.input")}}</p> + +<p>[1] Распознаётся, но UI отсутствует.</p> + +<p>[2] Отсутствует для <code>type="checkbox"</code> и <code>type="radio"</code>.</p> + +<p>[3] В Safari <code>autocapitalize="words"</code> переводит в верхний регистр каждый второй символ слова.</p> + +<p>[4] <code>datetime</code> был удалён из спецификации и браузеров в пользу <code>datetime-local</code>.</p> + +<p>[5] См {{bug(1355389)}}</p> + +<p>[6] Ещё не имплементировано. Наблюдать: {{bug("888320")}} и <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p> + +<p><code><input type="file" accept="image/*"></code></p> + +<p>Firefox for Android sets a default {{ cssxref("background-image") }} gradient on all <code>type="text"</code>, <code>type="file"</code>, <code>type="button"</code>, and <code>type="submit"</code> inputs. This can be disabled using <code>background-image: none</code>.</p> + +<p>Firefox for Android also sets a default {{ cssxref("border") }} on all <code><input type="file"></code> elements.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html new file mode 100644 index 0000000000..93f1fb2525 --- /dev/null +++ b/files/ru/web/html/element/input/number/index.html @@ -0,0 +1,420 @@ +--- +title: <input type="number"> +slug: Web/HTML/Element/Input/number +translation_of: Web/HTML/Element/input/number +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>number</code></strong> используются для того, чтобы дать возможность пользователю ввести число. У них есть встроенная валидация, запрещающая вводить нечисловые значения.</span> Браузер может предоставить возможность увеличить или уменьшить значение специальными стрелками, используя мышь или просто двигая пальцем по экрану.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> + + + +<p>В браузерах, которые не поддерживают тип <code>number</code>, тип <code>number</code> приводится к <code>text</code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{jsxref("Number")}} representing a number, or empty</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>{{jsxref("Number")}}, представляющий значение введенного числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p> + +<pre class="brush: html notranslate"><input id="number" type="number" value="42"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the attributes commonly supported by all {{HTMLElement("input")}} types, inputs of type <code>number</code> support these attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>The maximum value to accept for this input</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>The minimum value to accept for this input</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>An example value to display inside the field when it's empty</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>A Boolean attribute controlling whether or not the value is read-only</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>A stepping interval to use when using up and down arrows to adjust the value, as well as for validation</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>The maximum value to accept for this input. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p> + +<p>This value must be greater than or equal to the value of the <code>min</code> attribute.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>The minimum value to accept for this input. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid number, the input has no minimum value.</p> + +<p>This value must be less than or equal to the value of the <code>max</code> attribute.</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<div id="step-include"> +<p>Атрибут <code>step</code> – это число, которое определяет точность, с которой задаётся значение, или специальное значение <code>any</code>, описанное ниже. Только значения, кратные шагу (<code>{{anch("min")}}</code>, если задано, иначе {{htmlattrxref("value", "input")}}, или подходящее стандартное значение, если ни одно из двух не задано) будут корректными.</p> + +<p>Строковое значение <code>any</code> означает, что никакое значение шага не задано и допустимо любое значение (в пределах других ограничений, таких как <code>{{anch("min")}}</code> и <code>{{anch("max")}}</code>).</p> + +<div class="note"> +<p><strong>Примечание:</strong> Когда значение, введённое пользователем, не подходит под заданное значение шага, {{Glossary("user agent")}} может округлить его до ближайшего допустимого значения с приоритетом в большую сторону в том случае, если значение находится ровно посередине шага.</p> +</div> +</div> + +<p>Стандартное значение шага для поля ввода <code>number</code> – это <code>1</code>, что позволяет вводить только целые числа, <em>если</em> только не задать значение шага нецелым числом.</p> + +<h2 id="Using_number_inputs">Using number inputs</h2> + +<p><code><input type="number"></code> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper <code>type</code> value, <code>number</code>, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.</p> + +<div class="warning"> +<p><strong>Important</strong>: Bear in mind that logically you should not be able to enter characters inside a number of input other than numbers. There seems to be some disagreement about this among browsers; see {{bug(1398528)}}.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: It's crucial to remember that a user can tinker with your HTML behind the scenes, so your site <em>must not</em> use simple client-side validation for any security purposes. You <em>must</em> verify on the server side any transaction in which the provided value may have any security implications of any kind.</p> +</div> + +<p>Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="A_simple_number_input">A simple number input</h3> + +<p>In its most basic form, a number input can be implemented like this:</p> + +<pre class="brush: html notranslate"><label for="ticketNum">Number of tickets you would like to buy:</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> + +<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p> + +<p>A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the {{htmlattrxref("required", "input")}} attribute is used, the input is no longer considered valid when empty.</p> + +<div class="note"> +<p><strong>Note</strong>: Any number is an acceptable value, as long as it is a <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">valid floating point number</a> (i.e. not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>).</p> +</div> + +<h3 id="Placeholders">Placeholders</h3> + +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take <code>value</code>. It is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> + +<p>Here, we have an <code>number</code> input with the placeholder <code>"Multiple of 10"</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="Multiple of 10"></pre> + +<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p> + +<h3 id="Controlling_step_size">Controlling step size</h3> + +<p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a {{htmlattrxref("step", "input")}} attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of 10:</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10"></pre> + +<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p> + +<p>In this example you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.</p> + +<h3 id="Specifying_minimum_and_maximum_values">Specifying minimum and maximum values</h3> + +<p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> + +<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p> + +<p>In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.</p> + +<h3 id="Allowing_decimal_values">Allowing decimal values</h3> + +<p>One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> + +<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p> + +<p>See that this example allows any value between 0.0 and 10.0, with decimals to two places. "9.52" is valid, but "9.521" is not, for example.</p> + +<h3 id="Controlling_input_size">Controlling input size</h3> + +<p>{{HTMLElement("input")}} elements of type <code>number</code> don't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> to change the size of these controls.</p> + +<p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> + +<p>Then we add some CSS to narrow the width of the element with the ID <code>number</code>:</p> + +<pre class="brush: css notranslate">#number { + width: 3em; +}</pre> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p> + +<h3 id="Offering_suggested_values">Offering suggested values</h3> + +<p>You can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute, which contains as its value the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p> + +<pre class="brush: html notranslate"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<span class="validity"></span> + +<datalist id="defaultNumbers"> + <option value="10045678"> + <option value="103421"> + <option value="11111111"> + <option value="12345678"> + <option value="12999922"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<div class="note"> +<p>Use of the {{htmlattrxref("list", "input")}} attribute with <code>number</code> inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>We have already mentioned a number of validation features of <code>number</code> inputs, but let's review them now:</p> + +<ul> + <li><code><input type="number"></code> elements automatically invalidate any entry that isn't a number (or empty, unless <code>required</code> is specified).</li> + <li>You can use the {{htmlattrxref("required", "input")}} attribute to make an empty entry invalid, i.e. the input has to be filled in.</li> + <li>You can use the {{htmlattrxref("step", "input")}} attribute to constrain valid values to a certain set of steps (e.g. multiples of 10).</li> + <li>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to constrain valid values to lower and upper bounds.</li> +</ul> + +<p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="balloons">Number of balloons to order (multiples of 10):</label> + <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Validation", 600, 80)}}</p> + +<p>Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.</p> + +<p>The CSS applied to this example is as follows:</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Here we use the {{cssxref(":invalid")}} and {{cssxref(":valid")}} pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent {{htmlelement("span")}} element, indicating if the current value is valid. We put it on a separate <code><span></code> element for added flexibility; some browsers don't display generated content very effectively on some types of form inputs (read for example the section on <a href="/en-US/docs/Web/HTML/Element/input/date#Validation"><code><input type="date"></code> validation</a>).</p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for server-side scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p> +</div> + +<h3 id="Pattern_validation">Pattern validation</h3> + +<p><code><input type="number"></code> elements do not support use of the {{htmlattrxref("pattern", "input")}} attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs won't be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes, as explained above.</p> + +<h2 id="Examples">Examples</h2> + +<p>We've already covered the fact that by default, the increment is 1, and you can use the {{htmlattrxref("step", "input")}} attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.</p> + +<p>{{EmbedLiveSample("Examples", 600, 100)}}</p> + +<p>The HTML looks like this:</p> + +<pre class="brush: html notranslate"><form> + <div class="metersInputGroup"> + <label for="meters">Enter your height — meters:</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> + <span class="validity"></span> + </div> + <div class="feetInputGroup" style="display: none;"> + <span>Enter your height — </span> + <label for="feet">feet:</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">inches:</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="Enter height in feet and inches"> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the <code>step</code> value to <code>0.01</code>, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.</p> + +<p>We've hidden the feet and inches inputs initially using <code>style="display: none;"</code> so that meters is the default entry type.</p> + +<p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>And finally, the JavaScript:</p> + +<pre class="brush: js notranslate">var metersInputGroup = document.querySelector('.metersInputGroup'); +var feetInputGroup = document.querySelector('.feetInputGroup'); +var metersInput = document.querySelector('#meters'); +var feetInput = document.querySelector('#feet'); +var inchesInput = document.querySelector('#inches'); +var switchBtn = document.querySelector('input[type="button"]'); + +switchBtn.addEventListener('click', function() { + if(switchBtn.getAttribute('class') === 'meters') { + switchBtn.setAttribute('class', 'feet'); + switchBtn.value = 'Enter height in meters'; + + metersInputGroup.style.display = 'none'; + feetInputGroup.style.display = 'block'; + + feetInput.setAttribute('required', ''); + inchesInput.setAttribute('required', ''); + metersInput.removeAttribute('required'); + + metersInput.value = ''; + } else { + switchBtn.setAttribute('class', 'meters'); + switchBtn.value = 'Enter height in feet and inches'; + + metersInputGroup.style.display = 'block'; + feetInputGroup.style.display = 'none'; + + feetInput.removeAttribute('required'); + inchesInput.removeAttribute('required'); + metersInput.setAttribute('required', ''); + + feetInput.value = ''; + inchesInput.value = ''; + } +});</pre> + +<p>After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.</p> + +<div class="note"> +<p>Note that when the user clicks the button, we remove the <code>required</code> attribute(s) from the input(s) we are hiding, and empty the <code>value</code> attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches <strong>and</strong> meters to submit the form!</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '<input type="number">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-number")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> +</ul> diff --git a/files/ru/web/html/element/input/password/index.html b/files/ru/web/html/element/input/password/index.html new file mode 100644 index 0000000000..eb87000912 --- /dev/null +++ b/files/ru/web/html/element/input/password/index.html @@ -0,0 +1,614 @@ +--- +title: <input type="password"> +slug: Web/HTML/Element/Input/password +tags: + - Element + - HTML + - Веб + - Пароль + - Формы +translation_of: Web/HTML/Element/input/password +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>"password"</code></strong> предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенен, чтобы его нельзя было прочитать, как правило, путем замены каждого символа другим символом, таким как звездочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от {{Glossary("user agent")}} и {{Glossary("OS")}}.</span></p> + +<p>Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и легкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.</p> + +<div class="note"> +<p>Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему - см. <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>. Другие браузеры также реализуют аналогичные механизмы.</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html"><input id="userPassword" type="password"></pre> +</div> + +<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>{{domxref("DOMString")}} представляет пароль или пустую строку</td> + </tr> + <tr> + <td><strong>События</strong></td> + <td>{{event("change")}} и {{event("input")}}</td> + </tr> + <tr> + <td><strong>Общие поддерживаемые атрибуты</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL атрибуты</strong></td> + <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, и <code>value</code></td> + </tr> + <tr> + <td><strong>Методы</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, и {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Значения">Значения</h2> + +<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}} , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь еще ничего не указал, это значение представляет собой пустую строку (<code>""</code>). Если указано свойство {{htmlattrxref("required")}}, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.</p> + +<p>Если указан атрибут {{htmlattrxref("pattern", "input")}}, содержимое элемента управления <code>"password"</code> считается действительным только в том случае, если значение проходит проверку; см. {{anch("Validation")}} для получения дополнительной информации.</p> + +<div class="note"> +<p>Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля <code>"password"</code>. При вставке пароля, возвращаемые символы удаляются из значения.</p> +</div> + +<h2 id="Использование_полей_ввода_пароля">Использование полей ввода пароля</h2> + +<p>Поля ввода пароля обычно работают так же, как и другие текстовые поля ввода; основное отличие состоит в том, чтобы скрывать введенный контент, чтобы люди, не знакомые с пользователем, не могли прочитать его пароль.</p> + +<h3 id="Простое_поле_ввода_пароля">Простое поле ввода пароля</h3> + +<p>Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента {{HTMLElement("label")}}.</p> + +<pre class="brush: html"><label for="userPassword">Пароль:</label> +<input id="userPassword" type="password"></pre> + +<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p> + +<h3 id="Поддержка_автозаполнения">Поддержка автозаполнения</h3> + +<p>Чтобы менеджер паролей пользователя автоматически вводил пароль, укажите атрибут {{htmlattrxref("autocomplete", "input")}}. Для паролей должно быть одно из следующих значений:</p> + +<dl> + <dt><code>"on"</code></dt> + <dd>Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование <code>"current-password"</code> или <code>"new-password"</code>.</dd> + <dt><code>"off"</code></dt> + <dd>Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.</dd> + <dt><code>"current-password"</code></dt> + <dd>Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это дает больше информации, чем <code>"on"</code>, так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.</dd> + <dt><code>"new-password"</code></dt> + <dd>Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».</dd> +</dl> + +<div id="Autocomplete_sample1"> +<pre class="brush: html"><label for="userPassword">Пароль:</label> +<input id="userPassword" type="password" autocomplete="current-password"></pre> +</div> + +<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p> + +<h3 id="Обязательное_заполнение_пароля">Обязательное заполнение пароля</h3> + +<p>Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут {{htmlattrxref("required", "input")}}.</p> + +<pre class="brush: html"><label for="userPassword">Пароль:</label> +<input id="userPassword" type="password" required></pre> + +<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p> + +<h3 id="Указание_режима_ввода">Указание режима ввода</h3> + +<p>Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут {{htmlattrxref("inputmode", "input")}} для определенного запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.</p> + +<pre class="brush: html"><label for="pin">ПИН:</label> +<input id="pin" type="password" inputmode="numeric"></pre> + +<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p> + +<h3 id="Настройка_длины_пароля">Настройка длины пароля</h3> + +<p>Как обычно, вы можете использовать атрибуты {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырех и не более восьми цифр. Атрибут {{htmlattrxref("size", "input")}} используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.</p> + +<pre class="brush: html"><label for="pin">ПИН:</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"></pre> + +<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p> + +<h3 id="Выделение_текста">Выделение текста</h3> + +<p>Как и другие элементы управления текстовой записью, вы можете использовать метод {{domxref("HTMLInputElement.select", "select()")}} для выбора всего текста в поле пароля.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label for="userPassword">Пароль</label> +<input id="userPassword" type="password" size="12"> +<button id="selectAll">Выделить все</button> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) { + document.getElementById("userPassword").select(); +}</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p> + +<p>Вы также можете использовать {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} и {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}}, чтобы получить (или установить), какой диапазон символов в элементе управления, и {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}}, чтобы узнать, какой выбор направления произошел (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенен, их полезность несколько ограничена.</p> + +<h2 id="Валидация">Валидация</h2> + +<p>Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введенного пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.</p> + +<p>В этом примере допустимы только значения, состоящие как минимум из четырех и не более восьми шестнадцатеричных цифр.</p> + +<div id="Validation_sample1"> +<pre class="brush: html"><label for="hexId">Hex ID:</label> +<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" + title="Enter an ID consisting of 4-8 hexadecimal digits"></pre> +</div> + +<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключенные значения полей не отправляются с формой.</p> + </dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Запрос_номера_социального_страхования">Запрос номера социального страхования</h3> + +<p>В этом примере принимается только ввод, который соответствует формату <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">действительного номера социального страхования Соединенных Штатов</a>. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><label for="ssn">SSN:</label> +<input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" + pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" + required autocomplete="off"> +<br> +<label for="ssn">Value:</label> +<span id="current"></span></pre> + +<p>Здесь используется {{htmlattrxref("pattern", "input")}} , который ограничивает введенное значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.</p> + +<p>В {{htmlattrxref("inputmode", "input")}} установлено значение <code>"number"</code>, чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}} установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут {{htmlattrxref("required", "input")}} используется для указания того, что этот элемент управления должен иметь значение. Наконец, {{htmlattrxref("autocomplete", "input")}} установлен <code>"off"</code>, чтобы избежать попыток установить пароли менеджеров паролей.</p> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">var ssn = document.getElementById("ssn"); +var current = document.getElementById("current"); + +ssn.oninput = function(event) { + current.innerHTML = ssn.value; +}</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Начальное определение</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<sup>[4]</sup></td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>minlength</td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>6<sup>[2] </sup></td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0<br> + 10<sup>[3]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Crossed out lock in address bar to indicate insecure login page</td> + <td>Implementing something similar</td> + <td>{{CompatGeckoDesktop("51")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Message displayed next to password field to indicate insecure login page, plus autofill disabled</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("52")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome mobile</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>27.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Crossed out lock in address bar to indicate insecure login page</td> + <td>Implementing something similar</td> + <td>{{CompatGeckoMobile("51")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Message displayed next to password field to indicate insecure login page, plus autofill disabled</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("52")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>[1] В версии 6.0 он работал только с типом документа HTML5, поддержка проверки в 7.0 была отключена и повторно включена в 10.0.</p> + +<p>[2] Отсутствует для <code>type="checkbox"</code> и <code>type="radio"</code>.</p> + +<p>[3] Поддерживается для элемента {{HTMLElement("select")}}.</p> + +<p>[4] Firefox, в отличие от других браузеров, по умолчанию <a href="http://stackoverflow.com/q/5985839/432681">pсохраняет состояние динамического отключения и (если применимо) динамическую проверку</a> из <code><input></code> для загрузки страницы. Установка значения атрибута {{htmlattrxref("autocomplete","input")}} в <code>off</code> отключает эту функцию; это работает, даже если атрибут {{htmlattrxref("autocomplete","input")}} обычно не применяется к <code><input></code> в силу его {{htmlattrxref("type","input")}}. Смотри {{bug(654072)}}.</p> diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..dd2c1e384e --- /dev/null +++ b/files/ru/web/html/element/input/radio/index.html @@ -0,0 +1,377 @@ +--- +title: <input type="radio"> +slug: Web/HTML/Element/Input/radio +tags: + - HTML + - Input + - Reference + - form + - radio button + - Варианты + - Группа радиокнопок + - Радиокнопка + - Справка + - Ссылки +translation_of: Web/HTML/Element/input/radio +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Атрибут<strong> type</strong> тега <code><input></code> со значением <strong><code>radio</code></strong> обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.</span> Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.</p> + +<div id="Basic_example"> +<pre class="brush: html notranslate"><input type="radio" id="radioButton"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p> + +<p>Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удаленный репозиторий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам запрос на включение сделанных вами изменений «pull request».</p> + +<p>Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже. </p> + +<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p> +</div> + +<div class="note"> +<p><strong>Примечание</strong>: <a href="/en-US/docs/Web/HTML/Element/input/checkbox">Чекбоксы</a> похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать" значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>{{domxref("Строка DOM")}} отображающая значение радиокнопки</td> + </tr> + <tr> + <td><strong>События</strong></td> + <td>{{event("change")}} и {{event("input")}}</td> + </tr> + <tr> + <td><strong>Универсальные атрибуты</strong></td> + <td>{{htmlattrxref("checked", "input")}}</td> + </tr> + <tr> + <td><strong>Атрибуты IDL</strong></td> + <td><code>checked</code> и <code>value</code></td> + </tr> + <tr> + <td><strong>Методы</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибут_value">Атрибут value </h2> + +<p>Атрибут <code>value</code> - это {{domxref("строка DOM")}}, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.</p> + +<h3 id="Создание_группы_радиокнопок">Создание группы радиокнопок</h3> + +<p>Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ({{htmlattrxref("name", "input")}}). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе. </p> + +<p>Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута <code>name</code>.</p> + +<p>Например, если в Вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то Вы можете создать три радиокнопки с <strong>name= <code>"contact"</code> , </strong>но с разными<strong> value = </strong><code>"email"</code>, <strong>value =</strong><code>"phone"</code> и <strong>value =</strong> <code>"mail"</code> соответственно. Пользователь не видит атрибуты <code>name</code> и <code>value</code> (если только Вы не добавляете код для их отображения).</p> + +<p>HTML будет выглядеть следующим образом:</p> + +<pre class="brush: html notranslate"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form></pre> + +<p>Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут <code>name</code> со значением <code>"contact"</code> и уникальный атрибут <code>value</code>, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный {{domxref("Element.id", "id")}}, связанный с тегом {{HTMLElement("label")}} через атрибут {{htmlattrxref("for", "label")}} для установления связи между конкретной меткой и конкретной радиокнопкой. </p> + +<p>Вы можете опробовать этот код здесь: </p> + +<p>{{ EmbedLiveSample('Defining_a_radio_group', 600, 130) }}</p> + +<h3 id="Представление_данных_группы_радиокнопок">Представление данных группы радиокнопок</h3> + +<p>Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде <strong>"contact=name".</strong> Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку <code>"contact=phone"</code>.</p> + +<p>Если Вы пренебрежёте атрибутом <code>value</code> в Вашем HTML, то отправленные данные просто присвоят данной группе значение <code>"on"</code>. То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как <code>"contact=on"</code> и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут <code>value</code>!</p> + +<div class="note"> +<p><strong>Примечание</strong>: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.</p> +</div> + +<p>Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута <code>"checked"</code>. Смотрите здесь {{anch("Selecting a radio button by default")}}.</p> + +<p>Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока {{HTMLElement("pre")}} для вывода данных формы. </p> + +<pre class="brush: html notranslate"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form> +<pre id="log"> +</pre> +</pre> + +<p>Затем добавим немного <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Установим слушателя для события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":</p> + +<pre class="brush: js notranslate">var form = document.querySelector("form"); +var log = document.querySelector("#log"); + +form.addEventListener("submit", function(event) { + var data = new FormData(form); + var output = ""; + for (const entry of data) { + output = entry[0] + "=" + entry[1] + "\r"; + }; + log.innerText = output; + event.preventDefault(); +}, false);</pre> + +<p>Опробуйте этот пример и убедитесь, что для группы радиокнопок <code>"contact"</code> будет только один результат.</p> + +<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p> + +<h2 id="Использование_радиокнопок">Использование радиокнопок</h2> + +<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространенные функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.</p> + +<h3 id="Выбор_радиокнопки_по_умолчанию">Выбор радиокнопки по умолчанию</h3> + +<p>Чтобы установить радиокнопку как выбранную по умолчанию, Вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p> + +<pre class="brush: html notranslate"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130) }}</p> + +<p>В данном случае первая радиокнопка будет выбрана по умолчанию.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Если Вы устанавливаете атрибут <code>checked</code> более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут <code>checked</code> отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом <code>checked</code>. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.</p> +</div> + +<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3> + +<p>В примерах, представленных выше, Вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент {{htmlelement("label")}}, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов <code><label></code> в Ваших формах.</p> + +<h2 id="Валидация_формы">Валидация формы</h2> + +<p>Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.</p> + +<h2 id="Установка_стилей_радиокнопок">Установка стилей радиокнопок</h2> + +<p>Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи, с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.</p> + +<p>HTML будет выглядеть следующим образом:</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Please select your preferred contact method:</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> + </fieldset> +</form></pre> + +<p>Здесь не так много нового, кроме дополнения в виде элементов {{htmlelement("fieldset")}} и {{htmlelement("legend")}}, которые позволяют сгруппировать элементы форм между собой функционально и семантически.</p> + +<p>CSS будет выглядеть так:</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +div:first-of-type { + display: flex; + align-items: flex-start; + margin-bottom: 5px; +} + +label { + margin-right: 15px; + line-height: 32px; +} + +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: 50%; + width: 16px; + height: 16px; + + border: 2px solid #999; + transition: 0.2s all linear; + outline: none; + margin-right: 5px; + + position: relative; + top: 4px; +} + +input:checked { + border: 6px solid black; +} + +button, +legend { + color: white; + background-color: black; + padding: 5px 10px; + border-radius: 0; + border: 0; + font-size: 14px; +} + +button:hover, +button:focus { + color: #999; +} + +button:active { + background-color: white; + color: black; + outline: 1px solid black; +}</pre> + +<p>Самым примечательным здесь является использование свойства {{cssxref("appearance")}} с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству <code>appearance</code> значение <code>none</code>, Вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства {{cssxref("border")}} и {{cssxref("border-radius")}}, а также свойство {{cssxref("transition")}} для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс {{cssxref(":checked")}} используется для указания стилей внешнего вида кнопок при их выборе.</p> + +<p>Стоит иметь в виду, что свойство <code>appearance</code> неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает Ваш сайт в каждом браузере! </p> + +<p>{{ EmbedLiveSample('Styling_radio_inputs', 600, 120) }}</p> + +<p>Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который Вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th></th> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li> + <li>{{interface("RadioNodeList")}}: the interface that describes a list of radio buttons</li> +</ul> diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html new file mode 100644 index 0000000000..b46af66650 --- /dev/null +++ b/files/ru/web/html/element/input/range/index.html @@ -0,0 +1,480 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/Input/range +tags: + - контроллер + - слайдер +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">Элементы {{HTMLElement("input")}} с типом <strong><code>range</code></strong> позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как {{HTMLElement('input/number', 'number')}}.</span> Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> + +<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправте нам пул реквест.</p> + +<p>Если используемый браузер не поддерживает тип <code>range</code>, он будет отображаться как input<code>{{HTMLElement('input/text', 'text')}}.</code></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>{{domxref("DOMString")}}, содержащий строковое представление выбранного числового значения; используйте {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} чтобы получить значение {{jsxref("Number")}}.</td> + </tr> + <tr> + <td><strong>События</strong></td> + <td>{{event("change")}} и {{event("input")}}</td> + </tr> + <tr> + <td><strong>Поддерживаемые общие атрибуты</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL атрибуты</strong></td> + <td><code>list</code>, <code>value</code>, и <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Методы</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} и {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h3 id="Валидация">Валидация</h3> + +<p>Для этого поля нет доступного патерна валидации, но следующая валидация реализованны следующие проверки</p> + +<ul> + <li>Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдет ошибка некорректного ввода.</li> + <li>Значение не может быть меньше чем {{htmlattrxref("min", "input")}}. По умолчанию: 0.</li> + <li> Значение не может быть больше чем {{htmlattrxref("max", "input")}}. По умолчанию: 100.</li> + <li>Значение должно кратно {{htmlattrxref("step", "input")}}. По умолчанию: 1.</li> +</ul> + +<h3 id="sect1"></h3> + +<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p> + +<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведет к установлению значения равного атрибуту max.</p> + +<h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2> + +<p>В дополнение к атрибутам, общим для всех элементов {{HTMLElement("input")}}, range инпуты предлагают следующие атрибуты:</p> + +<table> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>id элемента <datalist>, который сожержит предопределенные значение (не обязательно)</td> + </tr> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>Максимальное допустимое значение</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>Минимальное допустимое значение</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Шаговый, используемый для пользовательского интерфейса и для проверки</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<p>Смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range$edit#A_range_control_with_hash_marks">управление диапазоном с помощью решетки</a> ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.</p> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>Это значение должно быть больше или равно значению атрибута <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введенный в элемент, меньше этого значения, то элемент не проходит <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">проверку ограничения</a>. Если значение атрибута <code>min</code> не является числом, то элемент не имеет максимального значения.</p> + +<p>Это значение должно быть меньше или равно значению атрибута <code>max</code>.</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>По умолчанию шаг для инпута с типом <code>range</code> равен 1, допустим ввод только целых чисел, <em>если </em> база шага не является целым; например, если вы установили <code>min</code> на -10 и <code>value</code> на 1.5, то <code>step</code> 1 позволит только такие значения как 1.5, 2.5, 3.5,... в положительном направлении и -0.5, -1.5, -2.5,... в отрицательном направлении.</p> + +<h3 id="Не_стандартные_атрибуты">Не стандартные атрибуты</h3> + +<table> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("orient")}}</code></td> + <td>Устанавливает ориентацию слайдера. <strong>Firefox only.</strong></td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> + <dd id="orient-include">Похоже на -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элемены, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значет что слайдер быдет отображен горизонтально, а <code>vertical</code>- что вертикально .</dd> +</dl> + +<div class="blockIndicator note"> +<p>Note: Следующие атрибуты не применимы: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, и <code>width</code>. Каждый из них будет проигнорирован в случаее употребления.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<p>Пока тип <code>number</code> позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определенное значение. Инпут с типом <code>range</code> позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.</p> + +<p>Несколько примеров основный ситуаций, в которых инпуты с range используются:</p> + +<ul> + <li>Аудио-контроллеры громкости и баланса, или контроллеры фильтра.</li> + <li>Контроллеры настройки цвета, такие как цветовые каналы, прозрачность, яркость, и т.д.</li> + <li>Контроллеры игровой настройки, такие как сложность, дальность видимости, размер мира и т.д.</li> + <li>Длина пароля для сгенерированных паролей менеджера паролей.</li> +</ul> + +<p>Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает "установить громкости наполовину максимума" вместо "установить громкость на 0.5".</p> + +<h3 id="Указание_минимума_и_максимума">Указание минимума и максимума</h3> + +<p>По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с легкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.</p> + +<p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p> + +<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="Настройка_детализации_значения">Настройка детализации значения</h3> + +<p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p> + +<div id="Granularity_sample2"> +<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p>Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.</p> +</div> + +<h3 id="Добавление_хэш-меток_и_лейблов">Добавление хэш-меток и лейблов</h3> + +<p>Спецификация HTML дает браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.</p> + +<h4 id="Макеты_контроллера_диапазона">Макеты контроллера диапазона</h4> + +<p>Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определенные HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.</p> + +<h5 id="Недекорированный_контроллер_даипазона">Недекорированный контроллер даипазона</h5> + +<p>Этот результат вы получите, если не укажите атрибут {{htmlattrxref("list", "input")}}, или браузер не будет его поддерживать.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html notranslate"> +<input type="range"></pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Контроллер_диапазона_с_хэш-метками">Контроллер диапазона с хэш-метками</h5> + +<p>Контроллер диапазона, использующий атрибут <code>list</code>, указывающий ID {{HTMLElement("datalist")}}, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента {{HTMLElement("option")}} с его набором {{htmlattrxref("value", "option")}} значений диапазона, при котором должна быть нарисована метка.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html notranslate"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Контроллер_диапазона_с_хэш-метками_и_лейблами">Контроллер диапазона с хэш-метками и лейблами</h5> + +<p>Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут {{htmlattrxref("label", "option")}} элементам {{HTMLElement("option")}}, соответствующим значениям, на которых вы бы хотели видеть лейблы.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html notranslate"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50" label="50%"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100" label="100%"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Примечание</strong>: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддрживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг {{htmlelement("datalist")}} должен быть стилизован с помощью CSS, так как его свойство {{cssxref("display")}} по умолчанию - <code>none</code>, тем самым скрывая лейблы.</p> +</div> + +<h3 id="Изменение_ориентации">Изменение ориентации</h3> + +<p>По умолчанию, если браузер отображает инпут диапозона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализованно, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ниодин из наиболее используемых браузеров не имплементировал это пока. (Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). также, возможно, <a href="https://github.com/whatwg/html/issues/4177">следующий баг под вопросом</a>.</p> + +<p>В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки {{cssxref('appearance')}} для <code>slider-vertical</code>, использование нестандартной ориентации <code>orient</code> в Firefox,или изменение text direction для Internet Explorer и Edge</p> + +<p>Рассмотрим контроллер диапазона:</p> + +<pre class="notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p>Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).</p> + +<h3 id="Standards">Standards</h3> + +<p>Следуюя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:</p> + +<h4 id="CSS">CSS</h4> + +<pre class="notranslate">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<p>К сожалению, большенство браузеров сейчас не поддерживают вертикальные контроллы напрямую.</p> + +<h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3> + +<p>Но вы, все же, можете сделать вертикльный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя {{cssxref("transform")}} для поворото элемента на 90 градусов. Посмотрим:</p> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<p>В HTML нужно добавить обертку вокруг {{HTMLElement("input")}} - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p> + +<pre class="brush: html notranslate"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обертки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повернутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p> + +<pre class="brush: css notranslate">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> + +<p>Затем информация о стиле элемента <code><input></code> в зарезервированном пространстве:</p> + +<pre class="brush: css notranslate">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p>Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на 0 и {{cssxref("transform-origin")}} смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поварачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.</p> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> + +<h3 id="appearance_property">appearance property</h3> + +<p>Свойство {{cssxref('appearance')}} имеет нестандартное значение <code>slider-vertical</code> , которое делает слайдер вертикальным.</p> + +<h4 id="HTML_3">HTML</h4> + +<p>Используем тот же HTML что и в предыдущем примере:</p> + +<pre class="notranslate"><input type="range" min="0" max="11" value="7" step="1"> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<p>Берем только те инпуты что иеют тип range:</p> + +<pre class="notranslate">input[type="range"] { + -webkit-appearance: slider-vertical; +}</pre> + +<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p> + +<h3 id="orient_attribute">orient attribute</h3> + +<p>В Firefox, реализованно нестандартное свойство <code>orient</code>.</p> + +<h4 id="HTML_4">HTML</h4> + +<p>Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением <code>vertical</code>:</p> + +<pre class="notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +</pre> + +<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p> + +<h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3> + +<p>Свойство {{cssxref('writing-mode')}} может быть использовано для специальных эфектов </p> + +<h4 id="HTML_5">HTML</h4> + +<p>Используем тот же HTML что и в предыдущем примере:</p> + +<pre class="notranslate"><input type="range" min="0" max="11" value="7" step="1"> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> + +<pre class="notranslate">input[type="range"] { + writing-mode: bt-lr; +}</pre> + +<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p> + +<h3 id="Все_вместе">Все вместе</h3> + +<p>Каждый из вышеперечисленных примеров работает в своем браузере, мы попробуем обьединить все вместе чтоб добится кроссбраузерности решения:</p> + +<h4 id="HTML_6">HTML</h4> + +<p>Оставим <code>orient</code> атрибут со значением <code>vertical</code> для Firefox:</p> + +<pre class="notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +</pre> + +<h4 id="CSS_5">CSS</h4> + +<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и обавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> + +<pre class="notranslate">input[type="range"] { + writing-mode: bt-lr; + -webkit-appearance: slider-vertical; +}</pre> + +<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Первое определение</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.input.input-range")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} и интерфейс {{domxref("HTMLInputElement")}}, на котором он основан</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> + <li>{{domxref('validityState.rangeOverflow')}} и{{domxref('validityState.rangeUnderflow')}}</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> + <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">Styling the range element</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/ru/web/html/element/input/search/index.html b/files/ru/web/html/element/input/search/index.html new file mode 100644 index 0000000000..a4307a573b --- /dev/null +++ b/files/ru/web/html/element/input/search/index.html @@ -0,0 +1,467 @@ +--- +title: <input type="search"> +slug: Web/HTML/Element/Input/search +translation_of: Web/HTML/Element/input/search +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} элементы с типом <code><strong>search</strong></code> это текстовые поля разработанные для ввода пользователем поисковых запросов. Функциональность идентична элементам с типом <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code>, но может отличаться стилизация за счет {{Glossary("user agent")}}, а также наличием специального <strong>не стандартизированного</strong> события </span>{{domxref("HTMLElement/search_event", "onsearch")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> + +<div 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.</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing the value contained in the search field.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} and {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}.</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>The {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} representing the value contained in the search field. You can retrieve this using the {{domxref("HTMLInputElement.value")}} property in JavaScript.</p> + +<pre class="brush: js">searchTerms = mySearch.value; +</pre> + +<p>If no validation constraints are in place for the input (see {{anch("Validation")}} for more details), the value can be any text string or an empty string (<code>""</code>).</p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, search field inputs support the following attributes:</p> + +<table> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>The id of the <datalist> element that contains the optional pre-defined autocomplete options</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>The maximum number of characters the input should accept</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>The minimum number of characters long the input can be and still be considered valid</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>A regular expression the input's contents must match in order to be valid</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>An exemplar value to display in the input field whenever it is empty</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>A Boolean attribute indicating whether or not the contents of the input should be read-only</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>A number indicating how many characters wide the input field should be</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>The maximum number of characters (as UTF-16 code units) the user can enter into the search field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the search field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> + +<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>The minimum number of characters (as UTF-16 code units) the user can enter into the search field. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the search input has no minimum length.</p> + +<p>The search field will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>See the section {{anch("Specifying a pattern")}} for details and an example.</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p> + +<h2 id="Non-standard_attributes">Non-standard attributes</h2> + +<p>The following non-standard attributes are available to search input fields. As a general rule, you should avoid using them unless it can't be helped.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Whether or not to allow autocorrect while editing this input field. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdefincremental_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3> + +<div id="incremental-include"> +<p>The Boolean attribute <code>incremental</code> is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the {{Glossary("user agent")}} to process the input as a live search. As the user edits the value of the field, the user agent sends {{event("search")}} events to the {{domxref("HTMLInputElement")}} object representing the search box. This allows your code to update the search results in real time as the user edits the search.</p> + +<p>If <code>incremental</code> is not specified, the {{event("search")}} event is only sent when the user explicitly initiates a search (such as by pressing the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field).</p> + +<p>The <code>search</code> event is rate-limited so that it is not sent more more frequently than an implementation-defined interval.</p> +</div> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> + +<div id="results-include"> +<p>The <code>results</code> attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the {{HTMLElement("input")}} element's natively-provided drop-down menu of previous search queries.</p> + +<p>The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.</p> +</div> + +<h2 id="Using_search_inputs">Using search inputs</h2> + +<p><code><input></code> elements of type <code>search</code> are very similar to those of type <code>text</code>, except that they are specifically intended for handling search terms. They are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).</p> + +<h3 id="Basic_example">Basic example</h3> + +<pre class="brush: html"><form> + <div> + <input type="search" id="mySearch" name="q"> + <button>Search</button> + </div> +</form></pre> + +<p>This renders like so:</p> + +<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p> + +<p><code>q</code> is the most common <code>name</code> given to search inputs, although it's not mandatory. When submitted, the data name/value pair sent to the server will be <code>q=searchterm</code>.</p> + +<div class="note"> +<p>You must remember to set a {{htmlattrxref("name", "input")}} for your input, otherwise nothing will be submitted.</p> +</div> + +<h3 id="Differences_between_search_and_text_types">Differences between search and text types</h3> + +<p>The main basic differences come in the way browsers handle them. The first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired. The following screenshot comes from Chrome:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> + +<p>In addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. This helps users who tend to do searches on the same or similar search queries over time. This screenshot is from Firefox:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">At this point, let's look at some useful techniques you can apply to your search forms.</p> + +<h3 id="Setting_placeholders">Setting placeholders</h3> + +<p>You can provide a useful placeholder inside your search input that could give a hint on what to do using the {{htmlattrxref("placeholder","input")}} attribute. Look at the following example:</p> + +<pre class="brush: html"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..."> + <button>Search</button> + </div> +</form></pre> + +<p>You can see how the placeholder is rendered below:</p> + +<p>{{EmbedLiveSample("Setting_placeholders", 600, 40)}}</p> + +<h3 id="Search_form_labels_and_accessibility">Search form labels and accessibility</h3> + +<p>One problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">this example shows a typical pattern</a>).</p> + +<p>This could, however, cause confusion for screenreader users, since they will not have any verbal indication of what the search input is. One way around this that won't impact on your visual design is to use <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> features:</p> + +<ul> + <li>A <code>role</code> attribute of value <code>search</code> on the <code><form></code> element will cause screenreaders to announce that the form is a search form.</li> + <li>If that isn't enough, you can use an <code>aria-label</code> attribute on the {{HTMLElement("input")}} itself. This should be a descriptive text label that will be read out by the screenreader; it's used as a non-visual equivalent to <code><label></code>.</li> +</ul> + +<p>Let's have a look at an example:</p> + +<pre class="brush: html"><form role="search"> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." + aria-label="Search through site content"> + <button>Search</button> + </div> +</form></pre> + +<p>You can see how this is rendered below:</p> + +<p>{{EmbedLiveSample("Search_form_labels_and_accessibility", 600, 40)}}</p> + +<p>There is no visual difference from the previous example, but screenreader users have way more information available to them.</p> + +<div class="note"> +<p><strong>Note</strong>: See <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> for more information about such accessibility features.</p> +</div> + +<h3 id="Physical_input_element_size">Physical input element size</h3> + +<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the search box is 30 characters wide:</p> + +<pre class="brush: html"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." size="30"> + <button>Search</button> + </div> +</form></pre> + +<p>The result is this wider input box:</p> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h2 id="Validation">Validation</h2> + +<p><code><input></code> elements of type <code>search</code> have the same validation features available to them as regular <code>text</code> inputs. It is less likely that you'd want to use validation features in general for search boxes. In many cases, users should just be allowed to search for anything, but there are a few cases to consider, such as searches against data of a known format.</p> + +<div class="note"> +<p><strong>Note</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> +</div> + +<h3 id="A_note_on_styling">A note on styling</h3> + +<p>There are useful pseudo-classes available for styling valid/invalid form elements: {{cssxref(":valid")}} and {{cssxref(":invalid")}}. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.</p> + +<pre class="brush: css">input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> + +<p>The technique also requires a {{htmlelement("span")}} element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.</p> + +<h3 id="Making_input_required">Making input required</h3> + +<p>You can use the {{htmlattrxref("required", "input")}} attribute as an easy way of making entering a value required before form submission is allowed:</p> + +<pre class="brush: html"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." required> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>This renders like so:</p> + +<p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p> + +<p>In addition, if you try to submit the form with no search term entered into it, the browser will show a message. The following example is from Firefox:</p> + +<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> + +<p>Different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.</p> + +<h3 id="Input_value_length">Input value length</h3> + +<p>You can specify a minimum length, in characters, for the entered value using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered value.</p> + +<p>The example below requires that the entered value be 4–8 characters in length.</p> + +<pre class="brush: html"><form> + <div> + <label for="mySearch">Search for user</label> + <input type="search" id="mySearch" name="q" + placeholder="User IDs are 4–8 characters in length" required + size="30" minlength="4" maxlength="8"> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>This renders like so:</p> + +<p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p> + +<p>If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to go beyond 8 characters in length, the browser won't let you.</p> + +<h3 id="Specifying_a_pattern">Specifying a pattern</h3> + +<p>You can use the {{htmlattrxref("pattern", "input")}} attribute to specify a regular expression that the inputted value must follow to be considered valid (see <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a> for a simple crash course).</p> + +<p>Let's look at an example. Say we wanted to provide a product ID search form, and the IDs were all codes of two letters followed by four numbers. The following example covers it:</p> + +<pre class="brush: html"><form> + <div> + <label for="mySearch">Search for product by ID:</label> + <input type="search" id="mySearch" name="q" + placeholder="two letters followed by four numbers" required + size="30" pattern="[A-z]{2}[0-9]{4}"> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>This renders like so:</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 40) }}</p> + +<h2 id="Examples">Examples</h2> + +<p>You can see a good example of a search form used in context at our <a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> example (<a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>).</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="search">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="search">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-search")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/ru/web/html/element/input/tel/index.html b/files/ru/web/html/element/input/tel/index.html new file mode 100644 index 0000000000..e13cf8729e --- /dev/null +++ b/files/ru/web/html/element/input/tel/index.html @@ -0,0 +1,523 @@ +--- +title: <input type="tel"> +slug: Web/HTML/Element/Input/tel +translation_of: Web/HTML/Element/input/tel +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} элемент типа <code><strong>tel</strong></code> используется чтобы разрешить пользователю вводить и редактировать номер телефона. В отличии от<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , введеное значение не проверяется автоматически по определенном формату, перед тем как форма может быть отправлена , потому что форматы телефонных номеров сильно различаются по всему миру</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div> + + + +<p>Despite the fact that inputs of type <code>tel</code> are functionally identical to standard <code>text</code> inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers. Using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient.</p> + +<div class="note"> +<p><strong>Note:</strong> Browsers that don't support type <code>tel</code> fall back to being a standard {{HTMLElement("input/text", "text")}} input.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing a telephone number, or empty</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>The {{HTMLElement("input")}} element's {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that either represents a telephone number or is an empty string (<code>""</code>).</p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>The maximum length, in UTF-16 characters, to accept as a valid input</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>The minimum length that is considered valid for the field's contents</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>A regular expression the entered value must match to pass constraint validation</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>An example value to display inside the field when it has no value</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>A Boolean attribute which, if present, indicates that the field's contents should not be user-editable</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>The number of characters wide the input field should be onscreen</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<p>The maximum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the telephone number field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> + +<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<p>The minimum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the telephone number input has no minimum length.</p> + +<p>The telephone number field will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>See {{anch("Pattern validation")}} below for details and an example.</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Non-standard_attributes">Non-standard attributes</h2> + +<p>The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can't be helped.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Whether or not to allow autocorrect while editing this input field. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="Using_tel_inputs">Using tel inputs</h2> + +<p>Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.</p> + +<p>Fortunately, you can consider the requirements of your own site and implement an appropriate level of validation yourself. See {{anch("Validation")}}, below, for details.</p> + +<h3 id="Custom_keyboards">Custom keyboards</h3> + +<p>One of the main advantages of <code><input type="tel"></code> is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here's what the keypads look like on a couple of devices.</p> + +<table class="standard-table"> + <caption>Examples of custom keyboards on mobile devices.</caption> + <thead> + <tr> + <th scope="col">Firefox for Android</th> + <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Firefox for Android screen shot" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="height: 640px; width: 360px;"></td> + <td><img alt="Firefox for iOS screenshot" src="https://mdn.mozillademos.org/files/15603/iphone-tel-keyboard-50pct.png" style="height: 640px; width: 360px;"></td> + </tr> + </tbody> +</table> + +<h3 id="A_simple_tel_input">A simple tel input</h3> + +<p>In its most basic form, a tel input can be implemented like this:</p> + +<pre class="brush: html"><label for="telNo">Phone number:</label> +<input id="telNo" name="telNo" type="tel"></pre> + +<p>{{ EmbedLiveSample('A_simple_tel_input', 600, 40) }}</p> + +<p>There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, <code>telNo=+12125553151</code>.</p> + +<h3 id="Placeholders">Placeholders</h3> + +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> + +<p>Here, we have an <code>tel</code> input with the placeholder <code>123-4567-8901</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> + +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + placeholder="123-4567-8901"></pre> + +<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p> + +<h3 id="Controlling_the_input_size">Controlling the input size</h3> + +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> + +<h4 id="Physical_input_element_size">Physical input element size</h4> + +<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>tel</code> edit box is 20 characters wide:</p> + +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + size="20"></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h4 id="Element_value_length">Element value length</h4> + +<p>The <code>size</code> is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered telephone number.</p> + +<p>The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.</p> + +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + size="20" minlength="9" maxlength="14"></pre> + +<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> + +<div class="note"> +<p><strong>Note</strong>: The above attributes do affect {{anch("Validation")}} — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.</p> +</div> + +<h3 id="Providing_default_options">Providing default options</h3> + +<p>As always, you can provide a default value for an <code>tel</code> input box by setting its {{htmlattrxref("value", "input")}} attribute:</p> + +<div id="Default_value"> +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + value="333-4444-4444"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Offering_suggested_values">Offering suggested values</h4> + +<p>Taking it a step farther, you can provide a list of default phone number values from which the user can select. To do this, use the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}} element, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the telephone number entry box.</p> + +<pre class="brush: html"><label for="telNo">Phone number: </label> +<input id="telNo" name="telNo" type="tel" list="defaultTels"> + +<datalist id="defaultTels"> + <option value="111-1111-1111"> + <option value="122-2222-2222"> + <option value="333-3333-3333"> + <option value="344-4444-4444"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> + +<p>Here's a screenshot of what that might look like:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15605/phone-number-with-options.png" style="border-style: solid; border-width: 1px; height: 150px; width: 684px;"></p> + +<h2 id="Validation">Validation</h2> + +<p>As we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let's consider some options.</p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> +</div> + +<h3 id="Making_telephone_numbers_required">Making telephone numbers required</h3> + +<p>You can make it so that an empty input is invalid and won't be submitted to the server using the {{htmlattrxref("required", "input")}} attribute. For example, let's use this HTML:</p> + +<pre class="brush: html"><form> + <div> + <label for="telNo">Enter a telephone number (required): </label> + <input id="telNo" name="telNo" type="tel" required> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> + +<p>The output looks like this:</p> + +<p>{{EmbedLiveSample("Making_telephone_numbers_required", 700, 70)}}</p> + +<h3 id="Pattern_validation">Pattern validation</h3> + +<p>If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the {{htmlattrxref("pattern","input")}} attribute, which takes as its value a {{Glossary("regular expression")}} that entered values have to match.</p> + +<p>In this example we'll use the same CSS as before, but our HTML is changed to look like this:</p> + +<pre class="brush: html"><form> + <div> + <label for="telNo">Enter a telephone number (in the form xxx-xxx-xxxx): </label> + <input id="telNo" name="telNo" type="tel" required + pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<p>{{EmbedLiveSample("Pattern_validation", 700, 70)}}</p> + +<p>Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example, we present a simple interface with a {{htmlelement("select")}} element that lets the user choose which country they're in, and a set of <code><input type="tel"></code> elements to let them enter each part of their phone number; there is no reason why you can't have multiple <code>tel</code> inputs.</p> + +<p>Each input has a {{htmlattrxref("placeholder","input")}} attribute to show a hint to sighted users about what to enter into it, a {{htmlattrxref("pattern","input")}} to enforce a specific number of characters for the desired section, and an <code>aria-label</code> attribute to contain a hint to be read out to screenreader users about what to enter into it.</p> + +<pre class="brush: html"><form> + <div> + <label for="country">Choose your country:</label> + <select id="country" name="country"> + <option>UK</option> + <option selected>US</option> + <option>Germany</option> + </select> + </div> + <div> + <p>Enter your telephone number: </p> + <span class="areaDiv"> + <input id="areaNo" name="areaNo" type="tel" required + placeholder="Area code" pattern="[0-9]{3}" + aria-label="Area code"> + <span class="validity"></span> + </span> + <span class="number1Div"> + <input id="number1" name="number1" type="tel" required + placeholder="First part" pattern="[0-9]{3}" + aria-label="First part of number"> + <span class="validity"></span> + </span> + <span class="number2Div"> + <input id="number2" name="number2" type="tel" required + placeholder="Second part" pattern="[0-9]{4}" + aria-label="Second part of number"> + <span class="validity"></span> + </span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>The JavaScript is relatively simple — it contains an {{domxref("GlobalEventHandlers.onchange", "onchange")}} event handler that, when the <code><select></code> value is changed, updates the <code><input></code> element's <code>pattern</code>, <code>placeholder</code>, and <code>aria-label</code> to suit the format of telephone numbers in that country/territory.</p> + +<pre class="brush: js">var selectElem = document.querySelector("select"); +var inputElems = document.querySelectorAll("input"); + +selectElem.onchange = function() { + for(var i = 0; i < inputElems.length; i++) { + inputElems[i].value = ""; + } + + if(selectElem.value === "US") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3}"; + + inputElems[1].placeholder = "First part"; + inputElems[1].pattern = "[0-9]{3}"; + inputElems[1].setAttribute("aria-label","First part of number"); + + inputElems[2].placeholder = "Second part"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Second part of number"); + } else if(selectElem.value === "UK") { + inputElems[2].parentNode.style.display = "none"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3,6}"; + + inputElems[1].placeholder = "Local number"; + inputElems[1].pattern = "[0-9]{4,8}"; + inputElems[1].setAttribute("aria-label","Local number"); + } else if(selectElem.value === "Germany") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3,5}"; + + inputElems[1].placeholder = "First part"; + inputElems[1].pattern = "[0-9]{2,4}"; + inputElems[1].setAttribute("aria-label","First part of number"); + + inputElems[2].placeholder = "Second part"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Second part of number"); + } +}</pre> + +<p>The example looks like this:</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.</p> + +<p>It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.</p> + +<div class="hidden"> +<pre class="brush: css">div { +margin-bottom: 10px; +position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '<input type="tel">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '<input type="tel">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-tel")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms and accessibility</a></li> + <li>{{HTMLElement("input")}} + <ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/element/ins/index.html b/files/ru/web/html/element/ins/index.html new file mode 100644 index 0000000000..2698c1fbe0 --- /dev/null +++ b/files/ru/web/html/element/ins/index.html @@ -0,0 +1,120 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +translation_of: Web/HTML/Element/ins +--- +<p><strong>Элемент</strong> <strong>HTML <code><ins></code> </strong>представляет собой <span id="result_box" lang="ru"><span>диапазон текста</span><span>, который был добавлен</span> <span>в документ</span></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Содержимое категорий</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Содержимое фраз</a> or <a href="/en-US/docs/HTML/Content_categories#Flow_content">содержимое потока</a>.</td> + </tr> + <tr> + <th scope="row">Допустимое содержимое</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Прозрачный</a>.</td> + </tr> + <tr> + <th scope="row">Бездействие тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>родители</span></span></th> + <td><span id="result_box" lang="ru"><span>Любой элемент</span><span>, который принимает</span></span> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">Интерфейс DOM</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd><span id="result_box" lang="ru"><span>Этот атрибут</span> <span>определяет</span> <span>URI</span> <span>ресурса</span><span>, который объясняет</span> <span>изменения</span><span>,</span> <span>такие</span> <span>как ссылка на</span> <span>протоколы заседаний</span> <span>или билет</span> <span>в</span> <span>системном</span> <span>поиске и устранении неисправностей</span><span>.</span></span></dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd><span id="result_box" lang="ru"><span>Этот атрибут</span> <span>указывает время</span> <span>и дату</span> <span>изменения</span> <span>и должна</span> <span>быть действительной датой</span> <span>с дополнительной</span> <span>строкой</span> <span>времени</span><span>.</span> <span>Если значение</span> <span>не может быть разобрано</span> <span>как дата</span> <span>с</span> <span>опциональной</span> <span>строкой</span> <span>времени</span><span>,</span> <span>элемент не</span> <span>имеет соответствующего</span> <span>штампа времени</span><span>.</span></span></dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><ins>Этот текст подчеркнут.</ins></pre> + +<h3 id="Результат">Результат</h3> + +<p><u>Этот текст подчеркнут.</u></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("del")}} для помечания удаления в документе.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/kbd/index.html b/files/ru/web/html/element/kbd/index.html new file mode 100644 index 0000000000..a875abbe96 --- /dev/null +++ b/files/ru/web/html/element/kbd/index.html @@ -0,0 +1,197 @@ +--- +title: '<kbd>: Элемент ввода с клавиатуры' +slug: Web/HTML/Element/kbd +translation_of: Web/HTML/Element/kbd +--- +<p><span class="seoSummary"><strong>HTML элемент ввода с клавиатуры</strong> (<strong><code><kbd></code></strong>) указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста.</span> По общему соглашению, {{Glossary("user agent")}} использует моноширный шрифт для отображения содержимого элемента <code><kbd></code> по-умолчанию, хотя это и не указывается HTML стандартом явно.</p> + +<p><code><kbd></code> можно использовать в различных комбинациях с {{HTMLElement("samp")}} (Sample Output) элементом для отображения различных форм ввода с клавиатуры или ввода, базирующегося на визуальных сигналах.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент использует только <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>Other elements can be used in tandem with <code><kbd></code> to represent more specific scenarios:</p> + +<ul> + <li>Nesting a <code><kbd></code> element within another <code><kbd></code> element represents an actual key or other unit of input as a portion of a larger input. See {{anch("Representing keystrokes within an input")}} below.</li> + <li>Nesting a <code><kbd></code> element inside a {{HTMLElement("samp")}} element represents input that has been echoed back to the user by the system. See {{anch("Echoed input")}}, below, for an example.</li> + <li>Nesting a <code><samp></code> element<em> </em>inside a <code><kbd></code> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under {{anch("Representing onscreen input options")}} below.</li> +</ul> + +<div class="note"> +<p>You can define a custom style to override the browser's default font selection for the <code><kbd></code> element, although the user's preferences may potentially override your CSS.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_example">Basic example</h3> + +<pre class="brush: html"><p>Use the command <kbd>help mycommand</kbd> to view documentation +for the command "mycommand".</p> +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Basic_example', 350, 80) }}</p> + +<h3 id="Representing_keystrokes_within_an_input">Representing keystrokes within an input</h3> + +<p>To describe an input comprised of multiple keystrokes, you can nest multiple <code><kbd></code> elements, with an outer <code><kbd></code> element representing the overall input and each individual keystroke or component of the input enclosed within its own <code><kbd></code>.</p> + +<h4 id="Unstyled">Unstyled</h4> + +<p>First, let's look at what this looks like as just plain HTML.</p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><p>You can also create a new document using the keyboard shortcut +<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.</p></pre> + +<p>This wraps the entire key sequence in an outer <code><kbd></code> element, then each individual key within its own, in order to denote the components of the sequence.</p> + +<h5 id="Result_2">Result</h5> + +<p>The output looks like this without a style sheet applied:</p> + +<p>{{EmbedLiveSample("Unstyled", 650, 80)}}</p> + +<h4 id="With_custom_styles">With custom styles</h4> + +<p>We can make more sense of this by adding some CSS:</p> + +<h5 id="CSS">CSS</h5> + +<p>We add new new style for <code><kbd></code> elements, <code>"key"</code>, which we can apply when rendering keyboard keys:</p> + +<pre class="brush: css">kbd.key { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +}</pre> + +<h5 id="HTML_2">HTML</h5> + +<p>Then we update the HTML to use this class on the keys in the output to be presented:</p> + +<pre class="brush: html"><p>You can also create a new document by pressing +<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.</p></pre> + +<h5 id="Result_3">Result</h5> + +<p>The result is just what we want!</p> + +<p>{{EmbedLiveSample("With_custom_styles", 650, 80)}}</p> + +<h3 id="Echoed_input">Echoed input</h3> + +<p>Nesting a <code><kbd></code> element inside a {{HTMLElement("samp")}} element represents input that has been echoed back to the user by the system.</p> + +<pre class="brush: html"><p>If a syntax error occurs, the tool will output the initial +command you typed for your review:</p> +<blockquote> + <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> +</blockquote></pre> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("Echoed_input", 650, 100)}}</p> + +<h3 id="Representing_onscreen_input_options">Representing onscreen input options</h3> + +<p>Nesting a <code><samp></code> element<em> </em>inside a <code><kbd></code> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.</p> + +<p>For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:</p> + +<pre class="brush: html"><p>To create a new file, choose the menu option +<kbd><kbd><samp>File</samp></kbd>⇒<kbd><samp>New +Document</samp></kbd></kbd>.</p> + +<p>Don't forget to click the <kbd><samp>OK</samp></kbd> button +to confirm once you've entered the name of the new file.</p></pre> + +<p>This does some interesting nesting. For the menu option description, the entire input is enclosed in a <code><kbd></code> element. Then, inside that, both the menu and menu item names are contained within both <code><kbd></code> and <code><samp></code>, indicating an input which is selected from a screen widget.</p> + +<p>Similarly, the representation of the keyboard shortcut is done by enclosing the entire keyboard shortcut text inside <code><kbd></code>, but by also wrapping each key in its own <code><kbd></code> element.</p> + +<p>You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <code><kbd></code> element. In other words, simplifying this to just <code><kbd>Ctrl</kbd>+<kbd>N</kbd></code> would be perfectly valid.</p> + +<p>Depending on your style sheet , though, you may find it useful to do this kind of nesting.</p> + +<p>The output from this HTML looks like this:</p> + +<p>{{EmbedLiveSample("Representing_onscreen_input_options", 650, 120)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Expanded to include any user input, like voice input and individual keystrokes.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.kbd")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{htmlelement("code")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/label/index.html b/files/ru/web/html/element/label/index.html new file mode 100644 index 0000000000..c98a1deb34 --- /dev/null +++ b/files/ru/web/html/element/label/index.html @@ -0,0 +1,175 @@ +--- +title: <label> +slug: Web/HTML/Element/label +translation_of: Web/HTML/Element/label +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML элемент <code><label></code> </strong>представляет собой подпись к элементу пользовательского интерфейса.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Общий поток</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">текстовый контентt</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">интерактивный контент, элемент формы</a>, ощутимый контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Текстовый контент</a>, но без вложенных элементов <code>label</code>. Недопустимы другие оборачиваемые в <code>label </code>элементы помимо целевого.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные предки</th> + <td>Любой элемент, разрешающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">текстовый контент.</a></td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Отсутствуют</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLLabelElement")}}</td> + </tr> + <tr> + <th scope="row">Тип</th> + <td>Строчный</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Элемент поддерживает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a><a href="/en-US/docs/Web/HTML/Global_attributes"> .</a></p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd> + <p>ID <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable">labelable</a>-элемента, который находится в том же документе, что и элемент <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>. Первый такой элемент в документе, ID которого совпадает со значением атрибута <code>for</code>, становится <em>labeled-</em>контролом<em> </em>для данного <code>label</code>.</p> + + <div class="note">Элемент <em>label </em>может иметь как атрибут <em>for</em>, так и отдельный элемент управления, если атрибут <em>for </em>указывает на содержащийся элемент управления.</div> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}} {{obsolete_inline}}</dt> + <dd>Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента {{HTMLElement ("form")}} в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.. + <div class="note">Этот атрибут содержимого был удален из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения {{domxref ("HTMLLabelElement.form")}}; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.</div> + </dd> +</dl> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<ul> + <li><label> можно связать с элементом управления, поместив элемент управления внутри элемента <label> или используя атрибут {{htmlattrxref ("for")}}. Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.</li> + <li>Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_label_example">Simple label example</h3> + +<pre class="brush: html notranslate"><label>Click me <input type="text"></label></pre> + +<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p> + +<h3 id="Using_the_for_attribute">Using the "for" attribute</h3> + +<pre class="brush: html notranslate"><label for="username">Click me</label> +<input type="text" id="username"></pre> + +<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code><label></code>, and the synthetic click event cannot trigger additional <code><label></code>s. In Gecko, a click event will still bubble up past a <code><label></code>, while in WebKit or Internet Explorer the click event will stop at the <code><label></code>. The behavior prior to Gecko 8.0 (triggering multiple <code><label></code>s) caused Firefox to stop responding (see {{bug(646157)}}).</p> + +<p>[2] The HTML specification was updated in April 2016 to deprecate the {{htmlattrxref("form")}} attribute. It's still available from script, but its definition has changed: it now returns the associated control's form, or <code>null</code> if there is no associated control (that is, if {{domxref("HTMLLabelElement.control")}} is <code>null</code>). See {{domxref("HTMLLabelElement.form")}}.</p> + +<p>This change is implemented in Firefox 49.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/ru/web/html/element/legend/index.html b/files/ru/web/html/element/legend/index.html new file mode 100644 index 0000000000..1b9b7eda8e --- /dev/null +++ b/files/ru/web/html/element/legend/index.html @@ -0,0 +1,95 @@ +--- +title: <legend> +slug: Web/HTML/Element/legend +tags: + - HTML + - HTML forms + - Web + - element legend + - legend +translation_of: Web/HTML/Element/legend +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><legend></code></strong> представляет собой заголовок содержания родительского элемента {{HTMLElement("fieldset")}}.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td><a href="/ru/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Является дочерним элементом тега {{HTMLElement("fieldset")}} </td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA roles</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Взаимодействие с DOM </th> + <td>{{domxref("HTMLLegendElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает только <a href="/ru/docs/HTML/Global_attributes">универсальные атрибуты</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Смотрите {{HTMLElement("form")}} для примеров использования элемента <code><legend></code>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Определение элемента <code>legend</code></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "sec-forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.elements.legend")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие сзязанные элементы: {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} и {{HTMLElement("meter")}}.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li> +</ul> diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html new file mode 100644 index 0000000000..93210daadd --- /dev/null +++ b/files/ru/web/html/element/li/index.html @@ -0,0 +1,160 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Element + - HTML + - Reference + - списки +translation_of: Web/HTML/Element/li +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><li></code></strong> используется для создания элементов списка.</span> Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счетчика слева, например числа или буквы.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td>Нет.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент {{HTMLElement("li")}} или если в родительском элементе нет больше содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Элементы {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, или {{HTMLElement("menu")}}. Хотя и не соответствует использованию, устаревший {{HTMLElement("dir")}} тоже может быть родительским элементом.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLLIElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешёное значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданого значения. Атрибут <strong>value</strong> не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}). + <div class="note"><strong>Примечание</strong>: Этот арибут был убран в HTML4, но заново добавлен в HTML5.</div> + + <div class="note"> + <p><strong>Примечание:</strong> Предыдущие до {{Gecko("9.0")}}, отрицательные значения неправильно конвертировались в 0. Начиная с {{Gecko("9.0")}} все числовые значения воспринимаются правильно.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>Этот символьный атрибут указывает на тип нумерации: + <p class="hidden">Строчные буквы — это которые не заглавные.</p> + + <ul> + <li><code>a</code>: строчные буквы</li> + <li><code>A</code>: заглавные буквы</li> + <li><code>i</code>: строчные римские цифры</li> + <li><code>I</code>: заглавные римские цифры</li> + <li><code>1</code>: цифры</li> + </ul> + Этот атрибут переопределяет тип унаследованный от родительского элемента {{HTMLElement("ol")}} или любого другого. + + <div class="note"><strong>Примечание к использованию:</strong> Этот атрибут был убран: используйте CSS свойство {{cssxref("list-style-type")}} взамен.</div> + </dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p>Для более подробных примеров смотрите страницы {{htmlelement("ol")}} и {{htmlelement("ul")}}.</p> + +<h3 id="Упорядоченный_список">Упорядоченный список</h3> + +<pre class="brush: html notranslate"><ol> + <li>Первый элемент</li> + <li>Второй элемент</li> + <li>Третий элемент</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("Упорядоченный_список")}}</p> + +<h3 id="Упорядоченный_список_с_пользовательским_значением">Упорядоченный список с пользовательским значением</h3> + +<pre class="brush: html notranslate"><ol type="I"> + <li value="3">Третий элемент</li> + <li>Четвёртый элемент</li> + <li>Пятый элемент</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("Упорядоченный_список_с_пользовательским_значением")}}</p> + +<h3 id="Неупорядоченный_список">Неупорядоченный список</h3> + +<pre class="brush: html notranslate"><ul> + <li>Первый элемент</li> + <li>Второй элемент</li> + <li>Третий элемент</li> +</ul></pre> + +<p>{{EmbedLiveSample("Неупорядоченный_список")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Атрибут <code>type</code> был убран.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.li")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>Остальные списковые HTML элементы: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} и устаревший {{HTMLElement("dir")}};</li> + <li>CSS свойства, которые были бы полезны для стилизации <code><li></code> элементов: + <ul> + <li>свойство {{cssxref("list-style")}}, для выбора стиля маркера/порядкового номера,</li> + <li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для обработки сложных вложенных списков,</li> + <li>свойство {{cssxref("margin")}}, для контроля отступа между элементами списка.</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/element/main/index.html b/files/ru/web/html/element/main/index.html new file mode 100644 index 0000000000..44b9b4db78 --- /dev/null +++ b/files/ru/web/html/element/main/index.html @@ -0,0 +1,175 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Element + - HTML + - HTML группировка контента + - HTML секции + - main + - Справка + - Элемент +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><main></code></strong> предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или ее развивает.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправте нам "pull request" (предложение изменения кода в чужом репозитории).</p> + +<p>Документ не должен иметь более одного элемента <code><main></code> у которого не указан атрибут {{htmlattrxref("hidden")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th>Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td> + </tr> + <tr> + <th>Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th>Разрешенные родительские элементы</th> + <td>Те, в которых разрешается <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого, но только если это <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">иерархически корректный <code>main</code> элемент</a>.</td> + </tr> + <tr> + <th>Разрешенные ARIA роли</th> + <td>Роль <code>main</code> применяется к <code><main></code> по умолчанию, и роль <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> также разрешена.</td> + </tr> + <tr> + <th>DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p> + +<h2 id="Примечание">Примечание</h2> + +<p>Содержимое элемента <code><main></code> должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые формы, не должно добавляться, за исключением формы поиска, если она является основной функцией страницы.</p> + +<p><code><main></code> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как {{HTMLElement("body")}}, заголовков, таких как {{HTMLElement("h2")}} и т.п., <code><main></code> не влияет на концепцию {{glossary("DOM")}} структуры страницы. Он носит исключительно информативный характер.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><!-- другой контент --> + +<main> + <h1>Яблоки</h1> + <p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.</p> + + <article> + <h2>Сорт "Ред Делишес"</h2> + <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Сорт "Гренни Смит";/h2> + <p>Эти сочные, зеленые яблоки являются одними из самых популярных в мире.</p> + <p>... </p> + <p>... </p> + </article> +</main> + +<!-- другой контент --></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Пример")}}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<h3 id="Ориентир">Ориентир</h3> + +<p>Элемент <code><main></code> ведет себя как <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">роль-ориентир <code>main</code></a>. <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">Ориентиры</a> могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <code><main></code> вместо объявления <code>role="main"</code>, если не нужна <a href="/ru/docs/Web/HTML/Element/main#%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D0%BC%D0%B8">поддержка старых браузеров</a>.</p> + +<h3 id="Пропуск_навигации">Пропуск навигации</h3> + +<p>Пропуск навигации, также известный как "skipnav", это техника которая позволяет пользователю вспомогательных технологий совершать быстрый обход больших разделов повторяющегося контента (главная навигация, информационные баннеры и т.д.). Это позволяет пользователю получить доступ к основному контенту страницы быстрее.</p> + +<p>Добавление атрибута {{htmlattrxref("id")}} в элемент <code><main></code> позволяет ему становится целью для ссылки пропуска навигации.</p> + +<pre><span class="tag"><body</span><span class="tag">> + <a href="#main-content">Перейти к основному контенту</a> + + <!-- навигация и заголовок контента --> + + <main id="main-content"> + <!-- основной контент страницы --> + </main> +</body></span> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: Ссылки "Пропуск навигации"</a></li> +</ul> + +<h3 id="Режим_чтения">Режим чтения</h3> + +<p>Функционально режим чтения браузера будет искать наличие элемента <code><main></code>, а также элементов <a href="/ru/docs/Web/HTML/Element/Heading_Elements">заголовка</a> и <a href="/ru/docs/Web/HTML/Element#%D0%A1%D0%B5%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D1%8F">секционных элементов</a>, которые преобразовывают контент в специальный вид для чтения.</p> + +<ul> + <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Создание сайтов для режима чтения Safari и других программ чтения.</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Нет изменений с {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>Элемент <code><main></code> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль {{glossary("ARIA")}} <code>"main"</code> в элемент <code><main></code>, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <code><main></code> после добавления атрибута <code>role</code>).</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div> + +<p>{{Compat("html.elements.main")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Основные структурные элементы: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>Связанные с этим разделом элементы: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">ARIA: роль main</a></li> +</ul> diff --git a/files/ru/web/html/element/map/index.html b/files/ru/web/html/element/map/index.html new file mode 100644 index 0000000000..751a526d64 --- /dev/null +++ b/files/ru/web/html/element/map/index.html @@ -0,0 +1,117 @@ +--- +title: <map> +slug: Web/HTML/Element/map +tags: + - Элемент +translation_of: Web/HTML/Element/map +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><map></code> </strong>используется с элементами {{HTMLElement("area")}} для определения карты изображения (интерактивной области ссылок).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td>Любой <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#%D0%9F%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D0%B0%D1%8F_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0">прозрачный</a> элемент.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любые элементы, которые принимают <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLMapElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Элемент включает <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Атрибут name дает карте имя, чтобы на нее можно было ссылаться. Атрибут должен быть определен и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="75,75,75" href="left.html"> + <area shape="circle" coords="275,75,75" href="right.html"> +</map> +<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic"> +</pre> + +<h2 id="Живой_пример">Живой пример</h2> + +<p>{{ EmbedLiveSample('Example', '350', '150', '', 'Web/HTML/Element/map') }}</p> + +<h3 id="Ожидаемые_выходные_данные">Ожидаемые выходные данные</h3> + +<p>Живой пример выше должен выглядеть как нижеследующее изображение (при использовании клавиши на клавиатуре):</p> + +<p><em>Для ссылки <code>left.html</code>:</em><br> + <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png" style="height: 156px; width: 356px;"></p> + +<p><em>Для ссылки <code>right.html</code>:</em><br> + <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png" style="height: 157px; width: 355px;"></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.map")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> diff --git a/files/ru/web/html/element/mark/index.html b/files/ru/web/html/element/mark/index.html new file mode 100644 index 0000000000..4673a4eec8 --- /dev/null +++ b/files/ru/web/html/element/mark/index.html @@ -0,0 +1,139 @@ +--- +title: <mark> +slug: Web/HTML/Element/mark +translation_of: Web/HTML/Element/mark +--- +<p><strong>HTML</strong> <strong>элемент <code><mark></code> </strong>представляет текст, выделенный в справочных целях из-за своей <em>актуальности </em>в определенном контексте. <span id="result_box" lang="ru"><span>Например, он может</span> <span>быть использован на странице с результатом поиска, в которой выделяется</span><span> </span><span>каждый</span> <span>экземпляр</span> <span>искомого</span> <span>слова</span><span>.</span></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории содержимого</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Содержимое потока</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз</a>, ощутимое содержимое.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Содержимое фраз</a>.</td> + </tr> + <tr> + <th scope="row">Бездействие тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>родители</span></span></th> + <td><span id="result_box" lang="ru"><span>Любой элемент</span><span>, который принимает</span></span> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз.</a></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>роли</span> <span>ARIA</span></span></th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">Интерфейс DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает только <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<h2 id="Примечания">Примечания</h2> + +<ul> + <li><span id="result_box" lang="ru"><span>В</span> <span>цитате</span> <span>или</span> <span class="alt-edited">другом блоке</span><span>,</span> <span>выделенный текст</span><span>, как правило,</span> <span>отмечает</span> <span>текст, который</span> <span class="alt-edited">ссылается на</span> <span class="alt-edited">внешнюю</span> <span class="alt-edited">цитату</span></span>, <span id="result_box" lang="ru"><span>или</span> <span>помечается для</span> <span>конкретного</span> <span>пристального внимания</span><span>, даже если</span> <span>первоначальный автор</span> <span>не считает</span> <span>важным</span></span>.</li> + <li><span id="result_box" lang="ru"><span>В основном тексте</span><span>,</span> <span>выделенный текст</span><span>, как правило,</span> <span>отмечает</span> <span>текст, который</span> <span>может</span> <span>иметь особое</span> <span>значение для</span> <span>текущей деятельности</span> <span>пользователя</span><span>, например,</span> <span>результаты поиска</span></span>.</li> + <li>Не используйте элемент <code><mark></code> для выделения синтаксиса; используйте элемент {{HTMLElement("span")}} для этих целей.</li> + <li>Не путайте элемент <code><mark></code> с элементом {{HTMLElement("strong")}}. Элемент {{HTMLElement("strong")}} используется для обозначения участков текста <em>важности </em>в контексте текста, когда элемент <code><mark></code> используется для обозначения участков текста, имеющих <em>отношение</em> к другому контексту.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><p>Элемент &lt;mark&gt; используется для <mark>выделения</mark> текста</p> +</pre> + +<p>{{EmbedLiveSample('Пример')}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 91px; width: 965px;"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 75px; width: 964px;"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие <a href="/en-US/docs/HTML/Text-level_semantics_elements">семантики текстов на уровне элементов</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("b")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}</li> +</ul> diff --git a/files/ru/web/html/element/marquee/index.html b/files/ru/web/html/element/marquee/index.html new file mode 100644 index 0000000000..8caafd13f3 --- /dev/null +++ b/files/ru/web/html/element/marquee/index.html @@ -0,0 +1,196 @@ +--- +title: <marquee> +slug: Web/HTML/Element/marquee +translation_of: Web/HTML/Element/marquee +--- +<img height="300" src="https://1.bp.blogspot.com/-GyiiSQp4sp0/Xtzn50G25WI/AAAAAAAACJg/mplQUFf7vVgkTYMtEdqso7z6gu2k7KF0gCEwYBhgLKs4DAL1OcqzUrIIaX_dmPiHyK9FtaKoyKDCnAn3r56uduBIJ-OXVoM99c-j8CtfqLcTrM2bRgoWwB9l50j8C12WUIUtE37hzOFvE3vgJvWTAAW6TG0GG3EZMmUBA-kXwunWVtvV3s_H-w6TvDEIcXe4KT0rlxzsBnk4weYYimxoPzXTDqOf3GAeasL66jq-Yt-LN6DVz5ctbZbagHnE7QWrzoHaSwNOGxT_neVK3JgTJj0pxG3DEpzkiPBDTYVsQpT0T1hkhv0zBAqHaOGJWYTed4-Ir-IlaigCyvo2F7lm79fhyWJMaBTjR6lDrp2cR4IIy-ij5Ez7qV0OydxwD-eJ_NSifUdnS1iX-bmnLh9lGdpKoqU5or7PsEky4kGOj2s12rEtluXQtJpRT754Z1CJTw-T7MLzPSDhGTqr-4-GHHJ3RjRwv--4YXYQ8yHFdjvxhtkPikAF0p2VIk3-H1iG3GJKCiuIlPlwYVXKQ0GiNPY1JBWm1sHWJJ4cRVdpMf-gQxEcgyH3qzDJb9PcB1o8w09q-ZmRymYqHm4Y6tH5KbGbhyEl3nJVal9LwBATgSvfHnZQI8VgqI2u59nzC7lu30h67xADUEk7Zdk8DC8LiMOHY8_YF/s320/%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA.PNG" width="320"> +<div>{{HTMLRef}}</div> + +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Определение</h2> + +<p>HTML-элемент <code><marquee></code> используется для создания на странице прокручивающегося текста (бегущей строки).</p> + +<h2 id="Атрибут">Атрибут</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>Описывает поведение прокрутки. Допустимые значения: <code>scroll</code>, <code>slide</code> <code>и alternate</code>. Если значение не указано, то используется <code>scroll</code>.</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>Задает цвет фона (можно использовать имя цвета или шестнадцатеричное значение).</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>Задает направление прокрутки. <code>Допустимые значения: left</code>, <code>right</code>, <code>up</code> и <code>down</code>. Если значение не указано, то используется <code>left</code>.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Задаёт высоту в пикселях или процентах.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Задает поле (margin) слева.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>Задает сдвиг на каждом шаге в пикселях. По умолчанию 6.</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>Задает интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут <code>truespeed</code>.</dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>По умолчанию значения меньше 60 в<code> scrolldelay игнорируются</code>. Однако, если присутствует <code>truespeed</code>, то они не игнорируются</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Задает вертикальный отступ (margin) в пикселях или процентах.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Задаёт ширину в пикселях или процентах.</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">Обработчики событий</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>Срабатывает, когда marquee достиг конечного состояния. Срабатывает только в случаях, когда <code>behavior</code> имеет значение <code>alternate</code>.</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>Срабатывает, когда marquee прокрутился столько раз, сколько было задано в атрибуте <code>loop</code>. Срабатывает только тогда, когда атрибут <code>loop</code> имеет положительное значение.</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>Срабатывает в начале прокрутки.</dd> +</dl> + +<h2 id="Methods" name="Methods">Методы</h2> + +<dl> + <dt>start</dt> + <dd>Запускает прокрутку marquee.</dd> + <dt>stop</dt> + <dd>Останавливает прокрутку marquee.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html notranslate"><marquee>This text will scroll from right to left</marquee> + +<marquee direction="up">This text will scroll from bottom to top</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + This text will bounce + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Examples", 600, 450)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2.0</td> + <td>7.2</td> + <td>1.2</td> + </tr> + <tr> + <td><code>truespeed</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>truespeed</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/html/element/menu/index.html b/files/ru/web/html/element/menu/index.html new file mode 100644 index 0000000000..1651378eda --- /dev/null +++ b/files/ru/web/html/element/menu/index.html @@ -0,0 +1,208 @@ +--- +title: <menu> +slug: Web/HTML/Element/menu +translation_of: Web/HTML/Element/menu +--- +<p>{{HTMLRef}}{{SeeCompatTable}}</p> + +<p><strong>HTML элемент <code><menu></code></strong> представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и <a href="/en-US/docs/Web/HTML/Element/menu#Context_menu"> контекстные меню</a>, например, такие, что могут появиться под кнопкой после нажатия.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td> + <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>. If the element's children include at least one {{HTMLElement("li")}} element: <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">Palpable content</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td> + <p>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</p> + + <p>If the element is in the <em>context menu</em> state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (<em>context menu</em> state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.</p> + </td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>{{No_Tag_Omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который поддерживает <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">основной поток</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></code>, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}} или {{ARIARole("tree")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{DOMxRef("HTMLMenuElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("label")}} {{Deprecated_inline}}</dt> + <dd>The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>This attribute indicates the kind of menu being declared, and can be one of two values. + <ul> + <li><code>context</code> {{Deprecated_inline}} : Indicates the <em>popup menu</em> state, which represents a group of commands activated through another element. This might be as a button menu referenced by a {{HTMLAttrxRef("menu", "button")}} attribute of a {{HTMLElement("button")}} element, or as context menu for an element with a <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> attribute. This value is the default if the attribute is missing and the parent element is also a <code><menu></code> element.</li> + <li><code>toolbar</code>: Indicates the <em>toolbar</em> state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of {{HTMLElement("li")}} elements, or, if the element has no <code><li></code> element children, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> describing available commands. This value is the default if the attribute is missing.</li> + </ul> + </dd> +</dl> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<p>The {{HTMLElement("menu")}} and {{HTMLElement("ul")}} elements both represent an unordered list of items. The key difference is that {{HTMLElement("ul")}} primarily contains items for display, whilst {{HTMLElement("menu")}} is intended for interactive items, to act on.</p> + +<p>An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.</p> + +<p><strong>{{anch("Context menu", "Context menus</strong>")}} consist of a <code><menu></code> element which contains {{HTMLElement("menuitem")}} elements for each selectable option in the menu, <code><menu></code> elements for submenus within the menu, and {{HTMLElement("hr")}} elements for separator lines to break up the menu's content into sections. Context menus are then attached to the element they're activated from using either the associated element's {{HTMLAttrxRef("contextmenu")}} attribute or, for {{anch("Button menu", "button-activated menus")}} attached to {{HTMLElement("button")}} elements, the {{HTMLAttrxRef("menu", "button")}} attribute.</p> + +<p><strong>{{anch("Toolbar", "Toolbar menus</strong>")}} consist of a <code><menu></code> element whose content is described in one of two ways: either as an unordered list of items represented by {{HTMLElement("li")}} elements (each representing a command or option the user can utilize), or (if there are no <code><li></code> elements), <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> describing the available commands and options.</p> + +<p>This element was deprecated in HTML4, but reintroduced in HTML5.1 and the HTML living standard. This document describes the current Firefox implementation. Type 'list' is likely to change to 'toolbar' according to HTML5.1.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Context_menu" name="Context_menu">Context menu</h3> + +<p>{{Deprecated_header}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html;"><!-- A <div> element with a context menu --> +<div contextmenu="popup-menu"> + Right-click to see the adjusted context menu +</div> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css;">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Context_menu", "100%", 80)}}</p> + +<h3 id="Menu_button" name="Menu_button">Menu button</h3> + +<div class="blockIndicator warning"> +<p>Menu buttons haven't been implemented in any known browsers yet. The {{HTMLAttrxRef("type", "menu")}} attribute on the <code><menu></code> element is now obsolete.</p> +</div> + +<div class="blockIndicator warning"> +<p>{{HTMLElement("menuitem")}} element is obsolete.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html;"><!-- A button, which displays a menu when clicked. --> +<button type="menu" menu="popup-menu"> + Dropdown +</button> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Menu_button", "100%", 50)}}</p> + +<h3 id="Toolbar" name="Toolbar">Toolbar</h3> + +<div class="blockIndicator warning"> +<p>Toolbar menus haven't been implemented in any known browsers yet.</p> +</div> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><!-- A context menu for a simple editor, + - containing two menu buttons. --> +<menu type="toolbar"> + <li> + <button type="menu" menu="file-menu">File</button> + <menu type="context" id="file-menu"> + <menuitem label="New..." onclick="newFile()"> + <menuitem label="Save..." onclick="saveFile()"> + </menu> + </li> + <li> + <button type="menu" menu="edit-menu">Edit</button> + <menu type="context" id="edit-menu"> + <menuitem label="Cut..." onclick="cutEdit()"> + <menuitem label="Copy..." onclick="copyEdit()"> + <menuitem label="Paste..." onclick="pasteEdit()"> + </menu> + </li> +</menu> +</pre> + +<h4 id="Result_3">Result</h4> + +<p>{{EmbedLiveSample("Toolbar", "100%", 100)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from latest snapshot, {{SpecName("HTML5.3")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.menu")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("hr")}}, and the obsolete {{HTMLElement("dir")}}.</li> + <li>The <a href="/en-US/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with {{HTMLAttrxRef("type", "menu", 'type="context"')}}.</li> +</ul> diff --git a/files/ru/web/html/element/meta/index.html b/files/ru/web/html/element/meta/index.html new file mode 100644 index 0000000000..e22e24ca90 --- /dev/null +++ b/files/ru/web/html/element/meta/index.html @@ -0,0 +1,409 @@ +--- +title: <meta> +slug: Web/HTML/Element/meta +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML элемент <code><meta></code></strong> представляет такие {{Glossary("Metadata","метаданные")}}, которые не могут быть представлены другими HTML-метатегами, такими как {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} или {{HTMLElement("title")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td>Мета данные. Если задан {{htmlattrxref("itemprop")}} атрибут: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>Разрешенное содержимое</th> + <td>Отсутствует - это {{Glossary("empty element","пустой элемент")}}.</td> + </tr> + <tr> + <th>Пропуск тега</th> + <td>Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий - отсутствовать.</td> + </tr> + <tr> + <th>Разрешенные родительские элементы</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>: {{HTMLElement("head")}} элемент. Если {{htmlattrxref("http-equiv", "meta")}} это не заявленная декларация, то может быть внутри элемента {{HTMLElement("noscript")}} или {{HTMLElement("head")}}.</td> + </tr> + <tr> + <th scope="row">Разрешёные роли ARIA</th> + <td>Отсутствуют</td> + </tr> + <tr> + <th>DOM интерфейс</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<div class="note"> +<p><strong>Примечание:</strong> атрибут {{htmlattrxref("name", "meta")}} имеет особое значение для элемента <code><meta></code> и атрибут {{htmlattrxref("itemprop")}} не должен быть задан в <code><meta></code> элементе в котором уже определены какие-либо {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} или {{htmlattrxref("charset", "meta")}} атрибуты.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>Этот атрибут задает кодировку символов, используемую на странице. Он должен содержать <a class="external" href="https://www.iana.org/assignments/character-sets">стандартное имя IANA MIME для кодировки символов</a>. Хотя стандарт не требует определенной кодировки, он рекомендует: + <ul> + <li>Авторам рекомендуется использовать <code>{{glossary("UTF-8")}}</code>.</li> + <li>Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code> и <code>EBCDIC</code>.</li> + </ul> + + <div class="note"> + <p><strong>Примечание:</strong> ASCII-несовместимые кодировки - это те, которые не преобразуют 8-битные коды точек <code>0x20</code>,<code>0x7E</code>, <code>0x0020</code>, <code>0x007E</code> в коды Unicode точек.</p> + </div> + + <div class="warning"> + <ul> + <li>Авторы <strong>не должны</strong> использовать <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> и/или <code>SCSU</code>, так как есть примеры атак <a href="/en-US/docs/Glossary/Cross-site_scripting">межсайтового скриптинга</a> использующих данные кодировки.</li> + <li>Авторам не следует использовать кодировку <code>UTF-32</code>, потому что не все алгоритмы кодирования HTML5 могут отличить её от <code>UTF-16</code>.</li> + </ul> + </div> + + <div class="note"><strong>Примечание:</strong> + + <ul> + <li>Указанный набор символов должен соответствовать одной странице.<br> + Нет веских оснований для объявления неточного набора символов.</li> + <li><code><meta></code> элемент должен находиться внутри элемента {{HTMLElement("head")}} и задаваться в <strong>1024 первых байтах</strong> HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.</li> + <li>Этот <code><meta></code> элемент - часть алгоритма, определяющего набор символов (<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm" title="Algorithm charset page">algorithm to determine the character set</a>) страницы, который браузер поддерживает. Заголовок {{HTTPHeader("Content-Type")}} и любые {{Glossary("Byte-Order Mark","Byte-Order Marks")}} элементы переопределяют данный элемент.</li> + <li>Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting тхнологии могут повредить страницу, например такие как <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7">UTF-7 fallback cross-scripting technique</a>. Постоянная установка этого элемента будет защищать Вас от этого риска.</li> + <li>Этот {{HTMLElement("meta")}} элемент это синоним для pre-HTML5 <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"> </code>где <em><code>IANAcharset</code> </em>соответствует значению эквивалентного {{htmlattrxref("charset", "meta")}} атрибута.<br> + Этот синтаксис по-прежнему разрешен, хотя и устарел и больше не рекомендуется.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>Этот атрибут содержит значение для {{htmlattrxref("http-equiv", "meta")}} или {{htmlattrxref("name", "meta")}} атрибута, в зависимости от контекста.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd>Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью {{htmlattrxref("content", "meta")}} и может быть следующим: + <dl> + <dt><code>"content-language"</code> {{obsolete_inline}}</dt> + <dd>Эта прагма определяет значение языка страницы по умолчанию. + <div class="note">Не используйте эту прагму, так как она устарела Используйте глобальный атрибут {{HTMLElement("html")}} элемента вместо этого.</div> + </dd> + <dt><code>"Content-Security-Policy"</code></dt> + <dd>Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.</dd> + <dt><code>"content-type"</code> {{obsolete_inline}}</dt> + <dd>Этот атрибут определяет <a href="/en-US/docs/MIME">MIME type</a> документа. За ним следует синтаксис такой же как и в поле заголовка объекта содержимого HTTPI, однако как и внутри HTML элемента, большинство этих значений не доступно.<br> + Поэтому допустимым синтаксисом для его содержимого является литеральная строка '<code>text/html</code>', за которой следует набор символов со следующим синтаксисом: '<code>; charset=</code><em><code>IANAcharset</code></em>' где <code>IANAcharset</code> это предпочтительное<em> MIME имя</em> для набора символов, который определяется как<a class="external" href="https://www.iana.org/assignments/character-sets"> IANA.</a> + <div class="note"><strong>Замечания:</strong> + <ul> + <li>Не используйте эту прагму, так как она устарела. Используйте атибут{{htmlattrxref("charset", "meta")}} в элементе {{HTMLElement("meta")}} вместо этого.</li> + <li>{{HTMLElement("meta")}} не может быть использована для выбора типа документа в XHTML документе, или в HTML5 документе, за которым следует XHTML синтаксис, никогда не задавайте MIME тип как XHTML MIME. Это будет некорректно.</li> + <li>Только HTML документ может использовать контент-тип, так что большинство из них являются неиспользуемыми, поэтому они являются устаревшими и заменяются {{htmlattrxref("charset", "meta")}} атрибутом.</li> + </ul> + </div> + </dd> + <dt><code>"default-style"</code></dt> + <dd>Специализация этой прагмы - предпочтительный стиль таблиц, используемый на странице. {{htmlattrxref("content", "meta")}} атрибут должен содержать заголовок {{HTMLElement("link")}} элемента который {{htmlattrxref("href", "link")}} связывает атрибут с CSS таблцей стилей, или заголовок {{HTMLElement("style")}} элемента, который содержит <a href="/en-US/docs/Web/CSS">CSS</a> таблицу стилей.</dd> + <dt><code>"refresh"</code></dt> + <dd>Эта прагма определяет: + <ul> + <li>Количество секунд перезагрузки таблицы, если {{htmlattrxref("content", "meta")}} атрибут содержит только положительный целочисленный номер;</li> + <li>Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если {{htmlattrxref("content", "meta")}} атрибут содержит положительный целочисленный номер, заканчивающийся строкой '<code>;url=</code>' и корректный URL.</li> + </ul> + </dd> + <dt><code>"set-cookie"</code> {{obsolete_inline}}</dt> + <dd>Эта прагма определяет <a href="/en-US/docs/cookie">cookie</a> для страницы. Её содержимое должно заканчиваться синтаксисом, определяемым <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>. + <div class="note"><strong>Замечание:</strong> Не используете эту прагму, так как она устарела. Используйте HTTP header set-cookie вместо этого.</div> + </dd> + </dl> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Этот атрибут определяет имя уровня документа метаданных. <br> + Его не следует устанавливать, если один из атрибутов {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} или {{htmlattrxref("charset", "meta")}} также указан в наборе.<br> + Имя этого документального уровня метаданных связано со значением, которое содержится в {{htmlattrxref("content", "meta")}} атрибуте.Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредтвом {{htmlattrxref("content", "meta")}} атрибута: + <ul> + <li><code>application-name</code>, определяет имя веб-приложения, запущенного на веб-странице; + <div class="note"><strong>Замечание:</strong> + <ul> + <li>Браузеры могут использовать его для идентификации приложения. Он отличается от {{HTMLElement("title")}} элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например име документа или статус;</li> + <li>Простые веб-страницы не определяют application-name meta.</li> + </ul> + </div> + </li> + <li><code>автор</code> определяет в свободном формате имя автора документа;</li> + <li>описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;</li> + <li>генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;</li> + <li>Ключевые слова, представленные строками, разделенными запятыми, связанные с содержанием страницы</li> + <li><code>referrer</code> {{experimental_inline}} контролирует содержимое HTTP. <code>Referer</code> HTTP - заголовок, прикрепленный к любому запросу, отправленному из этого документа: + <table class="standard-table"> + <caption>Значения содержимого атрибута <meta name="referrer"></caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>Не отправлять HTTP <code>Referer</code> заголовок.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>Отправить оригинал.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>Отправить оригинал, как ссылку по умолчанию на безопасный пункт (https->https), но не отправлять ссылку на менее безопасную структуру (https->http). Это поведение по умолчанию.</td> + </tr> + <tr> + <td><code>origin-when-crossorigin</code></td> + <td>Отправляет полный URL (удаленный из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях.</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>Отправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрестного происхождения.</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>Замечание: </strong>Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.</p> + </div> + + <div class="note"> + <div class="notes"><strong>Замечание:</strong> Динамическая вставка <code><meta name="referrer"></code> (с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.</div> + </div> + </li> + </ul> + + <p>Атрибут также может иметь значение, взятое из существующего листа определений <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имен:</p> + + <ul> + <li><code>creator</code>, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имен больше чем одно, то несколько {{HTMLElement("meta")}} элементов должны быть использованы;</li> + <li><code>googlebot</code>, синоним <code>robots</code>, но только следует за Googlebot, сканирует индексы для Google;</li> + <li><code>publisher</code>, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;</li> + <li><code>robots</code>, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже: + <table class="standard-table"> + <caption>Значения для содержимого <meta name="robots"></caption> + <thead> + <tr> + <th scope="col">Значение</th> + <th scope="col">Описание</th> + <th scope="col">Используется</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>Позволяет роботу индексировать страницу</td> + <td>All</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>Освобождает робота от идексирования страниц</td> + <td>All</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>Позволяет роботу переходить по ссылкам со страницы</td> + <td>All</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Запрещает роботу переходить по ссылкам со страницы</td> + <td>All</td> + </tr> + <tr> + <td><code>none</code></td> + <td>Эквивалетно <code>noindex, nofollow</code></td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noodp</code></td> + <td>Запрещает использование <a class="external" href="https://www.dmoz.org/">Open Directory Project</a> описания, если таковые имеются, как описание страницы на странице результатов поиска</td> + <td> + <p><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/indexing-11.html;_ylt=Arh3LHnisvRMPJKzQqmJ97JYqCN4">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p> + </td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>Запрещает поисковой системе кэшировать содержимое страницы.</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/basics-10.html;_ylt=Aszma_Ly8TfhL7mn_LGWn5RYqCN4">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>Запрещает отображение любого описания страницы на странице результатов поиска</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?answer=35304">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>Запрещает отображение этой страницы в качестве ссылающейся страницы индексированного изображения.</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td>Синоним <code>noarchive</code></td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Замечания:</strong> + + <ul> + <li>Только кооперативные роботы будут следовать правилам, определенным именем роботов. </li> + <li>Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если Вы хотите скрыть от них информацию, то используйте <em><a href="/en-US/docs/Robot_Exclusion_Protocol" title="Robot Exclusion Protocol">robots.txt</a></em> файл.</li> + <li>Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.</li> + <li>Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.</li> + <li>Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.</li> + </ul> + </div> + </li> + <li><code>slurp</code>,синоним <code>robots</code>, но следует только за Slurp, индексирующим роботом от Yahoo Search;</li> + </ul> + + <p>Наконец несколько общих терминов:</p> + + <ul> + <li><code>viewport</code>, который дает подсказки о размере изначального размера {{glossary("viewport")}}. Эта прагма используется только на некоторых мобильных устройствах. + + <table class="fullwidth-table"> + <caption>Значения для содержания <code><meta name="viewport"></code></caption> + <thead> + <tr> + <th scope="col">Значение</th> + <th scope="col">Допустимые значения</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>положительный целочисленный номер или литерал <code>device-width</code></td> + <td>Определяет ширину области просмотра в пикселях</td> + </tr> + <tr> + <td><code>height</code></td> + <td>положительный целочисленный номер или литерал <code>device-height</code></td> + <td>Определяет высоту области просмотра в пикселях</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td>положительное число между <code>0.0</code> и <code>10.0</code></td> + <td>Определяет соотношение между шириной устройства и размером области просмотра</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td>положительное число между <code>0.0</code> и <code>10.0</code></td> + <td>Определяет максимальное значение зума; должен быть больше или равен минимальному масштабу или быть неопределенным.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td>положительное число между <code>0.0</code> и <code>10.0</code></td> + <td>Определяет минимальное значение зума; должен быть меньше или равен максимальному масштабу или быть неопределенным.</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td>булевское значение (<font face="Consolas, Liberation Mono, Courier, monospace">да или нет)</font></td> + <td>Если весь набор содержит значения нет, то пользователю не доступен зум на веб-странице. По умолчанию задано значение да.</td> + </tr> + </tbody> + </table> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Ненормативно описывает элемент META Viewport</td> + </tr> + </tbody> + </table> + + <div>Смотрите также: {{cssxref("@viewport")}}</div> + + <div class="note"><strong>Замечания:</strong> + + <ul> + <li>Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.</li> + <li>Значения по умолчанию могут быть изменены у разных браузеров или устройств..</li> + <li>Для изучения этой прагмы на Firefox for Mobile, посмотрите статью <a href="/en-US/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li> + </ul> + </div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt> + <dd>Этот атрибут определяет схему, которая описывает метаданные. <br> + Схема - это контекст, ведущий к правильной интерпретации {{htmlattrxref("content", "meta")}} значения, например формата. + <div class="note"><strong>Замечание:</strong> Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.</div> + </dd> +</dl> + +<h2 id="Замечания">Замечания</h2> + +<p>В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:</p> + +<ul> + <li>Если в наборе {{htmlattrxref("name", "meta")}}, то это <em>document-level</em> <em>metadata</em>, применяемая ко всей странице.</li> + <li>Если в наборе{{htmlattrxref("http-equiv", "meta")}} , то это <em>pragma directive</em>,<br> + то есть информация, веб-сервер предоставляет информацию о том, как должна обслуживаться веб-страница.</li> + <li>Если в наборе {{htmlattrxref("charset", "meta")}}, то это <em>charset declaration</em>,<br> + то есть кодировка, используемая для сериализованной формы веб-страницы.</li> + <li>Если в наборе {{htmlattrxref("itemprop", "meta")}}, то это <em>user-defined metadata</em>,<br> + прозрачна для агента пользователя, поскольку семантика метаданных зависит от пользователя. {{experimental_inline}}</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><!-- In HTML5 --> +<meta charset="utf-8"> + +<!-- Redirect page after 3 seconds --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> + +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Определяет значения и семантику <code><meta name="referrer"></code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Добавлен <code>itemprop</code> атрибут</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Добавлен <code>charset</code> атрибут</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("html.elements.meta")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы, содержащие метаданные: {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("title")}}.</li> +</ul> diff --git a/files/ru/web/html/element/meter/index.html b/files/ru/web/html/element/meter/index.html new file mode 100644 index 0000000000..1fdcc828ae --- /dev/null +++ b/files/ru/web/html/element/meter/index.html @@ -0,0 +1,139 @@ +--- +title: <meter> +slug: Web/HTML/Element/meter +tags: + - Формы + - прогресс +translation_of: Web/HTML/Element/meter +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><meter></code> </strong> преставляет собой скалярное значение в пределах известного диапазона или дробного значения.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, контент, ассоциированный с label, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но среди его потомков не должно быть элемента <code><meter></code>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLMeterElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Текущее числовое значение. Он должен быть между минимальным и максимальным значением (<code>min</code> атрибут и <code>max</code> атрибут), если они указаны. Если он не указан или имеет неверное значение, значение равно 0. Если указан, но не в пределах диапазона, заданного атрибутами <code>min</code> и <code>max</code>, значение будет равно ближайшему концу диапазона. + <div class="note"><strong>Примечание по использованию: </strong>Если атрибут <code>value</code> не находится в диапазоне от <code>0</code> до <code>1</code> (включительно), то атрибуты <code>min</code> и <code>max</code> должны определять диапазон, в котором будет находиться значение <code>value</code>.</div> + </dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), если указан. Если неопределен, то минимальное значение равно 0.</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), если указан. Если неопределен, то максимальное значение равно 1.</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), а также, меньше, чем значение high и максимальное значение(<code>high</code> атрибут и <code>max</code> атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение <code>low</code> равно минимальному значению.</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), а также, больше, чем значение low и минимальное значение (<code>low</code> атрибут и <strong>min</strong> атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение <code>high</code> равно максимальному значению.</dd> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd>Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определен атрибутами <code>min</code> и <code>max</code>). При использовании с атрибутами <code>low</code> и <code>high</code>, он указывает какая часть дипазона является предпочтительной. Например, если он находится между атрибутами <code>min</code> и <code>low</code>, нижний диапазон является предпочтительным.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>Этот атрибут связывает элемент с элементом <code>form</code>, частью которого является элемент <code>meter</code>. Например, <code>meter</code> может отображать диапазон, соответствующий элементу <code>input</code> с <code>type</code> <em>number</em>. Этот атрибут используется только в случае, если элемент <code>meter</code> используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента <code>form</code>.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<h4 id="HTML_content">HTML content</h4> + +<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500" + value="350">350 degrees</meter>.</p> +</pre> + +<h4 id="Output">Output</h4> + +<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p> + +<p>В Google Chrome, результат будет выглядеть так:</p> + +<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="Пример_с_High_и_Low_диапазоном">Пример с High и Low диапазоном</h3> + +<p>Обратите внимание, что в этом примере атрибут <strong>min</strong> опущен; это разрешено, так как по умолчанию он будет равен 0.</p> + +<h4 id="HTML_content_2">HTML content</h4> + +<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100" + value="84">B</meter> on the exam.</p> +</pre> + +<h4 id="Output_2">Output</h4> + +<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p> + +<p>В Google Chrome, результат будет выглядеть так:</p> + +<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.meter")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> diff --git a/files/ru/web/html/element/nav/index.html b/files/ru/web/html/element/nav/index.html new file mode 100644 index 0000000000..aaa537f30c --- /dev/null +++ b/files/ru/web/html/element/nav/index.html @@ -0,0 +1,110 @@ +--- +title: Элемент секции навигации <nav> +slug: Web/HTML/Element/nav +tags: + - Element + - HTML + - HTML sections + - Links + - Navigation + - Reference + - Sections + - Web + - nav +translation_of: Web/HTML/Element/nav +--- +<p><span class="seoSummary"><strong>HTML-элемент <code><nav></code></strong> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки.</span></p> + +<div></div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Категории контента </a></th> + <td>Потоковый контент, секционный контент, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td>Потоковый контент.</td> + </tr> + <tr> + <th scope="row">Опускание тегов</th> + <td>Нет. Как начальный, так и конечный тег являются обязательными.<br> + {{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенный родительский элемент</th> + <td>Любой элемент, содержащий потоковый контент.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA-атрибуты</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент поддерживает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B" title="HTML/Global attributes">глобальные атрибуты</a>.</p> + +<h2 id="Примечание">Примечание</h2> + +<ul> + <li>Не обязательно все ссылки должны быть обернуты в <code><nav></code>. <code><nav></code> следует использовать лишь для главных навигационных блоков. Например, {{HTMLElement("footer")}} часто содержит список ссылок, которые не стоит оборачивать в {{HTMLElement("nav")}} .</li> + <li>Документ может содержать несколько {{HTMLElement("nav")}} элементов. Например, один для навигации по сайту, второй для навигации по странице.</li> + <li>Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<p>В данном примере, блок <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><code><nav></code> </span></font>содержит ненумерованный список ({{HTMLElement("ul")}}) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.</p> + +<pre class="brush: html notranslate"><nav class="menu"> + <ul> + <li><a href="#">Главная</a></li> + <li><a href="#">О нас</a></li> + <li><a href="#">Контакты</a></li> + </ul> +</nav> +</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений с момента последней спецификации</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<div class="hidden">Таблица совместимости на этой странице создается структурированно. Если вы желаете внести свой вклад в эти данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request</div> + +<p>{{Compat("html.elements.nav")}}</p> + +<h2 id="Смотрите_так_же">Смотрите так же</h2> + +<ul> + <li>Другие секционные элементы: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Использование разделов и создание структуры HTML документа</a>.</li> +</ul> diff --git a/files/ru/web/html/element/noscript/index.html b/files/ru/web/html/element/noscript/index.html new file mode 100644 index 0000000000..0b95032b93 --- /dev/null +++ b/files/ru/web/html/element/noscript/index.html @@ -0,0 +1,122 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<h2 id="Резюме">Резюме</h2> + +<p>Элемент HTML<strong> <code><noscript></code> </strong>определяет секцию html кода, которая будет вставлена, если в браузере пользователя нет либо отключена поддержка JavaScript'а.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li> + <li><dfn>Permitted content</dfn> When scripting is disabled and when it is a descendant of the {{HTMLElement("head")}} element: in any order, zero or more {{HTMLElement("link")}} elements, zero or more {{HTMLElement("style")}} elements, and zero or more {{HTMLElement("meta")}} elements.<br> + When scripting is disabled and when it isn't a descendant of the {{HTMLElement("head")}} element: any transparent content, but no <code><noscript></code> element must be among its descendants.<br> + Otherwise: flow content or phrasing content.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, if there are no ancestor <code><noscript></code> element, or in a {{HTMLElement("head")}} element (but only for an HTML document), here again if there are no ancestor <code><noscript></code> element.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p><span style="line-height: 21px;">Этот элемент включает в себя только <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</span></p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><noscript> + <!-- anchor linking to external file --> + <a href="http://www.mozilla.com/">External Link</a> +</noscript> +<p>Rocks!</p> +</pre> + +<h3 id="Пример_с_включенным_JavaScript'ом">Пример с включенным JavaScript'ом</h3> + +<p>Rocks!</p> + +<h3 id="Результат_с_выключенным_JavaScript'ом">Результат с выключенным JavaScript'ом</h3> + +<p><a class="external" href="http://www.mozilla.com/">External Link</a></p> + +<p>Rocks!</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/html/element/ol/index.html b/files/ru/web/html/element/ol/index.html new file mode 100644 index 0000000000..8024e608a6 --- /dev/null +++ b/files/ru/web/html/element/ol/index.html @@ -0,0 +1,218 @@ +--- +title: '<ol>: The Ordered List element' +slug: Web/HTML/Element/ol +tags: + - HTML + - Основной поток + - элементы +translation_of: Web/HTML/Element/ol +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><ol></code></strong> используется для упорядоченного списка — в частности для пронумерованного списка.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div> + +<p class="hidden">Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, и если дочерний элемент <code><ol></code> включает в себя хотя бы один элемент {{HTMLElement("li")}}, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Ноль или больше {{HTMLElement("li")}} элементов, которые, в свою очередь, содержат вложенные элементы {{ HTMLElement("ol") }} или {{ HTMLElement("ul") }}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент, который принимает <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">основной поток</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{DOMxRef("HTMLOListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Свойства">Свойства</h2> + +<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("reversed")}}</dt> + <dd>Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.</dd> + <dt>{{HTMLAttrDef("start")}}</dt> + <dd>Нумерация начнется с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация <code>type</code> в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте <code>start="4"</code>.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>Задаёт тип нумерации: + <ul> + <li><code>a</code> для строчных букв</li> + <li><code>A</code> для заглавных букв</li> + <li><code>i</code> для строчной Римской нумерации</li> + <li><code>I</code> для заглавной Римской нумерации</li> + <li><code>1</code> для цифр (по умолчанию)</li> + </ul> + + <p>указанный тип используется для всего списка, если только не указан любой другой аттрибут {{HTMLAttrxRef("type", "li")}} в элементе {{HTMLElement("li")}}.</p> + + <div class="blockIndicator note"> + <p><strong>Note:</strong> Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS {{CSSxRef("list-style-type")}}.</p> + </div> + </dd> +</dl> + +<h2 id="Заметки_об_использовании">Заметки об использовании</h2> + +<p>Обычно, элементы списка отображены с <a href="/en-US/docs/Web/CSS/::marker">маркером</a>, предшествующим цифрам или буквам.</p> + +<p><code>Элементы <ol></code> и {{HTMLElement("ul")}} могут быть вложены (nested) на любом уровне, чередуясь между элементами <code><ol></code> и <code><ul></code>.</p> + +<p>Оба элемента <code><ol></code> и {{HTMLElement("ul")}} используются для списков. Различие лишь в том, что в элементе <code><ol></code> порядок имеет значение, как в данных примерах:</p> + +<ul> + <li>Инструкции рецепта</li> + <li>Направление по заданному маршруту</li> + <li>Список ингридиентов на информации о питании, в убывающих пропорциях.</li> +</ul> + +<p>Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент <code><ol></code> — в противном случае {{HTMLElement("ul")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Обычный_список">Обычный список</h3> + +<pre class="brush: html"><ol> + <li>Fee</li> + <li>Fi</li> + <li>Fo</li> + <li>Fum</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p> + +<h3 id="Список_с_Римскими_числами">Список с Римскими числами</h3> + +<pre class="brush: html"><ol type="i"> + <li>Introduction</li> + <li>List of Greivances</li> + <li>Conclusion</li> +</ol> </pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p> + +<h3 id="Используя_свойство_start">Используя свойство <code>start</code></h3> + +<pre class="brush: html"><p>Finishing places of contestants not in the winners’ circle:</p> + +<ol start="4"> + <li>Speedwalk Stu</li> + <li>Saunterin’ Sam</li> + <li>Slowpoke Rodriguez</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p> + +<h3 id="Вложенный_список">Вложенный список</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p> + +<h3 id="Неупорядоченный_список_внутри_упорядоченного_списка">Неупорядоченный список внутри упорядоченного списка</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ul> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений с последнего W3C, {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Добавлено <code>reversed</code> и приписан <code>start</code>; возможно использование <code>type</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Были убраны <code>compact</code> и <code>type</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица "поддержка браузерами" сгенерирована с помощью структурированных данных. Если хотите внести вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.ol")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы HTML списка: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li>CSS свойства, которые могут быть полезны для стилизации <code><ol></code> элемента: + <ul> + <li>свойство {{CSSxRef("list-style")}}, для порядковых показов</li> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков</li> + <li>свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/line-height">line-height</a>, для замены убранного свойства <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol#attr-compact">compact</a></li> + <li>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/margin">margin</a>, для контроля отступа в списке</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/element/optgroup/index.html b/files/ru/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..7f5ff96cf8 --- /dev/null +++ b/files/ru/web/html/element/optgroup/index.html @@ -0,0 +1,119 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - HTML + - HTML forms + - Описание + - Формы + - Элемент +translation_of: Web/HTML/Element/optgroup +--- +<p><strong>HTML-элемент <code><optgroup></code> </strong>позволяет группировать опции, находящиеся внутри элемента {{HTMLElement("select")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Допустимый контент</th> + <td>Ноль или более {{HTMLElement("option")}} элементов.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Открывающий тег обязателен. Закрывающий тег может быть опущен, если сразу после элемента находится следующий элемент <code><optgroup></code>, или если это последний элемент внутри родителя.</td> + </tr> + <tr> + <th scope="row">Допустимые родители</th> + <td>Элемент {{HTMLElement("select")}}</td> + </tr> + <tr> + <th scope="row">Допустимые ARIA-роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLOptGroupElement")}}</td> + </tr> + </tbody> +</table> + +<p>{{Note("Элементы optgroup не могут быть вложенными друг в друга.")}}</p> + +<h2 id="Аттрибуты">Аттрибуты</h2> + +<p>Элемент <code><optgroup></code> допускает использование <a href="/en-US/docs/Web/HTML/Global_attributes">глобальных аттрибутов</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Если установить этот аттрибут, опции, находящиеся внутри элемента станут недоступными для выбора. Часто браузеры отображают эти опции серым цветом и игнорируют срабатывающие на них события, таие как события мыши или события получения фокуса.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Имя группы, которое будет отображено браузером в выпадающем списке. Этот атрибут обязателен.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><select> + <optgroup label="Группа 1"> + <option>Опция 1.1</option> + </optgroup> + <optgroup label="Группа 2"> + <option>Опция 2.1</option> + <option>Опция 2.2</option> + </optgroup> + <optgroup label="Группа 3" disabled> + <option>Опция 3.1</option> + <option>Опция 3.2</option> + <option>Опция 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример')}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.elements.optgroup")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элементы, имеющие отношение к формам: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} и {{HTMLElement("meter")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/option/index.html b/files/ru/web/html/element/option/index.html new file mode 100644 index 0000000000..7f2bafd7ed --- /dev/null +++ b/files/ru/web/html/element/option/index.html @@ -0,0 +1,100 @@ +--- +title: <option> +slug: Web/HTML/Element/option +tags: + - опция + - селект +translation_of: Web/HTML/Element/option +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML элемент <code><option></code></strong> используется для определения пункта списка контейнера {{HTMLElement("select")}}, элемента {{HTMLElement("optgroup")}}, или элемента {{HTMLElement("datalist")}}. Элемент <code><option></code> может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категория содержимого</a></th> + <td>Нет.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Текст, допускаются <span class="short_text" id="result_box" lang="ru"><span>экранированные символы</span></span> (например <code>&eacute;</code>).</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Открывающий тег обязателен. Закрывающий тег опционален если за этим элементом следует другой элемент <code><option></code>, или элемент {{HTMLElement("optgroup")}}, или если родительский элемент не имеет больше содержимого.</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные родители</span></span></th> + <td>Элемент {{HTMLElement("select")}}, элемент {{HTMLElement("optgroup")}} или элемент {{HTMLElement("datalist")}}.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLOptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Атрибуты</h2> + +<p>Как и все HTML элементы, этот элемент поддерживает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}} -- отключен(о)</dt> + <dd>Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все еще можно отключить (может не работать), если отключен внешний(one of its ancestors) элемент {{HTMLElement("optgroup")}}.</dd> + <dt>{{htmlattrdef("label")}} -- метка, ярлык</dt> + <dd>Этот атрибут - текст ярлыка, отображающий значение(смысл, описание) опции. Если <code>label</code> не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента <code><option></code>.</dd> + <dt>{{htmlattrdef("selected")}} -- выбран(о)</dt> + <dd>(Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент <code><option></code> принадлежит элементу {{HTMLElement("select")}}, чей атрибут {{htmlattrxref("multiple", "select")}} не установлен, только одна-единственная <code><option></code> элемента {{HTMLElement("select")}} может иметь атрибут <code>selected</code> .</dd> + <dt>{{htmlattrdef("value")}} -- значение, величина</dt> + <dd>Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берется из текстового содержания элемента <code><option></code>.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p>См. {{HTMLElement("select")}} for examples.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.option")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/ru/web/html/element/output/index.html b/files/ru/web/html/element/output/index.html new file mode 100644 index 0000000000..63ba4bb6ff --- /dev/null +++ b/files/ru/web/html/element/output/index.html @@ -0,0 +1,103 @@ +--- +title: '<output>: Элемент вывода' +slug: Web/HTML/Element/output +tags: + - Верстка + - Элемент + - вывод +translation_of: Web/HTML/Element/output +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент вывода </strong>(<strong><code><output></code></strong>) является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">перечисляемые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_labelable">лэйбловые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_resettable">сбрасываемые формо-ассоциированные элементы</a>, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Все элементы, которые принимают <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Допустимые ARIA-роли</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLOutputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>Пробело-разделяемый список <code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code> других элементов, указывающий, что эти элементы предоставили входные значения для (или иным образом повлияли) вычисления.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd> <a href="/en-US/docs/Web/HTML/Element/form">Элемент формы</a>, с которым связан этот элемент ("владелец формы"). Значением атрибута должен быть <code>id</code> элемента {{HTMLElement("form")}} в том же документе. Этот атрибут не нужен, если элемент <code><output></code> является потомком элемента <code><form></code> (в этом случае эта форма является владельцем формы), или, если элемент <code><output></code> вообще не связан с формой.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Имя элемента; используется для идентификации этого <code><output></code> при отправке формы.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>Эта форма содержит слайдер, значение которого находится в пределах от 0 до 100, и элемент {{HTMLElement("input")}}, в который можно ввести второе значение. Два числа складываются и результат отображается в элементе <code><output></code> каждый раз, когда значение любого управляющего элемента меняется.</p> + +<pre class="brush: html notranslate"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> + <input type="range" name="b" value="50" /> + + <input type="number" name="a" value="10" /> = + <output name="result">60</output> +</form> +</pre> + +<p>{{ EmbedLiveSample('Example')}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.output")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы, связанные с формой: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/ru/web/html/element/p/index.html b/files/ru/web/html/element/p/index.html new file mode 100644 index 0000000000..74e115173a --- /dev/null +++ b/files/ru/web/html/element/p/index.html @@ -0,0 +1,190 @@ +--- +title: '<p>: Элемент текстового абзаца' +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - Web + - Абзац + - Веб + - Группировка контента + - Параграф + - Справка + - Элемент +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><p></code></strong> представляет собой абзац.</span> Абзацы обычно представлены в визуальной среде в виде блоков текста, отделенных от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.</p> + +<p>Абзацы являются <a href="/ru/docs/Web/HTML/Block-level_elements">блочными элементами</a> и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом <code></p></code>. Смотрите ниже "Пропуск тега".</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом {{HTMLElement("p")}} сразу следует элемент {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} или другой элемент {{HTMLElement("p")}}, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом {{HTMLElement("a")}}.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a> в качестве содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<div class="note"> +<p><strong>Заметка:</strong> Атрибут <code>align</code> в тегах <code><p></code> устарел и больше не должен с использоваться.</p> +</div> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Это первый абзац текста. + Это первый абзац текста. + Это первый абзац текста. + Это первый абзац текста.</p> +<p>Это второй абзац текста. + Это второй абзац текста. + Это второй абзац текста. + Это второй абзац текста.</p> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример')}}</p> + +<h2 id="Стилизация_абзацев">Стилизация абзацев</h2> + +<p>По умолчанию браузеры разделяют абзацы одной пустой строкой. Альтернативные методы разделения, такие как отступы в первой строке абзаца, могут быть достигнуты с помощью {{glossary("CSS")}}:</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><p>Разделение абзацев пустыми строками удобнее для читателей, +но их также можно разделить, сделав отступы в их первых строках. +Это часто используется для экономии места, например, +чтобы тратить меньше бумаги при печати.</p> + +<p>Письмо (имеется ввиду письменность), предназначенное для редактирования, +например, школьные записи и черновики, использует для разделения +как пустые строки, так и отступы. В готовых работах объединение этих двух способов +считается излишним и любительским.</p> + +<p>В очень старом письме абзацы были разделены +специальным символом: ¶, <i>pilcrow</i> (знак абзаца). +В настоящее время это считается замкнутым и трудно читаемым.</p> + +<p>Насколько трудно читать? Посмотрите сами: + <button data-toggle-text="О нет! Переключи обратно!">Используем "pilcrow" для абзацев</button> +</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + margin: 0; + text-indent: 3ch; +} + +p.pilcrow { + text-indent: 0; + display: inline; +} +p.pilcrow + p.pilcrow::before { + content: " ¶ "; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) { + document.querySelectorAll('p').forEach(function (paragraph) { + paragraph.classList.toggle('pilcrow'); + }); + var newButtonText = event.target.dataset.toggleText; + var oldText = event.target.innerText; + event.target.innerText = newButtonText; + event.target.dataset.toggleText = oldText; +});</pre> + +<h3 id="Результат_2">Результат</h3> + +<p>{{EmbedLiveSample('Стилизация_абзацев')}}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Разделение контента на абзацы помогает сделать страницу более доступной. Программы чтения с экрана и другие вспомогательные технологии предоставляют шорткаты ("shortcut" - кратчайший путь), позволяющие пользователям переходить к следующему или предыдущему абзацу, позволяя им просматривать содержимое, например, как пустая строка позволяет пользователям, воспринимающим информацию визуально, пропускать абзацы.</p> + +<p>Использование пустого элемента <code><p></code> для добавления пустого пространства между абзацами является проблемой для людей, которые используют технологию чтения с экрана.</p> + +<p>Если требуется дополнительное пространство, используйте свойства {{glossary("CSS")}}, например {{cssxref("margin")}}, чтобы создать такой эффект:</p> + +<pre class="brush: css">p { + margin-bottom: 2em; // увеличение пустого пространства после абзаца +} +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени) {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Атрибут <code>align</code> больше не поддерживается</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если вы хотите дополнить данные, создайте пулл-реквест (pull request) здесь <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/ru/web/html/element/picture/index.html b/files/ru/web/html/element/picture/index.html new file mode 100644 index 0000000000..bba3bab963 --- /dev/null +++ b/files/ru/web/html/element/picture/index.html @@ -0,0 +1,107 @@ +--- +title: Элемент <picture> +slug: Web/HTML/Element/picture +tags: + - HTML + - Встроенный контент + - Элемент picture +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><picture></code> </strong> служит контейнером для одного или более элементов {{HTMLElement("source")}} и одного элемента {{HTMLElement("img")}} для обеспечения оптимальной версии изображения для различных размеров экрана.</span> Браузер рассмотрит каждый из дочерних элементов <code><source></code> и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов <code><source></code> найдено не будет, то будет выбран файл, указанный атрибутом {{htmlattrxref("src", "img")}} элемента <code><img></code> . Затем выбранное изображение отображается в пространстве, занятом элементом <code><img></code>. </p> + +<p>Чтобы выбрать оптимальное изображение, {{Glossary("user agent")}} анализирует атрибуты {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, и {{htmlattrxref("type", "source")}} элемента <code><source></code> и выбирает совместимое изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.</p> + +<p>Элемент <code><picture></code> часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, фразовый контент, встроенный контент</td> + </tr> + <tr> + <th scope="row">Разрешённый контент </th> + <td>Ноль или более элементов {{HTMLElement("source")}}, затем один элемент {{HTMLElement("img")}}, при необходимости смешанный с элементами поддержки сценариев.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Нет. Открывающий и закрывающий тег являются обязательными.<br> + </td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент, который разрешает встроенный контент</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA roles</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент содержит только <a href="/en-US/docs/Web/HTML/Global_attributes">универсальные атрибуты</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Эти примеры демонстрируют влияние различных атрибутов элемента {{HTMLElement("source")}} на выбор изображения, которое будет отображаться при их использовании внутри тега <code><picture></code>.</p> + +<h3 id="Атрибут_media">Атрибут <code>media</code></h3> + +<p>Атрибут <code>media</code> позволяет определить медиа-запрос, который веб-браузер будет анализировать для выбора элемента {{HTMLElement("source")}}. Если медиа-запрос определяется как ложный <code>(false)</code>, то элемент {{HTMLElement("source")}} пропускается.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h3 id="Атрибут_type">Атрибут <code>type</code></h3> + +<p>Атрибут <code>type</code> позволяет Вам обозначить MIME-тип данных, указанных в атрибуте <code>srcset</code> элемента {{HTMLElement("source")}}. Если браузер не подерживает данный тип, то элемент {{ HTMLElement("source")}} опускается.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.svg" type="image/svg+xml"> + <img src="mdn-logo.png" alt="MDN"> +</picture> +</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + + + +<p>{{Compat("html.elements.picture")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("img")}} </li> + <li>Элемент {{HTMLElement("source")}}</li> + <li>Позиционирование и определение размера изображения в рамках: {{cssxref("object-position")}} и {{cssxref("object-fit")}}</li> +</ul> diff --git a/files/ru/web/html/element/pre/index.html b/files/ru/web/html/element/pre/index.html new file mode 100644 index 0000000000..70a3b05b1f --- /dev/null +++ b/files/ru/web/html/element/pre/index.html @@ -0,0 +1,171 @@ +--- +title: '<pre>: Предварительно отформатированный текстовый элемент' +slug: Web/HTML/Element/pre +tags: + - HTML + - HTML группировка контента + - 'HTML: поток контента' + - Элемент +translation_of: Web/HTML/Element/pre +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>Элемент HTML <code><pre></code> </strong> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле.</span> Текст обычно отображается с использованием непропорционального ("<a href="/ru/docs/XUL/Style/monospace">monospace</a>") шрифта. Пробелы внутри этого элемента отображаются как записанные.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%AF%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">Явный контент</a></td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">содержимое потока</a></td> + </tr> + <tr> + <th scope="row">Неявная роль ARIA</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">Интерфейс DOM</th> + <td>{{domxref("HTMLPreElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя только <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt> + <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Это был нестандартный синоним {{htmlattrxref("width", "pre")}}. Чтобы добиться такого эффекта, используйте CSS {{Cssxref("width")}}.</dd> + <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> + <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.</dd> + <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> + <dd>Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS {{Cssxref("white-space")}}.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Использовать CSS для изменения цвета шрифта легко.</p> +<pre> +body { + color: red; +} +</pre> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Пример")}}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно четко и лаконично описывать содержание изображения или диаграммы.</p> + +<p>Люди, испытывающие проблемы с плохим зрением и просматривающие страницы с помощью вспомогательных технологий, таких как программа чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.</p> + +<p>Комбинация элементов {{HTMLElement("figure")}} и {{HTMLElement("figcaption")}}, дополненная {{htmlattrxref("id")}} и <a href="/ru/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> и <code>aria-labelledby</code>, позволяет объявить предварительно отформатированный текст как изображение, а <code>figcaption</code> служит альтернативным описанием изображения.</p> + +<h3 id="Пример_2">Пример</h3> + +<pre><figure role="img" aria-labelledby="cow-caption"> + <pre> + ____________________________ +< Я эксперт в своей области. > + ---------------------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + </pre> + <figcaption id="cow-caption"> + Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов. + </figcaption> +</figure> +</pre> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No significant change from {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>No significant change from {{SpecName("HTML4.01")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>cols</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + + + +<p>{{Compat("html.elements.pre")}}</p> + +<h2 id="Смотреть_также">Смотреть также</h2> + +<ul> + <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li> + <li>Связанный элемент: {{HTMLElement("code")}}</li> +</ul> + +<div id="simple-translate"> +<div> +<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1739px; left: 246px;"></div> + +<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);"> +<div class="simple-translate-result-wrapper" style="overflow: hidden;"> +<div class="simple-translate-move"></div> + +<div class="simple-translate-result-contents"> +<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p> + +<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p> +</div> +</div> +</div> +</div> +</div> diff --git a/files/ru/web/html/element/progress/index.html b/files/ru/web/html/element/progress/index.html new file mode 100644 index 0000000000..87d221455b --- /dev/null +++ b/files/ru/web/html/element/progress/index.html @@ -0,0 +1,123 @@ +--- +title: '<progress>: Элемент индикатора выполнения' +slug: Web/HTML/Element/progress +tags: + - Progress bar + - индикатор загрузки +translation_of: Web/HTML/Element/progress +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><progress></code> </strong>отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, контент, ассоциированный с label, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но среди его потомков не должно быть элемента <code><progress></code>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLProgressElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd>Этот атрибут описывает сколько затрат требует задача, указанная элементом <code>progress</code>. Атрибут <code>max</code>, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до <code>max</code>, или между 0 и 1, если <code>max</code> не указан. Если атрибут <code>value</code> не указан, индикатор выполнения не определен; это указывает на то, что действие продолжается без указания на то, сколько времени оно займет.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Минимальное значение всегда 0, а атрибут <code>min</code> недопустим для прогресс-элемента. Вы можете использовать свойство CSS {{ cssxref("-moz-orient") }}, чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.</p> +</div> + +<div class="note"> +<p><strong>Примечение:</strong> Псевдокласс {{ cssxref(":indeterminate") }} может быть использован для работы с неопределенным индикатором выполнения. Чтобы индикатор выполнения стал неопределенным после присвоения ему значения, вы должны удалить атрибут value с помощью <code>element.removeAttribute("value")</code></p> +</div> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample("Examples", 200, 50) }}</p> + +<p>Для Windows 7, результат выполнения будет выглядеть так :</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> + +<h3 id="Дополнительные_примеры">Дополнительные примеры</h3> + +<p>Смотрите {{ cssxref("-moz-orient") }}.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.progress")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/meter"><meter></a></li> + <li>{{ cssxref(":indeterminate") }}</li> + <li>{{ cssxref("-moz-orient") }}</li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/ru/web/html/element/ruby/index.html b/files/ru/web/html/element/ruby/index.html new file mode 100644 index 0000000000..ed501d421c --- /dev/null +++ b/files/ru/web/html/element/ruby/index.html @@ -0,0 +1,153 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/ruby +--- +<p><code><font face="Open Sans, Arial, sans-serif">HTML элемент</font><strong><ruby></strong></code> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Основной поток(Flow content)</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">текстовой контент(phrasing content)</a>, явный контент(palpable content).</td> + </tr> + <tr> + <th scope="row">Допустимый контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Текстовый контент(phrasing content)</a>.</td> + </tr> + <tr> + <th scope="row">Тэг пропускания</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент который согласован с <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">текстовым контентом(phrasing content)</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Пример_1_Символы">Пример 1: Символы</h3> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<h3 id="Пример_2_Слово">Пример 2: Слово</h3> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>5.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/ru/web/html/element/script/index.html b/files/ru/web/html/element/script/index.html new file mode 100644 index 0000000000..5f03eb7943 --- /dev/null +++ b/files/ru/web/html/element/script/index.html @@ -0,0 +1,225 @@ +--- +title: '<script>: The Script element' +slug: Web/HTML/Element/script +tags: + - Script +translation_of: Web/HTML/Element/script +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML Элемент<strong> <code><script></code> </strong></span> используется для встраивания или подключения исполняемого JavaScript кода. Элемент <code><script></code> также может использоваться с другими языками, такими как <a href="/en-US/docs/Web/API/WebGL_API/By_example/Hello_GLSL">GLSL</a> от <a href="/ru/docs/Web/API/WebGL_API">WebGL</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Main_content_categories">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td>Динамический скрипт, используя атрибут <code>text/javascript</code>.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Нет. Открывающий и закрывающий теги обязательны</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элементы</th> + <td> + <p>Любые элементы в которых разрешены <a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">метаданные</a> или <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a></p> + </td> + </tr> + <tr> + <th scope="row">Разрешенная ARIA роль</th> + <td>Отсутствует</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt> + <dd>Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте <code>{{htmlattrdef("src")}}</code>, асинхронно.</dd> +</dl> + +<div class="warning"> +<p>Атрибут <code>{{htmlattrdef("async")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p> +</div> + +<dl> + <dd> + <p>Обычно браузеры загружают <code><script></code> синхронно, (т.е. <code>async="false"</code>) во время разбора документа.</p> + </dd> + <dd> + <p>Динамически вставленный <code><script></code> (используя, например, <code>document.createElement</code>) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите <code>async="false"</code>.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Обычные элементы тега <code>script</code> передают мало информации в {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} для скриптов, которые не проходят проверку <a href="/en-US/docs/HTTP_access_control">CORS</a>. Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут <code>{{htmlattrdef("crossorigin")}}</code>. Посмотрите статью «<a href="/ru/docs/Web/HTML/CORS_settings_attributes">настройки атрибутов CORS</a>» для более наглядного объяснения его допустимых аргументов.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("defer")}}</dt> + <dd>Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события {{event("DOMContentLoaded")}}.</dd> + <dd>Скрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут предотвращать запуск события {{event("DOMContentLoaded")}} до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.</dd> +</dl> + +<div class="warning"> +<p>Атрибут <code>{{htmlattrdef("defer")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p> +</div> + +<dl> + <dd>Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте <code>async=false.</code></dd> + <dd>Cкрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут выполняться в том порядке, в котором они появились при разборе документа.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES2015 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document.</dd> +</dl> + +<div class="warning"> +<p>Если у элемента <code>script</code> будет указан атрибут <code>{{htmlattrdef("src")}}</code>, то он не должен иметь встроенный скрипт между тегами.</p> +</div> + +<dl> + <dt>{{htmlattrdef("text")}}</dt> + <dd>Like the <code>textContent</code> attribute, this attribute sets the text content of the element. Unlike the <code>textContent</code> attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:</p> + + <ul> + <li><strong>Omitted or a JavaScript MIME type:</strong> For HTML5-compliant browsers this indicates the script is JavaScript. HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">listed in the specification</a>.</li> + <li><strong><code>module</code>:</strong> For HTML5-compliant browsers the code is treated as a JavaScript module. The processing of the script contents is not affected by the <code>charset</code> and <code>{{htmlattrdef("defer")}}</code> attributes. For information on using <code>module</code>, see <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>. Code may behave differently when the <code>module</code> keyword is used.</li> + <li><strong>Any other value:</strong> The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The <code>src</code> attribute will be ignored.</li> + </ul> + + <div class="note"> + <p><strong>Note: </strong>in Firefox you could specify the version of JavaScript contained in a <code><script></code> element by including a non-standard <code>version</code> parameter inside the <code>type</code> attribute — for example <code>type="text/javascript;version=1.8"</code>. This has been removed in Firefox 59 (see {{bug(1428745)}}).</p> + </div> + </dd> +</dl> + +<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". Both it’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd> +</dl> + +<h2 id="Примечания">Примечания</h2> + +<p>Элемент <code><script></code> без указания атрибутов {{HTMLAttrxRef("async", "script")}} , {{HTMLAttrxRef("defer", "script")}} или <code>type="module"</code>, а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.</p> + +<p>Для обработки скрипт должен иметь тип данных <code>text/javascript</code>, но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение (<code>image/*</code>); видео (<code>video/*</code>); аудио (<code>audio/*</code>); или <code>text/csv</code>. Если скрипт заблокирован, элементу отправляется событие {{event("error")}}, если не было отправлено событие {{event("load")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Основное_использование">Основное использование</h3> + +<p>Эти примеры показывают как импортировать скрипт используя элемент <code><script></code> в HTML4 и HTML5.</p> + +<pre class="brush: html"><!-- HTML4 --> +<script type="text/javascript" src="javascript.js"></script> + +<!-- HTML5 --> +<script src="javascript.js"></script> +</pre> + +<h3 id="Module_fallback">Module fallback</h3> + +<p>Браузеры, поддерживающие использование значения <code>module</code> для атрибута <code>type</code>, игнорируют любые скрипты с атрибутом <code>nomodule</code>. Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать <code>nomodule-</code>скрипты для браузеров без поддержки модульных скриптов.</p> + +<pre class="brush: html"><script type="module" src="main.mjs"></script> +<script nomodule src="fallback.js"></script></pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Добавлен <code>module</code> {{HTMLAttrxRef("type", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "<script>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Добавлен атрибут {{HTMLAttrxRef("integrity", "script")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + + + +<p>{{Compat("html.elements.script", 2)}}</p> + +<h3 id="Примечания_по_совместимости">Примечания по совместимости</h3> + +<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p> + +<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>async=false</code> on the scripts you want to maintain order.</p> + +<div class="warning"> +<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> + <li><a href="/en-US/docs/Games/Techniques/Async_scripts">Асинхронные скрипты для asm.js</a></li> +</ul> diff --git a/files/ru/web/html/element/section/index.html b/files/ru/web/html/element/section/index.html new file mode 100644 index 0000000000..b34e9d1099 --- /dev/null +++ b/files/ru/web/html/element/section/index.html @@ -0,0 +1,146 @@ +--- +title: <section> +slug: Web/HTML/Element/section +tags: + - Element + - HTML + - Web + - Веб + - Разделы + - Разделы HTML + - Справка + - Элемент +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><section></code></strong> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа.</span> Как правило, но не всегда, разделы имеют заголовок.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div> + +<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>Например, меню навигации должно быть помещено в элемент {{htmlelement("nav")}}, но список результатов поиска и отображение карты с ее элементами управления не имеют специфических элементов и могут быть помещены в <code><section></code>.</p> + +<div class="note"> +<p><strong>Заметка:</strong> Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент {{HTMLElement("article")}} может стать лучшим выбором.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Категории контента</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a></td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><section></code> не должен быть потомком элемента {{HTMLElement("address")}}.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примечание">Примечание</h2> + +<ul> + <li>Каждый элемент <code><section></code> должен быть идентифицирован, обычно путем добавления заголовка (элементы {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) в качестве дочернего элемента.</li> + <li>Если имеет смысл по-особому объединить содержимое элемента <code><section></code> (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент {{HTMLElement("article")}}.</li> + <li>Не используйте элемент <code><section></code> как общий контейнер; для этого есть {{HTMLElement("div")}}, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.</li> +</ul> + +<h2 id="Пример_1">Пример 1</h2> + +<h3 id="До">До</h3> + +<pre class="brush: html"><div> + <h1>Заголовок</h1> + <p>Много замечательного контента</p> +</div></pre> + +<h3 id="После">После</h3> + +<pre class="brush: html"><section> + <h1>Заголовок</h1> + <p>Много замечательного контента</p> +</section> +</pre> + +<h2 id="Пример_2">Пример 2</h2> + +<h3 id="До_2">До</h3> + +<pre class="brush: html"><div> + <h2>Заголовок</h2> + <img src="bird.jpg" alt="птица"> +</div> +</pre> + +<h3 id="После_2">После</h3> + +<pre class="brush: html"><section> + <h2>Заголовок</h2> + <img src="bird.jpg" alt="птица"> +</section> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5.</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: роль region</a></li> +</ul> diff --git a/files/ru/web/html/element/select/index.html b/files/ru/web/html/element/select/index.html new file mode 100644 index 0000000000..77c08dac62 --- /dev/null +++ b/files/ru/web/html/element/select/index.html @@ -0,0 +1,120 @@ +--- +title: <select> +slug: Web/HTML/Element/select +translation_of: Web/HTML/Element/select +--- +<p><span class="seoSummary"><strong>HTML тэг <code><select></code></strong> представляет собой элемент управления который содержит меню опций:</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории содержимого</a></th> + <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="/en-US/docs/HTML/Content_categories#Interactive_content">интерактивный контент</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed">списочный</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable">сбрасываемый</a>, и <a href="/en-US/docs/HTML/Content_categories#Form_submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_">form-associated </a>element</td> + </tr> + <tr> + <th scope="row">Допустимое содержимое</th> + <td>Ноль или более {{HTMLElement("option")}} или {{HTMLElement("optgroup")}} элементы.</td> + </tr> + <tr> + <th scope="row">Опускание тегов</th> + <td>Открывающий и закрывающий теги обязательны.</td> + </tr> + <tr> + <th scope="row">Допустимие родительские элементы</th> + <td>Любые элементы в которых разрешено текстовое содержимое</td> + </tr> + <tr> + <th scope="row">Разрешенная ARIA роль</th> + <td>{{ARIARole("menu")}}</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLSelectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут <code>autofocus</code>, элемент является логическим (булевым).</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Этот логический атрибут указывает что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройки от содержащего его элемента, к примеру <code>fieldset</code>; если у родительского элемента не указан атрибут <code>disabled</code>, то элемент управления доступен для взаимодействия.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>Этот атрибут указывает к какой конкретно форме относится элемент <select> . Если атрибут указан, его значением должно быть ID формы в том же документе. Это позволяет размещать элементы <select> где угодно в документе, а не только как потомки форм.</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>Этот логический атрибут указывает что возможен выбор нескольких опций в списке. Если данный атрибут не указан, то только одна опция может быть выбрана.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Этот атрибут используется для указания имени элемента управления.</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Если элемент управления представлен как прокручаваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять <select> в виде прокручеваемого списка. Значение по умолчанию 0.</dd> +</dl> + +<div class="note"><strong>Примечания Firefox:</strong> Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.</div> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><!-- Начально будет выбрано второе значение --> +<select name="select"> <!--Supplement an id here instead of using 'name'--> + <option value="value1">Значение 1</option> + <option value="value2" selected>Значение 2</option> + <option value="value3">Значение 3</option> +</select> +</pre> + +<h3 id="Результат">Результат</h3> + +<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p> + +<h3 id="Примечания">Примечания</h3> + +<p>Контент этого элемента статичен и не <a href="/en-US/docs/HTML/Content_Editable">редактируемый</a>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Коментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если Вы хотите внести свой вклад, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул запросов.</div> + +<p>{{Compat("html.elements.select")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие элементы форм: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li>События запускаемые <code><select></code>: <a href="/en-US/docs/Web/Events/change">change.</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/slot/index.html b/files/ru/web/html/element/slot/index.html new file mode 100644 index 0000000000..10e39b72a4 --- /dev/null +++ b/files/ru/web/html/element/slot/index.html @@ -0,0 +1,115 @@ +--- +title: <slot> +slug: Web/HTML/Element/slot +translation_of: Web/HTML/Element/slot +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary">HTML элемент <code><slot></code> является частью набора технологии <a href="/en-US/docs/Web/Web_Components">Web Components</a>, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Поток контента</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">содержание формулировки</a></td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Прозрачный</a></td> + </tr> + <tr> + <th scope="row">События</th> + <td>{{event("slotchange")}}</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенный родители</th> + <td>Любой элемент, который принимает<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content"> содержание формулировки</a></td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Никакой</td> + </tr> + <tr> + <th scope="row">Интерфейс DOM</th> + <td>{{domxref("HTMLSlotElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Название слота.</dd> + <dd><dfn><strong>Именованый слот</strong></dfn> это элемент <code><slot></code> с атрибутом<code> name</code>.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><template id="element-details-template"> + <style> + details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } + .name {font-weight: bold; color: #217ac0; font-size: 120% } + h4 { + margin: 10px 0 -8px 0; + background: #217ac0; + color: white; + padding: 2px 6px; + border: 1px solid #cee9f9; + border-radius: 4px; + } + .attributes { margin-left: 22px; font-size: 90% } + .attributes p { margin-left: 16px; font-style: italic } + </style> + <details> + <summary> + <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code> + <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> + </summary> + <div class="attributes"> + <h4>Attributes</h4> + <slot name="attributes"><p>None</p></slot> + </div> + </details> + <hr> +</template></pre> + +<div class="note"> +<p><strong>Примечание</strong>: Вы можете увидеть этот полный пример в действии на странице <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a> (смотрите его <a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">в режиме реального времени</a>). Кроме того, вы можете найти в разделе <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a>.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','<slot>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> + +<p>{{Compat("html.elements.slot")}}</p> diff --git a/files/ru/web/html/element/source/index.html b/files/ru/web/html/element/source/index.html new file mode 100644 index 0000000000..847326d6b2 --- /dev/null +++ b/files/ru/web/html/element/source/index.html @@ -0,0 +1,120 @@ +--- +title: Элемент <source> +slug: Web/HTML/Element/source +translation_of: Web/HTML/Element/source +--- +<p><strong>HTML-элемент <code><source></code> </strong> указывает несколько медиа-ресурсов для элементов {{HTMLElement("picture")}}, {{HTMLElement("video")}} и {{HTMLElement("audio")}}. Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">в нескольких форматах, поддерживаемых различными браузерами</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td>Нет, это {{Glossary("пустой элемент")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Должен иметь открывающий тег; закрывающий тег необязателен.</td> + </tr> + <tr> + <th scope="row"><dfn>Разрешённые родители</dfn></th> + <td> + <div>Медиа-элементы —{{HTMLElement("audio")}} или {{HTMLelement("video")}}—должен быть помещён перед любым <a href="/en-US/docs/HTML/Content_categories#Flow_content">потоковым контентом</a> или элементом{{HTMLElement("track")}}.</div> + + <div>Элемент {{HTMLElement("picture")}} , должен быть помещён перед элементом {{HTMLElement("img")}}.</div> + </td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLSourceElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="/en-US/docs/HTML/Global_attributes">универсальные атрибуты</a>.</p> + +<ol> + <li>адреса изображения (URL);</li> + <li>дескриптора ширины, представляющего собой целое положительное число, за которым следует <code>'w'</code>. Значением по умолчанию, если оно отсутствует, является бесконечность.</li> + <li>дескриптора плотности пикселей, представляющее собой положительное десятичное число, за которым следует <code>'x'</code>. Значением по умолчанию, если оно остутствует, является <code>1x</code>.</li> +</ol> + +<dl> + <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt> + <dd>Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиа-запросов со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте {{htmlattrxref("srcset", "source")}}. Атрибут <code>sizes</code> работает только тогда, когда элемент {{HTMLElement("source")}} расположен внутри элемента {{HTMLElement("picture")}}.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Требуемый для элементов {{HTMLElement("audio")}} и {{HTMLElement("video")}} адрес медиа-ресурсов. Значение этого атрибута игнорируется браузером, когда элемент <code><source></code> размещён внутри элемента {{HTMLElement("picture")}}.</dd> + <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt> + <dd>Список из одной или нескольких строк, разделённых запятыми, определяющий набор возможных изображений, представленных для отображения в браузере. Каждая строка может состоять из:</dd> + <dd> + <p>Каждая строка списка должна содержать по крайней мере дескриптор ширины или дескриптор плотности пикселей. </p> + + <p>Браузер выбирает самое подходящее изображение для отображения в данный момент времени.</p> + + <p>Атрибут <code>srcset</code> работает только в том случае, когда элемент {{HTMLElement("source")}} находится внутри элемента {{HTMLElement("picture")}}.</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>MIME-тип ресурса, опцинально содержащий параметр <code>codecs</code>. Для получения полной информации по указанию кодеков смотрите <a class="external" href="https://tools.ietf.org/html/rfc4281">RFC 4281</a>. </dd> + <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt> + <dd>Определяет <a class="internal" href="/en-US/docs/CSS/Media_queries">медиа-запрос</a> , согласно которому будет выводиться изображение. Работает только в элементе {{HTMLElement("picture")}}.</dd> +</dl> + +<p>Если атрибут <code>type</code> не указан, то он запрашивается с сервера и проверяется, может ли {{Glossary("user agent")}} его обрабатывать. Если он не может быть обработан, проверяется следующий <code><source></code>. Если атрибут <code>type</code> указан, он сравнивается с типами, которые может поддерживать {{Glossary("user agent")}}, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент <code><source></code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the <code>audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. See also the list of <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">media formats supported by the audio and video elements</a> in various browsers.</p> + +<pre class="brush: html"><video controls> + <source src="foo.webm" type="video/webm"> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mov" type="video/quicktime"> + I'm sorry; your browser doesn't support HTML5 video. +</video> +</pre> + +<p>For more examples, see <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using audio and video in Firefox</a>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '<source>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + + + +<p>{{Compat("html.elements.source")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("picture")}} </li> + <li>Элемент {{HTMLElement("audio")}} </li> + <li>Элемент {{HTMLElement("video")}} </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/span/index.html b/files/ru/web/html/element/span/index.html new file mode 100644 index 0000000000..3a8788e03e --- /dev/null +++ b/files/ru/web/html/element/span/index.html @@ -0,0 +1,124 @@ +--- +title: <span> +slug: Web/HTML/Element/span +tags: + - Element + - HTML + - Web + - Веб + - Потоковый контент + - Справка + - Элемент +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><span></code></strong> является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов {{htmlattrxref("class")}} или {{htmlattrxref("id")}}) или потому, что они имеет общие значения атрибутов, например {{htmlattrxref("lang")}}.</span> Он должен быть использован только когда нет другого подходящего по семантике элемента. <code><span></code> очень похож на элемент {{HTMLElement("div")}}, но {{HTMLElement("div")}} является <a href="/ru/docs/Web/HTML/Block-level_elements">блочным</a> элементом, в то время как <code><span></code> является <a href="/ru/docs/Web/HTML/Строчные_Элементы">строчным</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый</a> или <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый</a> контент в качестве содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLSpanElement")}} (до {{glossary("HTML5")}}, интерфейсом был {{domxref("HTMLElement")}})</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Пример_1">Пример 1</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; gutter:false"><p><span>Какой-нибудь текст</span></p></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример_1')}}</p> + +<h2 id="Пример_2">Пример 2</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush:html;gutter:false"><li><span> + <a href="portfolio.html" target="_blank">Посмотреть мое портфолио</a> +</span></li> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li span { + background: gold; + } +</pre> + +<h3 id="Результат_2">Результат</h3> + +<p>{{EmbedLiveSample('Пример_2')}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{glossary("DOM")}}-интерфейс теперь {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>HTML-элемент {{HTMLElement("div")}}</li> +</ul> diff --git a/files/ru/web/html/element/strong/index.html b/files/ru/web/html/element/strong/index.html new file mode 100644 index 0000000000..a1fffd37c6 --- /dev/null +++ b/files/ru/web/html/element/strong/index.html @@ -0,0 +1,135 @@ +--- +title: <strong> +slug: Web/HTML/Element/strong +tags: + - HTML + - HTML текстовая семантика + - strong + - Важное значение + - Веб + - Острая необходимость + - Справка + - Элемент +translation_of: Web/HTML/Element/strong +--- +<p id="Summary"><span class="seoSummary">Элемент <strong>сильной значимости</strong> (<strong><code><strong></code>)</strong> указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Потоковой контент</a>, <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>, явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешенный контент</th> + <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Опускание тегов</th> + <td>Нет, должен иметь как начальный тег, так и конечный тег.</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">фразовый контент</a>, или любой другой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">потоковой контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA-роли</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p> + +<h2 id="Замечания_по_использованию">Замечания по использованию</h2> + +<p>Элемент <code><strong></code> предназначен для контента, который имеет "большое значение", включая вещи большой серьезности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.</p> + +<p>Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойсто CSS {{cssxref("font-weight")}} для этой цели. Используйте элемент {{HTMLElement("b")}}, чтобы привлечь внимание к определенному тексту без указания более высокого уровня важности. Испоьзуйте элемент {{HTMLElement("em")}} element для выделения текста, который имеет выраженный акцент.</p> + +<p>Другим приемлемым использованием для <code><strong></code> является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.</p> + +<h3 id="<b>_против_<strong>"><b> против <strong></h3> + +<p>Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. {{HTMLElement("b")}} и <code><strong></code> возможно, является одним из наиболее распространенных источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <code><b></code> или <code><strong></code>? Разве они не делают одно и тоже?»</p> + +<p>Не совсем. Элемент <code><strong></code> для контента, который имеет большее значение, в то время как элемент <code><b></code> используется для привлечения внимания к тексту, не указывая на то, что это более важно.</p> + +<p>Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчеркивают <code><strong></code>). Каждый элемент предназначен для использования в определенных типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS {{cssxref("font-weight")}}.</p> + +<p>Предполагаемое значение или цель прилагаемого текста должно быть тем, что определяет, какой элемент вы используете. Значение общения - вот что такое семантика.</p> + +<h3 id="<em>_против_<strong>"><em> против <strong></h3> + +<p>Добавление к путанице заключается в том, что, хотя HTML 4 определяет <code><strong></code> как просто указывающий на более сильный акцент, HTML 5 определяет <code><strong></code> как представляющий "большое значение для его содержимого". Это важное различие.</p> + +<p>В то время, как <code><em></code> используется для изменения значения предложения, поскольку делается устный акцент ("Я <em>люблю</em> морковь" против "Я люблю<em>морковь</em>"), <code><strong></code> используется, для придания предложению порции особого значения (например, "<strong>Предупреждение!</strong> Это <strong>очень опасно.</strong>") Оба элемента <code><strong></code> и <code><em></code> могут быть вложены для увеличения относительной степени важности или усиленого акцента, соответственно.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Основной_пример">Основной пример</h3> + +<pre class="brush: html notranslate"><p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p></pre> + +<p>Результат:</p> + +<p>{{EmbedLiveSample("Основной_пример", 650, 80)}}</p> + +<h3 id="Маркировочные_предупреждения">Маркировочные предупреждения</h3> + +<pre class="brush: html notranslate"><p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p></pre> + +<p>Это приведет к:</p> + +<p>{{EmbedLiveSample("Маркировочные_предупреждения", 650, 80)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам пулл-реквест.</div> + +<p>{{Compat("html.elements.strong")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("b")}}</li> + <li>Элемент {{HTMLElement("em")}}</li> + <li>Элемент {{cssxref("font-weight")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/style/index.html b/files/ru/web/html/element/style/index.html new file mode 100644 index 0000000000..f3ed7c9f53 --- /dev/null +++ b/files/ru/web/html/element/style/index.html @@ -0,0 +1,174 @@ +--- +title: style +slug: Web/HTML/Element/style +tags: + - HTML + - Reference + - Référence(2) + - Веб + - метаданные документа HTML + - элементы +translation_of: Web/HTML/Element/style +--- +<h2 id="Summary" name="Summary">Краткое описание</h2> + +<p><em>HTML-элемент <strong><style></strong></em> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на <a href="/ru/docs/Web/CSS">CSS</a>.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/ru/docs/HTML/Content_categories">Категории содержимого</a></dfn><a href="/ru/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, and if the <code>scoped</code> attribute is present: <a href="/ru/docs/Web/HTML/Content_categories#Flow_content">flow content </a>.</li> + <li><dfn>Permitted content</dfn> Style information matching the language of the <code>type</code> attribute.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Допустимые родительские элементы</dfn> ...</li> + <li><dfn>Интерфейс DOM</dfn> {{domxref("HTMLStyleElement")}}</li> +</ul> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>This element includes the <a href="/ru/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «<code>text/css</code>».</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>К какому виду медиа должен применяться этот стиль. Значение этого атрибута — <a href="/ru/docs/Web/Guide/CSS/Media_queries">media query</a>, которое при отсутствии атрибута будет <code>all</code>.</dd> + <dt>{{htmlattrdef("scoped")}}</dt> + <dd>Если указан этот атрибут, то стиль применяется только внутри своего родительского элемента. Если не указан, то стиль применяется ко всему документу.</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>Specifies alternative style sheet sets.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>If set, disables (does not apply) the style rules, specified within the element, to the {{domxref("document","Document")}}.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Простая_таблица_стилей">Простая таблица стилей</h3> + +<pre class="brush:html"><style type="text/css"> +body { + color:red; +} +</style> +</pre> + +<h3 id="Таблица_стилей_с_ограниченной_областью_действия">Таблица стилей с ограниченной областью действия</h3> + +<pre class="brush:html;highlight:7"><article> + <div>Атрибут scoped позволяет включить элементы стиля в середине документа. + Внутренние правила применяются только внутри родительского элемента.</div> + <p>Этот текст должен быть чёрным. Если он красный, ваш браузер не поддерживает атрибут scoped.</p> + <section> + <style scoped> + p { color: red; } + </style> + <p>Этот должен быть красным.</p> + </section> +</article> +</pre> + +<h4 id="Live_sample" name="Live_sample">Live sample</h4> + +<div>{{ EmbedLiveSample('Таблица_стилей_с_ограниченной_областью_действия', '100%', '200') }}</div> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Нет отличий от {{ SpecName('HTML5 W3C') }}.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Добавлен атрибут <code>scoped</code></td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>20 <span style="color: #4d4e53;">[1]</span></td> + <td>{{CompatGeckoDesktop(21.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(25.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Поддерживается в Chrome с 20+ по 34 при включённом флаге "<strong>Enable <style scoped></strong>" или "<strong>experimental WebKit features</strong>" в chrome://flags. <a href="https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/scoped/blink-dev/R1x18ZLS5qQ/Bjuh_cENhlQJ">Удалён в Chrome 35+ из-за сложности кода</a>.<br> + [2] Gecko 20 и более новые реализуют псевдо-классы :scope, но должна быть включена настройка layout.css.scope-pseudo.enabled. This is only the case by default in Nightly and Aurora test versions.</p> + +<h2 id="See_also" name="See_also">См. также</h2> + +<ul> + <li>Элемент {{HTMLElement("link")}}, позволяющий использовать внешние таблицы стилей.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/summary/index.html b/files/ru/web/html/element/summary/index.html new file mode 100644 index 0000000000..44df57ef35 --- /dev/null +++ b/files/ru/web/html/element/summary/index.html @@ -0,0 +1,146 @@ +--- +title: '<summary>: The Disclosure Summary element' +slug: Web/HTML/Element/summary +translation_of: Web/HTML/Element/summary +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML Disclosure Summary element</strong> (<strong><code><summary></code></strong>) element specifies a summary, caption, or legend for a {{HTMLElement("details")}} element's disclosure box.</span> Clicking the <code><summary></code> element toggles the state of the parent <code><details></code> element open and closed.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>The {{HTMLElement("details")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("button")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<h2 id="Примечания">Примечания</h2> + +<p>Содержимым элемента <code><summary></code> может быть любой заголовок, простой текст или HTML, которые можно использовать в абзаце.</p> + +<p>Элемент <code><summary></code> может быть использован в качестве потомка элемента <code><details></code> . Когда пользователь кликает по элементу summary, его родитель - <code><details></code> меняет состояние с раскрытого или закрытого на обратное,и тогда {{event("toggle")}} event is sent to the <code><details></code> element, which can be used to let you know when this state change occurs.</p> + +<h3 id="Default_label_text">Default label text</h3> + +<p>If a <code><details></code> element's first child is not a <code><summary></code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p> + +<h3 id="Default_style">Default style</h3> + +<p>Per the HTML specification, the default style for <code><summary></code> elements includes <code>display: list-item</code>. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.</p> + +<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p> + +<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Below are some examples showing <code><summary></code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p> + +<h3 id="Простой_пример">Простой пример</h3> + +<p>A simple example showing the use of <code><summary></code> in a {{HTMLElement("details")}} element:</p> + +<pre class="brush: html"><details open> + <summary>Overview</summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p> + +<h3 id="Summaries_as_headings">Summaries as headings</h3> + +<p>You can use heading elements in <code><summary></code>, like this:</p> + +<pre class="brush: html"><details open> + <summary><h4>Overview</h4></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p> + +<p>This currently has some spacing issues that could be addressed using CSS.</p> + +<h3 id="HTML_in_summaries">HTML in summaries</h3> + +<p>This example adds some semantics to the <code><summary></code> element to indicate the label as important:</p> + +<pre class="brush: html"><details open> + <summary><strong>Overview</strong></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.summary")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("details")}}</li> +</ul> diff --git a/files/ru/web/html/element/td/index.html b/files/ru/web/html/element/td/index.html new file mode 100644 index 0000000000..b32c32037d --- /dev/null +++ b/files/ru/web/html/element/td/index.html @@ -0,0 +1,205 @@ +--- +title: '<td>: элемент ячейки таблицы данных' +slug: Web/HTML/Element/td +translation_of: Web/HTML/Element/td +--- +<p><strong>HTML элемент <code><td></code></strong> определяет ячейку таблицы которая содержит данные. Участвует в <em>табличной модели</em>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категория контента</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Допустимое содержимое</th> + <td>Содержимое поток.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Начальный тег обязательный.<br> + Закрывающий тег может быть пропущен, если сразу за ним следует элемент {{HTMLElement("th")}} или {{HTMLElement("td")}}, или если больше нет данных в его родительском элементе.</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Элемент {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLTableDataCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент содержит <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt> + <dd>Этот аргумент содержит краткое описание содержимого в ячейке. Некотрые устройства для чтения могут подставлять это описание перед самим содержимым ячейки. + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, поскольку он устарел в последнем стандарте. Вместо этого рассмотрите возможность использования атрибута <strong>title</strong>.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Это перечисляемый атрибут указывает каким будет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения: + <ul> + <li><code>left</code>, выравнивание содержимого слева ячейки</li> + <li><code>center</code>, центрирвание контента в ячейке</li> + <li><code>right</code>, выравнивание контента справа ячейки</li> + <li><code>justify</code>, вставляет пробелы в текстовое содержимое ячейки, чтобы содержимое заняло ячейку</li> + <li><code>char</code>, выравнивает текстовое содержимое по заданному символу с минимальным смещением, определяется атрибутами {{htmlattrxref("char", "td")}} и {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Если этот атрибут не задан, значение по умолчанию <code>left</code>.</p> + + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта. + + <ul> + <li>Чтобы добиться такого же эффекта как при <code>left</code>, <code>center</code>, <code>right</code> или <code>justify</code> значениях, используйте их как параметры CSS свойства {{cssxref("text-align")}}.</li> + <li>Чтобы добиться эффеккта как <code>char</code> значение в CSS3, вы можете использовать значение {{htmlattrxref("char", "td")}} как значение свойства {{cssxref("text-align")}} {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>Этот атрибут включает список строк разделенных пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок. + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут {{htmlattrxref("scope", "td")}}.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Этот атрибут определяет цвет фона ячейки. Значением задается 6-значными шестнадцатиричными кодами как определено в <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, с префиксом '#'. Можно также использовать предопределенные цветовые строки, например: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Примечание использования:</strong> Не ипользуйте этот атрибут, поскольку он нестандартный: элемент {{HTMLElement("td")}} должен быть стилизован с помощью <a href="/en-US/docs/CSS">CSS</a>. Чтобы получить аналогичный эффект как атрибут <strong>bgcolor</strong>, используйте <a href="/en-US/docs/Web/CSS">CSS</a> свойство {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Этот атрибут используется для определения символа по которому происходит выравнивание в ячейке. Типичный случай когда для него задают значение периода (.) когда необходимо выровнять числовые или денежные значеия. Если {{htmlattrxref("align", "td")}} не задан. то атрибут <code>char</code> игнорируется. + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, тк он устарел (и больше не поддерживется) в последней версии стандарта. Достигнуть такого же эффекта как от {{htmlattrxref("char", "thead")}}, в CSS3 вы можете you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Этот атрибут атрибут включает количество символов на которое смещаются при выравнивании данные от установленного <strong>char</strong> атрибута. + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта.</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно <code>1</code>. Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>Этот атрибут содержит список срок разделенных пробелами, каждая соответствует <strong>id</strong> атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>Этот атрибут содержит положительное целое число указывающее какое количество строк необходимо объеденить. По умолчанию значение равно<code>1</code>; Если его значение <code>0</code>, тогда его действие распространяется до конца табличной секции ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.</dd> + <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt> + <dd> </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Этот атрибут определяет вертикальное выравнивание текста в ячейке. Возможные значения атрибута: + <ul> + <li><code>baseline</code>, поместит текст ближе к нижней части ячейки, но выровняет его по <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">базовой линии</a> символов, а не нижней линии. Если все символы одного размера, тогда имеет такой же эффект как <code>bottom</code>.</li> + <li><code>bottom</code>, поместит текст как можно ближе к нижней части ячейки</li> + <li><code>middle</code>, выравнивает текст по центру ячейки</li> + <li>и <code>top</code>, который будет выравнивать текст как можно ближе к верхней части ячейки.</li> + </ul> + + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS свойство {{cssxref("vertical-align")}}.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Этот атрибут устанавливает рекомендуемую ширину ячейки. Свойства <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> и <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> могут добавить дополнительное пространство и ширина элемента {{HTMLElement("col")}} может иметь некоторый эффект. Обычно если ширина столбца слишком узкая чтобы показать конкретную ячейку должным образом, она может быть расширена при отображении. + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS свойство {{cssxref("width")}}.</div> + </dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p>Смотрите страницу {{HTMLElement("table")}} с примерами <code><td></code>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.elements.td")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие табличные HTML элементы: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html new file mode 100644 index 0000000000..7b45766c33 --- /dev/null +++ b/files/ru/web/html/element/template/index.html @@ -0,0 +1,156 @@ +--- +title: <template> +slug: Web/HTML/Element/template +tags: + - Элемент +translation_of: Web/HTML/Element/template +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML элемент контент шаблона <code><template></code></strong> - это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.</span></p> + +<p>Шаблон можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <code><template></code> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting element</a></td> + </tr> + <tr> + <th scope="row">Допустимый контент</th> + <td>Нет ограничений</td> + </tr> + <tr> + <th scope="row">Закрывающий тег</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешенные родители</th> + <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, or <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. Also allowed as a child of a {{HTMLElement("colgroup")}} element that does <em>not</em> have a {{htmlattrxref("span", "colgroup")}} attribute.</td> + </tr> + <tr> + <th scope="row">Неявные роли ARIA</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Отсутствует</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p> + +<p>Также есть доступный только для чтения атрибут <code>content</code>, который предоставляет доступ к содержимому шаблона. Проверка на наличие этого атрибута является распространённым способом определить, поддерживает ли браузер элемент <code><template></code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Начнём с HTML.</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- existing data could optionally be included here --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>Для начала у нас есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы</p> + +<p>Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.</p> + +<pre class="brush:js;">// Проверяем поддерживает ли браузер тег <template> +// проверив наличие аттрибута content у элемента template +if ('content' in document.createElement('template')) { + + // Instantiate the table with the existing HTML tbody and the row with the template + var t = document.querySelector('#productrow'), + td = t.content.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + // клонируем новую строку и вставляем её в таблицу + var tb = document.getElementsByTagName("tbody"); + var clone = document.importNode(t.content, true); + tb[0].appendChild(clone); + + // создаём новую строку + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // клонируем новую строку и вставляем её в таблицу + var clone2 = document.importNode(t.content, true); + tb[0].appendChild(clone2); + +} else { + // необходимо найти другой способ добавить строку в таблицу т.к. + // тег <template> не поддерживатся браузером +} +</pre> + +<p>Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("Example", 500, 120)}}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + + + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Веб компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li> + <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li> +</ul> diff --git a/files/ru/web/html/element/tfoot/index.html b/files/ru/web/html/element/tfoot/index.html new file mode 100644 index 0000000000..3f5d5fbf5c --- /dev/null +++ b/files/ru/web/html/element/tfoot/index.html @@ -0,0 +1,273 @@ +--- +title: <tfoot> +slug: Web/HTML/Element/tfoot +tags: + - HTML + - Tables + - Web +translation_of: Web/HTML/Element/tfoot +--- +<p id="Summary"><em>HTML </em>элемент подвала таблицы (<code><tfoot></code>) определяющий набор строк суммирующих столбцы таблицы.</p> + +<h2 id="Используемый_контекст">Используемый контекст</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td> + <td>None.</td> + </tr> + <tr> + <td>Допустимое содержание</td> + <td>Ноль или более {{ HTMLElement("tr") }} элементов.</td> + </tr> + <tr> + <td>Tag omission</td> + <td>The <span title="syntax-start-tag">start tag</span> is mandatory. The end tag may be omitted if the {{ HTMLElement("tbody") }} element is immediately followed by an, eventually implicitly-defined, {{ HTMLElement("tbody") }}, or if there is no more content in the parent {{ HTMLElement("table") }} element.</td> + </tr> + <tr> + <td>Разрешенные родительские элементы</td> + <td> A {{ HTMLElement("table") }} element. The {{ HTMLElement("tfoot") }} must appear after any {{ HTMLElement("caption") }}, {{ HTMLElement("colgroup") }} or {{ HTMLElement("thead") }} element. It can be before or after all {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} elements, but not intermixed with them.<br> + {{ HTMLVersionInline("4") }} The {{ HTMLElement("tfoot") }} element cannot be placed after any {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} element. This restriction has been softened in HTML5.</td> + </tr> + <tr> + <td>Нормативные документы</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tfoot-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tfoot-element">HTML5, section 4.9.7</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3" title="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3">HTML4.01, section 11.2.3</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p><span style="line-height: 21px;">Этот элемент включает в себя </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt> + <dd>Этот атрибут определяет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения: + <ul> + <li><span style="font-family: courier new;">left</span>, выравнивание содержимого по левому краю ячейки</li> + <li><span style="font-family: courier new;">center</span>, выравнивание содержимого по центру ячейки</li> + <li><span style="font-family: courier new;">right</span>, выравнивание содержимого по правому краю ячейки</li> + <li><span style="font-family: courier new;">justify</span>, выравнивание по ширине ячейки: добавление пробелов к тексту содержимого ячейки до тех пор, пока содержимое не выровняется от одного края ячейки до другого</li> + <li><span style="font-family: courier new;">char</span>, выравнивание текстового содержимого по специальному символу с минимальным смещением, определенным {{ htmlattrxref("char", "tbody") }} и {{ htmlattrxref("charoff", "tbody") }} аттрибутами {{ unimplemented_inline("2212") }}.</li> + </ul> + + <p>Если этот аттрибут не задан, то значением по умолчанию является <span style="font-family: courier new;">left</span>.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li> + <li>To achieve the same effect as the <span style="font-family: courier new;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "tfoot") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt> + <dd>Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шеснадцатиричного кода определенного в <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, предваряется '#'. Может быть использован один из шестнадцати предопределенных строк: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">black</span> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">green</span> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">silver</span> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">gray</span> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">olive</span> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">white</span> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">maroon</span> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">navy</span> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">red</span> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">purple</span> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">teal</span> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">fuchsia</span> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{ HTMLElement("tfoot") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "tfoot") }} is not set to <span style="font-family: courier new;">char</span>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "tbtfootody") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "tfoot") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt> + <dd>Этот атрибут задает вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута: + <ul> + <li><span style="font-family: courier new;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: courier new;">bottom</span>.</li> + <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><span style="font-family: courier new;">middle</span>, which will center the text in the cell;</li> + <li>and <span style="font-family: courier new;">top</span>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div> + </dd> +</dl> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Этот элемент реализует интерфейс <code><a href="/en/docs/Web/API/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Пожалуйста обратитесь к странице {{ HTMLElement("table") }} для примера <code><tfoot></code>.</p> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: courier new;"><tfoot></span> element: + <ul> + <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/time/index.html b/files/ru/web/html/element/time/index.html new file mode 100644 index 0000000000..2eaeff5f33 --- /dev/null +++ b/files/ru/web/html/element/time/index.html @@ -0,0 +1,162 @@ +--- +title: <time> +slug: Web/HTML/Element/time +translation_of: Web/HTML/Element/time +--- +<p><strong>Элемент HTML</strong> <strong><code><time></code></strong> используется для представления либо времени в 24-рехчасовом формате, либо точной даты по <a class="external" href="http://ru.wikipedia.org/wiki/%D0%93%D1%80%D0%B8%D0%B3%D0%BE%D1%80%D0%B8%D0%B0%D0%BD%D1%81%D0%BA%D0%B8%D0%B9_%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C" title="http://ru.wikipedia.org/wiki/Григорианский_календарь">Григорианскому календарю</a> (с опциональным указанием времени и часового пояса).</p> + +<p>Этот элемент предназначен для представления дат и времени в машиночитаемом формате. Это облегчает клиентским приложениям добавление событий в календарь пользователя. </p> + +<div class="note"><strong>Замечание по применению: </strong>Этот элемент неуместно использовать, когда точная дата не определена, а также при использовании дат ранее введения Григорианского календаря (из-за проблем с работой с такими датами).</div> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td> + </tr> + <tr> + <th>Разрешённый контент</th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th>Разрешённые родители</th> + <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th>Разрешённые ARIA роли</th> + <td>Любые</td> + </tr> + <tr> + <th>DOM-интерфейс</th> + <td>{{domxref("HTMLTimeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Как и все другие элементы HTML, этот элемент поддерживает <a href="/ru/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Этот атрибут специфицирует время и дату и должен быть <a class="external" href="https://www.w3.org/TR/html/infrastructure.html#dates-and-times" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">допустимой датой с возможным дополнительным указанием времени</a>. Если значение элемента не может быть распознано как дата с возможным дополнительным указанием времени, элементу не будет сопоставлен временной срез (timestamp).</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Simple_example" name="Simple_example">Простой пример</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Концерт начинается в <time>20:00</time>.</p> +</pre> + +<h4 id="Output" name="Output">Вывод</h4> + +<p>{{ EmbedLiveSample('Simple_example', 250, 60) }}</p> + +<h3 id="Datetime_example" name="Datetime_example">пример <code>datetime</code></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Концерт состоялся <time datetime="2001-05-15 19:00">15 мая</time>.</p> +</pre> + +<h4 id="Вывод">Вывод</h4> + +<p>{{ EmbedLiveSample('Datetime_example', 250, 60) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Неизменен с {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Нет изменений с {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Первое появление</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Опция</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>33.0</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>9.0</td> + <td>22.0</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Опция</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>2.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>10.0</td> + <td>11.50<br> + Removed in 15.0</td> + <td>4.0-4.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>The {{HTMLElement("data")}} элемент, позволяющий обозначать другие типы данных.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/title/index.html b/files/ru/web/html/element/title/index.html new file mode 100644 index 0000000000..32c1165044 --- /dev/null +++ b/files/ru/web/html/element/title/index.html @@ -0,0 +1,140 @@ +--- +title: '<title>: элемент заголовка документа' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - Title + - Web + - Веб + - Заголовок вкладки + - Заголовок окна + - Заголовок страницы + - Имя вкладки + - Имя окна + - Имя страницы + - Справка + - Элемент + - метаданные + - метаданные документа HTML +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент заголовка</strong> (<strong><code><title></code></strong>) определяет заголовок документа, который отображается в заголовке окна {{glossary("Browser", "браузера")}} или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Текст, который не является межэлементным {{glossary("Whitespace", "разделителем")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие <code></title></code> заставляет браузер игнорировать остальную часть страницы.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Элемент {{ HTMLElement("head") }}, который не содержит других элементов {{ HTMLElement("title") }}.</td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td>Отсутствуют.</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<h2 id="Примечание">Примечание</h2> + +<p>Элемент <code><title></code> всегда используется внутри блока {{HTMLElement("head")}}.</p> + +<h3 id="Заголовок_страницы_и_SEO">Заголовок страницы и SEO</h3> + +<p>Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации ({{glossary("SEO")}}). Как правило, более длинный описательный заголовок будет лучше ранжироваться ({{glossary("Ranking")}}), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приемом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.</p> + +<p>Несколько методических рекомендаций и советов для составления хороших заголовков:</p> + +<ul> + <li>избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;</li> + <li>поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;</li> + <li>избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, "<" часто отображается в строке заголовка окна как "&lt;" - символ-мнемоника "меньше" в HTML ({{Glossary("entity")}});</li> + <li>не используйте ключевые слова ("keyword blobs"). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;</li> + <li>убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><title>Потрясающий заголовок страницы</title> +</pre> + +<p>Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как "Потрясающий заголовок страницы".</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Важно указать такое значение <code>title</code>, которое описывает назначение страницы.</p> + +<p>Обычная техника навигации для пользователей вспомогательных технологий - прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения ее содержимого может занять время и, возможно, привести к путанице.</p> + +<h3 id="Пример_2">Пример</h3> + +<pre><title>Меню - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!</title> +</pre> + +<p>Для того чтобы помочь пользователю, обновите значение <code>title</code>, чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).</p> + +<h3 id="Пример_3">Пример</h3> + +<pre><title>2 ошибки - Ваш заказ - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!</title> +</pre> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</p> + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/ru/web/html/element/track/index.html b/files/ru/web/html/element/track/index.html new file mode 100644 index 0000000000..d9d7f801d6 --- /dev/null +++ b/files/ru/web/html/element/track/index.html @@ -0,0 +1,179 @@ +--- +title: '<track>: Встраиваемая текстовая дорожка' +slug: Web/HTML/Element/track +tags: + - Element + - HTML + - HTML embedded content + - HTML5 + - Multimedia + - Reference + - TextTrack + - Web + - Веб + - Справка + - Элемент +translation_of: Web/HTML/Element/track +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><track></code> </strong> используется как дочерний элемент медиа-элементов {{HTMLElement("audio")}} and {{HTMLElement("video")}}. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют <a href="/ru/docs/Web/API/WebVTT_API">формат WebVTT</a> (<code>.vtt</code> файлы) — Web Video Text Tracks или <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language (TTML).</a></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div> + +<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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Нет, это {{Glossary("empty element", "пустой элемент")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Так как это пустой элемент, то открывающий тег обязателен, закрывающего не должно быть.</td> + </tr> + <tr> + <th scope="row">Неявная ARIA-роль</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Медиа элемент, перед любым <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9F%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">потоковым контентом</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLTrackElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент использует <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("default")}}</dt> + <dd>Этот атрибут указывает, что дорожка должна быть включена, если пользовательские настройки не указывают, что другая дорожка является более подходящей. Может использоваться только для одного элемента <code>track</code> в элементе мультимедиа.</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>Как текстовый трек должен быть использован. Если значение опущено, тип по умолчанию — <code>subtitles</code> (субтитры). Если атрибут отсутствует, будет использоваться <code>subtitles</code>. Если атрибут содержит недопустимое значение, оно принимает значение <code>metadata</code>. (Версии Chrome ранее 52 рассматривали недопустимое значение как <code>subtitles</code>.) Допускаются следующие ключевые слова: + <ul> + <li><code>subtitles</code> + <ul> + <li>Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.</li> + <li>Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звездных войн» или дата, время и место действия сцены.</li> + </ul> + </li> + <li><code>captions</code> + <ul> + <li>Подписи обеспечивают транскрипцию и, возможно, перевод аудио.</li> + <li>Подписи могут включать важную невербальную информацию, такую как музыкальные сигналы или звуковые эффекты. Возможно указывать источник сигналов (например, музыка, текст, персонаж).</li> + <li>Подходит для пользователей со слабым слухом или когда звук отключен.</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>Текстовое описание видеоконтента.</li> + <li>Подходит для слепых пользователей или там, где видео не видно.</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>Названия глав предназначены для использования при навигации по медиа-ресурсу.</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>Данные, используемые скриптами. Не видны пользователю.</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Видимый пользователю заголовок текстовой дорожки, который используется браузером при выводе списка доступных текстовых дорожек.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Адрес файла текстовой дорожки (<code>.vtt</code> файл). Должен быть действительным URL. Этот атрибут должен быть указан, а его значение URL должно иметь то же происхождение, что и документ — исключая случаи, когда родительский {{HTMLElement("audio")}} или {{HTMLElement("video")}} данного <code>track</code> элемента имеет атрибут <code><a href="/ru/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>.</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>Язык текстовых данных трека. Это должен быть валидный <a href="https://r12a.github.io/app-subtags/">BCP 47</a> языковой тег (см. также <a href="https://www.w3.org/International/articles/language-tags/">языковые тэги в HTML и XML)</a>. Если для атрибута <code>kind</code> установлено значение <code>subtitles</code>, должен быть определён атрибут <code>srclang</code>.</dd> +</dl> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<h3 id="Типы_данных_дорожки">Типы данных дорожки</h3> + +<p>Тип данных, которые трек добавляет на носитель, задается в атрибуте <code>kind</code>, который может принимать значения <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> или <code>metadata</code>. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.</p> + +<p>Отдельный <code>media</code> элемент не может иметь элементы <code>track</code> с одинаковыми значениями <code>kind</code>, <code>srclang</code> и <code>label</code>.</p> + +<h3 id="Обнаружение_изменений_сигнала">Обнаружение изменений сигнала</h3> + +<p>{{page("/ru/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html notranslate"><video controls poster="/images/sample.gif"> + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="sampleChapters.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> + <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> + <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Fallback --> + ... +</video> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.track")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li><a href="/ru/docs/Web/API/WebVTT_API">WebVTT — формат файлов текстовой дорожки</a></li> + <li>{{domxref("HTMLMediaElement.textTracks")}}</li> +</ul> diff --git a/files/ru/web/html/element/u/index.html b/files/ru/web/html/element/u/index.html new file mode 100644 index 0000000000..814e23532f --- /dev/null +++ b/files/ru/web/html/element/u/index.html @@ -0,0 +1,200 @@ +--- +title: '<u>: Элемент слабой аннотации (подчеркивание)' +slug: Web/HTML/Element/u +translation_of: Web/HTML/Element/u +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The HTML <strong>Unarticulated Annotation Element</strong> (<strong><code><u></code></strong>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.</span> This is rendered by default as a simple solid underline, but may be altered using CSS.</p> + +<div class="warning"> +<p>This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS {{cssxref("text-decoration")}} property set to <code>underline</code>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> + + + +<p>See the {{anch("Usage notes")}} section for further details on when it's appropriate to use <code><u></code> and when it isn't.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Аттрибуты">Аттрибуты</h2> + +<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Использование">Использование</h2> + +<p>Along with other pure styling elements, the original HTML Underline (<code><u></code>) element was deprecated in HTML 4; however, <code><u></code> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.</p> + +<div class="note"> +<p>Be careful to avoid using the <code><u></code> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.</p> +</div> + +<h3 id="Use_cases">Use cases</h3> + +<p>Valid use cases for the <code><u></code> element include annotating spelling errors, applying a {{interwiki("wikipedia", "proper name mark")}} to denote proper names in Chinese text, and other forms of annotation.</p> + +<p>You should <em>not</em> use <code><u></code> to simply underline text for presentation purposes, or to denote titles of books.</p> + +<h3 id="Other_elements_to_consider_using">Other elements to consider using</h3> + +<p>In most cases, you should use an element other than <code><u></code>, such as:</p> + +<ul> + <li>{{HTMLElement("em")}} to denote stress emphasis</li> + <li>{{HTMLElement("b")}} to draw attention to text</li> + <li>{{HTMLElement("mark")}} to mark key words or phrases</li> + <li>{{HTMLElement("strong")}} to indicate that text has strong importance</li> + <li>{{HTMLElement("cite")}} to mark the titles of books or other publications</li> + <li>{{HTMLElement("i")}} to denote technical terms, transliterations, thoughts, or names of vessels in Western texts</li> +</ul> + +<p>To provide textual annotations (as opposed to the non-textual annotations created with <code><u></code>), use the {{HTMLElement("ruby")}} element.</p> + +<p>To apply an underlined appearance without any semantic meaning, use the {{cssxref("text-decoration")}} property's value <code>underline</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Indicating_a_spelling_error">Indicating a spelling error</h3> + +<p>This example uses the <code><u></code> element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>This paragraph includes a <u class="spelling">wrnogly</u> +spelled word.</p></pre> + +<p>In the HTML, we see the use of <code><u></code> with a class, <code>spelling</code>, which is used to indicate the misspelling of the word "wrongly".</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">u.spelling { + text-decoration: red wavy underline; +}</pre> + +<p>This CSS indicates that when the <code><u></code> element is styled with the class <code>spelling</code>, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using <code>red dashed underline</code>.</p> + +<h4 id="Result">Result</h4> + +<p>The result should be familiar to anyone who has used any of the more popular word processors available today.</p> + +<p>{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}</p> + +<h3 id="Avoiding_<u>">Avoiding <u></h3> + +<p>Most of the time, you actually don't want to use <code><u></code>. Here are some examples that show what you should do instead in several cases.</p> + +<h4 id="Non-semantic_underlines">Non-semantic underlines</h4> + +<p>To underline text without implying any semantic meaning, use a {{HTMLElement("span")}} element with the {{cssxref("text-decoration")}} property set to <code>"underline"</code>, as shown below.</p> + +<h5 id="HTML_2">HTML</h5> + +<pre class="brush: html"><span class="underline">Today's Special</span> +<br> +Chicken Noodle Soup With Carrots</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css">.underline { + text-decoration: underline; +}</pre> + +<h5 id="Result_2">Result</h5> + +<p>{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}</p> + +<h4 id="Presenting_a_book_title">Presenting a book title</h4> + +<div id="example-unstyled-cite"> +<p>Book titles should be presented using the {{HTMLElement("cite")}} element instead of <code><u></code> or even <code><i></code>.</p> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html"><p>The class read <cite>Moby Dick</cite> in the first term.</p></pre> + +<h5 id="Result_with_default_style">Result with default style</h5> + +<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> +</div> + +<p>Note that the default styling for the <code><cite></code> element renders the text in italics. You can, if you wish, override that using CSS:</p> + +<pre class="brush: css">cite { + font-style: normal; + text-decoration: underline; +}</pre> + +<h5 id="Result_with_custom_style">Result with custom style</h5> + +<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.u")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>The {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, and {{HTMLElement("cite")}} elements should usuallly be used instead.</li> + <li>The CSS {{cssxref("text-decoration")}} property should be used for non-semantic underlining.</li> +</ul> diff --git a/files/ru/web/html/element/ul/index.html b/files/ru/web/html/element/ul/index.html new file mode 100644 index 0000000000..08d5c01b00 --- /dev/null +++ b/files/ru/web/html/element/ul/index.html @@ -0,0 +1,186 @@ +--- +title: '<ul>: The Unordered List element' +slug: Web/HTML/Element/ul +translation_of: Web/HTML/Element/ul +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><ul></code> </strong>используется для неупорядоченного списка - в частности для маркированного списка.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div> + +<p class="hidden">Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, и если дочерний элемент <code><ol></code> включает в себя хотя бы один элемент {{HTMLElement("li")}}, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">явный контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Ноль или больше {{ HTMLElement("li") }} элементов, содержат вложенные элементы {{ HTMLElement("ol") }} или {{ HTMLElement("ul") }}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент, который принимает <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">основной поток</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Свойства">Свойства</h2> + +<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt> + <dd>Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от {{glossary("user agent")}} и не работает со всеми браузерами.</dd> + <dd> + <div class="warning"><strong>Предупреждение:</strong> Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте <a href="/en-US/docs/CSS">CSS</a>. Для схожего эффекта с <code>compact</code>, подойдёт свойство CSS {{cssxref("line-height")}} с значением <code>80%</code>.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt> + <dd>Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под <a href="/en-US/docs/HTML3.2">HTML3.2</a> и переходными на <a href="/en-US/docs/HTML4.01">HTML 4.0/4.01</a> явлются: + <ul> + <li><code>circle</code></li> + <li><code>disc</code></li> + <li><code>square</code></li> + </ul> + + <p>Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: <code>triangle</code>.</p> + + <p>Если данный атрибут отсутсвует и если атрибут <a href="/en-US/docs/CSS">CSS</a> {{ cssxref("list-style-type") }} не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.</p> + + <div class="warning"><strong>Предупреждение:</strong> Не используйте атот атрибут, ибо он устаревший; используйте свойство <a href="/en-US/docs/Web/CSS">CSS</a> {{ cssxref("list-style-type") }}.</div> + </dd> +</dl> + +<h2 id="Заметки_об_использовании">Заметки об использовании</h2> + +<ul> + <li>Элемент <code><ul></code> используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, неупорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS, используя свойство {{ cssxref("list-style-type") }}.</li> + <li>Элементы <code><ul></code> и {{HTMLElement("ol")}} могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <code><ol></code> и <code><ul></code> без ограничений.</li> + <li>Элементы {{ HTMLElement("ol") }} и <code><ul></code> используются для списков. Различие лишь в том, что в элементе {{ HTMLElement("ol") }} порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент {{ HTMLElement("ol") }}, в противном случае используйте <code><ul></code>.</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_список">Простой список</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p> + +<h3 id="Вложенный_список">Вложенный список</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item + <!-- Look, the closing </li> tag is not placed here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem + <!-- Same for the second nested unordered list! --> + <ul> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> <!-- Closing </li> tag for the li that + contains the third unordered list --> + <li>second item third subitem</li> + </ul> + <!-- Here is the closing </li> tag --> + </li> + <li>third item</li> +</ul></pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Nesting_a_list", 400, 220)}}</p> + +<h3 id="Упорядоченный_список_внутри_неупорядоченного_списка">Упорядоченный список внутри неупорядоченного списка</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item + <!-- Look, the closing </li> tag is not placed here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + <!-- Here is the closing </li> tag --> + </li> + <li>third item</li> +</ul> +</pre> + +<p>Результат HTML кода выше:</p> + +<p>{{EmbedLiveSample("Ordered_list_inside_unordered_list", 400, 150)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица "поддержка браузерами" сгенерирована с помощью структурированных данных. Если хотите внести вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.ul")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>Остальные списковые HTML элементы: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} и устаревший {{ HTMLElement("dir") }};</li> + <li>CSS свойства, которые могут быть полезны для стилизации <code><ul></code> элементов: + <ul> + <li>свойство <a href="/en-US/docs/Web/CSS/list-style">list-style</a>, полезное для выбора способа отображения маркеров,</li> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков,</li> + <li>свойство <a href="/en-US/docs/Web/CSS/line-height">line-height</a>, для замены убранного свойства {{ htmlattrxref("compact", "ul") }},</li> + <li>свойство <a href="/en-US/docs/Web/CSS/margin">margin</a>, для контроля отступа в списке.</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/element/video/index.html b/files/ru/web/html/element/video/index.html new file mode 100644 index 0000000000..f3235438bb --- /dev/null +++ b/files/ru/web/html/element/video/index.html @@ -0,0 +1,380 @@ +--- +title: <video> +slug: Web/HTML/Element/video +translation_of: Web/HTML/Element/video +--- +<p>{{HTMLRef}}</p> + +<p>Для встраивания видео контента в документ используйте <strong>элемент HTML <video></strong>. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут <strong>src</strong> или элемент {{HTMLElement("source")}}; браузер сам определит наиболее подходящий источник.</p> + +<p>Для просмотра списка поддерживаемых форматов, перейдите по ссылке <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Поддерживаемые аудио и видео элементами форматы мультимедийных файлов</a>.</p> + +<h2 id="Контекст_Использования">Контекст Использования</h2> + +<ul> + <li>Допустимое содержимое. Если элемент имеет атрибут {{htmlattrxref("src", "video")}}: 0 или более элементов {{HTMLElement("track")}}, за которым следует прозрачный контент, который не содержит элементов мультимедиа: {{HTMLElement("audio")}} или {{HTMLElement("video")}}<br> + Иначе: 0 или более элементов {{HTMLElement("source")}}, за которыми следует 0 или более элементов {{HTMLElement("track")}}, затем прозрачным содержимым, которое не содержит элементы мультимедиа: {{HTMLElement("audio")}} или {{HTMLElement("video")}}.</li> +</ul> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories </a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, содержание фраз, встроенный контент. Если имеет атрибут {{htmlattrxref("controls", "video")}}: становится интерактивным элементом с осязаемым содержанием.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span class="hps">Допустимые</span> <span class="hps">родительские элементы</span></span></th> + <td>Любой элемент, который принимает встроенный контент.</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLVideoElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p><span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Как и все HTML элементы, этот элемент поддерживает</span> <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">видео</span> <span class="hps">начнет воспроизводится </span></span><span lang="ru"><span class="hps">автоматически</span><span class="hps">, как только</span> <span class="hps">это будет возможно сделать без</span> <span class="hps">остановки</span><span>, чтобы закончить</span> <span class="hps">загрузку данных</span><span>.</span></span></dd> + <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Логический атрибут; если указано, видео автоматически начнет буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. + <div class="note"><strong>Примечание:</strong> несмотря на то, что в ранних версиях HTML5 атрибут <code>autobuffer</code> присутствовал, в последующих выпусках он был удален. Также он был удален из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут <code>preload</code>, вместо <code>autobuffer</code> с другим синтаксисом. {{bug(548523)}}</div> + </dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект {{domxref("TimeRanges")}}.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Если этот атрибут</span> <span class="hps">присутствует</span><span>, тогда браузер</span> отобразит <span class="hps">элементы</span> <span class="hps">управления</span><span>, чтобы позволить</span> <span class="hps">пользователю управлять</span> <span class="hps">воспроизведением видео</span><span>, регулировать громкость</span><span class="hps">,</span> осуществлять перемотку, <span>а также</span></span><span lang="ru"> ставить на паузу и <span class="hps">возобновление воспроизведение</span><span>.</span></span></dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>This enumerated attribute indicates whether to use CORS to fetch the related image. <a href="/en-US/docs/CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: + <dl> + <dt>anonymous</dt> + <dd>Sends a cross-origin request without a credential. In other words, it sends the <code style="font-size: 15px; background-color: rgb(245, 246, 245);">Origin:</code><span style="background-color: #f5f6f5;"> HTTP header without a </span>cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the <code style="font-size: 15px;">Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em>, and its usage restricted.</dd> + <dt>use-credentials</dt> + <dd><span style="background-color: #f5f6f5;">Sends a cross-origin request with a credential. </span><span style="background-color: #f5f6f5;">In other words, it sends the </span><code style="font-size: 15px; background-color: rgb(245, 246, 245);">Origin:</code><span style="background-color: #f5f6f5;"> HTTP header with </span>a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through <code style="font-size: 15px;">Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Высота</span> <span class="hps">области отображения</span> <span class="hps">видео</span> <span class="hps">в</span> <span class="hps">пикселях</span><span>.</span></span></dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">по окончанию проигрывания,</span> <span class="hps">видео</span> <span class="hps">автоматически</span> начнет воспроизведение с начала<span class="hps">.</span></span></dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. <span id="result_box" lang="ru"><span class="hps">Если атрибут указан</span></span>, то аудио дорожка <span id="result_box" lang="ru"><span class="hps">воспроизводиться </span></span>не будет. З<span id="result_box" lang="ru"><span class="hps">начение</span> <span class="hps">атрибута по умолчанию</span> <span class="hps">- "ложь"</span><span>,</span> и это<span class="hps"> означает, что</span> <span class="hps">звук будет</span> <span class="hps">воспроизводиться, когда</span> <span class="hps">видео воспроизводится</span><span>.</span></span></dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>Атрибут {{domxref("TimeRanges")}}, указывающий все диапазоны воспроизводимого видео.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>Этот перечислимый атрибут предназначен для того, чтобы дать подсказку браузеру о том, что, по мнению автора, приведет к лучшему пользовательскому опыту. Он может иметь одно из следующих значений: + <ul> + <li><code>none</code>: указывает, что видео не должно быть предварительно загружено.</li> + <li><code>metadata</code>: указывает, что предварительно загружаются метаданные видео (например, длина).</li> + <li><code>auto</code>: указывает, что весь видеофайл может быть загружен, даже если пользователь не должен его использовать.</li> + <li><em>пустая строка</em>: синоним значения <code>auto</code>.</li> + </ul> + + <p>Если не задано, значение атрибута определяется бразуером по умолчанию (то есть, каждый браузер имеет по умолчанию значение данного атрибута). Спецификация рекомендует использовать <code>metadata</code>.</p> + + <div class="note"><strong>Usage notes:</strong> + + <ul> + <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the video for playback.</li> + <li>The <span style="background-color: #f5f6f5;">specification does not force the </span>browser to follow the value of this attribute; it is a mere hint.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр отображается как рамка постера.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Ширина</span> <span class="hps">области отображения</span> <span class="hps">видео</span> <span class="hps">в</span> <span class="hps">пикселях</span><span>.</span></span></dd> +</dl> + +<h2 id="События">События</h2> + +<p>The <code><video></code> element can fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: html"><!-- Simple video example --> +<video src="videofile.ogg" autoplay poster="posterimage.jpg"> + Sorry, your browser doesn't support embedded videos, + but don't worry, you can <a href="videofile.ogg">download it</a> + and watch it with your favorite video player! +</video> + +<!-- Video with subtitles --> +<video src="foo.ogg"> + <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> + <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"> +</video> +</pre> + +<p>The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.</p> + +<p>The second example allows the user to choose between different subtitles.</p> + +<h2 id="Multiple_Sources_Example">Multiple Sources Example</h2> + +<pre class="brush: html"><video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" > + <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4"> + <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg"> + <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> + Your browser doesn't support HTML5 video tag. +</video></pre> + +<p>You can try the preceding example on <a href="http://dul.web.id/contoh-example/html/tag-element/html5-video.php">HTML5 video demo example</a> with live preview code editor.</p> + +<h2 id="Server_support">Server support</h2> + +<p>If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p> + +<p>If you use <span style="background-color: #f5f6f5;">Apache Web Server</span><span style="background-color: #f5f6f5;"> to </span>serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. <span style="background-color: #f5f6f5;"> The </span><span style="background-color: #f5f6f5;">most common video file type extensions are </span><span style="background-color: #f5f6f5;">".ogm</span><span style="background-color: #f5f6f5;">",</span><span style="background-color: #f5f6f5;"> ".ogv", or ".ogg"</span><span style="background-color: #f5f6f5;">. </span>To do this, edit the "mime.types" file in "/etc/apache" or use the "AddType" configuration directive in httpd.conf.</p> + +<pre class="eval">AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in httpd.conf.</p> + +<pre class="eval">AddType video/webm .webm +</pre> + +<p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс</span></span> <code><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement</a></code>.</p> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<p>{{CompatibilityTable}}</p> + +<div> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>autoplay</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>buffered</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>controls</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>crossorigin</code> attribue</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>muted</code> attribute</td> + <td>30.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td><code>played</code> property</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>poster</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>preload</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1</td> + </tr> + <tr> + <td><code>src</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autoplay</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>8.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>buffered</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>controls</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>8.0</td> + <td>{{CompatUnknown}}</td> + <td>6.0</td> + </tr> + <tr> + <td><code>muted</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>8.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>played</code> property</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>poster</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>preload</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>src</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is only available on iOS 6.0.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas">Manipulating video using canvas</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/">TinyVid</a> - examples using ogg files in HTML5.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML5 specification)</li> + <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></li> + <li><a href="http://www.jwplayer.com/html5/">The state of HTML5 video</a></li> +</ul> diff --git a/files/ru/web/html/element/video/seeking_event/index.html b/files/ru/web/html/element/video/seeking_event/index.html new file mode 100644 index 0000000000..5802aecadb --- /dev/null +++ b/files/ru/web/html/element/video/seeking_event/index.html @@ -0,0 +1,80 @@ +--- +title: стримится +slug: Web/HTML/Element/video/seeking_event +translation_of: Web/API/HTMLMediaElement/seeking_event +--- +<p>Событие 'seeking' в случае, когда идет подгрузка видео</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/ru/web/html/element/wbr/index.html b/files/ru/web/html/element/wbr/index.html new file mode 100644 index 0000000000..73406f47fd --- /dev/null +++ b/files/ru/web/html/element/wbr/index.html @@ -0,0 +1,99 @@ +--- +title: <wbr> +slug: Web/HTML/Element/wbr +translation_of: Web/HTML/Element/wbr +--- +<div>{{HTMLRef}}</div> + +<p><strong>Элемент HTML <code><wbr></code></strong> предоставляет возможность переноса слова – позицию в тексте, где браузер может по желанию разбить строку, в противном случае его правила разрыва строки не будут создавать разрыв в этом месте.</p> + +<div><strong>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</strong></div> + +<p class="hidden"><strong>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.</strong></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Категории контента</th> + <td><strong><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td> + </tr> + <tr> + <th scope="row"><strong>Разрешенное сожержимое</strong></th> + <td><strong>Отсутствует</strong></td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td><strong>It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.</strong></td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td><strong>Любой элемент принимающий <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td> + </tr> + <tr> + <th scope="row">Разрешенные роли ARIA</th> + <td><strong>Любые</strong></td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td><strong>{{domxref("HTMLElement")}}</strong></td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты"><strong>Атрибуты</strong></h2> + +<p><strong>Элемент может содержать только <a href="/ru-R/docs/HTML/Global_attributes">глобальные атрибуты</a>.</strong></p> + +<h2 id="Заметки"><strong>Заметки</strong></h2> + +<p>На страницах в кодировке UTF-8, элемент <code><wbr></code> ведет себя как кодовое значение <code>U+200B ZERO-WIDTH SPACE</code> (пробел нулевой ширины). В частности, он ведет себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок {{Glossary("bidi")}}-направления (двунаправленного потока) <code><div dir=rtl>123,<wbr>456</div></code>: отображается, если выражение не разбито на две строки, <code>123 456</code> и не <code>456,123</code>.</p> + +<p>По той же причине, элемент <code><wbr></code> не вводит дефис в точке разрыва строки. Чтобы дефис отображался только в конце строки, используйте вместо него символ «мягкого дефиса» (<code>&shy;</code>).</p> + +<p>Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определен в HTML5.</p> + +<h2 id="Пример"><strong>Пример</strong></h2> + +<p><a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Руководство по стилю Yahoo</a> рекомендует <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">рабивать URL перед пунктуацией</a>, чтобы не оставлять знаки припинания в конце строки, которые читатель может ошибочно принять за конец URL.<strong> </strong></p> + +<pre class="brush: html notranslate"><strong><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> </strong></pre> + +<p><strong>{{EmbedLiveSample("Example")}}</strong></p> + +<h2 id="Спецификация"><strong>Спецификация</strong></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col"><strong>Статус</strong></th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '<wbr>')}}</strong></td> + <td><strong>{{Spec2('HTML WHATWG')}}</strong></td> + <td></td> + </tr> + <tr> + <td><strong>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '<wbr>')}}</strong></td> + <td><strong>{{Spec2('HTML5 W3C')}}</strong></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами"><strong>Поддержка браузерами</strong></h2> + +<div class="hidden"><strong>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</strong></div> + +<p><strong>{{Compat("html.elements.wbr")}}</strong></p> + +<h2 id="Смотрите_также"><strong>Смотрите также</strong></h2> + +<ul> + <li><strong>{{cssxref("overflow-wrap")}}</strong></li> + <li><strong>{{cssxref("word-break")}}</strong></li> + <li><strong>{{cssxref("hyphens")}}</strong></li> +</ul> diff --git a/files/ru/web/html/element/кнопка/index.html b/files/ru/web/html/element/кнопка/index.html new file mode 100644 index 0000000000..ec13035e29 --- /dev/null +++ b/files/ru/web/html/element/кнопка/index.html @@ -0,0 +1,363 @@ +--- +title: <button> +slug: Web/HTML/Element/кнопка +tags: + - Element + - HTML + - Web + - Средний уровень + - Формы +translation_of: Web/HTML/Element/button +--- +<h2 id="Описание">Описание</h2> + +<p><strong>HTML-элемент <em><code><button></code></em></strong> создает кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает {{Glossary ("user agent")}}, но вы можете изменить внешний вид кнопки, используя CSS.</p> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/HTML/Content_categories/">Категории контента</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Общий поток</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">текстовый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content">интерактивный контент</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, и <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> элемент, очевидный контент.</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Текстовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}} </td> + </tr> + <tr> + <th scope="row">Разрешённый родительский контент</th> + <td>Любой элемент с поддержкой <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">текстового контета</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые роли ARIA</th> + <td> + <p>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, <br> + {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</p> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLButtonElement")}}</td> + </tr> + <tr> + <th scope="row">Тип</th> + <td>Строчный</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p><span style="line-height: 21px;">Элемент поддерживает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</span></p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>Использование данного атрибута на элементе <code><button></code> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox сохраняет назначенное динамически отключенное состояние </a>для элемента <code><button></code> при последующих загрузках страницы. Установка для данного атрибута значения <code>off</code> отключает подобное поведение. Смотрите {{bug(654072)}}.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от {{HTMLElement("fieldset")}}; если отсутсвует элемент-контейнер, с установленным атрибутом <strong>disabled</strong>, то кнопка доступна для взаимодействия.</p> + + <p>Firefox по умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">сохраняет назначенное динамически отключенное состояние </a>для элемента <code><button></code>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут {{htmlattrxref("autocomplete","button")}}.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>Атрибут <strong>form</strong> позволяет указать элемент {{HTMLElement("form")}}, с которым связана кнопка. Данный атрибут должен хранить значение <strong>id</strong> элемента {{HTMLElement("form")}}. Если данный атрибут не установлен, то элемент <code><button></code> будет связан с родительским элементом {{HTMLElement("form")}}, если последний существует.</dd> + <dd>Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <code><button></code> с формой, даже в случае, если <code><button></code> не является наследником элемента {{HTMLElement("form")}}.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут {{htmlattrxref("action","form")}} у формы-родителя.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> + <dd>Если <code>button</code> имеет тип <code>submit</code>, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута: + <ul> + <li><code>application/x-www-form-urlencoded</code>: значение по умолчанию, если атрибут не указан.</li> + <li><code>multipart/form-data</code>: следует использовать это значение, если форма содержит элемент {{HTMLElement("input")}} со значением атрибута {{htmlattrxref("type","input")}} <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("enctype","form")}} у формы-родителя.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> + <dd>Если <code>button</code> имеет тип <code>submit</code>, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты: + <ul> + <li><code>post</code>: данные формы включаются в тело сообщения и отправляются на сервер.</li> + <li><code>get</code>: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута {{htmlattrxref("action","form")}} и непосредственно данных, отделенных знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.</li> + </ul> + + <p>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("method","form")}} у формы-родителя.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.</dd> + <dd>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("novalidate","form")}} у формы-родителя.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> + <dd>Если <code>button</code> имеет тип <code>submit</code>, этот атрибут <span style="">является именем или ключевым словом</span>, + <p dir="ltr" id="tw-target-text">указывающим, где отображать ответ, полученный после отправки формы<span style="">. This is a name of, or keyword for, a </span><em>browsing context</em><span style=""> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the button's form owner. The following keywords have special meanings:</span></p> + + <ul> + <li><code>_self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the button, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of the button. Possible values are: + <ul> + <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li> + <li><code>reset</code>: The button resets all the controls to their initial values.</li> + <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li> + <li>menu: The button opens a popup menu defined via its designated {{HTMLElement("menu")}} element.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the button.</dd> +</dl> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush:html notranslate"><button name="button">Тык!</button> +</pre> + +<p>{{ EmbedLiveSample('Example', 200, 64) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autofocus</code> attribute</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td><code>menu</code> value for <code>type</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>menu</code> value for <code>type</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko does not implement this feature yet. See {{bug("1241353")}}.</p> + +<h3 id="Clicking_and_focus">Clicking and focus</h3> + +<p>Whether clicking on a {{HTMLElement("button")}} causes it to (by default) become focused varies by browser and OS. The results for {{HTMLElement("input")}} of <code>type="button"</code> and <code>type="submit"</code> were the same.</p> + +<table> + <caption>Does clicking on a {{HTMLElement("button")}} give it the focus?</caption> + <tbody> + <tr> + <td>Desktop Browsers</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<table> + <caption>Does tapping on a {{HTMLElement("button")}} give it the focus?</caption> + <tbody> + <tr> + <td>Mobile Browsers</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="Notes">Notes</h2> + +<p><code><button></code> elements are much easier to style than {{HTMLElement("input")}} elements. You can add inner HTML content (think <code><em></code>, <code><strong></code> or even <code><img></code>), and make use of {{Cssxref(":after")}} and {{Cssxref(":before")}} pseudo-element to achieve complex rendering while {{HTMLElement("input")}} only accepts a text value attribute.</p> + +<p>IE7 has a bug where when submitting a form with <code><button type="submit" name="myButton" value="foo">Click me</button></code>, the <code>POST</code> data sent will result in <code>myButton=Click me</code> instead of <code>myButton=foo</code>.<br> + IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.<br> + This bug has been fixed in IE8.</p> + +<p>Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using <code>button{{cssxref("::-moz-focus-inner")}} { }</code></p> + +<p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of the {{htmlattrxref("autocomplete","button")}} attribute to <code>off</code> disables this feature. See {{bug(654072)}}.</p> + +<p>Firefox <35 for Android sets a default {{ cssxref("background-image") }} gradient on all buttons (see {{bug(763671)}}). This can be disabled using <code>background-image: none</code>.</p> + +<h2 id="See_also">See also</h2> + +<p>Other elements that are used for creating forms: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/ru/web/html/element/ссылка/index.html b/files/ru/web/html/element/ссылка/index.html new file mode 100644 index 0000000000..ea3f78a615 --- /dev/null +++ b/files/ru/web/html/element/ссылка/index.html @@ -0,0 +1,336 @@ +--- +title: '<link>: Элемент - ссылка на внешний ресурс' +slug: Web/HTML/Element/ссылка +tags: + - Ссылки + - загрузка + - метаданные + - предзагрузка +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>Элемент HTML - Ссылка на Внешний Ресурс (<code><link></code>)</strong> определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на {{Glossary("CSS", "stylesheets")}}, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<div 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.</div> + +<p>Чтобы подключить таблицу стилей, вы должны включить элемент <code><link></code> внутри вашего {{HTMLElement("head")}} следующим образом:</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> + +<p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code><link></code> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидете в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p> + +<p>Существует ряд других распространенных типов, с которыми вы столкнетесь. Например, ссылка на сайт иконок:</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> + +<p>Есть ряд других значений <code>rel</code> для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p>Атрибут <code>sizes</code> определяет размер иконки, когда <code>type</code> содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.</p> + +<p>Вы можете, также, указать медиа тип или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>В элемент <code><link></code> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определенный класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.</p> + +<p>Другие замечания по использованию:</p> + +<ul> + <li>Элемент <code><link></code> может присутствовать в элементах {{HTMLElement("head")}} или {{HTMLElement("body")}}, в зависимости от того, имеет ли он <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">тип ссылки</a>, являющейся <strong>body-ok</strong>. Например, ссылка типа <code>stylesheet</code> является body-ok,и, поэтому, <code><link rel="stylesheet"></code> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <code><link></code> от содержимого body, помещая их в <code><head></code>.</li> + <li>При использовании <code><link></code> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> директива</a> заголовка {{HTTPHeader("Content-Security-Policy")}} не препятствует доступу к ней.</li> + <li>Спецификации HTML и XHTML определяют обработчики событий для элемента <code><link></code>, но не указывают как они будут использоваться.</li> + <li>В XHTML 1.0, пустые элементы, такие как <code><link></code>, требуют слеш: <code><link /></code>.</li> + <li>WebTV поддерживает использование значения <code>next</code> для <code>rel</code> в качестве предварительной загрузки следующей страницы в серии документов.</li> +</ul> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd>Этот атрибут используется только для элементов <code><link></code> с атрибутом <code>rel="preload"</code> или <code>rel="prefetch"</code>. Он указывает тип контента, загружаемого <code><link></code>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a>, и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка.</dd> + <dt>{{HTMLAttrDef("crossorigin")}}</dt> + <dd>Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS-поддерживаемые изображения</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не <em>искажая </em>их. Допустимы значения: + <dl> + <dt><code>anonymous</code></dt> + <dd>Сross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учетные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учетные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}), изображение будет искажено, а его использование ограничено.</dd> + <dt><code>use-credentials</code></dt> + <dd>Сross-origin запрос (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учетные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажен, а его использование ограничено.</dd> + </dl> + Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка <code>Origin)</code>, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова <strong>anonymous.</strong> Для получения дополнительной информации смотрите <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a>.</dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>Этот атрибут определяет {{glossary("URL")}}, связываемого ресурса. URL может быть абсолютным или относительным.</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Используйте этот атрибут только если присутствуют атрибуты {{HTMLAttrxRef("href", "a")}}.</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:</dd> + <dd> + <p><strong><code>auto</code></strong>: указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.</p> + + <p><strong><code>high</code></strong>: указывает браузеру, что ресурс находится в <strong>высоком </strong>приоритете.</p> + + <p><strong><code>low</code></strong>: указывает браузеру, что ресурс находится в <strong>низком </strong>приоритете.</p> + + <div class="blockIndicator note"> + <p><strong>Примечание: </strong>Атрибут <code>importance</code> можно использовать только для элементов <code><link></code> с атрибутами <code>rel="preload"</code> или <code>rel="prefetch"</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для заргузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{HTMLAttrDef("media")}}</dt> + <dd>Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или <a href="/en-US/docs/Web/CSS/Media_queries">медиа-запросом</a>. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска. + <div class="blockIndicator note"> + <p><strong>Примечания:</strong></p> + + <ul> + <li>В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е. <a href="/en-US/docs/Web/CSS/@media">media типы и группы</a>, которые определены и допустимы в качестве значений для этого атрибута, такие как <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 распространил это на любые <a href="/en-US/docs/Web/CSS/Media_queries">медиа-запросы</a>, которые являются расширенным набором допустимых значений HTML 4.</li> + <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Media Queries</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиа-запросов, определенным в HTML 4.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>Строка, указывающая какой реферер использовать при загрузки ресурсов: + <ul> + <li><code>no-referrer</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен.</li> + <li><code>no-referrer-when-downgrade</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.</li> + <li><code>origin</code> означает, что реферером будет источник, который соответствует схеме, хосту и порту.</li> + <li><code>origin-when-cross-origin</code> означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .</li> + <li><code>unsafe-url</code> означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищенных ресурсов в незащищенные источники.</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделенным пробелами списком <a href="/en-US/docs/Web/HTML/Link_types">значений типов ссылки</a>.</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>Этот атрибут определяет размеры иконки для визуальных медиа, содержщихся в ресурсе. Он должен быть представлен только, если {{HTMLAttrxRef("rel", "link")}} содержит значение <code>icon</code> или нестандартный тип, например <code>apple-touch-icon</code> Apple. Может иметь следующие значения: + <ul> + <li><code>any</code>, означает, что иконка может быть маштабируема до любого размера, например в векторном формае <code>image/svg+xml</code>.</li> + <li>пробелоразделенный список размеров, каждый в формате <code><em><width in pixels></em>x<em><height in pixels></em></code> или <code><em><width in pixels></em>X<em><height in pixels></em></code>. Каждый из этих размеров должен содержаться в ресурсе.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Примечание: </strong>Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего {{HTMLAttrxRef("sizes")}} содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("title")}}</dt> + <dd>Атрибут <code>title</code> имеет особое значение для элемента <code><link></code>. При использовании <code><link rel="stylesheet"></code> он определяет <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">предпочтительную или альтернативную таблицу стилей</a>. Неверное использование может стать <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">причиной игнорирования таблицы стилей</a>.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как <strong>text/html</strong>, <strong>text/css и т.д</strong>. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, <strong>text/css</strong>), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок <code>rel="preload"</code>, чтобы браузер загружал только те типы файлов, которые он поддерживает.</dd> +</dl> + +<h3 id="Нестандартные_атрибуты">Нестандартные атрибуты</h3> + +<dl> + <dt>{{HTMLAttrDef("disabled")}} {{Non-standard_Inline}}</dt> + <dd>Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей. + <div class="blockIndicator note"> + <p><strong>Примечание: </strong>Хотя в стандарте HTML нет атрибута <code>disabled</code>, атрибут <code>disabled</code> есть в объекте DOM <code>HTMLLinkElement</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту <strong>title</strong>) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.</dd> +</dl> + +<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделенный пробелами и/или запятыми, как определено в {{rfc(2045)}}. Значение по умолчанию <code>iso-8859-1</code>. + <div class="note"><strong>Примечание по использованию:</strong> Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd> + <p><span lang="ru">Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом</span> {{HTMLAttrxRef("href", "link")}}. <span lang="ru">Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута </span><code>rel</code><span lang="ru">. </span><a href="/en-US/docs/Web/HTML/Link_types">Значения типов ссылки </a><span lang="ru">для атрибута аналогичны возможным значениям для</span> {{HTMLAttrxRef("rel", "link")}}.</p> + + <div class="blockIndicator note"> + <p><strong>Примечание:</strong> Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что <code>rev</code> <em>не</em> считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределенность, полагаться на <code>rev</code> не стоит.</p> + </div> + </dd> + <dd> + <div class="blockIndicator note"> + <p>Взамен, вы должны использовать атрибут {{HTMLAttrxRef("rel", "link")}} с противоположным <a href="/en-US/docs/Web/HTML/Link_types">значением типов ссылки</a>. Например, чтобы установить обратную ссылку для <code>made</code>, укажите <code>author</code>.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.</p> + </div> + </dd> +</dl> + +<h2 id="Стилизация_с_CSS">Стилизация с CSS</h2> + +<p>Элемент <code><link></code> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Включение_таблицы_стилей">Включение таблицы стилей</h3> + +<p>Включение таблицы стилей на страницы имеет следующий синтаксис:</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Предоставление_альтернативных_таблиц_стилей">Предоставление альтернативных таблиц стилей</h3> + +<p>Вы можете указать <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">альтернативные таблицы стилей</a>.</p> + +<p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав ее в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Предоставление_иконок_для_различных_контекстов_использования">Предоставление иконок для различных контекстов использования</h3> + +<p>Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения <code>rel</code> и <code>sizes</code> как подсказки.</p> + +<pre class="brush: html no-line-numbers notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- basic favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="Условная_загрузка_ресурсов_с_медиазапросами">Условная загрузка ресурсов с медиазапросами</h3> + +<p>Вы можете предоставить тип медиа или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="all"> +<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> +<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> +</pre> + +<h3 id="События_загрузки_таблицы_стилей">События загрузки таблицы стилей</h3> + +<p>Вы можете определить, когда таблица стилей была загружена, наблюдая за событием <code>load</code>, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием <code>error</code>:</p> + +<pre class="brush: html notranslate"><script> +var myStylesheet = document.querySelector('#my-stylesheet'); + +myStylesheet.onload = function() { + // Do something interesting; the sheet has been loaded +} + +myStylesheet.onerror = function() { + console.log("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Событие <code>load</code> запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.</p> +</div> + +<h3 id="Preload_примеры">Preload примеры</h3> + +<p>Вы можете найти примеры <code><link rel="preload"></code> в <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a>.</p> + +<h2 id="Техническое_резюме">Техническое резюме</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Каталоги контента</a></th> + <td>Контент метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">потоковый контент</a> и <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th>Разрешенный контент</th> + <td>Нет, это {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.</td> + </tr> + <tr> + <th>Разрешенные родители</th> + <td>Любой элемент, принимающий элементы метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: любой элемент, принимающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Нет</td> + </tr> + <tr> + <th>DOM интерфейс</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col"> + <p class="syntaxbox">Комментарий</p> + </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td>Определены <code><link rel="preload"></code>, и атрибут<code>as</code>.</td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Добавлен атрибут <code>integrit</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Нет изменений, в сравнении с последней версией</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Добавлены атрибуты <code>crossorigin</code> и <code>sizes</code>; расширены значения <code>media</code> для любых медиазапросов; добавлены многочисленные новые значения для <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td>Добавлены <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> и <code>prerender</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTTPHeader("Link")}} HTTP header</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> diff --git a/files/ru/web/html/global_attributes/accesskey/index.html b/files/ru/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..209d8b95e5 --- /dev/null +++ b/files/ru/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,134 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <strong>accesskey </strong>дает возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<div class="note"> +<p><strong>Замечание</strong>: Спецификация WHATWG допускает использования нескольких символов разделённых пробелом. Однако, на момент написания, эта функциональность не поддерживается в современных браузерах. IE и Edge в таком случае будет использовать первый символ, игнорируя остальные.</p> +</div> + +<p>Активация элементов с помощью Accesskey зависит от браузера и платформы:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th> </th> + <th>Windows</th> + <th>Linux</th> + <th>macOS</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd>+ <kbd>Shift</kbd>+<kbd><em>key</em></kbd></td> + <td>В Firefox 57 и новее: <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> -OR- <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + В Firefox 14 и новее: <kbd>Control</kbd>+ <kbd>Alt</kbd>+ <kbd><em>key</em></kbd><br> + В Firefox 13 и старше, <kbd>Control</kbd>+<kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1">N / A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd>+ <kbd>Alt</kbd>+<kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td>N / A</td> + <td><kbd>Control</kbd>+ <kbd>Alt</kbd>+<kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd>+ <kbd>Alt</kbd>+<kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd>+ <kbd>Esc</kbd> показывает список элементов, доступных для быстрого перехода. Перейти на нужный элемент можно нажав соответствующий символ (<kbd><em>key</em></kbd>)</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<p>Обратите внимание, что в Firefox пользоватеть может настроить свой модификатор активации.</p> + +<h2 id="Проблемы_с_доступностью">Проблемы с доступностью</h2> + +<p>В добавок к слабой поддержке браузерами всех возможностей в спецификации, у атрибута <code>accesskey</code> есть проблемы с доступностью:</p> + +<ul> + <li>Значение атрибута <code>accesskey</code> может конфликтовать с комбинациями клавиш системы, браузера или вспомогательными инструментами доступности.</li> + <li>Определённые значения атрибута <code>accesskey</code> могут отсутствовать на некоторых клавиатурах. Это особенно сильно проявляется, если вы используете язык отличный от английского.</li> + <li>Числовые значения атрибута могут <code>accesskey</code> затруднить работу с сайтом для людей с растройствами мышления. Например, когда числовые значения не имеют логической связи со связанным элементом.</li> + <li>Не существует стандартизированного способа информировать пользователя о наличии атрибута <code>accesskey</code> на элементе. Неинформированный пользователь может случайно активировать элемент с атрибутом <code>accesskey</code>.</li> +</ul> + +<p>Ввиду этих причин рекомендуется не использовать атрибут <code>accesskey</code> для обычных сайтов и веб-приложений.</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Положение дел</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Более приближённое к действительности описание поведения.</td> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName ( 'HTML WHATWG', "interaction.html#the-accesskey-attribute", "Accesskey")}}</td> + <td>{{Spec2 ( 'HTML WHATWG')}}</td> + <td>Никаких изменений с последнего снимка, {{SpecName ( 'HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName ( 'HTML5.1', "editing.html#the-accesskey-attribute", "Accesskey")}}</td> + <td>{{Spec2 ( 'HTML5.1')}}</td> + <td>Снимок {{SpecName ( 'HTML WHATWG')}}, без изменений от {{SpecName ( 'W3C HTML5')}}</td> + </tr> + <tr> + <td>{{SpecName ( 'HTML5 W3C', "editing.html#the-accesskey-attribute", "Accesskey")}}</td> + <td>{{Spec2 ( 'W3C HTML5')}}</td> + <td>Снимок {{SpecName ( 'HTML WHATWG')}}. Из {{SpecName ( 'HTML4.01')}}, несколько символов могут быть установлены как <code>accesskey</code>. Кроме того , он может быть установлен на любом элементе.</td> + </tr> + <tr> + <td>{{SpecName ( 'HTML4.01', "interact/forms.html#h-17.11.2", "Accesskey")}}</td> + <td>{{Spec2 ( 'HTML4.01')}}</td> + <td>Поддерживается только {{HTMLElement ( "а")}}, {{HTMLElement ( "Площадь")}}, {{HTMLElement ( "кнопка")}}, {{HTMLElement ( "вход")}}, {{HTMLElement ( "метка")}}, {{HTMLElement ( "легенда")}} и {{HTMLElement ( "текстовое поле")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> .</li> +</ul> diff --git a/files/ru/web/html/global_attributes/class/index.html b/files/ru/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..644e281562 --- /dev/null +++ b/files/ru/web/html/global_attributes/class/index.html @@ -0,0 +1,58 @@ +--- +title: class +slug: Web/HTML/Global_attributes/class +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code><strong>class</strong></code> это разделенный пробелом список регистро зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью <a href="/ru/docs/Web/CSS/Class_selectors">селекторов класса</a> или функций, таких как методы DOM {{domxref("document.getElementsByClassName")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> + +<div class="hidden">Исходный код этого примера хранится на GitHub. Если вы хотели бы поспособствовать интерактивными примерами, пожалуйста склонируйете <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте pull request.</div> + +<p>Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, <em>атрибут</em> описывает атрибут, а не <em>курсив</em>, хотя элемент этого класса может быть представлен <em>курсивом</em>. Семантические имена остаются логичными даже при изменении представления страницы.</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений c последнего снимка, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Снимок {{SpecName('HTML WHATWG')}}, никаких изменений от {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Снимок {{SpecName('HTML WHATWG')}}. Начиная с {{SpecName('HTML4.01')}}, <code>class</code> теперь это истинный глобальный атрибут.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Поддерживается на всех элементах, кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, и {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.global_attributes.class")}}</p> + +<h2 id="Смотреть_также">Смотреть также</h2> + +<ul> + <li>Все <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/contenteditable/index.html b/files/ru/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..638ea9c94a --- /dev/null +++ b/files/ru/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,112 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +tags: + - HTML + - Глобальные атрибуты + - Определение +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><font> (Mozilla / 5.0 (Windows NT 6.3, WOW64; rv: 29.0) Gecko / 20100101 Firefox / 29.0) </font><br> + Атрибут <code><strong>contenteditable</strong></code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attribute</a> - это перечисляемый атрибут, указывающий, должен ли элемент редактироваться пользователем. Если это так, браузер изменит свой виджет, чтобы разрешить редактирование. Атрибут должен принимать одно из следующих значений:</p> + +<ul> + <li><span style="font-family: courier new;">true</span> или <em>пустую строку</em>, которое показывает, что элемент должен быть редактируемым;</li> + <li><span style="font-family: courier new;">false</span>, которое показывает, что элемент должен быть нередактируемым.</li> +</ul> + +<p>Если атрибут не указан, то его значение <em>наследуется</em> от своего родительского элемента.</p> + +<p>Этот атрибут <em>принимает одно из определенных значений</em> и не является <em>булевским</em>. Это значит, что точное использование одного из значений <code>true, false</code> или пустая строка обязательно и такое сокращение, как <code><label contenteditable>Пример метки</label> </code>неразрешено. Верное использование — <code><label contenteditable="true">Пример метки</label></code>. </p> + +<p>Вы можете установить цвет, используемый для вставки текста {{Glossary("caret")}}<br> + со свойством CSS {{cssxref("caret-color")}}. </p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с последней версии {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Копия {{SpecName('HTML WHATWG')}}, нет изменений от {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Копия {{SpecName('HTML WHATWG')}}, первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Основная поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Основная поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/Guide/HTML/Editable_content">Создание контента для редактирования</a></li> + <li>Все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} и {{domxref("HTMLElement.isContentEditable")}}</li> +</ul> diff --git a/files/ru/web/html/global_attributes/data-_star_/index.html b/files/ru/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..df80ab58ae --- /dev/null +++ b/files/ru/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,81 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +translation_of: Web/HTML/Global_attributes/data-* +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>The <strong>data-*</strong> Глобальные атрибуты образуют класс атрибутов, называемых пользовательскими атрибутами данных, которые позволяют обмениваться проприетарной информацией между HTML и его представлением DOM посредством сценариев.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> + +<div class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.</div> + +<p>Все такие пользовательские данные доступны через интерфейс {{domxref ("HTMLElement")}} элемента, для которого установлен атрибут. Свойство {{domxref ("HTMLElement.dataset")}} предоставляет к ним доступ.<br> + Символ * может быть заменен любым именем, соответствующим производственному правилу имен xml, со следующими ограничениями:</p> + +<ul> + <li>имя не должно начинаться с xml, в любом случае для этих букв используется регистр;</li> + <li>имя не должно содержать точку с запятой (U + 003A);</li> + <li>имя не должно содержать заглавных букв.</li> +</ul> + +<p>Обратите внимание, что свойство {{domxref ("HTMLElement.dataset")}} является {{domxref ("DOMStringMap")}}, и имя настраиваемого атрибута данных data-test-value будет доступно через HTMLElement.dataset. testValue (или HTMLElement.dataset ["testValue"]), поскольку любая тире (U + 002D) заменяется заглавной буквой следующей буквы, преобразуя имя в camelcase.</p> + + + +<h3 id="Использование">Использование</h3> + +<p>Добавляя атрибуты data- *, даже обычные элементы HTML могут стать довольно сложными и мощными программными объектами. Например, «спрайт» космического корабля в игре может быть простым элементом {{HTMLElement ("img")}} с атрибутом класса и несколькими атрибутами data- *:</p> + +<pre><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()"> +</img> +</pre> + +<p>Более подробное руководство по использованию атрибутов данных HTML см. В разделе <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.global_attributes.data_attributes")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>The {{domxref("HTMLElement.dataset")}} property that allows to access and modify these values.</li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> +</ul> diff --git a/files/ru/web/html/global_attributes/dir/index.html b/files/ru/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..52a0b158ef --- /dev/null +++ b/files/ru/web/html/global_attributes/dir/index.html @@ -0,0 +1,88 @@ +--- +title: dir +slug: Web/HTML/Global_attributes/dir +translation_of: Web/HTML/Global_attributes/dir +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>The <code><strong>dir</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> is an enumerated attribute that indicates the directionality of the element's text.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div> + +<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>Он может иметь следующие значения:</p> + +<ul> + <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><code>auto</code>, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.</li> +</ul> + +<div class="note"> +<p><strong>Usage notes:</strong> This attribute is mandatory for the {{ HTMLElement("bdo") }} element where it has a different semantic meaning.</p> + +<ul> + <li> + <p>This attribute is <em>not</em> inherited by the {{ HTMLElement("bdi") }} element. If not set, its value is <code>auto</code>.</p> + </li> + <li> + <p>This attribute can be overridden by the CSS properties {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }}, if a CSS page is active and the element supports these properties.</p> + </li> + <li> + <p>As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.</p> + </li> + <li> + <p>The <code>auto</code> value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.</p> + </li> +</ul> +</div> + +<div class="note"> +<p>Browsers might allow users to change the directionality of {{ HTMLElement("input") }} and {{ HTMLElement("textarea") }}s in order to assist with authoring content. Chrome and Safari provide a directionality option in the contextual menu of input fields while Internet Explorer and Edge use the key combinations <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> and <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd>. Firefox uses <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> but does NOT update the <code><strong>dir</strong></code> attribute value.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, from {{SpecName('HTML4.01')}} it added the <code>auto</code> value, and is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>{{domxref("HTMLElement.dir")}} that reflects this attribute.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/dropzone/index.html b/files/ru/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..19c7d5d01b --- /dev/null +++ b/files/ru/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,43 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +translation_of: Web/HTML/Global_attributes/dropzone +--- +<p>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>dropzone</code> является перечисляемым атрбутом, указывающем, какие типы содержимого могут быть опущены в элементе, используя {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Может иметь следующие значения:</p> + +<ul> + <li><code>copy</code>, которая указывает что сброс создает копию перетаскиваемого элемента.</li> + <li><code>move</code>, которое указывает, что перетаскиваемы элемент будет перемещен в новое местоположение.</li> + <li><code>link</code>, которая создает ссылку на перетаскивамые данные.</li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Снимок {{SpecName('HTML WHATWG')}}, начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/id/index.html b/files/ru/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..273036614b --- /dev/null +++ b/files/ru/web/html/global_attributes/id/index.html @@ -0,0 +1,69 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +tags: + - HTML + - Глобальные атрибуты + - Справка +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong>{{glossary("global attribute", "Глобальный атрибут")}} <code>id</code></strong> устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment">идентификатора фрагмента</a>), скриптинге или стилизации (с помощью {{glossary("CSS")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправте нам "pull request" (предложение изменения кода в чужом репозитории).</p> + +<p>Значение этого атрибута "непрозрачная" строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.</p> + +<p>Значение <code>id</code> не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута {{htmlattrxref("class")}}, который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.</p> + +<div class="note"> +<p><strong>Заметка:</strong> Использование символов отличных от {{glossary("ASCII")}} букв, цифр, <code>'_'</code>, <code>'-'</code> и <code>'.'</code> может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в {{glossary("HTML5")}} ограничение было снято, для совместимости ID должен начинаться с латинской буквы.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени), {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>"Snapshot" от {{SpecName('HTML WHATWG')}}, нет изменений с {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>"Snapshot" от {{SpecName('HTML WHATWG')}}, допускает использование <code>'_'</code>, <code>'-'</code> и <code>'.'</code>, если они не в начале id. Также атрибут стал глобальным.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Поддерживается всеми элементами, кроме {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, и {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div> + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</li> + <li>{{domxref("Element.id")}} отражает этот атрибут.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/index.html b/files/ru/web/html/global_attributes/index.html new file mode 100644 index 0000000000..3e61730d7c --- /dev/null +++ b/files/ru/web/html/global_attributes/index.html @@ -0,0 +1,156 @@ +--- +title: Глобальные атрибуты +slug: Web/HTML/Global_attributes +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>Глобальные атрибуты </strong>—<strong> это атрибуты общие для всех HTML элементов</strong>; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.</p> +</div> + +<p>Глобальные атрибуты могут быть указаны для любых <a href="/ru/docs/Web/HTML/Element">элементов HTML</a>, <em>даже для тех, которые не указаны в стандарте.</em> Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые бразузеры скрывают содержимое, помеченное как <code><foo hidden>...<foo></code><code>, хотя </code><code><foo></code> не является верным HTML элементом.</p> + +<p>В дополнение к <em>основным </em>для HTML глобальным атрибутам, также существуют следующие глобальные атрибуты:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> и <code><strong>xml:base</strong></code> — унаследованы от спецификации XHTML, и хотя являются устаревшими, сохранены в целях совместимости.</li> + <li>Многочисленные <code><strong><a href="/ru/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> атрибуты, используемые для улучшения доступности.</li> + <li>Атрибуты обработчиков событий: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Описание">Описание</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/ru/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Дает подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделенных пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.</dd> + <dt id="attr-class"><code><a href="/ru/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>Это список разделенных пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через <a href="/ru/docs/Web/CSS/Class_selectors" title="В HTML документе, селекторы по CSS классу находят элементы с нужным классом.">селекторы по классу</a> или через функции, такие как метод {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/ru/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>Это перечислимый атрибут, указывающий, нужно ли предоставить пользователю возможность редактировать элемент. Если это так, браузер изменит свой виджет таким образом, чтобы позволить редактирование. Атрибут должен принимать одно из следующих значений: + <ul> + <li><code>true</code> или <em>пустая строка</em>, указывает, что элемент должен быть редактируемым;</li> + <li><code>false</code>, указывает, что элемент не должен быть редактируемым.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/ru/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>Это <code><a href="#attr-id"><strong>id</strong></a></code> элемента {{HTMLElement("menu")}}, который следует использовать в качестве контекстного меню для данного элемента.</dd> + <dt id="attr-dataset"><code><a href="/ru/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Определяет группу атрибутов, называемых атрибутами пользовательских данных, позволяющих осуществлять обмен служебной информацией между <a href="/ru/docs/Web/HTML">HTML</a> и его <a href="/ru/docs/Glossary/DOM">DOM</a> представлением, что может быть использовано скриптами. Все такие пользовательские данные доступны через интерфейс {{domxref("HTMLElement")}} элемента у которого установлен атрибут. Свойство {{domxref("HTMLElement.dataset")}} предоставляет доступ к ним.</dd> + <dt id="attr-dir"><code><a href="/ru/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>Это перечислимый атрибут указывающий направление текста в элементе. Он может принимать одно из следующих значений: + <ul> + <li><code>ltr</code>, что расшифровывается как <em>left to right </em>(слева направо), и предназначено для языков, в которых пишут слева направо (как в русском);</li> + <li><code>rtl</code>, что расшифровывается как <em>right to left</em> (справа налево), и предназначено для языков, в которых пишут справа налево (как в арабском);</li> + <li><code>auto</code> — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдет символ со строгим направлением, а затем применяет это направление ко всему элементу.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/ru/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> + <dd>Это перечислимый атрибут, указывающий, можно ли перетаскивать элемент используя <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">Drag and Drop API</a>. Он может иметь одно из следующих значений: + <ul> + <li><code>true</code>, указывающее, что элемент можно перетаскивать;</li> + <li><code>false</code>, указывающее, что элемень нельзя перетаскивать.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/ru/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>Это перечислимый атрибут, указывающий типы содержимого, которое можно перетащить в элемент с использованием <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">Drag and Drop API</a>. Он может иметь одно из следующих значений: + <ul> + <li><code>copy</code>, указывающее, что перетаскивание создаст копию перетаскиваемого элемента;</li> + <li><code>move</code>, указывающее, что перетаскиваемый элемент будет перемещен в новое расположение;</li> + <li><code>link</code> — создаст ссылку на перетаскиваемые данные.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/ru/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Это логический атрибут, указывающий, что элемент уже (или еще) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.</dd> + <dt id="attr-id"><code><a href="/ru/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Определяет идентификатор (ID), который должен быть уникален для всего документа. Он предназначен для идентификации элемента при созданиии ссылок на него, исполнении скриптов или применении стилей (посредством CSS).</dd> + <dt id="attr-itemid"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dt id="attr-itemprop"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dt id="attr-itemref"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dt id="attr-itemscope"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dt id="attr-itemtype"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Эти атрибуты относятся к определению <a class="external" href="http://html.spec.whatwg.org/multipage/microdata.html">микроданных</a>.</dd> + <dt id="attr-lang"><code><a href="/ru/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определенном в документе IETF <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages"><em>BCP47</em></a>. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> имеет приоритет над ним.</dd> + <dt id="attr-spellcheck"><code><a href="/ru/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>Это перечислимый атрибут, определяющий, может ли содержимое элемента быть проверено на наличие орфорафических ошибок. Он может принимать одно из следующих значений: + <ul> + <li><code>true</code>, указывающее, что элемент должен, по возможности, проверяться на наличие орфографических ошибок;</li> + <li><code>false</code>, указывающее, что элемент не должен проверяться на наличие орфографических ошибок.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/ru/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Содержит описание стилей <a href="/ru/CSS">CSS</a>, которые должны быть применены к элементу. Учтите, что рекомендуется определять стили в отдельном файле или файлах. Этот атрибут, как и элемент {{ HTMLElement("style") }}, предназначен, в основном, для оперативного применения стилей, например в целях тестирования.</dd> + <dt id="attr-tabindex"><code><a href="/ru/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>Это числовой атрибут, указывающий, может ли элемент получать фокус, участвует ли он в последовательной навигации с клавиатуры, и если да, то в какой позиции. Может принимать одно из нескольких значений: + <ul> + <li><em>отрицательное число</em> означает, что элемент фокусируемый, но он не может получить фокус посредством последовательной навигации с клавиатуры;</li> + <li><code>0</code> означает, что элемент фокусируемый и может получить фокус посредством последовательной навигации с клавиатуры, но порядок его следования определяется платформой;</li> + <li><em>положительное значение</em> означает, что лемент фокусируемый и может получить фокус посредством последовательной навигации с клавиатуры. Порядок его следования определяется значением атрибута — последовательно возрастающего числа <a href="#attr-tabindex"><strong>tabindex</strong></a>. В случае, когда несколько элементов имеют одинаковое значение атрибута <strong><a href="#attr-tabindex">tabindex</a></strong>, порядок их следования при навигации определяется их местом в документе.</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/ru/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Содержит текст, предоставляющий консультативную информацию об элементе. Эта информация может, но не обязательно, показываться пользователю в виде всплывающей подсказки.</dd> + <dt id="attr-translate"><code><a href="/ru/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> + <dd>Это перечислимый атрибут, используемый для того, чтобы указать, следует ли переводить значения атрибутов элемента и его текстовое содержимое (содержимое узла {{domxref("Text")}}) при локализации страницы. Этот атрибут может принимать следующие значения: + <ul> + <li><em>пустая строка</em> или <code>"yes"</code> указывает, что элемент должен быть переведен;</li> + <li><code>"no</code>" указывает, что элемент не должен быть переведен.</li> + </ul> + </dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><strong>temid</strong>, <strong>itemprop</strong>, <strong>itemref</strong>, <strong>itemscope</strong>, и <strong>itemtype</strong> были добавлены из последнего снимка — {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Снимок {{SpecName('HTML WHATWG')}}. <strong>spellcheck</strong>, <strong>draggable</strong> и <strong>dropzone</strong> были добавлены из {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Снимок {{SpecName('HTML WHATWG')}}. Концепция глобальных атрибутов представлена начиная с {{SpecName("HTML4.01")}} и атрибуты <strong>dir</strong>, <strong>lang</strong>, <strong>style</strong>, <strong>id</strong>, <strong>class</strong>, <strong>tabindex</strong>, <strong>accesskey</strong> и <strong>title</strong> становятся глобальными.<br> + <strong>xml:lang</strong> который был частью XHTML, теперь также является частью HTML.<br> + Были добавлены <strong>hidden</strong>, <strong>data-*</strong>, <strong>contextmenu</strong>, <strong>contenteditable</strong> и <strong><strong>translate</strong></strong>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Глобальные атрибуты на определены. Некоторые атрибуты из тех, что стали глобальными в последующих спецификациях, определены в подмножестве элементов .<br> + <strong>class</strong> и <strong>style</strong> поддериваются для всех элементов кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} и {{HTMLElement("title")}}.<br> + <strong>dir</strong> поддеривается для всех элементов кроме {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} и {{HTMLElement("script")}}.<br> + <strong>id</strong> поддеривается для всех элементов кроме {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} и {{HTMLElement("title")}}.<br> + <strong>lang</strong> поддеривается для всех элементов кроме {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} и {{HTMLElement("script")}}.<br> + <strong>tabindex</strong> поддеривается только для {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.<br> + <strong>accesskey</strong> поддеривается только для {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} и {{ HTMLElement("textarea") }}.<br> + <strong>title</strong> поддеривается для всех элементов кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} и {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("html.global_attributes")}}</p> + +<div id="compat-desktop"></div> + +<div id="compat-mobile"></div> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>Интерфейсы {{domxref("Element")}} и {{domxref("GlobalEventHandlers")}}, которые позволяют запрашивать большинство глобальных атрибутов.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/inputmode/index.html b/files/ru/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..feb9eaf958 --- /dev/null +++ b/files/ru/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,60 @@ +--- +title: inputmode +slug: Web/HTML/Global_attributes/inputmode +translation_of: Web/HTML/Global_attributes/inputmode +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/ru/docs/Web/HTML/Общие_атрибуты">Глобальный атрибут</a> <strong><code>inputmode</code></strong> является вычисленным атрибутом, который предоставляет подсказку для типа данных, которые может ввести пользователь при редактировании содержания элемента.</span> Атрибут может принимать следующие значения:</p> + +<dl> + <dt><code>none</code></dt> + <dd>Без виртуальной клавиатуры; это полезно когда приложение или сайт имплементируют свои собственные клавиатуру или поле ввода.</dd> + <dt><code>text</code></dt> + <dd>Стандартная раскладка клавиатуры для пользователя, учитывая его локализацию.</dd> + <dt><code>decimal</code></dt> + <dd>Дробные значения чисел, содержащие разряд и соответствующий символ-разделитель, который учитывае локализацию пользователя (чаще всего "." или ","). Устройства могут показывать или нет символ минуса (отрицательное знаение).</dd> + <dt><code>numeric</code></dt> + <dd>Числовая раскладка клавиатуры; числа от 0 до 9. Устройства могут показывать или нет символ минуса (отрицательное значение).</dd> + <dt><code>tel</code></dt> + <dd>Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("*"), и решетку ("#"). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code>.</dd> + <dt><code>search</code></dt> + <dd>Виртуальная клавиатура, оптимизированная для работы с поиском. Например, кнопка ввода может быть заменена на "Поиск", и др.</dd> + <dt><code>email</code></dt> + <dd>Виртуальная клавиатура, оптимизированная для ввода электронной почты, с использованием символа "@" и др. Поля ввода форм, что имеют обязательное поле электронной почты должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code>.</dd> + <dt><code>url</code></dt> + <dd>Виртуальная клавиатура, оптимизированная для ввода ссылок. Может иметь кнопку "/", расположенную в более удобном месте. Поле может содержать функцию истории ввода и др. Поля ввода форм, что имеют обязательное поле ссылки URL должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code>.</dd> +</dl> + +<p>Атрибутом по умолчанию является <code>text</code>, которое учитывает локализацию пользователя.</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>Все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/is/index.html b/files/ru/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..a80c1772d1 --- /dev/null +++ b/files/ru/web/html/global_attributes/is/index.html @@ -0,0 +1,62 @@ +--- +title: is +slug: Web/HTML/Global_attributes/is +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут </a> <strong><code>is</code></strong> позволяет указать, что стандартный HTML-элемент должен вести себя как определенный пользовательский встроенный элемент (см <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> для информации).</span></p> + +<p>Этот атрибут может быть использован только, если указанное имя пользовательского элемента было успешно <a href="/en-US/docs/Web/API/CustomElementRegistry/define">определено</a> в текущем документе и расширяет тип элемента, к которому оно применяется.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Следующий код взят из нашего примеры <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">см. в живую</a>).</p> + +<pre class="brush: js">// Создание класса для элемента +class WordCount extends HTMLParagraphElement { + constructor() { + // Всегда вызывайте super первым в конструкторе + super(); + + // Содержимое конструктора опущено для краткости + ... + + } +} + +// Определение нового элемента +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><p is="word-count"></p></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/itemid/index.html b/files/ru/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..6fbadf42b5 --- /dev/null +++ b/files/ru/web/html/global_attributes/itemid/index.html @@ -0,0 +1,106 @@ +--- +title: itemid +slug: Web/HTML/Global_attributes/itemid +tags: + - микроданные +translation_of: Web/HTML/Global_attributes/itemid +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут </a><code><strong>itemid</strong></code> предоставляет микроданные в форме уникального глобального идентификатора элемента.</span> Атрибут <code>itemid</code> может быть указан только для элемента, который имеет оба атрибута {{htmlattrxref("itemscope")}} и {{htmlattrxref("itemtype")}}. Также, <code>itemid</code> может бытьуказан только для элементов, обладающих атрибутом<code>itemscope,</code> соответствующий ссылке<code>itemtype</code> или определяющий словарь, поддерживающий глобальные идентификаторы.</p> + +<p>Точное значение глобального идентификатора <code>itemtype</code> обеспечивается определением этого идентификатора в пределах указанного словаря. Словарь определяет, могут ли сосуществовать несколько элементов с одним и тем же глобальным идентификатором, и, если да, то как обрабатывабтся элементы с одним и тем же идентификатором.</p> + +<p class="note"><strong>Примечание:</strong> Определение Whatwg.org указывает, что <code>itemid</code> должен быть URL. Однако, следующий пример правильно иллюстрирует, что URN, также может быть использован. Это несоответствие может отражать неполную природу спецификации микроданных.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> +<dt>Title <dd itemprop="title">The Reality Dysfunction +<dt>Author <dd itemprop="author">Peter F. Hamilton +<dt>Publication date +<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl></pre> + +<h3 id="Структура_данных">Структура данных</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid')}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#items", "itemid")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.global_attributes.itemid")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">Другие различные глобальные атрибуты</a></li> + <li>Другие глобальные атрибуты, связанные с микроданными + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ru/web/html/global_attributes/lang/index.html b/files/ru/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..c8dc52d542 --- /dev/null +++ b/files/ru/web/html/global_attributes/lang/index.html @@ -0,0 +1,90 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - HTML +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>lang</code> помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный “языковой тег” (<code>language tag</code>) в формате, определенном в <em><a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages (BCP47)</a>.</em></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<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>Если значение атрибута — <em>пустая строка</em> (<code>lang=""</code>), язык устанавливается, как <em>неизвестный</em>. Если тег языка недействителен согласно BCP47, он устанавливается, как <em>недействительный</em>.</p> + +<div class="note"> +<h2 id="Синтаксис_языкового_тега">Синтаксис языкового тега</h2> + +<p>Подробный синтаксис BCP47 достаточно подробен, чтобы отмечать специфичные языковые диалекты, но в большинстве случаев его использование намного проще. </p> + +<p>Языковой тег состоит из <em>языковых вложенных тегов</em>, разделенных дефисом, где каждый вложенный тег указывает на определенное свойство языка. 3 наиболее распространенных вложенных тега:</p> + +<dl> + <dt>Языковой подтег</dt> + <dd>Обязателен. Двух-или-трех-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является <code>en</code>, а для Бадеши — <code>bdz</code>. </dd> + <dt>Подтег скрипта</dt> + <dd>Необязателен. Данный подтег определяет систему записи, и всегда состоящий из 4 символов с первой заглавной буквой. К примеру, французский язык Брайля — это <code>fr-Brai</code>, а <code>ja-Kana</code> — это японский язык, написанный с использованием алфавита Катакана (Katakana). Если язык написан типичным способом, например, английский с латинским алфавитом, нет необходимости использовть данный подтег.</dd> + <dt>Подтег региона</dt> + <dd>Необязателен. Данный подтег определяет диалект основного языка из определенного места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трех цифр, соответствующих региону, который не относится к стране. К примеру, <code>es-ES</code> — это испанский язык, на котором разговаривают в Испании, а <code>es-013</code> означает испанский язык, на котором разговаривают в Центральной Америке. “Международный испанский” было бы просто <code>es</code>.</dd> +</dl> + +<p>Подтег скрипта предшествует подтегу региона, если присутствуют оба тега — <code>ru-Cyrl-BY</code> — это русский язык, написанный кириллицей, на котором разговаривают в Беларуси. </p> + +<p>Чтобы найти правильный подтег кода языка, используйте <a href="https://r12a.github.io/app-subtags/" rel="external">the Language Subtag Lookup</a>.</p> +</div> + +<p>Даже если указан атрибут <strong>lang</strong>, то он может не учитываться, поскольку атрибут <strong><a href="/ru/docs/Web/HTML/Global_attributes/xml:lang">xml:lang</a> </strong>имеет приоритет над <strong>lang</strong>.</p> + +<p>Для псевдо-класса CSS {{cssxref(":lang")}}, два недопустимых названия языка будут разными, если их имены различны. Хотя, <code>:lang(es)</code> соответствует обоим <code>lang="es-ES"</code> и <code>lang="es-419"</code>, но <code>:lang(xyzzy)</code> не соответствует <code>lang="xyzzy-Zorp!"</code>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>No change from latest snapshot,{{SpecName('HTML5.1')}}</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, behavior with <code>xml:lang</code> and language determination algorithm defined. It also is a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Все <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li> + <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Language"><code>Content-Language</code> HTTP Header</a></li> +</ul> diff --git a/files/ru/web/html/global_attributes/style/index.html b/files/ru/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..949cd53910 --- /dev/null +++ b/files/ru/web/html/global_attributes/style/index.html @@ -0,0 +1,111 @@ +--- +title: style +slug: Web/HTML/Global_attributes/style +tags: + - HTML + - Глобальные атрибуты + - Руководство +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <strong>стиля</strong> содержит объявления стилей CSS, которые могут применяться к элементу. Обратите внимание: рекомендуется, чтобы стили были определены в отдельном файле или файлах. Этот атрибут и элемент {{HTMLElement ("style")}} имеют в основном назначение для быстрого добавления стиля, например, для целей тестирования.</p> + +<div class="note"> +<p><strong>Замечание об использовании: </strong>этот атрибут не должен использоваться для передачи семантической информации. Даже если весь стиль удаляется, страница должна оставаться семантически корректной. Обычно он не должен использоваться для скрытия несущественной информации; это должно быть сделано с использованием <a href="#attr-hidden"><strong>скрытого</strong></a> атрибута.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений от последнего моментального снимка, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Снимок {{SpecName ('HTML WHATWG')}}, без изменений от {{SpecName ('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Моментальный снимок {{SpecName ('HTML WHATWG')}}. Из {{SpecName ("HTML4.01")}} теперь это истинный глобальный атрибут</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Поддерживает все элементы, кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, и {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Определяет содержимое атрибута <code>style</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li> +</ul> diff --git a/files/ru/web/html/global_attributes/tabindex/index.html b/files/ru/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..cd63df6b7a --- /dev/null +++ b/files/ru/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,112 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +translation_of: Web/HTML/Global_attributes/tabindex +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p class="note">Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)</p> + +<p><a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">Глобальный атрибут</a> <strong>tabindex </strong>-<strong> </strong>целое число, определяющее должен ли данный элемент участвовать в последовательной навигации по всей странице с помощью клавиатуры, в каком порядке. Содержит одно из нескольких видов значений:</p> + +<ul> + <li>если представлено <em>отрицательное значение</em> – элемент может быть выделен, однако не участвует в последовательной навигации;</li> + <li>если представлен <strong>0</strong> – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;</li> + <li>если представлено <em>положительное целое значение</em> – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением. В случае, если несколько элементов содержат одно и то же значение <strong>tabindex</strong>, их порядок навигации определён относительным расположением в документе (DOM).</li> +</ul> + +<p>Элементы со значением 0, некорректным значением, или элементы с отсутствующим значением <strong>tabindex </strong>должны быть расположены после элементов с положительным целым числом.</p> + +<p>Для более полного объяснения навигации смотри <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Focus_management_in_HTML">данную статью</a>.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с предыдущей спецификации {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}}, нет изменений с {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}}. От {{SpecName("HTML4.01")}}, атрибут теперь поддерживается всеми элементами.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Поддерживается только {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, и {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li> + <li>{{domxref("HTMLElement.tabindex")}} отражает этот атрибут.</li> + <li>Проблемы доступности (юзабилити): смотри <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" id="id-22" style="font-size: inherit; line-height: inherit;" title="Don’t Use Tabindex Greater than 0 | Adrian Roselli">Don’t Use Tabindex Greater than 0 | Adrian Roselli</a>.</li> +</ul> diff --git a/files/ru/web/html/index.html b/files/ru/web/html/index.html new file mode 100644 index 0000000000..6c7cd93452 --- /dev/null +++ b/files/ru/web/html/index.html @@ -0,0 +1,107 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - Web + - Веб + - Главная + - Справка + - гипертекст + - лендинг +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language — «язык гипертекстовой разметки») — самый базовый строительный блок {{glossary("World Wide Web", "Веба")}}. Он определяет содержание и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида/представления (<a href="/ru/docs/Web/CSS">CSS</a>) или функциональности/поведения (<a href="/ru/docs/Web/JavaScript">JavaScript</a>) веб-страницы.</span></p> + +<p>Под гипертекстом ("hypertext") понимаются ссылки, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки являются фундаментальным аспектом Веба. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником Всемирной паутины.</p> + +<p>HTML использует разметку ("markup") для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные "элементы", такие как {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} и многие другие.</p> + +<p>HTML-элемент выделяется из прочего текста в документе с помощью "{{glossary("tag", "тегов")}}", которые состоят из имени элемента окруженного "<code><</code>" и "<code>></code>". Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <code><title></code> может быть записан как <code><Title></code>, <code><TITLE></code>, или любым другим способом.</p> + +<p>Статьи, представленные ниже, могут помочь вам больше узнать о HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Введение в HTML</span> + + <p>Если вы новичок в веб-разработке, обязательно прочитайте нашу статью <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">"Основы HTML"</a>, чтобы узнать, что такое HTML и как его использовать.</p> + </li> + <li><span>Руководства по HTML</span> + <p>Статьи о том, как использовать HTML, а также обучающие материалы и исчерпывающие примеры можно найти в разделе "<a href="/ru/docs/Learn/HTML">Пространство изучения HTML</a>".</p> + </li> + <li><span>Справка по HTML</span> + <p>В нашем обширном разделе "<a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a>" вы найдете подробности о каждом элементе и атрибуте в HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Руководства_для_начинающих">Руководства для начинающих</h2> + +<p>Наше <a href="/ru/docs/Learn/HTML">Пространство изучения HTML</a> содержит множество модулей, которые обучают HTML с нуля — начальные знания не требуются.</p> + +<dl> + <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a></dt> + <dd>Этот модуль закладывает основу, знакомя вас с важными понятиями и синтаксисом, такими как применение HTML к тексту, создание гиперссылок и использование HTML для построения веб-страницы.</dd> + <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a></dt> + <dd>В этом модуле рассматривается, как использовать HTML для добавления мультимедиа на ваши веб-страницы, включая различные способы вставки изображений, а также для встраивания видео, аудио, и даже других веб-страниц целиком.</dd> + <dt><a href="/ru/docs/Learn/HTML/Tables">HTML-таблицы</a></dt> + <dd>Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой. Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний.</dd> + <dt><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></dt> + <dd>Формы являются очень важной частью Веба — они предоставляют большую часть функционала, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм.</dd> + <dt><a href="/ru/docs/Learn/HTML/Рецепты">Используйте HTML для решения распространенных задач.</a></dt> + <dd>Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространенных задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.</dd> +</dl> + +<h2 id="Продвинутые_темы">Продвинутые темы</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS: включенные изображения</a></dt> + <dd class="landingPageList">Атрибут {{htmlattrxref("crossorigin", "img")}} в сочетании с соответствующим заголовком {{glossary("CORS")}}, позволяет загружать изображения, определенные элементом {{HTMLElement("img")}}, из внешних источников и использовать в элементе {{HTMLElement("canvas")}}, как если бы они были загружены из текущего источника.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/CORS_settings_attributes">CORS: Настройки атрибутов</a></dt> + <dd class="landingPageList">Некоторые HTML-элементы, предоставляющие поддержку <a href="/ru/docs/Web/HTTP/CORS">CORS</a>, такие как {{HTMLElement("img")}} или {{HTMLElement("video")}}, имеют атрибут <code>crossorigin</code> (свойство <code>crossOrigin</code>), который позволяет вам настраивать CORS-запросы для получаемых элементом данных.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/API/Document/hasFocus">Управление фокусом в HTML</a></dt> + <dd class="landingPageList">DOM-Атрибут <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> и DOM-метод <code><a href="/ru/docs/Web/API/Document/hasFocus">hasFocus()</a></code> помогают отслеживать и контролировать взаимодействие пользователя с элементами на веб-странице.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Preloading_content">Предварительная загрузка контента с помощью rel="preload"</a></dt> + <dd class="landingPageList">Значение <code>preload</code> атрибута {{htmlattrxref("rel", "link")}} элемента {{htmlelement("link")}} позволяет писать декларативные <a href="/ru/docs/Web/API/Fetch_API/Using_Fetch">fetch-запросы</a> в HTML {{htmlelement("head")}}, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к улучшению производительности. В этой статье приведено начальное руководство по работе с <code>preload</code> (предзагрузкой).</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Справочники">Справочники</h2> + +<dl> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a></dt> + <dd class="landingPageList">HTML состоит из <strong>элементов</strong>, каждый из которых может быть изменен некоторым количеством <strong>атрибутов</strong>. HTML-документы связаны между собой <a href="/ru/docs/Web/HTML/Типы_ссылок">ссылками</a>.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Element">Справка по HTML-элементам</a></dt> + <dd class="landingPageList">Просмотр списка всех {{glossary("Element", "элементов")}} {{glossary("HTML")}}.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Attributes">Справка по HTML-атрибутам</a></dt> + <dd class="landingPageList">У элементов в HTML есть <strong>атрибуты</strong>. Это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Общие_атрибуты">Глобальные атрибуты</a></dt> + <dd class="landingPageList">Глобальные атрибуты могут быть указаны для всех <a href="/ru/docs/Web/HTML/Element">элементов HTML</a>, <em>даже тех, которые не указаны в стандарте</em>. Это означает, что любые нестандартные элементы обязаны по-прежнему разрешать эти атрибуты, даже если эти элементы делают документ несовместимым с {{glossary("HTML5")}}.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Строчные_Элементы">Строчные</a> и <a href="/ru/docs/Web/HTML/Block-level_elements">блочные</a> элементы</dt> + <dd class="landingPageList">Элементы HTML являются обычно "строчными" или "блочными". Строчный элемент занимает только пространство, ограниченное тегами, которые его определяют. Блочный элемент занимает все пространство своего родительского элемента (контейнера), тем самым создавая "блок".</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Типы_ссылок">Типы ссылок</a></dt> + <dd class="landingPageList">В HTML различные типы ссылок могут использоваться для установления и определения связи между двумя документами. Элементы-ссылки, типы которых могут быть заданы, включают в себя {{HTMLElement("a")}}, {{HTMLElement("area")}} и {{HTMLElement("link")}}.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">Поддержка медиа-форматов с помощью HTML-элементов audio и video</a></dt> + <dd class="landingPageList">Элементы {{HTMLElement("audio")}} и {{HTMLElement("video")}} позволяют вам воспроизводить аудио и видео. Эти элементы предоставляют браузерную альтернативу аналогичным возможностям, которые есть в Adobe Flash и других плагинах.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Виды HTML-контента</a></dt> + <dd class="landingPageList">HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определенных контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.</dd> + <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Режим совместимости и стандартный режим</a></dt> + <dd class="landingPageList">Историческая справка по режиму совместимости и стандартному режиму.</dd> +</dl> + +<h2 class="landingPageList" id="Похожие_темы">Похожие темы</h2> + +<dl> + <dt><a href="/ru/docs/Web/HTML/Applying_color">Применение цвета к HTML-элементам с помощью CSS</a></dt> + <dd>В этой статье описывается большинство способов использования CSS для добавления цвета к HTML-контенту, а также перечисляется, какие части документов HTML могут быть окрашены, и какие свойства CSS при этом используются. Включает примеры, ссылки на инструменты для создания палитры и многое другое.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/ru/docs/tag/HTML">Посмотреть все...</a></span></section> diff --git a/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html new file mode 100644 index 0000000000..0b3418772f --- /dev/null +++ b/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html @@ -0,0 +1,33 @@ +--- +title: Оптимизация Ваших страниц для рискованного парсинга +slug: Web/HTML/Optimizing_Your_Pages_for_Speculative_Parsing +tags: + - HTML + - HTML5 + - Веб-разработка + - Продвинутый +translation_of: Glossary/speculative_parsing +--- +<p>Традиционно, HTML-парсер в браузерах работает на главной ветке и блокируется после тега <code></script></code>, пока скрипт не загрузится и не выполнится. HTML-парсер в Firefox 4 и новее поддерживает рискованный парсинг вне главной ветки. Он продолжает парсить, пока скрипты загружаются и выполняются. В Firefox 3.5 и 3.6 парсер начинает рискованную загрузку скриптов, стилей и изображений, когда он находит их. Однако, в Firefox 4 и новее HTML-парсер также рискованно загружает алгоритм постройки дерева HTML. С одной стороны, когда риск оправдался, нет необходимости в репарсинге части, которая уже была просканирована на скрипты, стили и изображения. С другой стороны, когда риск не оправдался, HTML-парсеру достаётся больше работы.</p> + +<p>Эта статья поможет избежать некоторых проблем, которые замедляют загрузку страницы.</p> + +<h2 id="Делаем_рискованную_загрузку_успешной">Делаем рискованную загрузку успешной</h2> + +<p>Есть только одно правило, чтобы сделать рискованную загрузку скриптов, стилей и изображений успешной:</p> + +<ul> + <li>Если Вы используете элемент <code><base></code>, чтобы заменить основной URI страницы, поместите этот элемент в часть страницы без скриптов. Не добавляйте его с помощью <code>document.write()</code> или <code>document.createElement()</code>.</li> +</ul> + +<h2 id="Как_избежать_перестройки_дерева_страницы">Как избежать перестройки дерева страницы</h2> + +<p>Рискованное построение дерева терпит неудачу в случае, когда функция <code>document.write() </code>изменяет состояния построителя дерева так, что то рискованное состояние после тега <code></script> </code>более не остаётся прежним после того, как весь контент, добавленный через <code>document.write(),</code> будет распарсен. Только несколько необычных применений <code>document.write()</code> вызывают эту проблему. Вот, чего необходимо избегать:</p> + +<ul> + <li>Не пишите незаконченные древа. Вместо <code><script>document.write("<div>");</script></code> лучше написать <code><script>document.write("<div></div>");</script></code>.</li> + <li>Не пишите незаконченные теги. Не стоит писать <code><script>document.write("<div></div");</script></code>.</li> + <li>Не заканчивайте строку возратной кареткой (<code>\r</code>). Вместо <code><script>document.write("Hello World!\r");</script></code> лучше написать <code><script>document.write("Hello World!\n");</script></code>.</li> + <li>Заметьте, что написание законченных тегов может повлиять на другие теги так, что они станут незаконченными. В том числе, <code><script>document.write("<div></div>");</script></code> внутри <code><head></code> будет интерпретировано как <code><script>document.write("</head><body><div></div>");</script></code>, что повлияет на <code><head></code> так, что он станет незаконченным.</li> + <li>Не форматируйте часть таблицы. Вместо <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> лучше написать <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code>.</li> +</ul> diff --git a/files/ru/web/html/preloading_content/index.html b/files/ru/web/html/preloading_content/index.html new file mode 100644 index 0000000000..a07be2d14a --- /dev/null +++ b/files/ru/web/html/preloading_content/index.html @@ -0,0 +1,243 @@ +--- +title: Предзагрузчик контента - rel="preload" +slug: Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +--- +<p class="summary">Значение <code>preload</code> атрибута {{htmlattrxref("rel", "link")}} в элементе {{htmlelement("link")}} позволяет вам запросить данные через {{htmlelement("head")}} вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.</p> + +<p class="summary">В этой статье приведено основное руководство про работе с <code><link rel="preload"></code>.</p> + +<h2 id="Основы">Основы</h2> + +<p>Чаще всего вы используете простой <code><link></code> элемент, когда загружаете CSS файлы со стилем вашей страницы:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>Однако, здесь мы будем использовать значение <code>preload</code> для атрибута <code>rel</code>, которое превратит тег <code><link></code> в предзагрузчик для любого ресурса, который мы пожелаем. Для этого необходимо будет указать:</p> + +<ul> + <li>Адрес пути к ресурсу в атрибуте {{htmlattrxref("href", "link")}};</li> + <li>Тип ресурса в атрибуте {{htmlattrxref("as", "link")}}.</li> +</ul> + +<p>Простой пример может выглядеть так: (смотрите наш <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS и CSS пример из источника</a>, и <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">живой пример</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Пример пред-загрузки JS и CSS</title> + + <link rel="preload" href="style.css" as="style"> + <link rel="preload" href="main.js" as="script"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <h1>прыгающие шарики</h1> + <canvas></canvas> + + <script src="main.js"></script> +</body></pre> + +<p>Мы сделали предзагрузку наших файлов CSS и JavaScript, чтобы они стали доступны для рендеринга страницы сразу же, как это потребуется. Этот пример отчасти банален, поскольку браузер, вероятнее всего, обнаружит элементы <code><link rel="stylesheet"></code> и <code><script></code> в одном чанке (блоке) с основным HTML, но преимущества более явно проявятся, если далее по странице будут обнаружены более объёмные ресурсы. Это могут быть:</p> + +<ul> + <li>Ресурсы, на которые ссылаются стили из CSS (шрифты, изображения);</li> + <li>Ресурсы, затребованные из JavaScript (например JSON, динамически подгружаемые скрипты, воркеры);</li> + <li>Огромных размеров изображения, видео.</li> +</ul> + +<p><code>preload</code> имеет и другие преимущества. Использование атрибута <code>as</code> для указания типа содержимого пред-загрузки позволит браузеру:</p> + +<ul> + <li>Точнее расставить приоритеты при загрузке ресурсов.</li> + <li>Сохранить в кэше затребованный ресурс для его повторного использования в случае необходимости.</li> + <li>Применять корректную <a href="/ru/docs/Web/HTTP/CSP">политику безопасности содержимого (content security policy)</a> для ресурсов.</li> + <li>Правильно устанавливать заголовки {{HTTPHeader("Accept")}} для выбранного запроса.</li> +</ul> + +<h3 id="Какие_типы_контента_могут_быть_предзагружены">Какие типы контента могут быть предзагружены?</h3> + +<p>Разного типа контент можно предзагрузить. Вот основные атрибуты значения <code>as</code>:</p> + +<ul> + <li><code>audio</code>: Аудио файлы.</li> + <li><code>document</code>: HTML документ для {{htmlelement("frame")}} или {{htmlelement("iframe")}}.</li> + <li><code>embed</code>: Ресурс, встроенный в {{htmlelement("embed")}} элемент.</li> + <li><code>fetch</code>: Ресурс с доступом к запросу выборки или XHR, подобие файлу ArrayBuffer или JSON.</li> + <li><code>font</code>: Шрифты.</li> + <li><code>image</code>: Картинки.</li> + <li><code>object</code>: Ресурс встроенный в {{htmlelement("object")}} элемент.</li> + <li><code>script</code>: JavaScript.</li> + <li><code>style</code>: CSS таблица стилей.</li> + <li><code>track</code>: WebVTT.</li> + <li><code>worker</code>: A JavaScript веб-worker и общий worker.</li> + <li><code>video</code>: Видео.</li> +</ul> + +<div class="note"> +<p><strong>Заметка</strong>: Вы можете прочитать немного больше об этих значениях и веб-функциях, которыми они будут пользоваться, в спецификации Предзагрузка — <a href="https://w3c.github.io/preload/#link-element-extensions">расширения элементов ссылок</a>. Также обратите внимание, что полный список значений атрибут <code>as</code> может принимать в зависимости от определений в спецификации Fetch — <a href="https://fetch.spec.whatwg.org/#concept-request-destination">запрос направления</a>.</p> +</div> + +<h2 id="Включение_MIME-типов">Включение MIME-типов</h2> + +<p>Элементы <code><link></code> могут принимать атрибут {{htmlattrxref("type", "link")}}, содержащий MIME-тип ресурса целевого элемента. Это особенно полезно при пред-загрузке ресурсов. Браузер использует значение атрибута <code>type</code> и начнёт его загрузку, если поддержка ресурса определена, иначе проигнорирует его.</p> + +<p>См. <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">полный исходный код</a>, (а также <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">пример живой версии видео</a>).</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Пример пред-загрузки видео</title> + + <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> +</head> +<body> + <video controls> + <source src="sintel-short.mp4" type="video/mp4"> + <source src="sintel-short.webm" type="video/webm"> + <p> Ваш браузер не поддерживает видео в формате HTML5. + Взамен - <a href="sintel-short.mp4"> ссылка на видео </a>.</p> + </video> +</body></pre> + +<p>В этом случае браузеры, поддерживающие MP4, будут пред-загружать и использовать MP4, что, как мы надеемся, сделает видеоплеер плавнее/отзывчивее для пользователей. Браузеры, не поддерживающие MP4, могут загружать версию WebM, при этом не получая преимуществ пред-загрузки. Это показывает, как пред-загрузка контента может сочетаться с философией прогрессивного улучшения.</p> + +<h2 id="Выборки_из_разных_источников">Выборки из разных источников</h2> + +<p>Если настройки CORS ваших сайтов правильные, вы можете успешно пред-загрузить ресурсы разных источников, установив атрибут {{htmlattrxref("crossorigin", "link")}} в элементе <code><link></code>.</p> + +<p>Один из интересных случаев, когда это применимо, даже если выборка не из разных источников, - это файлы шрифтов. По разным причинам они должны быть получены с использованием анонимного режима CORS (см. <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Требования к выборке шрифтов</a>, если вас заинтересуют все подробности).</p> + +<p>Используем этот случай в качестве примера, во-первых, загрузка шрифтов - действительно хороший вариант использования пред-загрузки, а во-вторых, - это проще, чем настраивать пример запроса с перекрёстным источником. Полный пример исходного кода <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">есть на GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">также смотрите его вживую</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Примеры веб-шрифтов</title> + + <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + + <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + + <link href="style.css" rel="stylesheet" type="text/css"> +</head> +<body> + ... +</body></pre> + +<p>Легко узреть, что мы не только предоставляем подсказки типа MIME в атрибутах типа, но также предоставляем атрибут <code>crossorigin</code> для решения проблемы CORS.</p> + +<h2 id="Including_media">Including media</h2> + +<p>One nice feature of <code><link></code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> + +<p>Давайте посмотрим на очень простой пример (см. его на GitHub - <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">исходный код</a> и <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">живой пример</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Пример адаптивной предзагрузки</title> + + <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> + <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> + + <link rel="stylesheet" href="main.css"> +</head> +<body> + <header> + <h1>Мой сайт</h1> + </header> + + <script> + var mediaQueryList = window.matchMedia("(max-width: 600px)"); + var header = document.querySelector('header'); + + if(mediaQueryList.matches) { + header.style.backgroundImage = 'url(bg-image-narrow.png)'; + } else { + header.style.backgroundImage = 'url(bg-image-wide.png)'; + } + </script> +</body></pre> + +<p>Вы видите, что мы включаем <code>media</code>-атрибуты в наши элементы <code><link></code> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Тест медиа-запросов</a>).</p> + +<p>Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).</p> + +<p>Обратите внимание, что это не должно ограничиваться изображениями или даже файлами одного типа - думайте масштабно! Возможно, вы могли бы предварительно загрузить, а затем отобразить простую диаграмму SVG, если пользователь находится на узком экране, где пропускная способность и ЦП потенциально более ограничены, или предзагрузить сложный фрагмент JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более многочисленны.</p> + +<h2 id="Скрипты_и_предзагрузки">Скрипты и предзагрузки</h2> + +<p>Ещё одна полезная вещь в этих предзагрузках, это то, что вы можете выполнять их полностью со скриптами, если необходимо. Например, мы сейчас создаём экземпляр {{domxref("HTMLLinkElement")}}, затем включим её в DOM:</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>Пдразумевается, что браузер загрузит JavaScript файл, но, пока не будет его применять.</p> + +<p>Чтобы выполнить его, вы можете использовать следующую конструкцию:</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>Это полезно, когда вы хотите загрузить скрипт в кеш, но применять его только тогда, когда это необходимо.</p> + +<h2 id="Другие_механизмы_предзагрузки_ресурсов">Другие механизмы предзагрузки ресурсов</h2> + +<p>Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как <code><link rel="preload"></code>:</p> + +<ul> + <li><code><link rel="prefetch"></code> давно поддерживается в браузерах, но предназначен для предварительной загрузки ресурсов, которые будут использоваться при следующей навигации/загрузке страницы (например, когда вы переходите на следующую страницу). Это нормально, но бесполезно для текущей страницы! Кроме того, браузеры будут отдавать ресурсам предварительной загрузки более низкий приоритет, чем ресурсам <code>предзагрузки</code> - текущая страница важнее следующей. См. <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Предвыборку ссылок FAQ</a> для подробностей.</li> + <li><code><link rel = "subresource"></code> некоторое время назад поддерживался в Chrome и предназначался для решения проблемы предзагрузки ресурсов для текущей навигации/загрузки страницы, но у него была проблема - не было возможности определить приоритет для получения элементов. (<code>as</code> тогда не существовало), поэтому все они в конечном итоге были извлечены с довольно низким приоритетом, что не помогло ситуации.</li> + <li>Существует ряд загрузчиков ресурсов на основе сценариев, но они не имеют никакой власти над очередью приоритетов выборки браузера и подвержены тем же проблемам с производительностью.</li> +</ul> + +<h2 id="Specifications" name="Specifications">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Further details of <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of <code>rel=preload</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<p class="hidden">Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</p> + +<p>{{Compat("html.elements.link.rel.preload")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> +</ul> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> diff --git a/files/ru/web/html/quirks_mode_and_standards_mode/index.html b/files/ru/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..b29bebc61a --- /dev/null +++ b/files/ru/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,46 @@ +--- +title: Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode) +slug: Web/HTML/Quirks_Mode_and_Standards_Mode +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>В самом начале веба страницы обычно писались в двух версиях: одна для браузера Netscape Navigator, другая для браузера Microsoft Internet Explorer. Когда W3C были созданы новые веб стандарты, браузеры не могли их сразу использовать, так как это могло привести к некорректному отображению большинства существующих сайтов. Для правильного отображения устаревших сайтов и сайтов, поддерживающих новые стандарты, браузерами были разработаны два режима отображения.</p> + +<p>На сегодняшний день существует три режима отображения, которые используются движками разметки (layout engines) браузеров: режим совместимости (quirks mode), частично стандартный режим (almost standards mode) и стандартный режим (full standards mode). В режиме совместимости (<strong>quirks mode)</strong>, разметка эмулирует нестандартное поведение браузеров Navigator 4 и Internet Explorer 5. Этот режим необходим для поддержки сайтов, созданных до начала широкого применения веб стандартов. В стандартном режиме (<strong>full standards mode)</strong> поведение браузера соответствует (будем надеяться) описанному в спецификациях HTML и CSS. В частично стандартном режиме (<strong>almost standards mode) </strong> реализовано лишь незначительное количество так называемых "странностей" (quirks).</p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">Как браузеры понимают, какой режим использовать?</h2> + +<p>Браузеры используют тег DOCTYPE, чтобы определить в каком режиме обрабатывать документ. Для отображения страницы в стандартном режиме необходмо добавить тег DOCTYPE в HTML-код страницы как показано в примере ниже:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset=UTF-8> + <title>Hello World!</title> + </head> + <body> + </body> +</html></pre> + +<p>Тег DOCTYPE, указанный в примере, - <code><!DOCTYPE html></code> - самый простой способ обеспечить стандартный режим отображения; использование этого тега рекомендовано стандартом HTML5. Для предыдущих версий HTML рекомендованы другие варианты, но все существующие на текущий момент браузеры используют такой тег DOCTYPE для отображения страницы в стандартном режиме, даже Internet Explorer 6. На сегодняшний день не существует веских причин для использования более сложного тега DOCTYPE. Использование какого-либо другого тега DOCTYPE может привести к переключению браузера в частично стандартный режим отображения или в режим совместимости.</p> + +<p>Необходимо удостовериться, что тег DOCTYPE находится в самом начале HTML документа. Если на странице будет что-либо до тега DOCTYPE, например, комментарий или декларирование XML, то браузеры Internet Explorer 9 и выше будут переведены в режим совместимости.</p> + +<p>В стандарте HTML5 тег DOCTYPE используется исключительно для активации стандартного режима отображения. Предыдущие версии HTML придавали дополнительное значение использованию тега DOCTYPE, но браузеры использовали тег DOCTYPE исключительно для переключения между режимом совместимости и стандартным режимом. </p> + +<p>См. также детальное описание того, <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">как разные браузеры выбирают режимы</a>.</p> + +<h3 id="XHTML">XHTML</h3> + +<p>Если страница написана в <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> формате с указаннием типа MIME <code>application/xhtml+xml</code> в заголовке <code>Content-Type</code>, то не нужно указывать DOCTYPE для активации стандартного режима, так как подобные документы всегда отображаются в стандартном режиме. Важно иметь в виду, что Internet Explorer 8 вместо контента такой страницы отображает <a href="/en-US/docs/XHTML#Support" title="XHTML">диалоговое окно загрузки</a> как для неизвестного формата, поскольку поддержка XHTML реализована в Internet Explorer, начиная с 9 версии.</p> + +<p>Если страница написана в XHTML формате с использованием типа MIME <code>text/html</code>, браузер будет интерпретировать его как HTML, поэтому для использования браузером стандартного режима отображения необходимо указать тег DOCTYPE. </p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Как узнать, какой режим используется?</h2> + +<p>В Firefox необходимо в контекстном меню "Информация о странице" (<em>View Page Info)</em> проверить<em> </em>"Тип визуализации" (<em>Render Mode)</em>.</p> + +<p>В Internet Explorer через <em>F12</em> проверить Тип документа (<em>Document Mode)</em>.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">В чем разница между режимами?</h2> + +<p>См. <a href="/en-US/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">список странностей (list of quirks)</a> и <a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">частично стандартный режим</a> для того, чтобы увидеть разницу между режимами.</p> diff --git a/files/ru/web/html/использование_кэширования_приложений/index.html b/files/ru/web/html/использование_кэширования_приложений/index.html new file mode 100644 index 0000000000..1b07e6a29d --- /dev/null +++ b/files/ru/web/html/использование_кэширования_приложений/index.html @@ -0,0 +1,327 @@ +--- +title: Использование кэширования приложений +slug: Web/HTML/Использование_кэширования_приложений +translation_of: Web/HTML/Using_the_application_cache +--- +<h2 id="Введение">Введение</h2> +<p><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> предоставляет механизм <em>кэширования приложения</em>, позволяющий веб-приложениям работать в автономном режиме. Разработчики теперь могут использовать интерфейс <strong>Кэша приложения</strong> (<em>AppCache</em>), сообщая браузеру, какие из ресурсов браузеру следует закэшировать и сделать доступными в режиме оффлайн. Закэшированные приложения загружаются и работают корректно, даже если пользователь обновляет страницу в тот момент, когда он отключён от сети.</p> +<p>Использование механизма кэширования даёт следующие преимущества:</p> +<ul> + <li>Просмотр страниц в автономном режиме: пользователи могут переходить по сайту даже в режиме оффлайн.</li> + <li>Скорость: закэшированные ресурсы хранятся на устройстве пользователя и, следовательно, загружаются быстрее.</li> + <li>Уменьшение нагрузки на сервер: браузер загружает с сервера только те ресурсы, которые были изменены.</li> +</ul> +<h2 id="Как_работает_кэш_приложения">Как работает кэш приложения</h2> +<h3 id="Включение_механизма_кэширования">Включение механизма кэширования</h3> +<p>Для включения механизма кэширования приложения вам необходимо включить атрибут {{htmlattrxref("manifest", "html")}} в элемент {{HTMLElement("html")}} на странице вашего приложения, как показано примере ниже:</p> +<div style="overflow: hidden;"> + <pre class="brush: html"><html manifest="example.appcache"> + ... +</html> +</pre> +</div> +<p>Атрибут <code>manifest</code> ссылается на файл <strong>манифеста кэша</strong>, который является текстовым файлом и содержит список ресурсов (файлов), которые браузеру следует закэшировать для вашего приложения.</p> +<p>Вам следует включить атрибут <code>manifest</code> в каждую страницу вашего приложения, внутри которой вы хотели бы осуществлять кэширование. Браузер не закэширует страницы, не содержащие атрибута <code>manifest</code>, пока такие страницы не будут явно указаны в файле манифеста. Вам не обязательно перечислять все страницы, которые вы хотите закэшировать, в файле манифеста, т.к. браузер неявно добавляет в кэш приложения каждую посещаемую пользователем страницу, где есть атрибут <code>manifest</code>.</p> +<p>Некоторые браузеры (например, Firefox) показывают панель уведомлений , когда пользователь загружает использующее кэш приложение в первый раз. Панель уведомлений может показывать примерно такое сообщение::</p> +<p style="margin-left: 40px;">Этот веб-сайт (<code>www.example.com</code>) запрашивает у вас разрешение на хранение данных для автономной работы на вашем компьютере. [Разрешить] [Никогда для этого сайта] [Не сейчас]</p> +<p>Термин "оффлайн(-доступные) приложения" иногда относится конкретно к приложениям, которым пользователь разрешил использовать возможности работы оффлайн.</p> +<h3 id="Загрузка_документов">Загрузка документов</h3> +<p>Использование кэша приложений изменяет обычный процесс загрузки документа:</p> +<ul> + <li>Если существует кэш приложения, браузер загружает документ и связаные с ним ресурсы напрямую из кэша без использования сети. Это ускоряет загрузку документа.</li> + <li>Затем браузер проверяет, был ли изменён манифест кэша на стороне сервера.</li> + <li>Если манифест кэша изменён, браузер загружает новую версию манифеста и перечисленных в нём ресурсов. Данные действия происходят в фоновом режиме и почти не влияют на производительность.</li> +</ul> +<p>Ниже приведено более подробное описание процесса загрузки документов и обновления кэша приложения:</p> +<ol> + <li>Когда браузер посещает страницу со включенным атрибутом <code>manifest</code> и кэша приложения не существует, браузер загружает документ, а затем получает все пункты файла манифеста, создавая тем самым первую версию кэша приложения.</li> + <li>Последующие посещения данной страницы приводят к загрузке документа и других ресурсов, указанных в файле манифеста, уже из кэша приложения (не с сервера). К тому же браузер также посылает событие <code>checking</code> объекту <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> и получает файл манифеста в соответствии с правилами кэширования HTTP.</li> + <li>Если текущая закэшированная копия манифеста совпадает со скачанной, браузер посылает событие <code>noupdate</code> объекту <code>applicationCache</code>, завершая процесс обновления. Обратите внимание, если вы изменили закэшированные ресурсы на стороне сервера, вам также необходимо изменить и файл манифеста, тем самым давая браузеру знать, какие из ресурсов нужно получить повторно.</li> + <li>Если файл манифеста изменился, то все перечисленные в нём файлы, так же, как и добавленные в кэш с помощью вызова <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>, попадают во временный кэш с учётом правил кэширования HTTP. Во время обновления каждого файла в этом временном кэше браузер посылает событие <code>progress</code> объекту <code>applicationCache</code>. Если происходит ошибка, браузер посылает событие <code>error</code>, а обновление прекращается.</li> + <li>Как только успешно получены все файлы, они автоматически отправляются в настоящий оффлайн-кэш, а объекту <code>applicationCache</code> посылается событие <code>cached</code>. Поскольку документ уже был загружен в браузер из кэша, обновлёный документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).</li> +</ol> +<h2 id="Место_хранения_и_очистка_оффлайн-кэша">Место хранения и очистка оффлайн-кэша</h2> +<p>В Chrome оффлайн-кэш можно очистить, выбрав «Очистить историю...» в настройках или перейдя на адрес <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. У Safari также есть похожий пункт «Очистить кэш» в настройках, но для этого также может понадобиться перезапуск браузера.</p> +<p>Firefox хранит данные оффлайн-кэша отдельно от профиля — по соседству с обычным дисковым кэшем:</p> +<ul> + <li>В Windows Vista/7: <code>C:\Users\<пользователь>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<соль>.<имя профиля>\OfflineCache</code></li> + <li>В Mac/Linux: <code>/Users/<<code>пользователь</code>>/Library/Caches/Firefox/Profiles/<<code>соль</code>>.<<code>имя профиля</code>>/OfflineCache</code></li> +</ul> +<p>Текущее состояние оффлайн-кэша в Firefox можно посмотреть на странице <code>about:cache</code> (в разеделе «Offline cache device»). Оффлайн-кэш можно очистить по отдельности для каждого сайта, используя кнопку «Удалить...» в разделе Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое.</p> +<p>До Firefox 11 кэш нельзя было очистить ни кнопкой Инструменты -> Удалить недавнюю историю, ни Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое -> Очистить сейчас. Сейчас эта проблема устранена.</p> +<p>В Linux настройки оффлайн-кэша можно найти в разделе Инструменты -> Настройки -> Дополнительные -> Сеть -> Автономное содержимое и данные пользователя</p> +<p>См. также <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">очистка данных хранилища DOM</a>.</p> +<p>Также кэши приложения могут устареть. Если с сервера удалить файл манифеста, браузер удалит все кэши, которые были в нём указаны, и пошлёт событие <code>obsoleted</code> объекту <code>applicationCache</code>, что установит состояние кэша в <code>OBSOLETE</code>.</p> +<h2 id="Файл_манифеста_кэша">Файл манифеста кэша</h2> +<h3 id="Ссылки_на_файл_манифеста_кэша">Ссылки на файл манифеста кэша</h3> +<p><code>Атрибут manifest</code> может модержать как относительный путь, так и абсолютный URL (который должен соответствовать принципу единого источника) к файлу манифеста. Файл манифеста кэша может иметь любое расширение, но его MIME- тип должен быть <code>text/cache-manifest</code>.</p> +<div class="note"> + <strong>Примечание: </strong>На серверах Apache MIME-тип файлов манифеста (.appcache) можно настроить, добавив строчку <code>AddType text/cache-manifest .appcache</code> в файл .htaccess в корневой директории или же директории приложения.</div> +<h3 id="Пункты_манифеста_кэша">Пункты манифеста кэша</h3> +<p>Манифест кэша представляет собой обычный текстовый файл, содержащий список ресурсов, которые браузеру следует закэшировать для обеспечения автономного доступа. Ресурсы идентифицируются по URI. Объекты, перечисленные в манифесте кэша должны иметь те же протокол, хост и порт, что и сам манифест.</p> +<h3 id="Пример_1_простой_файл_манифеста_кэша">Пример 1: простой файл манифеста кэша</h3> +<p>Ниже приведено содержимое простого файла манифеста кэша для воображаемого веб-сайта <span class="nowiki">www.example.com</span>.</p> +<pre>CACHE MANIFEST +# v1 - 2011-08-13 +# Это комментарий. +<span class="nowiki">http://www.example.com/index.html</span> +<span class="nowiki">http://www.example.com/header.png</span> +<span class="nowiki">http://www.example.com/blah/blah</span> +</pre> +<p>Манифест кэша может включать три секции (<code>CACHE</code>, <code>NETWORK</code> и <code>FALLBACK</code>, которые будут рассмотрены далее). В приведённом примере нет заголовков секций, поэтому предполагается, что все строчки находятся в явной секции <code>CACHE</code>, подразумевая, что все указанные в них ресурсы браузеру следует сохранить в кэше приложения. Ресурсы могут быть указаны с использованием как абсолютных, так и относительных URL (например, <code>index.html</code>).</p> +<p>Для наличия в кэше комментария «v1» есть веские основания. Браузер обновляет кэш приложения, только если изменён файл манифеста, хотя бы один байт в нём. Если вы изменяете закэшированный ресурс на стороне сервера, (например, при обновлении содержимого картинки <code>header.png</code>), вы также должны изменить содержимое файла манифеста, тем самым сообщая браузеру, что нужно обновить кэш. Вы можете изменять файл манифеста так, как вам угодно, но лучшие практики рекомендуют использовать изменение номера пересмотра.</p> +<div class="warning"> + <strong>Важное замечание:</strong> Не указывайте в манифесте ссылку на него самого, в противном случае будет невозможно сообщить браузеру о том, что кэш обновился.</div> +<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3> +<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p> +<dl> + <dt> + <code>CACHE:</code></dt> + <dd> + This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd> + <dt> + <code>NETWORK:</code></dt> + <dd> + Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. Wildcards may be used.</dd> + <dt> + <code>FALLBACK:</code></dt> + <dd> + The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd> +</dl> +<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p> +<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3> +<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p> +<pre>CACHE MANIFEST +# v1 2011-08-14 +# This is another comment +index.html +cache.html +style.css +image1.png + +# Use from network if available +NETWORK: +network.html + +# Fallback content +FALLBACK: +/ fallback.html +</pre> +<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p> +<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3> +<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p> +<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p> +<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p> +<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p> +<dl> + <dt> + Blank line</dt> + <dd> + You may use blank lines comprised of zero or more space and tab characters.</dd> + <dt> + Comment</dt> + <dd> + Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines (after the initial <span style='line-height: normal; font-family: "Courier New", "Andale Mono", monospace; font-size: 14px;'>CACHE MANIFEST </span><span style="line-height: 1.572; font-size: 14px;">line), and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</span></dd> + <dt> + Section header</dt> + <dd> + Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd> +</dl> +<blockquote> + <table class="standard-table"> + <tbody> + <tr> + <th>Section header</th> + <th>Description</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>Switches to the explicit section of the cache manifest (this is the default section).</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Switches to the online whitelist section of the cache manifest.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Switches to the fallback section of the cache manifest.</td> + </tr> + </tbody> + </table> +</blockquote> +<dl> + <dd> + The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd> + <dt> + Section data</dt> + <dd> + The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (the wildcard character * is allowed in this section).<br> + <div class="note"> + <strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div> + </dd> +</dl> +<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p> +<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2> +<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p> +<dl> + <dt> + Master entries</dt> + <dd> + These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd> + <dt> + Explicit entries</dt> + <dd> + These are resources explicitly listed in the application's cache manifest file.</dd> + <dt> + Network entries</dt> + <dd> + These are resources listed in the application's cache manifest files as network entries.</dd> + <dt> + Fallback entries</dt> + <dd> + These are resources listed in the application's cache manifest files as fallback entries.</dd> +</dl> +<div class="note"> + <strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div> +<p>Resource categories are described in greater detail below.</p> +<h3 id="Master_entries">Master entries</h3> +<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, which looks like this:</p> +<pre class="brush: html"><html manifest="example.appcache"> + <h1>Application Cache Example</h1> +</html> +</pre> +<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p> +<h3 id="Explicit_entries">Explicit entries</h3> +<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p> +<h3 id="Network_entries">Network entries</h3> +<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p> +<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p> +<pre>CACHE MANIFEST +NETWORK: +/api +</pre> +<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p> +<div class="note"> + <strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div> +<h3 id="Fallback_entries">Fallback entries</h3> +<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p> +<pre>CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> +<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p> +<h2 id="Cache_states">Cache states</h2> +<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p> +<dl> + <dt> + <code>UNCACHED</code></dt> + <dd> + A special value that indicates that an application cache object is not fully initialized.</dd> + <dt> + <code>IDLE</code></dt> + <dd> + The application cache is not currently in the process of being updated.</dd> + <dt> + <code>CHECKING</code></dt> + <dd> + The manifest is being fetched and checked for updates.</dd> + <dt> + <code>DOWNLOADING</code></dt> + <dd> + Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd> + <dt> + <code>UPDATEREADY</code></dt> + <dd> + There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd> + <dt> + <code>OBSOLETE</code></dt> + <dd> + The application cache group is now obsolete.</dd> +</dl> +<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2> +<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p> +<pre class="brush: js">function onUpdateReady() { + alert('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> +<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p> +<h2 id="Gotchas">Gotchas</h2> +<ul> + <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li> + <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>3.5</td> + <td>10.0</td> + <td>10.6</td> + <td>4.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>11.0</td> + <td>3.2</td> + </tr> + </tbody> + </table> +</div> +<p>Note: Versions of Firefox prior to 3.5 ignore the <code>NETWORK </code>and <code>FALLBACK </code>sections of the cache manifest file.</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="http://appcache.offline.technology/" title="http://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li> + <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> + <ul> + <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag" title="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li> + </ul> + </li> + <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> + <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li> + <li>{{interface("nsIApplicationCache")}}</li> + <li>{{interface("nsIApplicationCacheNamespace")}}</li> + <li>{{interface("nsIApplicationCacheContainer")}}</li> + <li>{{interface("nsIApplicationCacheChannel")}}</li> + <li>{{interface("nsIApplicationCacheService")}}</li> + <li>{{interface("nsIDOMOfflineResourceList")}}</li> + <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> + <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li> +</ul> diff --git a/files/ru/web/html/поддерживаемые_медиа_форматы/index.html b/files/ru/web/html/поддерживаемые_медиа_форматы/index.html new file mode 100644 index 0000000000..dd7f204747 --- /dev/null +++ b/files/ru/web/html/поддерживаемые_медиа_форматы/index.html @@ -0,0 +1,516 @@ +--- +title: Форматы медиа поддерживаемые HTML audio и video элементами +slug: Web/HTML/Поддерживаемые_медиа_форматы +translation_of: Web/Media/Formats +--- +<p><span class="seoSummary">{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы предоставляют поддержку для проигрывания аудио и видео медиа без нужды в плагинах. </span>Формат медиафайла состоит из контейнера, содержащего один или несколько потоков данных, закодированных с использованием формата сжатия, называемого кодеком. Контейнер идентифицируется по расширению файла. Потоки внутри контейнера имеют несколько типов, которые могут включать в себя видео, аудио, данные или титры. Один контейнер (т. е. медиафайл) может содержать несколько потоков одного типа. В аудио- и видео- потоках находятся кодеки. Кодек — сокращенние слов "кодера-декодер" — является алгоритмом сжатия данных в файле. Каждый тип контейнера имеет только определенные кодеки, которые он поддерживает.</p> + +<p>Важно понять, почему в Интернете нужны разные медиаформаты. По разным причинам, выходящим за рамки данной статьи, различные браузеры поддерживают разные медиаформаты. Кроме того, область медиаформатов в Интернете сильно пострадала от патентного права во многих странах, включая США и страны ЕС. (Примечания к патентам в этой статье предоставляются как есть, так и без каких-либо гарантий.) В этой статье рассматриваются наиболее важные для Интернета форматы, включая поддержку в браузерах как мобильных, так и десктопных .</p> + +<p> </p> + +<h3 id="Отображение_медиа">Отображение медиа</h3> + +<p> </p> + +<p>Ниже краткий обзор того, как медиа-элементы отображаются в HTML. Более подробную информацию смотрите в статьях для каждого элемента.</p> + +<p>HTML5 поддерживает несколько элементов мультимедиа. Элементы {{HTMLElement ("video")}} и {{HTMLElement ("audio")}} могут использоваться отдельно или в сочетании с элементом {{HTMLElement ("source")}}. Наш краткий пример отображает это. Хотя элементы <code><video></code> и <code><audio></code> содержат атрибуты src, этот пример использует элемент <code><source></code> для предоставления видеофайлов в нескольких форматах, позволяя каждому браузеру выбирать элемент, который он поддерживает.</p> + +<pre class="brush: html"><video controls> + <source src="somevideo.webm" type="video/webm"> + <source src="somevideo.mp4" type="video/mp4"> + Сожалею; ваш браузер не поддерживает HTML5 видео в WebM с VP8 или MP4 с H.264. + <!-- Ты можешь встроить флеш плеер сюда, для воспроизведения твоего mp4 видео в старых браузерах --> +</video> +</pre> + +<h2 id="WebM">WebM</h2> + +<p>Формат <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> основан на ограниченной версии формата контейнера <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a>. Формат всегда использует видео кодек VP8 или VP9 и аудио кодек Vorbis или Opus. WebM нативно поддерживается в десктопной и мобильной версиях Gecko (Firefox), Chrome и Opera. Поддержка формата может быть добавлена в Internet Explorer и Safari (но не на iOS) установкой плагина. Нативная поддержка VP9 WebM в Edge сейчас в стадии разработки.</p> + +<p>Формат WebM, а точнее видеокодек VP8, подвергся претензиям в нарушениях патентов от ряда компаний, отвечающих на требования, MPEG LA о фомировании списка патентов, но при этом <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA дала согласие на лицензирование этих патентов для Google</a> под лицензией "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>. Это фактически означает, что все известные патенты, относящиеся к формату WebM лицензированы для свободного использования всеми.</p> + +<p>Движок Gecko распознаёт следующие типы MIME как файлы WebM:</p> + +<dl> + <dt><code>video/webm</code></dt> + <dd>файл WebM, содержащий видео (а возможно, также и аудио).</dd> + <dt><code>audio/webm</code></dt> + <dd>Файл WebM, содержащий только аудиоданные.</dd> +</dl> + +<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> + +<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.</p> + +<p>WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don't support WebM, but do support Ogg.)</p> + +<p>The patent situation of Theora is similar to that of WebM.</p> + +<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p> + +<p>Gecko recognizes the following MIME types as Ogg files:</p> + +<dl> + <dt><code>audio/ogg</code></dt> + <dd>An Ogg file containing only audio.</dd> + <dt><code>video/ogg</code></dt> + <dd>An ogg file containing video (and possibly also audio).</dd> + <dt><code>application/ogg</code></dt> + <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd> +</dl> + +<h2 id="Ogg_Opus">Ogg Opus</h2> + +<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later, on desktop and mobile browsers.</p> + +<h2 id="MP4_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h2> + +<p>The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.</p> + +<div class="note"> +<p><strong>Note</strong>: MP4s encoded with a high profile will not run on lower end hardware, such as low end Firefox OS phones.</p> +</div> + +<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anyway</a>, and Google never fulfilled their promise to <span class="external">remove support for it in Chrome</span>.</p> + +<h2 id="MP3">MP3</h2> + +<p>MP3 аудио формат (.mp3, <code>audio/mpeg</code>; в отличии от выше MP3 аудио в случае MP4 контейнера) поддерживается в <code><audio></code> Firefox/Firefox для Android/Firefox OS когда операционая система обеспечивает MP3 декодер, и Internet Explorer, Chrome и Safari.</p> + +<h2 id="WAVE_PCM">WAVE PCM</h2> + +<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by desktop/mobile Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p> + +<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div> + +<p>Gecko recognizes the following MIME types as WAVE audio files:</p> + +<ul> + <li><code>audio/wave</code> (preferred; does not work in Chrome)</li> + <li><code>audio/wav</code></li> + <li><code>audio/x-wav</code></li> + <li><code>audio/x-pn-wav</code></li> +</ul> + +<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2> + +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{ domxref("HTMLMediaElement") }} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. This currently has experimental support in Firefox desktop, and other browsers too.<br> + <br> + For example, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: Time Shifting is the process of consuming a live stream some time after it happened.</p> +</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.60</td> + <td>3.1 (must be installed separately)</td> + </tr> + <tr> + <td><code><audio></code>: Streaming Vorbis in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("36.0") }} in Nightly/Dev edition only</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><audio>: MP3</td> + <td>{{ CompatVersionUnknown() }} (Not in Chromium)</td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td> + <p>{{ CompatUnknown() }}</p> + </td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> + </td> + <td> + <p>Partial (see below)</p> + </td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>27.0</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>6.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> + <td>10.60</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>29.0</td> + <td>{{ CompatGeckoDesktop("28.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Streaming VP9 and Opus/VP8 and Opus in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("36.0") }} in Nightly/Dev edition only</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>3.1</td> + </tr> + <tr> + <td>any other format</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.1 (plays all formats available via QuickTime)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Opera Mini</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Streaming Vorbis in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>16.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Streaming VP9 and Opus/VP8 and Opus in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td>Partial (see below)</td> + <td>24.0</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (see below)</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td>Partial (see below)</td> + <td>24.0</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td>any other format</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Notes:</p> + +<ul> + <li>AAC is only supported in the MP4 container.</li> + <li>Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</li> + <li>To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</li> + <li>In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.</li> + <li>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox desktop supports these formats on the following platforms:</li> +</ul> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Platform</th> + <th scope="col">Firefox version</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+</td> + <td>22.0+</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> + <td>20.0+</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> + <td>15.0+</td> + </tr> + <tr> + <td>Linux</td> + <td> + <p>26.0+ (relies on GStreamer codecs)</p> + </td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7+</a></td> + <td>35.0+</td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> + <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> + <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> + <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> + <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> +</ul> diff --git a/files/ru/web/html/ссылки/index.html b/files/ru/web/html/ссылки/index.html new file mode 100644 index 0000000000..285cf4b590 --- /dev/null +++ b/files/ru/web/html/ссылки/index.html @@ -0,0 +1,32 @@ +--- +title: Справка по HTML +slug: Web/HTML/Ссылки +tags: + - HTML + - Landing + - Web + - Веб + - Справка + - лендинг +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p>Эта справка описывает все <strong>элементы</strong> и <strong>атрибуты</strong> <a href="/ru/docs/Web/HTML">HTML</a>, включая <strong>глобальные атрибуты</strong>, которые применяются ко всем элементам.</p> + +<dl> + <dt><a href="/ru/docs/Web/HTML/Element">Справка по HTML-элементам</a></dt> + <dd>На этой странице перечислены все HTML-элементы.</dd> + <dt><a href="/ru/docs/Web/HTML/Attributes">Справка по HTML-атрибутам</a></dt> + <dd>У элементов в HTML есть атрибуты; это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами, чтобы соответствовать критериям, которые хотят пользователи.</dd> + <dt><a href="/ru/docs/Web/HTML/Общие_атрибуты">Глобальные атрибуты</a></dt> + <dd>Глобальные атрибуты - это атрибуты общие для всех элементов HTML; они могут использоваться на всех элементах, однако могут не оказывать влияние на некоторые элементы.</dd> + <dt><a href="/ru/docs/Web/HTML/Типы_ссылок">Типы ссылок</a></dt> + <dd>В HTML следующие типы ссылок указывают на связь между двумя документами, в котором один связывается с другим с помощью элементов {{HTMLElement("a")}}, {{HTMLElement("area")}} или {{HTMLElement("link")}}.</dd> + <dt><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></dt> + <dd>Каждый элемент HTML принадлежит одной или более категории контента - эти категории группируют элементы, которые имеют общие характеристики.</dd> + <dt><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Форматы даты и времени, применяемые в HTML</a></dt> + <dd>Некоторые элементы HTML позволяют вам указывать дату и/или время как значение или как значение атрибута. К ним относятся изменение даты и времени элемента {{HTMLElement("input")}}, а так же элементов {{HTMLElement("ins")}} и {{HTMLElement("del")}}.</dd> +</dl> + +<p><span class="alllinks"><a href="/ru/docs/tag/HTML" title="Статьи с меткой HTML">Посмотреть все страницы с меткой "HTML"...</a></span></p> diff --git a/files/ru/web/html/строчные_элементы/index.html b/files/ru/web/html/строчные_элементы/index.html new file mode 100644 index 0000000000..bc89aa392c --- /dev/null +++ b/files/ru/web/html/строчные_элементы/index.html @@ -0,0 +1,51 @@ +--- +title: Строчные элементы +slug: Web/HTML/Строчные_Элементы +translation_of: Web/HTML/Inline_elements +--- +<h2 id="Summary" name="Summary">Определение</h2> + +<p><span class="seoSummary">В HTML (Языке Гипертекстовой Разметки), строчные элементы это те, которые занимают только то пространство, которое ограничено тегами, определяющими строчный элемент (необходимое для отображения их содержимого) и не нарушая потока содержимого (не требующее новой строки после каждого элемента). В этой статье мы рассмотрим встроенные элементы HTML и то, как они отличаются от <a href="/ru/docs/Web/HTML/Block-level_elements">блочных элементов</a>.</span></p> + +<div class="note"> +<p>Строчный элемент не начинается с новой строки и в ширину занимает столько места, сколько это необходимо для его отображения.</p> +</div> + +<h2 id="Inline_example" name="Inline_example">Пример строчного элемента</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Этот элемент <span>span</span> строчный; цвет его фона изменен, чтобы показать начало и конец элемента.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Inline_example') }}</p> + +<h2 id="Строчные_vs._блочные">Строчные vs. блочные</h2> + +<dl> + <dt>Модель контента</dt> + <dd>Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Вы не можете помещать элементы блока внутри встроенных элементов.</dd> + <dt>Форматирование</dt> + <dd>По умолчанию встроенные элементы не заставляют новую строку начинаться в потоке документа. С другой стороны, элементы блока обычно вызывают разрыв строки (хотя, как обычно, это можно изменить с помощью CSS).</dd> +</dl> + +<h2 id="Elements" name="Elements">Элементы</h2> + +<p>Следующие элементы являются строчными:</p> + +<ul id="inline-elements"> + <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">b</a>, <a href="/en/HTML/Element/big" title="en/HTML/Element/big">big</a>, <a href="/en/HTML/Element/i" title="en/HTML/Element/i">i</a>, <a href="/en/HTML/Element/small" title="en/HTML/Element/small">small</a>, <a href="/en/HTML/Element/tt" title="en/HTML/Element/tt">tt</a></li> + <li><a href="/en/HTML/Element/abbr" title="en/HTML/Element/abbr">abbr</a>, <a href="/en/HTML/Element/acronym" title="en/HTML/Element/acronym">acronym</a>, <a href="/en/HTML/Element/cite" title="en/HTML/Element/cite">cite</a>, <a href="/en/HTML/Element/code" title="en/HTML/Element/code">code</a>, <a href="/en/HTML/Element/dfn" title="en/HTML/Element/dfn">dfn</a>, <a href="/en/HTML/Element/em" title="en/HTML/Element/em">em</a>, <a href="/en/HTML/Element/kbd" title="en/HTML/Element/kbd">kbd</a>, <a href="/en/HTML/Element/strong" title="en/HTML/Element/strong">strong</a>, <a href="/en/HTML/Element/samp" title="en/HTML/Element/samp">samp</a>, <a href="/en/HTML/Element/time">time</a>, <a href="/en/HTML/Element/var" title="en/HTML/Element/var">var</a></li> + <li><a href="/en/HTML/Element/a" title="en/HTML/Element/a">a</a>, <a href="/en/HTML/Element/bdo" title="en/HTML/Element/bdo">bdo</a>, <a href="/en/HTML/Element/br" title="en/HTML/Element/br">br</a>, <a href="/En/HTML/Element/Img" title="En/HTML/Element/Img">img</a>, <a href="/en/HTML/Element/map" title="en/HTML/Element/map">map</a>, <a href="/en/HTML/Element/object" title="en/HTML/Element/object">object</a>, <a href="/en/HTML/Element/q" title="en/HTML/Element/q">q</a>, <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script">script</a>, <a href="/en/HTML/Element/span" title="en/HTML/Element/span">span</a>, <a href="/en/HTML/Element/sub" title="en/HTML/Element/sub">sub</a>, <a href="/en/HTML/Element/sup" title="en/HTML/Element/sup">sup</a></li> + <li><a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a>, <a href="/en/HTML/Element/Input" title="en/HTML/Element/Input">input</a>, <a href="/en/HTML/Element/label" title="en/HTML/Element/label">label</a>, <a href="/en/HTML/Element/select" title="en/HTML/Element/select">select</a>, <a href="/en/HTML/Element/textarea" title="en/HTML/Element/textarea">textarea</a></li> +</ul> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/HTML/Block-level_elements" title="en/HTML/Block-level_elements">Блочные элементы</a></li> +</ul> diff --git a/files/ru/web/html/типы_ссылок/index.html b/files/ru/web/html/типы_ссылок/index.html new file mode 100644 index 0000000000..23386346a7 --- /dev/null +++ b/files/ru/web/html/типы_ссылок/index.html @@ -0,0 +1,502 @@ +--- +title: Типы ссылок +slug: Web/HTML/Типы_ссылок +translation_of: Web/HTML/Link_types +--- +<p>{{HTMLSidebar}}</p> + +<p>В HTML следующие типы ссылок показывают отношения между двумя документами, в одном из которых, ссылка ведёт к другому, используя элементы {{HTMLElement("a")}}, {{HTMLElement("area")}} или {{HTMLElement("link")}}.</p> + +<table class="standard-table"> + <caption>Список типов ссылок и их значений в HTML</caption> + <thead> + <tr> + <th scope="col">Тип ссылки</th> + <th scope="col">Описание</th> + <th scope="col" style="width: 12em;">Разрешён в этих элементах</th> + <th scope="col">Не разрешён в</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>alternate</code></td> + <td> + <ul> + <li>If the element is {{HTMLElement("link")}} and the {{htmlattrxref("rel", "link")}} attribute also contains the <code>stylesheet</code> type, the link defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</li> + <li>If the {{htmlattrxref("type","link")}} is set to <code>application/rss+xml</code> or <code>application/atom+xml</code>, the link defines a <a href="/en-US/docs/RSS/Getting_Started/Syndicating">syndication feed</a>. The first one defined on the page is the default.</li> + <li>Otherwise, the link defines an alternative page, of one of these types: + <ul> + <li>for another medium, like a handheld device (if the {{htmlattrxref("media","link")}} attribute is set)</li> + <li>in another language (if the {{htmlattrxref("hreflang","link")}} attribute is set),</li> + <li>in another format, such as a PDF (if the {{htmlattrxref("type","link")}} attribute is set)</li> + <li>a combination of these</li> + </ul> + </li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>archives</code> {{obsolete_inline}}</td> + <td>Defines a hyperlink to a document that contains an archive link to this one. For example, a blog entry could link to a monthly index page this way.<br> + <br> + <strong>Note:</strong> Although recognized, the singular <code>archive</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>author</code></td> + <td>Defines a hyperlink to a page describing the author or providing a way to contact the author.<br> + <br> + <strong>Note:</strong> This may be a <code>mailto:</code> hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address. In that case, it is better to lead to a page containing a contact form.<br> + <br> + Although recognized, the {{htmlattrxref("rev", "link")}} attribute on {{HTMLElement("a")}}, {{HTMLElement("area")}} or{{HTMLElement("link")}} elements with a link type of <code>made</code> is incorrect and should be replaced by the {{htmlattrxref("rel", "link")}} attribute with this link type.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>bookmark</code></td> + <td>Indicates that the hyperlink is a <a href="/en-US/docs/Permalink">permalink</a> for the nearest ancestor {{HTMLElement("article")}} element. If none, it is a permalink for the <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">section</a> that the element is most closely associated to.<br> + <br> + This allows for bookmarking a single article in a page containing multiple articles, such as on a monthly summary blog page, or a blog aggregator.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>dns-prefetch</code> {{experimental_inline}}</td> + <td>Hints to the browser that a resources is needed allowing the browser to do a DNS lookup and protocol handshaking before a user clicks the link.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>external</code></td> + <td>Indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>first</code> {{obsolete_inline}}</td> + <td>Indicates that the hyperlink leads to the first resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>last</code>, <code>prev</code>, <code>next</code>.<br> + <br> + Although recognized, the synonyms <code>begin</code> and <code>start</code> are incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>help</code></td> + <td> + <ul> + <li>If the element is {{HTMLElement("a")}} or {{HTMLElement("area")}}, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants.</li> + <li>If the element is {{HTMLElement("link")}} it indicates that the hyperlink leads to a resource giving further help about the page as a whole.</li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>Defines a resource for representing the page in the user interface, usually an icon (auditory or visual).<br> + <br> + The {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} and {{htmlattrxref("sizes","link")}} attributes allow the browser to select the most appropriate icon for its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be inappropriate upon further inspection, the browser will then select another one, if appropriate.<br> + <br> + <strong>Note:</strong> Apple's iOS does not use this link type, nor the {{htmlattrxref("sizes","link")}} attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> and <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectively.<br> + <br> + The <code>shortcut</code> link type is often seen before <code>icon</code>, but this link type is non-conforming, ignored and <strong>web authors must not use it anymore</strong>.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>index</code> {{obsolete_inline}}</td> + <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br> + <br> + If one or several <code>up</code> link types are also present, the number of these <code>up</code> indicates the depth of the current page in the hierarchy.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>last</code> {{obsolete_inline}}</td> + <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>next</code>.<br> + <br> + Although recognized, the synonym <code>end</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>license</code></td> + <td>Indicates that the hyperlink leads to a document describing the licensing information. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.<br> + <br> + <strong>Note: </strong>Although recognized, the synonym <code>copyright</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>Indicates that the linked file is a <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">Web App Manifest</a>.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>next</code></td> + <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>last</code>.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noopener</code></td> + <td>Instructs the browser to open the link without granting the new browsing context access to the document that opened it, by not setting the {{domxref("Window.opener")}} property on the opened window.<br> + <br> + This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document, while still providing the <code>Referer</code> HTTP header (unless <code>noreferrer</code> is used as well).</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noreferrer</code></td> + <td> + <p>Prevents the browser, when navigating to another page, to send this page name, or any other value, as referrer via the <code>Referer:</code> HTTP header.<br> + (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>pingback</code></td> + <td>Defines an external resource URI to call if one make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br> + <br> + <strong>Note:</strong> if the <code>X-Pingback:</code> HTTP header is also present, it supersedes the {{HTMLElement("link")}} element with this link type.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>preconnect</code> {{experimental_inline}}</td> + <td>Provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prefetch</code></td> + <td>Suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. Starting with Firefox 44, the value of the {{htmlattrxref("crossorigin", "link")}} attribute is taken into consideration, making it possible to make anonymous prefetches.<br> + <br> + <strong>Note:</strong> The <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative methods.</td> + <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br> + {{HTMLElement("area")}} {{unimplemented_inline}},<br> + {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>preload</code></td> + <td>Tells the browser to download a resource because this resource will be needed later during the current navigation.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prerender</code> {{experimental_inline}}</td> + <td>Suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prev</code></td> + <td>Indicates that the hyperlink leads to the <em>preceding</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> You can also use the <code>next</code> keyword to specify a link to the next page in the sequence.<br> + <br> + Although recognized, the synonym <code>previous</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>search</code></td> + <td>Indicates that the hyperlink reference a document whose interface is specially designing for searching in this document, or site, and its resources.<br> + <br> + If the {{htmlattrxref("type","link")}} attribute is set to <code>application/opensearchdescription+xml </code>the resource is an <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>stylesheet</code></td> + <td>Defines an external resource to be used as a stylesheet. If the <code>type</code> is not set, the browser should assume it is a <code>text/css</code> stylesheet until further inspection.<br> + <br> + If used in combination with the <code>alternate</code> keyword, it defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>sidebar</code> {{non-standard_inline}}</td> + <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, that don't have such a context will ignore this keyword.<br> + <br> + While once part of the HTML specification, this has been removed from the spec and is only implemented by Firefox at this time.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + <tr> + <td><code>tag</code></td> + <td>Indicates that the hyperlink refers to a document describing a <em>tag</em> that applies to this document.<br> + <br> + <strong>Note:</strong> This link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>up</code> {{obsolete_inline}}</td> + <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br> + <br> + The number of <code>up</code> link types indicates the depth difference between the current page and the linked resource.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Нет</em></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Добавлен <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td> + <td>{{Spec2('Resource Hints')}}</td> + <td>Добавлены <code>dns-prefetch</code>, <code>preconnect</code> и <code>rerender</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Нет изменений с ({{SpecName('HTML WHATWG')}})</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Добавлены <code>tag</code>, <code>stylesheet</code>, <code>search</code>, <code>prev</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>next</code>, <code>license</code>, <code>icon</code>, <code>help</code>, <code>bookmark</code>, <code>author</code> и <code>alternate</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Альтернативные таблицы стилей</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>prefetch</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>prerender</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>preconnect</code></td> + <td>{{CompatChrome(46)}}</td> + <td>{{CompatGeckoDesktop("39")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>dns-prefetch</code></td> + <td>{{CompatChrome(46)}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>noopener</code></td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td>{{CompatOpera(36)}}</td> + <td> </td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{CompatNo}} [2]</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Альтернативные таблицы стилей</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>prefetch</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>prerender</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>preconnect</code></td> + <td>{{CompatChrome(46)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("39")}} </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}} [1]</td> + </tr> + <tr> + <td><code>dns-prefetch</code></td> + <td>{{CompatChrome(46)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(50.0)}}</td> + </tr> + <tr> + <td><code>noopener</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td>32</td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] До Firefox 41, не подчиняется атрибуту {{htmlattrxref("crossorigin", 'link')}}.</p> + +<p>[2] Поскольку это мобильная функция, ПК игнорирует его, а не бросает ошибку.</p> |