Тег HR

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег <HR> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Синтаксис

<hr>

Параметры

align: Определяет выравнивание линии.
color: Цвет линии.
noshade: Рисует линию без трехмерных эффектов.
size: Толщина линии.
width: Ширина линии.

Закрывающий тег

Не требуется.

Пример 1. Использование тега <HR>

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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>Тег HR</title>
 </head>
 <body>

 <hr>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p>
 <hr> 

 </body>
</html>

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

Рис. 1

Рис. 1. Вид горизонтальной линии в браузере

Описание параметров тега <HR>

Параметр ALIGN

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

center

Аналог CSS (ЦСС)

text-align

Пример 2. Выравнивание линии

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

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

 <hr align="right" width="300">
    <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>>

Параметр COLOR

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Задает цвет линии в браузере Internet Эксплорер. Одновременно, использование этого параметра запрещает трехмерные эффекты, словно был добавлен параметр noshade. В остальных браузерах параметр color игнорируется.

Синтаксис

Аргументы

Для задания цвета линии применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.

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

Нет.

Пример 3. Цвет линии

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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>Тег HR, параметр color</title>
 </head>
 <body>

  <hr color="red" width="300">

 </body>
</html>

Параметр NOSHADE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Использование параметра noshade отменяет трехмерные эффекты, которые используются при рисовании линии по умолчанию.

Синтаксис

Аргументы

Нет.

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

По умолчанию этот параметр не используется.

Пример 4. Сплошная линия

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, параметр noshade</title>
 </head>
 <body>
 
  <hr width="300">
  <hr noshade width="300">

 </body>
</html>

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

Рис. 2

Рис. 2. Вид линий с трехмерным эффектом и без

Параметр SIZE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Устанавливает толщину линии в пикселах.

Синтаксис

Аргументы

Любое целое положительное число. Нулевое или отрицательное значение устанавливает толщину линии в один пиксел.

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

Пример 5. Толщина линии

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, параметр size</title>
 </head>
 <body>

  <hr noshade size="10">
  <hr noshade size="8">
  <hr noshade size="6">
  <hr noshade size="4">
  <hr noshade size="2">
  <hr noshade size="1">
 
 </body>
</html>

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

Рис. 3

Рис. 3. Вид линий с разной толщиной

Параметр WIDTH

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Устанавливает ширину линии в процентах или пикселах. При использовании процентов за 100% берется ширина родительского элемента. Как правило, в качестве родителя выступает окно браузера.

Синтаксис

Аргументы

Любое допустимое значение в пикселах или процентах.

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

100%

Аналог CSS (ЦСС)

width

Пример 6. Ширина линии

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, параметр width</title>
 </head>
 <body>

  <hr noshade size="4" width="75%">
  <hr noshade size="2" width="60%">
  <hr noshade size="1" width="50%">
  <hr noshade size="1" width="38%">
  <hr noshade size="1" width="25%">
 <hr noshade size="1" width="10%">

 </body>
</html>

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

Рис. 4

Рис. 4. Вид линий разной ширины