САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Тег <hr>



Пример

Используйте тег <hr> для определения тематических изменений в содержании:

<h1>Основные языки Web</h1>

<p> HTML - стандартный язык разметки для создания веб страниц. HTML описывает структуру веб страницы и состоит из ряда элементов. HTML элементы сообщают браузеру, как отображать содержимое.</p>

<hr>

<p>CSS - язык, который описывает, как HTML элементы должны отображаться на экране, бумаге или на других носителях. CSS экономит много работы, потому что он может управлять макетом нескольких веб страниц одновременно.</p>

<hr>

<p>JavaScript - это язык программирования HTML и Web. JavaScript может изменять содержимое HTML и значения атрибутов. JavaScript может изменить CSS. JavaScript может скрывать и показывать HTML элементы и многое другое.</p>
Попробуйте сами »

Определение и использование

Тег <hr> определяет тематический разрыв в HTML странице (например, смена темы).

Тег <hr> чаще всего отображается в виде горизонтального правила, которое используется для разделения содержимого (или определения изменения) на HTML странице.


Поддержка браузеров

Элемент
<hr> Да Да Да Да Да

Глобальные атрибуты

Тег <hr> также поддерживает Глобальные атрибуты в HTML.


Событие атрибутов

Тег <hr> также поддерживает Событие атрибутов в HTML.



Еще примеры

Пример

Выровнить элемент <hr> (с помощью CSS):

<hr style="width:50%;text-align:left;margin-left:0">
Попробуйте сами »

Пример

Раскрасить элемент <hr> (с помощью CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray">
Попробуйте сами »

Пример

Установите высоту элемента <hr> (с помощью CSS):

<hr style="height:30px">
Попробуйте сами »

Пример

Установите ширину элемента <hr> (с помощью CSS):

<hr style="width:50%">
Попробуйте сами »

Связные страницы

HTML DOM справочник: Объект hr


Настройки CSS по умолчанию

Большинство браузеров будет отображать элемент <hr> со следующими значениями по умолчанию:

Пример

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
Попробуйте сами »