Horizontal line html: Тег — горизонтальная линия (цвет и толщина)

Leave a Comment / Html / By /

: The Thematic Break (Horizontal Rule) element — HTML

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 categoriesFlow content.
Permitted contentNone, it is an empty element.
Tag omissionIt must have start tag, but must not have an end tag.
Permitted parentsAny element that accepts flow content.
Implicit ARIA roleseparator (en-US)
Permitted ARIA rolespresentation
(en-US) or none (en-US)
DOM interfaceHTMLHRElement (en-US)

This element’s attributes include the global attributes.

align Устарело

Задаёт правило выравнивания.По умолчанию значение выставлено как left

color Non-standard

Задаёт цвет линии

noshade Устарело

Sets the rule to have no shading.

size Устарело

Устанавливает высоту в px

width Устарело

Задаёт длину линии в px либо в %

HTML

<p>
  Это первый параграф текста Это первый параграф текста Это первый параграф
  текста Это первый параграф текста
</p>
<hr />
<p>
  Это второй параграф текста Это второй параграф текста Это второй параграф
  текста Это второй параграф текста
</p>

Result

SpecificationStatusComment
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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

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

Улучшить статью

Сохранить статью

Нравится Статья

annieahujaweb2020

профессиональный

112 опубликованных статей

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Нравится Статья

    В этой статье мы увидим, как добавить горизонтальную линию в HTML. Для этого есть 2 подхода:

    • С помощью тега
    • С помощью свойств CSS

    Мы последовательно обсудим оба подхода, чтобы добавить горизонтальную линию.

    Добавление горизонтальной линии с помощью тега

    : Тег Horizontal Rule (
    ) используется для вставки горизонтальных линий в HTML-документ для разделения разделов документа. . Это пустой или непарный тег, что означает, что закрывающий тег не нужен.

    Синтаксис:

    Пример 1: В этом примере описывается тег  

    для добавления горизонтальной линии.

    HTML

    < html >

       

    < head >

         < заголовок >Горизонтальная линия заголовок >

    голова >

       

    < корпус >

         < h3 >Горизонтальная линия h3 >

         < час >

         < p >Это простая горизонтальная линия. p >

    тело >

       

    html >

    Вывод:

    Пример 2: В этом примере описывается тег

    с различными атрибутами и их значениями для оформления горизонтальной линии.

    HTML

    < html >

       

    < головка >

         < 90 064 заголовок >Горизонтальная линия заголовок >

    голова >

    9006 4    

    < body >

         < h3 >Горизонтальная линия с использованием различных атрибутов h3 >

         < час ширина = "70%"  

             размер = "20"  

             выровнять = "центр" >

         < час ширина = " 70%"  

            размер = "20"  

             align = "right"  

             color = "blue" 900 64 noshade>

         < час ширина = "500px;"  

             цвет = "красный"  

             9006 4 size = "10"  

             align = "left" > 

    корпус >

       

    html >

    Вывод:

    Добавление горизонтальной линии с помощью свойств CSS: В этом случае мы будем использовать свойство границы для создания горизонтальной линии . Мы можем использовать либо свойство border-top , которое указывает стиль верхней границы, либо свойство border-bottom , которое может установить стиль нижней границы элемента. Оба свойства можно использовать для добавления горизонтальной линии.

    Пример 3: В этом примере описывается рисование горизонтальной линии с использованием свойства border-style .

    HTML

    90 181

    < html >

       

    < головка >

         < 9 0064 title >Горизонтальная линия с использованием свойств CSS заголовок >

         < стиль >

             . horizontal_line {

                 цвет фона: зеленый;

                 ширина: 90%;

                 высота: 5 пикселей;

                 верхняя граница: 5 пикселей с черными точками;

                 line-height: 80%; . линия {

                 нижняя граница: 5 пикселей сплошной красный;

                 margin-top: 5px;

                 ширина: 90%;

             }

         стиль >

    головка >

       

    9006 3 < body >

         < h3 >Горизонтальная линия с использованием CSS Свойства h3 >

         < div class = 9006 4 "горизонтальная_линия" > дел. >

         < дел. класс = 9006 5 "строка" > div >

    корпус >

       

    html >

    Вывод:


    Последнее обновление: 27 января 2022 г.

    Нравится статья

    Сохранить статью 1. Горизонтальная линия HTML: основные советы 6 4. Поддержка браузера

    HTML Горизонтальная линия: основные советы

    • HTML
      добавляет тематическое разделение между элементами уровня абзаца.
    • Этот элемент создает горизонтальную линию , разделяя контент.
    • Тег HTML
        не имеет закрывающего тега , поскольку он не содержит никакого контента.

    Назначение hr

    Элемент HTML

    определяет тематическое разделение контента путем рисования горизонтальной линии HTML .

    Пример 

     
    Операционная система
     
 
    ОС Mac
     

    Операционная система для персональных компьютеров, разработанная и продаваемая Apple Inc.
    
<час>
 
    Окна
     

    Операционная система для персональных компьютеров, разработанная, продаваемая и продаваемая корпорацией Microsoft.

    Попробуйте в прямом эфире. Учитесь на Udacity

    Примечание. тег

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

    Плюсы

    • Простой дизайн (без лишней информации)
    • Качественные курсы (даже бесплатные)
    • Разнообразие функций

    Основное Характеристики

    • Программы наностепеней
    • Подходит для предприятий
    • Платные сертификаты об окончании

    ЭКСКЛЮЗИВ: СКИДКА 75%

    Плюсы

    • Простая навигация
    • Никаких технических проблем
    • Похоже, заботятся о своих пользователях

    Основные характеристики

    • Большое разнообразие курсов
    • 30-дневная политика возврата средств
    • Бесплатные сертификаты об окончании

    ОТ 12,99$

    Плюсы

    • Отличный пользовательский опыт
    • Предлагает качественный контент

      • Бесплатные сертификаты об окончании
      • Ориентированы на навыки работы с данными
      • Гибкое расписание обучения

      75% СКИДКА

      Устаревшие атрибуты для hr

      align

      Устанавливает горизонтальное выравнивание элемента. Не поддерживается в HTML5. В качестве альтернативы используйте свойство CSS text-align.

      Пример 

       
      Операционная система
       
 
      ОС Mac
       

      Операционная система для персональных компьютеров, разработанная и продаваемая Apple Inc.
      

      
 
      Окна
       

      Операционная система для персональных компьютеров, разработанная, продаваемая и продаваемая корпорацией Microsoft.

      Попробуйте вживую. Учитесь на Udacity 9.0003

      noshade

      Устанавливает сплошной цвет горизонтальной линии в HTML вместо эффекта тени. Не поддерживается в HTML5.

      Пример 

       
      Операционная система
       
 
      ОС Mac
       

      Операционная система для персональных компьютеров, разработанная и продаваемая Apple Inc.
      
<ч без тени>
 
      Окна
       

      Операционная система для персональных компьютеров, разработанная, продаваемая и продаваемая корпорацией Microsoft.

      Попробуйте в прямом эфире. Учитесь на Udacity

      size

      Устанавливает высоту элемента. Не поддерживается в HTML5. Вместо этого примените свойство высоты CSS.

      Пример 

       
      Операционная система
       
 
      ОС Mac
       

      Операционная система для персональных компьютеров, разработанная и продаваемая Apple Inc.
      

      
 
      Окна
       

      Операционная система для персональных компьютеров, разработанная, продаваемая и продаваемая корпорацией Microsoft.

      Попробуйте в прямом эфире Узнайте на Udacity

      width

      Устанавливает ширину горизонтальной линии в HTML. Не поддерживается в HTML5. Вместо этого используйте свойство ширины CSS.

      Пример 

      Операционная система
      ОС Mac
      Операционная система для персональных компьютеров, разработанная и продаваемая Apple Inc.
       <час>
      Окна
      Операционная система для персональных компьютеров, разработанная, продаваемая и продаваемая корпорацией Microsoft.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *