Как добавить горизонтальную линию в HTML

Загрузить PDF
Соавтор(ы): Команда wikiHow

Загрузить PDF

Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS. [1]

Метод 1
Метод 1 из 2:

Работа в HTML 4.01

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Документы HTML можно редактировать в текстовом редакторе, таком как «Блокнот», или в специализированном редакторе кода, таком как «Adobe Dreamweaver». Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
    • Откройте Блокнот или другой текстовый редактор/редактор кода.
    • Откройте меню Файл .
    • Нажмите Открыть .
    • Выберите файл HTML.
    • Нажмите Открыть
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Пролистайте вниз, пока не найдете строку, над которой должна появиться линия, а затем переместите курсор непосредственно в начало этой строки, щелкнув мышью в ее крайней левой части.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Дважды нажмите ↵ Enter , чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Введите <hr> в пустое место в начале строки. Тег <hr> позволяет нарисовать горизонтальную линию через всю страницу.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Теперь тег <hr> должен находиться в отдельной строке.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Добавьте такие атрибуты, как длина, толщина, цвет и выравнивание. Заключите их в фигурные скобки сразу после «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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Чтобы сохранить текстовый файл в виде документа HTML, необходимо изменить расширение файла (.txt, .docx) на «.html». Выполните следующие действия, чтобы сохранить HTML-документ:
    • Откройте меню Файл .
    • Нажмите Сохранить как .
    • Введите имя для файла в поле «Имя файла».
    • Добавьте .html после имени файла.
    • Нажмите Сохранить .
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Чтобы проверить HTML-файл, щелкните по нему правой кнопкой мыши и выберите «Открыть с помощью». Затем выберите веб-браузер. Там, где вы вставили тег «hr», должна появиться сплошная линия. HTML-код будет выглядеть примерно так: [3] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Заголовок </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
Данная строка должна быть отделена от заголовка линией. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Реклама
Метод 2
Метод 2 из 2:

Работа в CSS/HTML5

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Документы HTML можно редактировать в текстовом редакторе, таком как Блокнот, или в специализированном редакторе кода, таком как Adobe Dreamweaver. Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
    • Откройте Блокнот или другой текстовый редактор/редактор кода.
    • Откройте меню Файл .
    • Нажмите Открыть .
    • Выберите файл HTML.
    • Нажмите Открыть
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Если в HTML-документе еще нет заголовка, выполните следующие действия, чтобы его добавить. Заголовок должен идти после тега <html> и перед тегом <body>.
    • Введите <head> в верхней части документа.
    • Дважды нажмите ↵ Enter , чтобы добавить две новые строки.
    • Введите </head> , чтобы закрыть заголовок.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Тег «style» помещается между двумя тегами заголовка для создания места, где с помощью кода CSS можно будет изменять дизайн HTML.
    • В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью « Как вставить файл CSS в HTML » , чтобы узнать, как связать внешний файл CSS с файлом HTML.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Они должны идти после тега «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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Введите } после атрибутов стиля, чтобы завершить настройку стиля для тега <hr>.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Введите <hr> в любом месте тела HTML-документа, чтобы добавить горизонтальную линию. Настройки стиля CSS будут применяться после каждого использования тега <hr> в HTML-документе. [4] Ваш код должен выглядеть примерно следующим образом: 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Заголовок </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
Данная строка должна быть отделена от заголовка горизонтальной линией </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Реклама

Дополнительные статьи

Как
запустить файл Python с помощью Командной строки Windows
Как
написать программу в блокноте
Как
вставить пробелы в HTML
Как
добавлять и удалять учетные записи пользователей через командную строку Windows
Как
добавить веб–сайт в надежные узлы
Как
использовать Net Send
Как
научиться писать программы
Как
менять цвета в Командной строке
Как
скомпилировать программу C, используя компилятор GNU Compiler (GCC)
Как
создать гиперссылку в HTML
Как
сделать задержку в командном файле
Как
использовать DOSBox
Как
читать и писать на Leet
Как
создать очень простую программу в Python
Реклама

Источники

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ http://www.myhtmltutorials.com/line.html
  3. ↑ https://www.w3schools.com/TAGS/tag_hr.asp
  4. ↑ https://love2dev.com/blog/html-horizontal-line/

Об этой статье

На других языках
Эту страницу просматривали 36 236 раз.

Была ли эта статья полезной?

Реклама