Загрузить PDF
Загрузить PDF
Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS.[1]
-
1
Откройте существующий или создайте новый документ HTML. Документы HTML можно редактировать в текстовом редакторе, таком как «Блокнот», или в специализированном редакторе кода, таком как «Adobe Dreamweaver». Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
-
2
Выберите место, в которое нужно вставить линию. Пролистайте вниз, пока не найдете строку, над которой должна появиться линия, а затем переместите курсор непосредственно в начало этой строки, щелкнув мышью в ее крайней левой части.
-
3
Добавьте пустую строку. Дважды нажмите ↵ Enter, чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.
-
4
Добавьте тег <hr>. Введите <hr> в пустое место в начале строки. Тег <hr> позволяет нарисовать горизонтальную линию через всю страницу.
-
5
Переместите курсор после тега «hr» на новую строку, нажав ↵ Enter. Теперь тег <hr> должен находиться в отдельной строке.
-
6
Добавьте атрибуты к горизонтальной линии (необязательно). Добавьте такие атрибуты, как длина, толщина, цвет и выравнивание. Заключите их в фигурные скобки сразу после «hr». Чтобы добавить несколько атрибутов, разделите их пробелом.[2]
- Введите <hr size="#">, чтобы изменить толщину линии. Замените «#» числовым значением толщины (например, size=»10″).
- Введите <hr width="#">, чтобы изменить ширину линии. Замените «#» количеством пикселей или процентным отношением к ширине страницы (например, width=»200″ или width=»75%»).
- Введите <hr color="#">, чтобы изменить цвет линии. Замените «#» названием цвета или его шестнадцатеричным кодом (например, color=»red» или color=»# FF0000″).
- Введите <hr align="#">, чтобы выровнять линию. Замените «#» на «right» (по правому краю), «left» (по левому краю) или «center» (по центру) (например, <hr width="50%" align="center">).
-
7
Сохраните HTML-файл. Чтобы сохранить текстовый файл в виде документа HTML, необходимо изменить расширение файла (.txt, .docx) на «.html». Выполните следующие действия, чтобы сохранить HTML-документ:
- Откройте меню Файл.
- Нажмите Сохранить как.
- Введите имя для файла в поле «Имя файла».
- Добавьте .html после имени файла.
- Нажмите Сохранить.
-
8
Проверьте свой HTML-документ. Чтобы проверить HTML-файл, щелкните по нему правой кнопкой мыши и выберите «Открыть с помощью». Затем выберите веб-браузер. Там, где вы вставили тег «hr», должна появиться сплошная линия. HTML-код будет выглядеть примерно так:[3]
<!DOCTYPE html> <html> <body> <h1>Заголовок</h1> <hr size="6" width="50%" align="left" color="green"> <p1>Данная строка должна быть отделена от заголовка линией.</p1> </body> </html>
Реклама
-
1
Откройте существующий или создайте новый документ HTML. Документы HTML можно редактировать в текстовом редакторе, таком как Блокнот, или в специализированном редакторе кода, таком как Adobe Dreamweaver. Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
-
2
Добавьте заголовок в HTML-документ. Если в HTML-документе еще нет заголовка, выполните следующие действия, чтобы его добавить. Заголовок должен идти после тега <html> и перед тегом <body>.
- Введите <head> в верхней части документа.
- Дважды нажмите ↵ Enter, чтобы добавить две новые строки.
- Введите </head>, чтобы закрыть заголовок.
-
3
Введите <style type="text/css"> внутри заголовка. Тег «style» помещается между двумя тегами заголовка для создания места, где с помощью кода CSS можно будет изменять дизайн HTML.
- В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью «Как вставить файл CSS в HTML», чтобы узнать, как связать внешний файл CSS с файлом HTML.
-
4
Введите hr {. Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.
-
5
Добавьте стили CSS для тега <hr>. Они должны идти после тега «hr {». Горизонтальную линию можно оформить множеством способов. Ниже приведены несколько из них.
- Введите width: ##px;, чтобы настроить ширину линии. Замените «##» значением ширины линии в пикселях. Вместо пикселей (px) можно использовать процентное отношение (%).
- Введите height: ##px;, чтобы настроить толщину линии. Замените «##» значением толщины линии в пикселях.
- Введите background-color: ##;, чтобы указать цвет линии. Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.
- Введите margin-right: ##px;, чтобы указать количество пикселей от правого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по левому краю или по центру.
- Введите margin-left: ##px;, чтобы указать количество пикселей от левого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по правому краю или по центру.
- Введите margin-top: ##px; , чтобы указать верхний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
- Введите margin-bottom: ##px;, чтобы указать нижний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
- Введите border-width: ##px;, чтобы нарисовать рамку вокруг линии (необязательно). Замените «##» числом, соответствующим толщине рамки в пикселях.
- Введите border-color: ##;, чтобы указать цвет рамки (необязательно). Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.
-
6
Введите } после атрибутов стиля, чтобы завершить настройку стиля для тега <hr>.
-
7
Введите <hr> в любом месте тела HTML-документа, чтобы добавить горизонтальную линию. Настройки стиля CSS будут применяться после каждого использования тега <hr> в HTML-документе.[4]
Ваш код должен выглядеть примерно следующим образом:<!DOCTYPE html> <html> <head> <style type="text/css"> hr { width: 50%; height: 20px; background-color: red; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border-width: 2px; border-color: green; } </style> </head> <body> <h1>Заголовок</h1> <hr> <p1>Данная строка должна быть отделена от заголовка горизонтальной линией </p1> </body> </html>
Реклама
Об этой статье
Эту страницу просматривали 21 275 раз.
Была ли эта статья полезной?
HTML <hr> элемент служит для тематического разделения абзацев.Рисует горизонтальную прямую
Интерактивный пример
Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.
| Content categories | Flow content. |
|---|---|
| Permitted content | None, it is an empty element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| Permitted parents | Any element that accepts flow content. |
| Implicit ARIA role | separator (en-US) |
| Permitted ARIA roles | presentation (en-US) or none (en-US) |
| DOM interface | HTMLHRElement (en-US) |
Attributes
This element’s attributes include the global attributes.
align
Deprecated
-
Задаёт правило выравнивания.По умолчанию значение выставлено как left
color
Non-standard
-
Задаёт цвет линии
noshade
Deprecated
-
Sets the rule to have no shading.
size
Deprecated
-
Устанавливает высоту в px
width
Deprecated
-
Задаёт длину линии в px либо в %
Example
HTML
<p>
Это первый параграф текста Это первый параграф текста Это первый параграф
текста Это первый параграф текста
</p>
<hr />
<p>
Это второй параграф текста Это второй параграф текста Это второй параграф
текста Это второй параграф текста
</p>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard Определение ‘<hr>’ в этой спецификации. |
Живой стандарт | Definition of the <hr> element |
| HTML5 Определение ‘<hr>’ в этой спецификации. |
Рекомендация | |
| HTML 4.01 Specification Определение ‘<hr>’ в этой спецификации. |
Рекомендация | The align, noshade, size, and width attributes are deprecated |
Browser compatibility
BCD tables only load in the browser
See also
The HTML <hr> tag is a block-level element transferring all the elements after it to another line. The external look of the horizontal line defined by the tag depends on the type of the browser. More often it is displayed with a border, which creates 3D effect.
In HTML5 the <hr> tag defines a thematic change between paragraph-level elements in an HTML page. In previous versions of HTML, it was used to draw a horizontal line on the page visually separating the content. In HTML5 it has a semantic tag meaning.
The <hr> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<hr>) tag must be closed (<hr/>).
Example of the HTML <hr> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from the scratch.
</p>
<hr>
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
</p>
</body>
</html>The size attribute specifies the height of the line.
Though the size attribute is one of the deprecated attributes, it is still supported in all browsers.
Example of the HTML <hr> tag with the «size» attibute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr>
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40">
</body>
</html>An alternate way to specify the size of the <hr> tag is using CSS height Property.
Example of the HTML <hr> tag used with the height property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
</p>
<hr>
</body>
</html>The width attribute specifies the width of the line.
The width attribute is also from the list of deprecated attributes, but is supported in all browsers.
Example of the HTML <hr> tag with the width attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr>
<p>A horizontal line with a width of 30%:</p>
<hr width="30%">
</body>
</html>Example of the HTML <hr> tag used with the width property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 50%:</p>
<hr>
</body>
</html>The noshade attribute makes the horizontal line without shade.
The noshade attribute is one of the deprecated attributes, but is supported in all browsers.
Example of the HTML <hr> tag with the noshade attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr>
<p>Noshaded horizontal line:</p>
<hr noshade>
</body>
</html>Example of the HTML <hr> tag used with the border property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
</p>
<hr>
</body>
</html>The align attribute specifies the alignment of the line.
The align attribute is one of the deprecated attributes, but is supported in all browsers.
Example of the HTML <hr> tag with the align attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%">
</body>
</html>Example of the HTML <hr> tag used with the text-align property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
text-align: left;
margin-left: 0;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS text-align Property</p>
<hr>
</body>
</html>The attributes of the <hr> tag are not supported in HTML5, instead, we use CSS styles.
CSS border property is used to style the horizontal line.
Example of the HTML <hr> tag styled with the border property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr>
<p>Styling "hr" tag</p>
<hr class="one">
<hr class="two">
<hr class="three">
<hr class="four">
<hr class="five">
</body>
</html>The <hr> tag supports the Global Attributes and the Event Attributes.
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
Горизонтальные линии
В основном горизонтальные линии используются для декорирования HTML-страниц сайта, придавая им более привлекательный вид. Но также ими можно визуально разграничивать информацию соседних разделов, добавляя удобства читателям при ее изучении. В общем, рисуйте горизонтальные линии там, где вам нужно, вот и все.
Как нарисовать горизонтальную линию?
Для отрисовки горизонтальных линий в HTML существует специальный тег <HR>. Причем он является блочным тегом, то есть создает переносы строк до и после себя, поэтому линия всегда получается на отдельной строке. Соответственно и указывать его можно только внутри тегов, которые могут содержать блочные элементы, например <BODY> или <BLOCKQUOTE>. А вот сам <HR> не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым.
Пример рисования горизонтальных линий в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Рисуем горизонтальные линии</title>
</head>
<body>
<hr>
<p>Параграф.</p>
<p>Параграф.</p>
<hr>
<p>Параграф.</p>
</body>
</html>Результат в браузере
Параграф.
Параграф.
Параграф.
Как видите, линии получаются очень тонкими, невзрачными и рисуются во всю доступную ширину, поэтому сейчас мы научимся их изменять, чтобы они выглядели более привлекательно.
Как изменить цвет, толщину и ширину горизонтальных линий?
В старых версиях HTML у тега <HR> существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:
<hr style=«background:цвет»> — цвет линии (вернее ее фон).
<hr style=«height:размер»> — толщина линии.
<hr style=«width:размер»> — ширина линии.
<hr style=«background:цвет; height:размер; width:размер»> — а можно указать сразу все параметры, только не забываем про точку с запятой (;).
Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона.
А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов, в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.
Если вы указываете размеры в пикселях, то толщина и ширина линии будет зависеть от разрешения монитора, на котором просматривают ваш сайт (чем выше разрешение экрана, тем тоньше и уже линия).
Как я уже сказал, только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег <HR>. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег <hr style=«width:50%»> внутри элемента <BLOCKQUOTE>, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока <BLOCKQUOTE>.
Пример изменения цвета, толщины и ширины горизонтальных линий.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Меняем цвет, толщину и ширину горизонтальных линий.</title>
</head>
<body>
<hr style="width:50%; height:10px">
<hr style="background:#FF9933; width:50%; height:10px">
<hr style="background:#9933FF; width:40%; height:15px">
<hr style="background:#33FF99; width:20%; height:20px">
</body>
</html>Результат в браузере
Изменение положения горизонтальных линий
Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри <HR> атрибут align со следующими значениями:
- center — линия выравнивается по центру (значение по умолчанию).
- left — прижимается к левому краю.
- right — прижимается к правому краю.
Пример выравнивания горизонтальных линий.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Меняем положение горизонтальных линий.</title>
</head>
<body>
<hr style="background:#FF9933; width:50%; height:10px">
<hr style="background:#9933FF; width:40%; height:15px" align="left">
<hr style="background:#33FF99; width:20%; height:20px" align="right">
</body>
</html>Результат в браузере
Как убрать рамку вокруг линии?
Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!
Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.
Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:
<hr style="border:0">Домашнее задание.
- Создайте заголовки статьи, раздела и подраздела. Расположите их все по центру.
- Установите на всей странице шрифт Arial, а для заголовков — Courier.
- Пусть размер шрифта на всей странице будет 85% от размера в браузере по умолчанию. А у заголовков 145%, 125% и 110% соответственно, от размера шрифта на странице.
- Напишите под первым заголовком параграф, под вторым — длинную цитату, под третьим — стихотворение. И пусть стихотворение располагается по центру страницы.
- Выделите жирным шрифтом три слова в цитате.
- Под заголовком статьи во всю ширину страницы нарисуйте горизонтальную линию красного цвета толщиной три пикселя.
- Сверху и снизу стихотворения нарисуйте линии толщиной в один пиксель черного цвета. Пусть ширина верхней линии будет примерно равна ширине стиха, а нижней — в два раза меньше.
- Уберите у линий ненужные рамки.
Посмотреть результат → Посмотреть ответ