Hr html тег: Тег hr | Справочник HTML CSS – Html теги (на примере p, br, hr) и их атрибуты | Создание сайтов и заработок в сети — Вебджем.рф

Содержание

HTML тег hr | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 23.01.2011

Тег <hr> (англ. horizontal rule — горизонтальная линия) отображается в виде горизонтальной линии.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<hr/>

Атрибуты

Основные Вспомогательные События

align	выраванивание линии в родительском контейнере left — по левому краю center — по центру (по умолчанию) right — по правому краю Не рекомендуется в спецификации HTML 4.01!
class	определяет имя используемого класса
color	задает цвет линии. Отсутствует в спецификации HTML 4.01!
dir	определяет направление символов: ltr — слева направо rtl — справа налево
id	уникальный идентификатор
lang	определяет язык отображаемого документа
noshade	флаг. Отменяет трехмерный эффект отображения линии. Не рекомендуется в спецификации HTML 4.01!
onclick	щелчок на элементе
ondblclick	двойной щелчок на элементе
onkeydown	нажатие клавиши, когда элемент имеет фокус
onkeypress	нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup	освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown	нажатие кнопки мыши, когда элемент имеет фокус
onmousemove	движение указателя мыши, когда элемент имеет фокус
onmouseout	смещение указателя мыши с элемента
onmouseover	помещение указателя мыши на элемент
onmouseup	освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
size	толщина линии. Не рекомендуется в спецификации HTML 4.01!
style	задает встроенную таблицу стилей
title	всплывающая подсказка
width	ширина линии. Не рекомендуется в спецификации HTML 4.01!

Пример

Различные варианты применения параметров тега:

<hr/> <hr noshade="noshade"/> <hr/> <hr size="5"/> <hr color="#ff0000" size="5"/> <hr align="left"/>

По теме

seodon.ru | Теги HTML — Тег HR

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <HR> используется для отображения горизонтальной разделительной линии. Так как этот тег является блочным — он создает перенос строк перед собой и после себя, а также небольшие поля (margin) сверху и снизу. Внешний вид линии и размер полей зависит от типа браузера, как правило они отображают ее с рамкой, которая создает эффект трехмерности. А Firefox еще и скругляет концы.

Атрибуты

Личные атрибуты:

align — Устанавливает горизонтальное положение линии относительно окружающего контекста.
color — Задает цвет линии.
noshade — Линия становится «плоской», а не объемной.
size — Высота линии.
width — Ширина линии.

Общие атрибуты:

accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).

dir — указывает направление текста внутри элемента.
id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
lang — указывает язык, на котором написан текст внутри HTML-элемента.
style — необходим для применения встроенных стилей CSS к тегу.
tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (блоки).

Модель тега: block (блочный, уровня блока).

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

<hr>

Пример HTML: применение тега HR

<!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 - Применение тега HR</title>
 </head>
 <body>
  <h4>«Битые» ссылки.</h4>
  <hr>
  <p>Одной из часто встречающихся ошибок начинающих сайтостроителей
     является наличие на сайте «битых» ссылок. То есть ссылок, которые
     никуда не ведут. Это может случиться из-за ошибки в адресе или из-за
     того, что человек решил переместить страницу в другую папку и забыл
     удалить/переписать ссылку и т.д.</p> 
 </body>
</html>

Результат примера

Результат. Применение тега HR.

Поддержка версиями 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 и выше
Поддержка:	Да	Да	Да	Да	Да

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

Пример

HTML
HTML — язык для описания веб-страниц…..

<hr>

<h2>CSS</h2>
<p>CSS определяет, как отображать элементы HTML…..</p>

Попробуйте сами »

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

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

Tег <hr> используется для разделения содержимого (или определения изменения) на HTML странице.

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент..

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

Различий между HTML 4.01 и HTML5

В HTML5, тег <hr> определяет тематический перерыв.

В HTML 4.01, тег <hr> представляет горизонтальную линию.

Однако тег <hr> по-прежнему может отображаться как горизонтальная линия в визуальных браузерах, но теперь определяется в семантических терминах, а не в представительных терминах.

Все атрибуты макета удаляются в HTML5. Используйте в CSS.

Различий между HTML и XHTML

В HTML, тег <hr> не имеет закрывающего тега.

В XHTML, тег <hr> тег должен быть закрыт, как: <hr />.

Атрибуты

Атрибут	Значение	Описание
align	left center right	Не поддерживается в HTML5. Задает выравнивание элемент <hr>
noshade	noshade	Не поддерживается в HTML5. Указывает, что элемент <hr> должен отображать один сплошной цвет (noshaded), вместо закрашенным цветом
size	pixels	Не поддерживается в HTML5. Задает высоту элемента <hr>
width	pixels %	Не поддерживается в HTML5. Задает ширину элемента <hr>

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

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

Атрибуты событий

Tег <hr> также поддерживает Атрибуты событий в HTML.

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

Справочник 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;
}

Попробуйте сами »

Как с помощью стилей задать цвет линии, созданной с помощью тега

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	6.0+	1.0+	1.0+	1.0+	1.0+

Задача

Кроссбраузерно вывести горизонтальную одноцветную линию с помощью тега <hr>.

Решение

Цвет линии, добавленной на веб-страницу через тег <hr>, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color, а браузеры Firefox и Opera — background-color. Но это еще не все, при этом обязательно следует указать толщину линии (свойство height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border. Собирая все параметры воедино для селектора HR, получим универсальное решение для популярных браузеров.

Пример 1. Цвет горизонтальной линии

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет горизонтальной линии</title>
  <style>
   hr {
    border: none; /* Убираем границу для браузера Firefox */
    color: red; /* Цвет линии для остальных браузеров */
    background-color: red; /* Цвет линии для браузера Firefox и Opera */
    height: 2px; /* Толщина линии */
   }
  </style>
 </head>
 <body>
  <hr>
  <hr>
 </body>
</html>

В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).

Рис. 1. Цветная горизонтальная линия в браузере Safari

Атрибут align | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	3.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Выравнивание линии по краю родительского элемента. В качестве родителя обычно выступает окно браузера.

Синтаксис

<hr align="center | left | right">

Значения

center: Выравнивание по центру.
left: Выравнивание линии по левому краю.
right: Выравнивание по правому краю.

Значение по умолчанию

center

Аналог CSS

text-align

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, атрибут align</title>
 </head>
 <body>

 <hr align="right">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Выравнивание линии по правому краю

Hr html тег: Тег hr | Справочник HTML CSS – Html теги (на примере p, br, hr) и их атрибуты | Создание сайтов и заработок в сети

HTML тег hr | назначение, синтаксис, атрибуты, примеры

Синтаксис

Атрибуты

Пример

Рекомендации по использованию

Твой код:

Результат:

По теме

seodon.ru | Теги HTML — Тег HR

Атрибуты

Тип тега

Синтаксис

Поддержка версиями HTML

Поддержка браузерами

Пример

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

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

Различий между HTML 4.01 и HTML5

Различий между HTML и XHTML

Атрибуты

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

Атрибуты событий

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

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

Пример

Как с помощью стилей задать цвет линии, созданной с помощью тега

Задача

Решение

Атрибут align | htmlbook.ru

Спецификация

Описание

Синтаксис

Значения

Значение по умолчанию

Аналог CSS

Валидация

Добавить комментарий Отменить ответ

Рубрики