— Веб-технологии для разработчиков
HTML-элемент <br> устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.
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 https://github.com/mdn/interactive-examples and send us a pull request.
Как мы видим из примера выше, элемент <br> поставлен в том месте, где мы хотим перенести строку. Текст после <br> начинается со следующей строки текстового блока.
Примечание: Не используйте <br> для увеличения разрыва между строками в тексте; используйте CSS-свойство margin элемента <p>.
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
Устаревшие атрибуты
clear- Определяет, где начинается следующая строка после перевода строки.
Стилизация с CSS
Элемент <br> имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.
Вы можете установить значение margin на <br> чтобы увеличть расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство line-height для этой цели.
Примеры
Простой br
В следующем примере мы используем элемент <br>
Mozilla<br> 331 E. Evelyn Avenue<br> Mountain View, CA<br> 94041<br> USA<br>
Результат будет выглядеть так:
Проблемы доступности
Разделять абзацы в тексте, используя <br> не только плохая практика, но и проблема для людей, которые используют программы чтения с экрана. Программы чтения могут сообщать о наличии элемента, но не содержимом в <br>. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана.
Техническая сводка
Спецификации
Совместимость с браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
br | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
clear | Chrome Полная поддержка 1 | Edge Полная поддержка | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
- Устаревшая. Не следует использовать в новых веб-сайтах
- Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите также
HTML тег
| onafterprint | Скрипт виконується тільки після як документ надрукований. |
| onbeforeprint | Скрипт виконується перед тим, як документ надрукований. |
| onbeforeunload | Скрипт виконується коли документ ось-ось буде вивантажений |
| onhashchange | Скрипт виконується коли там відбулися зміни до частини якоря в URL |
| onload | Викликається після того як завантаження елемента завершене. |
| onmessage | Скрипт виконується коли викликане повідомлення. |
| onoffline | Спрацьовує коли браузер починає працювати в автономному режимі |
| ononline | Спрацьовує коли браузер починає працювати в режимі онлай. |
| onpagehide | Скрипт виконується коли користувач переходить на іншу сторінку сторінку. |
| onpageshow | Скрипт виконується коли користувач заходить на сторінку. |
| onpopstate | Скрипт виконується коли змінено історію одного вікна. |
| onresize | Скрипт виконується, коли розмір вікна браузера змінюється. |
| onstorage | Скрипт виконується, коли вміст Web Storage оновлюється. |
| onunload | Викликається, коли сторінка розвантажена, або вікно браузера було зачинено. |
| onblur | Скрипт виконується, коли елемент втрачає фокус. |
| onchange | Викликається в той момент, коли значення елемента змінюється. |
| oncontextmenu | Скрипт виконується коли викликається контекстне меню. |
| onfocus | Викликається в той момент, коли елемент отримує фокус. |
| oninput | Скрипт викликається коли користувач вводить дані поле. |
| oninvalid | Скрипт виконується, коли елемент недійсний. |
| onreset | Викликається, коли натискається у формі кнопка типу Reset. |
| onsearch | Викликається, коли користувач щось пише в поле пошуку (для <input type="search">) |
| onselect | Викликаєтсья після того як будь-який текст був обраний в елементі. |
| onsubmit | Викликається при відправленні форми. |
| onkeydown | Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу. |
| onkeypress | Викликається коли корисрувач натиснув на клавішу. |
| onkeyup | Викликається коли користувач відпускає клавішу. |
| onclick | Подія викликається коли користувач клацає ЛКМ по елементу. |
| ondblclick | Виникає при подвійному клацанні ЛКМ на елементі. |
| ondrag | Періодично викликається при операції перетягування. |
| ondragend | Викликається коли користувач відпускає перелягуваний елемент. |
| ondragenter | Викликається, коли перетягуваний елемент входить в цільову зону. |
| ondragleave | Викликається, коли перетягуваний елемент виходть з зони призначення. |
| ondragover | Викликається, коли перетягуваний елемент знаходиться в зоні призначення. |
| ondragstart | Викликається, коли користувач починає перетягувати елемент, або виділений текст. |
| ondrop | Викликається, коли перетягуваний елемент падає до зони призначення. |
| onmousedown | Викликається, коли користувач затискає ЛКМ на елементі. |
| onmousemove | Викликається, коли курсор миші переміщається над елементом. |
| onmouseout | Викликається, коли курсор виходить за межі елемента. |
| onmouseover | Виконується, коли курсор наводиться на елемент. |
| onmouseup | Викликається, коли користувач відпускає кнопку миші. |
| onscroll | Викликається при прокручуванні вмісту елемента (чи веб-сторінки). |
| onwheel | Викликається, коли користувач прокручує коліщатко миші. |
| oncopy | Викликається, коли користувач копіює вміст елемента. |
| oncut | Викликається, коли користувач вирізає вміст елемента. |
| onpaste | Викликається, коли користувач вставляє вміст в елемент. |
| onabort | Виконується при перериванні якоїсь події. |
| oncanplay | Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення) |
| oncanplaythrough | Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію. |
| oncuechange | Скрипт виконується коли змінюється кий в <track> елемента |
| ondurationchange | Викликається коли змінюється довжина медіа файлу. |
| onemptied | Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею). |
| onended | Викликається коли медіа елемент повністю відтворив свій зміст. |
| onshow | Викликається, коли елемент <menu> буде відображено як контекстне меню. |
| onloadedmetadata | Скрипт виконується коли метадані (розміри чи тривалість) завантажуються. |
| onloadeddata | Викликається коли медіа данні завантажено. |
| onloadstart | Викликається коли браузер тільки починає завантажувати медіа дані з сервера. |
| onpause | Викликається коли відтворення медіа даних призупинено. |
| onplay | Скрипт викликається коли медіа дані готові почати відтворення. |
| onplaying | Викликається коли розпочато відтворення медіа даних. |
| onprogress | Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео. |
| onratechange | Викликається коли змінюється швидкість відтворення медіа даних. |
| onseeked | Викликається коли атрибут seeked у тега audio або video змінює значення з true на false. |
| onseeking | Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true |
| onstalled | Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані. |
| onsuspend | Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження. |
| ontimeupdate | Викликається коли змінилася позиція відтворення елемента <audio> або <video>. |
| onvolumechange | Викликається коли змінюється гучність звуку. |
| onwaiting | Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться. |
| ontoggle | Викликається, коли користувач відкриває або закриває елемент <details>. |
| onerror | Викликається якщо при завантаженні елемента сталася помилка. |
seodon.ru | Теги HTML — Тег BR
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <BR> используется для принудительного обрыва строки и перевода ее в начало. Обрыв строки считается пробелом, поэтому в месте установки тега пробелы не нужны. Он не добавляет никаких дополнительных полей (margin) тексту, как это делают многие блочные теги, например <BLOCKQUOTE> или <P>. А при помощи атрибута clear можно запретить обтекание текстом плавающего объекта.
Атрибуты
Личные атрибуты:
- clear — Запрещает или разрешает обтекание текстом плавающих элементов.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: текст (строки).
Модель тега: inline (встроенный, уровня строки).
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Синтаксис
текст<br>текстПример HTML: применение тега BR
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега BR</title>
</head>
<body>
<p>Всегда так будет, как бывало:<br>Таков издревле белый свет:<br>
Ученых много - умных мало,<br>Знакомых тьма - а друга нет!</p>
<p>А.С. Пушкин</p>
</body>
</html>Результат примера
Результат. Применение тега BR.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Тэг br, а так ли он нужен?
Часто можно встретить, что начинающий верстальщик для реализации некоторых своих дизайнерских решений использует тэг <br/>. Однако остаётся актуальным вопрос «правильное ли это решение?».
На практике встречаются ситуации когда при помощи этого тэга сделаны списки, абзацы, и многое другое. Например, у такого «персонажа» вместо правильной разметки списка:
<ul> <li>Строка Списка первая</li> <li>Строка Списка вторая</li> <li>Строка Списка третья</li> </ul>
Встречается код разряда:
Строка Списка первая<br/> Строка Списка вторая<br/> Строка Списка третья<br/ >
И таких неверных примеров большое количество.
Где не нужен br
Однако, если визуально можно достичь необходимого результата при помощи этого тэга, то почему бы его не использовать?
Ответ прост- этот тэг предназначен для переноса строки, а ни как не для создания списков и абзацев.
Верстка сайта, в котором часто встречается тэг <br/>, показывает низкую квалификацию «мастера». Для формирования правильной структуры документов искушённый верстальщик может использовать значительное количество специализированных тэгов, среди которых <li>, <p> и так далее. А для добавления необходимых визуальных эффектов используют стили css.
Ранее этот тэг использовался, к примеру, при написании стихов, где требовался перенос строки при незаконченной мысли. Однако при желании можно обойтись без него и здесь. Для этого есть даже несколько вариантов, первый это задать с помощью CSS ширину блока, а второй это вместо тэга <p> использовать тэг <pre>.
Для тех кто не знает что такое тэг <pre>— это тег, добавляющий на страницу предформатированный текст. Это значит, что пробелы, переносы строки и т.д. внутри его сохраняются.
При желании мы можем использовать полезные свойства <pre> у самых рядовых абзацев воспользовавшись кодом:
Хотелось бы отметить, что большинство верстальщиков, которые пишут семантический код, не включили тэг <br/> в перечень тэгов используемых при такой верстке.
Выводы
- Если возникает необходимость в создании списка на вашей странице, то не стоит использовать тег
<br/>, для этого существуют теги<ul>, <ol>, <li>, а если вам не требуется отображение маркера списка, то не стоит возвращаться к злокачественному тегу, а просто стоит в css прописать list-style-type значение none. Например:<ul> <li> Строка первая </li> <li> Строка вторая </li> <li> Строка третья </li> </ul> <style> li { list-style-type: none; } </style> - При написании текста для формирования абзацев следует использовать тег
<p>. Ну, а если требуется создать некоторое расстояние между конкретными абзацами нам в помощь придёт CSS, с селекторами first-child, last-child, nth-child – для определения конкретного абзаца и свойствами padding, margin для задания необходимого отступа. Например:Нам нужен какой-нибудь текст. Который имеет несколько абзацев. И перед последним должен быть большой отступ.
Не стоит делать этого так:
Нам нужен какой-нибудь текст.<br/> Который имеет несколько абзацев.<br/> <br/> <br/> И перед последним должен быть большой отступ.
Решение задачи просто. Во первых для каждого абзаца используем необходимый для этого тэг, и HTML код приобретёт вид:
<p> Нам нужен какой-нибудь текст.</p> <p> Который имеет несколько абзацев.</p> <p> И перед последним должен быть большой отступ.</p>
А для создания необходимого промежутка между последним абзацем и текстом используем сss:
p:last-child { padding-top: 25px; } </li> - И последнее, для создания новой строки можно использовать вспомогательные элементы, к которым относятся
<span>и<div>. Например:Контакты: (xx) xxx-xx-xx (xx) xx-xx-xxx bizonoff.net vaden-pro.ru
Это можно сверстать:
<div> <span>Контакты:</span> <span>(xx) xxx-xx-xx</span> <span>(xx) xx-xx-xxx</span> <span>bizonoff.net</span> <span>vaden-pro.ru</span> </div>
Ну а для переносов строк добавляем CSS:
Следовательно, при верстке качественного проекта, можно прекрасно обойтись и без <br/>, стоит лишь воспользоваться знаниями тэгов и использовать каждый из них по назначению.
Оценок: 9 (средняя 5 из 5)
Понравилась статья? Расскажите о ней друзьям:
Еще интересное
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 2.0+ | 1.3+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <abbr> указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
Браузеры никак не выделяют текст внутри <abbr>, за исключением Opera до версии 15, которая добавляет к тексту пунктирное подчёркивание.
Синтаксис
<abbr>Текст</abbr>Атрибуты
- title
- Добавляет всплывающую подсказку к тексту, в которой можно дать расшифровку аббревиатуры.
Также для этого тега доступны глобальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>Тег ABBR</title>
<meta charset="utf-8">
<style>
abbr {
border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста */
color: #000080; /* Темно-синий цвет текста */
}
</style>
</head>
<body>
<p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr>
обозначается протокол, с помощью которого любые внешние программы взаимодействуют
с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом
языке программирования и результат их действия выводить в виде веб-страницы.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки при наведении курсора мыши на текст аббревиатуры
Браузеры
Браузер Internet Explorer до 6 версии включительно не поддерживает тег <abbr>, взамен рекомендуется использовать тег <acronym>.
HTML-тег
Тег HTML используется для создания элемента ‘br’, который представляет разрыв строки в документе HTML.
Элемент классифицируется как «пустой элемент», так как он не имеет содержимого. Это также означает, что конечный тег не требуется (или разрешен в этом отношении).
Тег должен использоваться только для разрывов строк, которые фактически являются частью содержимого, например, в стихах или адресах.Его не следует использовать для разделения тематических групп в абзаце. Чтобы разделить тематические группы, используйте вместо этого несколько тегов
.
Также см. Тег для указания разрыва строки и .
Синтаксис
Тег записывается как
в точке, где должен произойти разрыв строки.
Нравится:
Строка 1
Линия 2
Примеры
адресов
Один хороший пример, где можно использовать тег , — это представление адресов (например, уличных адресов).Это связано с тем, что адреса обычно содержат один или несколько разрывов строк как часть содержимого.
<Адрес> Африканский фонд дикой природы
Нгонг Роуд, Карен
П.O. Box 310, 00502
Найроби, Кения
Поэзия / Лирика
Другой пример использования - — стихи или тексты песен.
Любовь — это не то, что нужно понимать.
Любовь — это не то, что нужно чувствовать.
Любовь не вещь, чтобы давать и получать.
Любовь — вещь только для того, чтобы стать
И вечно быть. Шри Чинмойразрывов строк и CSS
Несмотря на то, что он используется для создания разрыва строки, спецификация HTML5 допускает стилизацию элемента
-таким образом, чтобы браузер не отображал разрывы строки.В частности, оно гласит:Хотя разрывы строк обычно представляются на визуальном носителе путем физического перемещения последующего текста на новую строку, таблица стилей или пользовательский агент были бы одинаково оправданы, если бы разрывы строк отображались другим способом, например в виде зеленых точек или в виде дополнительных Расстояние между. — HTML5 СпецификацияТакже см. Тег
для указания разрыва строки и .Атрибуты
Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.
Элемент
принимает следующие атрибуты.
Атрибут Описание Нет Глобальные атрибуты
Следующие атрибуты являются стандартными для всех элементов HTML. Поэтому вы можете использовать эти атрибуты с тегом
, а также со всеми другими тегами HTML.
accesskeyавтокапитализироватьклассcontenteditabledata- *dirDraggableскрытоidрежим ввода-itemiditempropitemrefitemscopeтип товараlangчастьслотпроверка орфографиистильtabindexназваниепереводПолное объяснение этих атрибутов см. В разделе Глобальные атрибуты HTML 5.
Обработчики событий
Атрибуты содержимого обработчика событий позволяют вам вызывать скрипт из вашего HTML. Сценарий вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с различным событием.
онабортonauxclickonbluroncanceloncanplayна сайтеonchangeonclickoncloseoncontextmenuонкопияoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeпустыеonendedошибкаonfocusonformdataна входеoninvalidonkeydownonkeypressonkeyuponlanguagechange, нагрузказагруженных данныхзагруженных метаданныхonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseupпастана паузеonplayпри игреonprogressonratechangeна местеonresizeonscrollпо безопасностиполициолииоляцииискомыхв поискахonselectonslotchangeустановленона подачуonsuspendсвоевременное обновлениепуговицаonvolumechangeв ожиданиина колесеБольшинство атрибутов содержимого обработчика событий можно использовать для всех элементов HTML, но некоторые обработчики событий имеют определенные правила относительно того, когда их можно использовать и к каким элементам они применимы.
Подробнее см. В разделе Атрибуты содержимого обработчика событий HTML.
,: элемент Line Break — веб-технологии для разработчиковHTML
элемент создает разрыв строки в тексте (возврат каретки). Это полезно для написания стихотворения или адреса, где разделение строк является значительным.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
Как видно из приведенного выше примера, элемент
включается в каждую точку, где мы хотим, чтобы текст разрывался. Текст после
начинается снова в начале следующей строки текстового блока.
Примечание : не используйте
для создания полей между абзацами; оберните их в
элементов и используйте свойство CSSmarginдля управления их размером.атрибутов
Атрибуты этого элемента включают глобальные атрибуты.
Устаревшие атрибуты
очистить- Указывает, где начинать следующую строку после перерыва.
Стилизация с помощью CSS
Элемент
имеет одну четко определенную цель — создать разрыв строки в блоке текста. Как таковой, он не имеет собственных измерений или визуального вывода, и вы можете сделать очень мало для его стилизации.
Вы можете установить маркер
для самих элементови, чтобы увеличить расстояние между строками текста в блоке, но это плохая практика — вам следует использовать свойство с высотой строки, которое было разработано для эта цель.Примеры
Простой br
В следующем примере мы используем
элементов для создания разрывов строк между различными строками почтового адреса:
Mozilla
Эвелин Авеню, 331
Маунтин-Вью, Калифорния
94041
США SinglesРезультат выглядит так:
Проблемы доступности
Создание отдельных абзацев текста с использованием
-— это не только плохая практика, но и проблема для людей, которые ориентируются с помощью технологии чтения с экрана.Программы чтения с экрана могут сообщать о наличии элемента, но не о содержимом, содержащемся в пределах-с. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана.Используйте
элементов и используйте свойства CSS, такие какmargin, чтобы контролировать их интервал.Техническое резюме
Технические характеристики
Совместимость браузера
Обновление данных о совместимости GitHub
Настольный ПК Мобильный Chrome Edge Firefox Internet Explorer Opera Safari Веб-просмотр Android Chrome для Android Firefox для Android Opera для Android Safari на iOS Интернет Samsung brChrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Опера Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да ясноХром Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Опера Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да Легенда
- Полная поддержка
- Полная поддержка
- Устаревший.Не для использования на новых сайтах.
- Устаревший. Не для использования на новых сайтах.
См. Также
,HTML: тег
Этот учебник HTML объясняет, как использовать элемент HTML, называемый
тегом , с синтаксисом и примерами.Описание
Тег HTML
определяет разрыв строки внутри текста в документе HTML. Этот тег также обычно называют элементом
.Синтаксис
В HTML синтаксис тега
:<корпус>
Абзац начинается здесь
и заканчивается на следующей строке.или в XHTML, синтаксис для тега
:<голова>
Здесь начинается абзац
и заканчивается на следующей строке.Пример вывода
атрибутов
Помимо глобальных атрибутов, ниже приведен список атрибутов, относящихся к тегу
:
Атрибут Описание HTML-совместимость очистить Указывает, где начинать линию после перерыва. Устаревший в HTML 4.01, Устаревший в HTML5 Примечание
- Элемент HTML
находится внутри тега.- Тег
просто сбрасывает текст на следующую строку, создавая меньше вертикальных пробелов, чем если бы тегбыл закрыт в этой точке с помощью .
Совместимость браузера
Тег
имеет базовую поддержку следующих браузеров:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Опера
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Пример
Мы обсудим тег
ниже и рассмотрим примеры использования тега
в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.HTML5 Документ
Если вы создали новую веб-страницу в HTML5, ваш тег
может выглядеть следующим образом:<Голова>Пример HTML5 от www.techonthenet.com </ title> </ HEAD> <Тело> <div> Заголовок 1 </ h2> <p> Абзац начинается здесь <br> и заканчивается на следующей строке.</ Р> </ html> </code> </pre><p> В этом примере документа HTML5 мы создали тег<p> с разрывом строки <br> после слова «здесь», который перетаскивает последующий текст на следующую строку.</p><h4><span class="ez-toc-section" id="HTML_401"> HTML 4.01 Переходный документ </span></h4><p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <br> может выглядеть следующим образом:</p><pre> <code> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.ОТД "> <HTML> <Голова> <meta http-equ = "Content-Type" content = "text / html; charset = UTF-8"> <title> HTML 4.01 Переходный пример от www.techonthenet.com </ title> </ HEAD> <Тело> <div> Заголовок 1 </ h2> <p> Абзац начинается здесь <br> и заканчивается на следующей строке. </ p> </ Body> </ html> </code> </pre><p> В этом примере переходного документа HTML 4.01 мы создали тег<p> с разрывом строки <br> после слова «здесь», в результате чего последующий текст будет перенесен на следующую строку.</p><h4><span class="ez-toc-section" id="XHTML_10"> XHTML 1.0 Переходный документ </span></h4><p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег <br> может выглядеть следующим образом:</p><pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <Голова> <meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" /> <title> XHMTL 1.0 Переходный пример от www.techonthenet.com </ title> </ HEAD> <Тело> <div> Заголовок 1 </ h2> <p> Здесь начинается абзац <br /> и заканчивается на следующей строке. </ p> </ Body> </ html> </code> </pre><p> В этом примере переходного документа XHTML 1.0 мы создали тег<p>, у которого есть разрыв строки <br> после слова «здесь», в результате чего последующий текст будет перенесен на следующую строку.</p><h4><span class="ez-toc-section" id="XHTML_10-2"> XHTML 1.0 Строгий документ </span></h4><p> Если вы создали новую веб-страницу в XHTML 1.0 Строгое, твой тэг может выглядеть так:</p><pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <Голова> <meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" /> <title> Строгий пример XHTML 1.0 от www.techonthenet.com </ title> </ HEAD> <Тело> <div> Заголовок 1 </ h2> <p> Здесь начинается абзац <br /> и заканчивается на следующей строке.</ Р> </ Body> </ html> </code> </pre><p> В этом примере строгого документа XHTML 1.0 мы создали тег<p>, который имеет разрыв строки <br> после слова «здесь», что приведет к перетаскиванию последующего текста на следующую строку.</p><h4><span class="ez-toc-section" id="XHTML_11"> XHTML 1.1 Документ </span></h4><p> Если вы создали новую веб-страницу в XHTML 1.1, ваш тег <br> может выглядеть следующим образом:</p><pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.ОТД "> <html xmlns = "http://www.w3.org/1999/xhtml"> <Голова> <meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" /> <title> Пример XHTML 1.1 от www.techonthenet.com </ title> </ HEAD> <Тело> <div> Заголовок 1 </ h2> <p> Здесь начинается абзац <br /> и заканчивается на следующей строке. </ p> </ Body> </ html> </code> </pre><p> В этом примере документа XHTML 1.1 мы создали тег<p>, у которого есть разрыв строки <br> после слова «здесь», который перетаскивает последующий текст на следующую строку.</p> ,<div> учебников по веб-разработке | w3resource</h2> Фронтенд учебники HTML CSS JavaScript HTML5 Schema.org php.js Twitter Bootstrap Учебник по адаптивному веб-дизайну Zurb Foundation 3 учебника Чистый CSS HTML5 Canvas Курс JavaScript Значок угловатый реагировать Вью Шутка кофе мокко НПМ пряжа кипарис Бэкенд учебники PHP питон Python-NumPy Python-панда Ява Node.js Рубин C программирование Композитор PHPUnit Laravel asp.net Учебные пособия по базам данных SQL (стандарт 2003 ANSI) MySQL PostgreSQL SQLite NoSQL MongoDBOracle Redis Apollo GraphQL Упражнения с онлайн-редактором HTML CSS JavaScript JQuery JQuery-UICoffeeScript PHP питон NumPy Панды Машинное обучение Рубин Matplotlib Программирование на С C # Sharp C ++ Ява R программирование стриж SQL оракул PL / SQL MySQL SQLite PostgreSQL MongoDB Twitter Bootstrap Примеры Эйлер проект Учебники по Linux, обмену данными и API Linux Home Команды Linux Администрирование Linux-сервера XML JSON Ajax API Google Plus API YouTube Google Maps API Flickr API Последний.FM API API REST Twitter Разные учебники Python Projects Учебник по Excel Учебник по Firebug Полезные инструменты Шаблон Google Docs Forms Google Docs Slides Презентация Преобразование чисел Викторины статьи<hr/><p> <strong> Учебники, Упражнения, опубликованные недавно </strong></p><p> Pandas Styling: упражнения, практика, решение</p><p> Упражнения по стайлингу Pandas: Напишите программу Pandas для выделения отрицательных чисел красным и положительных чисел черным</p><p> Упражнения по стилю Pandas: Напишите программу Pandas, которая выделит значения nan</p><p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделить максимальное значение в каждом столбце</p><p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделить минимальное значение в каждом столбце</p><p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделить максимальное значение в двух последних столбцах</p><p> Упражнения по стилю Pandas: Напишите программу Pandas для установки фона данных. Цвет черный и цвет шрифта желтый</p><p> Упражнения по стайлингу Pandas: Напишите программу Pandas, чтобы выделить специфические столбцы датафрейма</p><p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделять отдельные столбцы датафрейма разными цветами</p><p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения кадра данных в табличном стиле</p><p> Упражнения по стилю Pandas: Напишите программу Pandas, чтобы выделить желтую всю строку, где значение конкретного столбца больше 0.5</p><p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения кадра данных в стиле Heatmap</p><p> Упражнения по стилю Pandas: Напишите программу Pandas для создания градиентного цветового отображения в указанном столбце</p><p> Упражнения по стилю Pandas: Напишите программу Pandas, чтобы сделать цвет градиента для всех значений указанного кадра данных</p><p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения кадра данных в стиле таблицы с рамкой вокруг таблицы, а не вокруг строк</p><p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения гистограмм в кадре данных в указанных столбцах</p><p> Введение в Мокко</p><p> Обзор цикла выполнения и обнаружение нескольких вызовов To Done ()</p><p> АСПЕРТЫ И АСИНХРОННЫЙ КОД</p><p> СИНХРОННЫЙ КОД, ФУНКЦИИ СТРЕЛКИ И КРЮЧКИ</p><p> ЗАДЕРЖАННЫЕ ИСПЫТАНИЯ ROOT SUITE В ОЖИДАНИИ ИСКЛЮЧИТЕЛЬНЫХ И ИСКЛЮЧИТЕЛЬНЫХ ИСПЫТАНИЙ</p><p> повторных испытаний и динамически генерирующих тестов</p><p> ТАЙМ-АУТЫ И ДИФФЫ</p><p> КОМАНДА-ЛИНИИ ИСПОЛЬЗОВАНИЯ</p><p> Интерфейсы</p> ,<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div><footer class="entry-footer"> <span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span></footer></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/plyusy-professii-zhurnalista-opisanie-professii-gde-uchitsya-rabotat-plyusy-i-minusy-professii.html" rel="prev">Плюсы профессии журналиста: описание профессии, где учиться, работать, плюсы и минусы профессии</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/kak-krasivo-ukrasit-rabochij-stol-v-komnate-gde-organizovat-i-kak-ukrasit-svoimi-rukami.html" rel="next">Как красиво украсить рабочий стол в комнате: где организовать и как украсить своими руками</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/html-teg-br-teg-html-spravochnik.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='6533' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div></section><footer class="wrapper wrap-footer"><section class="wrapper footer-widget"><div class="container"><div class="row"></div></div></section><section id="colophon" class="wrapper site-footer" ><div class="container"><div class="row"><div class="xs-12 col-sm-6 col-md-6"><div class="site-info"><p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong> Использование материалов сайта разрешено и <br>всячески приветствуется при одном условии:<br> <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс!</p></div></div><div class="xs-12 col-sm-6 col-md-6"><div class="footer-menu"><nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu"><div class="menu-footer-menu-container"></div></nav></div></div></div></div></section></footer> <a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a></div><div style="display:none"></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://forjobathome.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://forjobathome.ru/wp-content/cache/autoptimize/js/autoptimize_8ca328514bcfbc6f82fcaa2cd3e45cca.js"></script></body></html>
