diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/html/element/br/index.html | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/html/element/br/index.html')
-rw-r--r-- | files/ru/web/html/element/br/index.html | 111 |
1 files changed, 111 insertions, 0 deletions
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> |