Hr тег html: Атрибут size | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Тег hr



Пример

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

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

<hr>

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

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

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

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

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

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

Различия между HTML 4,01 и HTML5

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

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

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

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

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

В HTML тег <hr> не имеет конечного тега.

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

Атрибуты

АтрибутЗначениеОписание
alignleft
center
right		Не поддерживается в HTML5.
Задает выравнивание элемента <hr>
noshadenoshadeНе поддерживается в HTML5.
Указывает, что элемент <hr> должен визуализироваться в одном сплошном цвете (незатененном), а не в затененном цвете
sizepixelsНе поддерживается в HTML5.
Задает высоту элемента <hr>
widthpixels
%		Не поддерживается в HTML5.
Задает ширину элемента <hr>

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

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

Event Attributes

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

Похожие страницы

HTML DOM reference: HR Object

Параметры 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;
}

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

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

Тег <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"/>

Рекомендации по использованию
  • должен быть закрыт слешем: (<hr/>)
  • обязательных атрибутов нет
  • элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
  • для оформления не рекомендуем использовать атрибуты, вместо них использовать таблицы стилей
  • каждый браузер отображает тег <hr /> по разному, rак заставить все браузеры отображать <hr/> одинаково можно прочитать в статье Кроссбраузерный <hr />

Твой код:
<html> <head> <title></title> </head> <body> <hr/> <hr noshade=»noshade»/> <hr/> <hr size=»5″/> <hr color=»#ff0000″ size=»5″/> <hr align=»left»/> </body> </html> Сделай код и жми тут

Результат:
большой полигон

| Справочник HTML

Элемент <hr> (от англ. «horizontal rule» ‒ «горизонтальная линия») определяет тематический разрыв контента на HTML странице (например, изменение темы). Также, элемент <hr> может использоваться для визуального разделения контента на странице.

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

Синтаксис

<hr>

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

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

Атрибуты

alignУстарел в HTML5
Устанавливает горизонтальное выравнивание линии.
colorНестандартный
Цвет линии.
noshadeУстарел в HTML5
Рисует линию без трёхмерных эффектов.
sizeУстарел в HTML5
Толщина линии.
widthУстарел в HTML5
Ширина линии.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <hr> со следующими значениями CSS по умолчанию:

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

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

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

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

В HTML5 все стилевые атрибуты были удалены. Вместо них следует использовать стили CSS.

Пример использования:

Элемент <hr>.

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

Пример HTML: Попробуй сам
<h2>HTML</h2>
<p>HTML – язык описания веб-страниц.
 
 </p>
<hr>
<h2>CSS</h2>
<p>CSS — определяет то, как будут отображаться HTML элементы.</p>

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

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

Элемент
<hr> 3+ 1+ 2+ 1+ 1+ 1+
Элемент
<hr> 1+ 1+ 6+ 1+

Похожие страницы

HTML уроки: HTML Элементы

HTML Базовые теги


как использовать в средней строке в html?



Я видел много учебников, но нигде не нашел решения. Я использую тег hr в html , чтобы показать линии сверху и снизу, он работает правильно. Но когда я пытаюсь использовать тег hr для отображения линии в центре, он не работает. Я хочу показать линию в центре, а также показать там какой-то текст. Поскольку я новичок, если кто-то поможет мне с каким-то кодом, его легко выучить.

Я хочу показать что-то вроде этого-

------------------------Hello--------------------------

Но я хочу, чтобы линия выше была в твердой форме.

html css
Поделиться Источник user3184213     11 января 2014 в 04:55

5 ответов


2

Попробовать это

Обновлено FIDDLE

HTML

<div>
   <div><hr></div>
   <span> Hello  </span>
   <div><hr></div>
</div>

CSS

div {
  width:300px;
  text-align:center;
  display:table;
}
div > div {
   display:table-cell;
   vertical-align:middle;
}
div > span {
   white-space:nowrap;
}

Поделиться Sriraman     11 января 2014 в 04:59


1

jsFiddle: http://jsfiddle. net/theStudent/56Q2F/2/

<div>
  <span>
    HELLO WORLD
  </span>
</div>

Поделиться I am Cavic     11 января 2014 в 04:59


1

попробовать это

http://jsfiddle.net/9Y2Z4/

<div>sometext</div>
<div>test here</div>
<div>again some text</div>

CSS:

.line {
     height: 0.5em;
    text-align: center;

    border-bottom: 2px solid Red;
    margin-bottom: 0.5em;
}
.line:first-line {
    background-color: white;
}

Поделиться Sajad Karuthedath     11 января 2014 в 05:01

  • Как вставить кнопку в середину <hr>

    У меня в основном есть что-то вроде div { display: flex; flex-direction: row; flex-wrap: no-wrap; } <div> <hr> <button> <hr> </div> Но это не работает, и я тоже пытался стилизовать hr, тоже не работает. Я в основном хочу одну строку, включающую hr + кнопку + hr, (так…

  • Как использовать <hr> между изображениями равномерно в html

    Поэтому я пытаюсь сделать так, чтобы линия была равномерно распределена между изображениями, а не прямо поверх изображения. Проблема заключается в том, что я использую поля вокруг изображения. Соответствующие css и html: #infobox_picture { margin-top: 15px; margin-right: auto; margin-bottom: 15px;…


1

HTML

  <div> <span>
        HELLO WORLD
      </span>

    </div>

CSS

.divline {
    height: 1px;
    background-color: black;
    text-align: center;
}
.spans {
    background-color: white;
    position: relative;
    top: -0.55em;
    padding: 5px;
}

Проверьте это тоже

Поделиться Amarnath Balasubramanian     11 января 2014 в 05:12


0

Каждый элемент <hr> возвращает правило в начало строки (возврат каретки). Вы можете попробовать это:

.line{
    width:100px;
    height:1px;
    background:#ff0000;
    float:left;
    margin-top: 10px;
}
.text{
    float:left;
}

HTML:

<div></div>
<div>Hello</div>
<div></div>

Поделиться Kunj     11 января 2014 в 05:03

Похожие вопросы:


Вы используете <hr> в своем HTML?

Использование <hr> все еще допустимо в HTML5, но считаете ли вы, что это семантически правильно и является частью контента? Используете ли вы его в своих проектах? Я нахожу это трудным, когда…


hr в HTML перерывах div:first-child?

У меня есть div с 2 плавающими дивами внутри. Над ними есть тег HR. Я пытаюсь использовать первого ребенка, так как дивы должны иметь расстояние между ними. Однако это не работает. Это правило. ..


Почему мой HR не отображается в отдельной строке?

У меня есть это HTML: <article class=smallCaps> Cap Anson <span><em>my</em></span> outboard<br /> Anyway…the reign in Spain falls mainly on the common…


Выравнивание hr-тегов и img-тегов в строке

Я пытаюсь выровнять тег hr, изображение и тег hr в этом порядке в одной строке. Мой код до сих пор <div class=arrow> <hr class=left> <img src=http://bit.ly/100X8XQ height=10…


Стиль не применяется к строке с элементом <hr> в HTML

<!DOCTYPE html> <html> <head> <title>my web page</title> <meta name=author content=akhil> <style> h2{color: red;font-size: 400%} p{color: red}…


Как вставить кнопку в середину <hr>

У меня в основном есть что-то вроде div { display: flex; flex-direction: row; flex-wrap: no-wrap; } <div> <hr> <button> <hr> </div> Но это не работает, и я тоже пытался. ..


Как использовать <hr> между изображениями равномерно в html

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


Получить <hr> в новой строке с <p>

Я новичок в css, и мой вопрос таков: Я хочу горизонтальную линию в новой строке. Поэтому я подумал, что это будет хорошая идея: <p><hr/></p> Но вместо этого он дает:…


HTML & CSS: выравнивание <hr> в IE

У меня есть проблема с выравниванием hr-элемента, когда я использую интернет Explorer. Я хочу добиться того, чтобы следующие строки были в основном сосредоточены на странице. Есть два заголовка,…


Существует ли эквивалентный символ Юникода для горизонтального правила HTML <hr> / <hr/>

Существует ли эквивалентный символ для тега HTML horizontal rule <hr> или XHTML <hr/> , который можно использовать вне браузера, например в исполняемой программе или консоли JavaScript. …

Как я могу изменить толщину моего тега

Субпиксельная визуализация в браузерах

Субпиксельное рендеринг сложно. Вы не можете ожидать, что монитор будет отображать тонкую линию размером менее пикселя. Но возможно предоставить субпиксельные размеры. В зависимости от браузера они отображают их по-разному. Проверьте это сообщение в блоге Джона Ресига об этом.

По сути, если ваш монитор ЖК-дисплей и вы рисуете вертикальные линии, вы можете легко нарисовать линию 1/3 пикселя. Если ваш фон белый, укажите цвет линии #f0f. На глаз эта линия будет 1/3 ширины пикселя. Хотя он будет какого-то цвета, если вы увеличите монитор, вы увидите, что только один сегмент целого пикселя (состоящий из RGB) будет темным. Это довольно много метод , который используется для точного типа намекая , т.е. ClearType .

Но горизонтальные линии могут иметь высоту всего пикселя. Это технологическое ограничение ЖК-мониторов. ЭЛТ были еще более сложными с их треугольными люминофорами (если они не были типа решетки апертуры то есть. Sony Trinitron), но это — другая история.

По сути, предоставление субпиксельного измерения и ожидание его рендеринга таким же образом, как ожидание целочисленной переменной для хранения числа 1.2034759349. Если вы понимаете, что это невозможно, вы должны понимать, что мониторы не могут отображать субпиксельные размеры.

Кросс-браузерный безопасный стиль

Но способ, которым горизонтальные правила, которые смешиваются , обычно делаются с использованием цветов. Так, если ваш фон, например, белый ( #fff), вы всегда можете сделать его HR очень светлым. Как #eee.

Кросс-браузерный безопасный стиль для очень легкого горизонтального правила:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

И используйте файл CSS вместо встроенных стилей. Они обеспечивают центральное определение для всего сайта, а не только конкретного элемента. Это делает ремонтопригодность намного лучше.

Тег hr — разделительная линия

Тег hr задает разделительную горизонтальную линию. Преимущество тега в том, что для того, чтобы провести одиночную линию, не требуется создавать лишних блоков. Не требует закрывающего тега.

Пример

Давайте посмотрим, как работает тег hr:

<hr>

:

Пример

Давайте попробуем поменять цвет линии с помощью CSS свойства border-color:

<hr>

:

Пример

Цвет линии также можно сменить и свойством color (при этом, если одновременно заданы свойства color и border-color — второе имеет приоритет):

<hr>

:

Пример

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

<hr>

:

Пример

Попробуем поменять цвет линии с помощью CSS свойства border-top, и зададим только верхнюю границу. Теперь двойной линии не будет:

<hr>

:

Пример

Давайте сделаем линию в виде точек с помощью CSS свойства border-top, зададим значение dotted вместо solid:

<hr>

:

Пример

Давайте увеличим толщину линии с помощью CSS свойства border-width:

<hr>

:

Пример

А теперь давайте линии добавим высоту height и границу через border. Граница при этом распадется на верхнюю и нижнюю:

<hr>

:

Как вставить строки в HTML с помощью тега HR

Автор Глеб Захаров На чтение 3 мин. Просмотров 55 Опубликовано

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

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

Вы можете редактировать характеристики горизонтальной линии в документе HTML5, редактируя CSS страницы. HTML4 горизонтальные линии были изменены на HTML стороне документа.

Является ли HR-тег семантическим?


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

Начиная с HTML5, тег HR стал семантическим, и теперь он определяет тематический разрыв на уровне абзаца, который является разрывом в потоке контента, который не требует новой страницы или другого более сильного разделителя – это смена темы. Например, вы можете найти тег HR после смены сцены в истории, или он может указывать на изменение темы в справочном документе.

Атрибуты HR в HTML4 и HTML5


В HTML4 тегу HR можно назначать простые атрибуты, включая align, width, и noshade . Для выравнивания можно задать влево , по центру , вправо или justify . Ширина регулирует ширину горизонтальной линии от значения по умолчанию 100 процентов, которое расширяет линию по всей странице. Атрибут noshade отображает сплошную цветную линию вместо затененного цвета.

Эти атрибуты устарели в HTML5. Вместо этого вы должны использовать CSS для стилизации ваших HR-тегов в документах HTML5.

Это пример HTML5 стилизации горизонтальной линии до высоты 10 пикселей с использованием встроенного CSS (стили, вставленные непосредственно в документ вместе с HTML):

Другой способ стилизации горизонтальных линий в HTML5 – использовать отдельный файл CSS и ссылаться на него из документа HTML. В файле CSS вы бы написали стиль так:

  час { 
 рост: 10 пикселей  
}

Тот же эффект в HTML4 требует добавления атрибута к содержимому HTML. Вот как изменить размер горизонтальной линии с помощью атрибута size :

Существует гораздо больше свободы в стилизации горизонтальных линий в CSS по сравнению с HTML.

Только стили width и height одинаковы для всех браузеров, поэтому при использовании других стилей могут потребоваться пробные версии и ошибки. Ширина по умолчанию всегда равна 100 процентам ширины веб-страницы или родительского элемента. Высота правила по умолчанию составляет два пикселя.

HTML тег hr


Пример

Используйте тег

для определения тематических изменений в содержании:

Основные языки Интернета

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

CSS — это язык, описывает, как элементы HTML должны отображаться на экране, бумаге или в другие СМИ.CSS экономит много работы, потому что он может контролировать макет сразу несколько веб-страниц.

JavaScript — это язык программирования HTML и Интернета. JavaScript может изменять содержимое HTML и значения атрибутов. JavaScript может изменять CSS. JavaScript может скрывать и показывать элементы HTML и т. д.

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

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

Тег

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

Элемент

чаще всего отображается как горизонтальная линейка, которая используется для разделения содержимого (или определения изменения) на странице HTML.

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

Элемент
 Есть Есть Есть Есть Есть

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

Тег

также поддерживает глобальные атрибуты в HTML.

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

Тег

также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Выровнять элемент

(с помощью CSS):

Попробуй сам »

Пример

Без затенения

(с CSS):

Попробуй сам »

Пример

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

(с помощью CSS):

Попробуй сам »

Пример

Установить ширину элемента

(с помощью CSS):

Попробуй сам »

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

Ссылка на HTML DOM: HR Object

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

Большинство браузеров отображают элемент

со следующими значениями по умолчанию:

Пример

hr {
дисплей: блок;
margin-top: 0.5em;
нижнее поле: 0,5em;
маржа слева: авто;
поле справа: авто;
стиль границы: вставка;
ширина границы: 1 пиксель;
}

Попробуй сам »

HTML-тег

HTML-тег

— это элемент уровня блока, переносящий все элементы после него в другую строку. Внешний вид горизонтальной линии, определяемой тегом, зависит от типа браузера. Чаще отображается с рамкой, создающей 3D-эффект.

В HTML5 тег

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

Синтаксис¶

Тег

пуст, что означает, что закрывающий тег не требуется. Но в XHTML тег (
) должен быть закрыт (
).

Пример HTML-тега

: ¶
  

  
     Название документа 
  
  
     
 Изучите HTML 
 
    

      Это руководство по HTML научит вас основам (языка гипертекстовой разметки) и научит, как создать свой веб-сайт с нуля.

    

     
 Изучите CSS 
 
    

      В нашем руководстве по CSS вы узнаете, как использовать CSS для одновременного управления стилем и макетом нескольких веб-страниц.
Попробуйте сами »

HTML

Атрибут размера¶

Атрибут размера определяет высоту строки.

Пример HTML-тега

с атрибутом «размер»: ¶
  

  
     Название документа 
  
  
    
 Обычная горизонтальная линия: 

    

    
 Горизонтальная линия высотой 40 пикселей:
Попробуйте сами »

Пример HTML-тега

, используемого со свойством height: ¶
  

  
     Название документа 
    <стиль>
      hr {
        высота: 20 пикселей;
      }
    
  
  
    

      Горизонтальная линия высотой 20 пикселей.
Попробуйте сами »

HTML

Атрибут ширины¶

Атрибут width определяет ширину линии.

Пример HTML-тега

с атрибутом ширины: ¶
  

  
     Название документа 
  
  
    
 Обычная горизонтальная линия: 

    

    
 Горизонтальная линия шириной 30%:
Попробуйте сами »

Пример HTML-тега

, используемого со свойством width: ¶
  

  
     Название документа 
    <стиль>
      hr {
        ширина: 250 пикселей;
      }
    
  
  
    
 Горизонтальная линия шириной 50%:
Попробуйте сами »

HTML

Атрибут Noshade¶

Атрибут noshade делает горизонтальную линию без тени.

Пример HTML-тега

с атрибутом noshade: ¶
  

  
     Название документа 
  
  
    
 Закрашенная горизонтальная линия: 

    

    
 Горизонтальная линия без штриховки: 

    <час без тени>
Попробуйте сами »

Пример HTML-тега

, используемого со свойством border: ¶
  

  
     Название документа 
    <стиль>
      hr {
        граница: 1px solid # 000000;
      }
    
  
  
    

      Горизонтальная линия, указанная в свойстве границы CSS.
Попробуйте сами »

Атрибут HTML align¶

Атрибут align определяет выравнивание строки.

Пример HTML-тега

с атрибутом align: ¶
  

  
     Название документа 
  
  
    
 Lorem ipsum - это просто фиктивный текст...
Попробуйте сами »

Пример HTML-тега

, используемого со свойством text-align: ¶
  

  
     Название документа 
    <стиль>
      hr {
        ширина: 50%;
        выравнивание текста: слева;
        маржа слева: 0;
      }
    
  
  
    
 Горизонтальная линия, указанная с помощью свойства CSS text-align
Попробуйте сами »Атрибуты тега не поддерживаются в HTML5, вместо этого мы используем стили CSS.

Как стилизовать тег

Свойство границы CSS используется для стилизации горизонтальной линии.

Пример HTML-тега

, стилизованного со свойством border: ¶
  

  
     Название документа 
    <стиль>
      
      hr.one {
        граница сверху: 1px solid # 1c87c9;
      }
      
      hr.two {
        border-top: 1px пунктирная # 1c87c9;
      }
      
      час.три {
        верхняя граница: 1px с точками # 1c87c9;
      }
      
      hr.four {
        граница: 1px solid # 1c87c9;
      }
      
      hr.five {
        граница: 15px solid # 1c87c9;
        радиус границы: 5 пикселей;
      }
    
  
  
    
 По умолчанию: 

    

    
 Стилизация тега "hr"
Попробуйте сами »

Attributes¶

Тег

поддерживает глобальные атрибуты и атрибуты событий.

Пример кода для HTML-тегов Hr (и какие браузеры их поддерживают) »

В HTML-тегах

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
Что делает Пример кода для HTML-тегов Hr (и какие браузеры их поддерживают) ?
Элемент
используется для обозначения тематического разрыва между элементами уровня абзаца.Обычно он отображается как горизонтальная линия.
Дисплей
блок

Пример кода 

  
 Это над строкой. 




 Это под линией.

Это над линией.

Это ниже линии.

Разделитель, а не граница

Элемент

очень легко использовать неправильно. Если вы обнаружите себя включенным в шаблон страницы, вам, вероятно, стоит переосмыслить ситуацию.Структурные разделы дизайна вашей страницы должны быть определены с помощью соответствующих семантических тегов документа, а любые строки, которые вы можете пожелать, должны быть определены с помощью CSS. Элемент
, который создает небольшую разделительную полосу, лучше всего рассматривать как типографский элемент, как что-то, что может входить в контекст вашего контента, а не как часть дизайна. Это может быть полезно, когда вы хотите разделить часть контента на разделы без использования элементов заголовков.

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

Поддержка браузера для часов

Атрибуты часов

Имя атрибута Значения Примечания
ширина
Используется для указания ширины горизонтальной линейки. Не рекомендуется в HTML5. Вместо этого используйте CSS.
размер
Используется для указания высоты (толщины) горизонтальной линейки. Устарело. Вместо этого используйте CSS.
noshade
Используется для изменения отображения горизонтальной линейки из 3D-стиля по умолчанию на более плоский 2D-стиль.Устарело. Используйте CSS для управления отображением элемента.
цвет
Используется для управления цветом отображения горизонтальной линейки. Устарело. Вместо этого используйте CSS.
align
Используется для контроля горизонтального выравнивания горизонтальной линейки. Устарело. Вместо этого используйте CSS.

Навигация по сообщениям

Что такое HTML-тег HR и как его использовать?

Что нужно знать

  • Просто введите < hr > , чтобы вставить строку в HTML с тегом HR.
  • Измените характеристики линии, отредактировав CSS в документе HTML5.

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

Является ли тег HR семантическим?

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

Начиная с HTML5, тег HR стал семантическим, и теперь он определяет тематический разрыв на уровне абзаца, который является разрывом в потоке контента, который не требует новой страницы или другого более строгого разделителя — это смена темы.Например, вы можете найти тег HR после смены сцены в истории или он может указывать на изменение темы в справочном документе.

Атрибуты HR в HTML4 и HTML5

Линия растягивается на всю ширину страницы. Некоторые атрибуты по умолчанию описывают толщину, расположение и цвет линии, но вы можете изменить эти настройки, если хотите.

В HTML4 вы можете назначить простые атрибуты тега HR, включая выравнивание, ширину и отсутствие тени. Выравнивание может быть установлено на слева , по центру , справа, или по ширине .Ширина регулирует ширину горизонтальной линии от 100 процентов по умолчанию, которые растягивают линию по странице. Атрибут без оттенка отображает линию сплошного цвета вместо затененного цвета.

Эти атрибуты устарели в HTML5. Вместо этого вы должны использовать CSS для стилизации тегов HR в документах HTML5.

Это пример HTML5 стилизации горизонтальной линии до 10 пикселей в высоту с использованием встроенного CSS (стили, вставленные непосредственно в документ вместе с HTML):

Использование встроенного CSS для стилизации HR.Дженнифер Кырнин

Другой способ стилизовать горизонтальные линии в HTML5 — использовать отдельный файл CSS и ссылку на него из документа HTML. В файле CSS вы должны написать такой стиль:

Использование внешнего CSS для стилизации HR. Дженнифер Кырнин
hr {
 height: 10px 
}

Тот же эффект в HTML4 требует, чтобы вы добавили атрибут к содержимому HTML. Вот как изменить размер горизонтальной линии с помощью атрибута size :

Стилизация тега HR в HTML4.Дженнифер Кырнин

В CSS гораздо больше свободы в стилизации горизонтальных линий, чем в HTML.

Только стили шириной и высотой согласованы во всех браузерах, поэтому при использовании других стилей может потребоваться метод проб и ошибок. Ширина по умолчанию всегда составляет 100 процентов от ширины веб-страницы или родительского элемента. Высота правила по умолчанию — два пикселя.

HTML 5 Тег

Тег HTML

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

Тематический разрыв на уровне абзаца может быть сменой сцены в рассказе или переходом к другой теме в разделе справочника.

До HTML5 тег

использовался исключительно в презентационных целях (то есть для создания горизонтальной линейки). Однако из HTML5 ему было дано конкретное семантическое назначение (представлять тематический разрыв на уровне абзаца).

Демо

Атрибуты

HTML-теги могут содержать один или несколько атрибутов.Атрибуты добавляются к тегу, чтобы предоставить браузеру дополнительную информацию о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот пример: style = "color: black;" .

Есть 3 вида атрибутов, которые вы можете добавлять в свои HTML-теги: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

Атрибуты, которые вы можете добавить к этому тегу, перечислены ниже.

Атрибуты, зависящие от элемента

В следующей таблице показаны атрибуты, относящиеся к этому тегу / элементу.

Атрибут Описание
Нет

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

Следующие ниже атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам dialog ).

  • ключ доступа
  • автокапитализировать
  • класс
  • контентный
  • данные- *
  • директор
  • перетаскиваемый
  • скрыто
  • id
  • режим ввода
  • это
  • идентификатор товара
  • itemprop
  • itemref
  • шт. Область применения
  • тип позиции
  • язык
  • часть
  • слот
  • проверка орфографии
  • стиль
  • tabindex
  • титул
  • перевести

Полное описание этих атрибутов см. В разделе Глобальные атрибуты HTML 5.

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

  • onabort
  • onauxclick
  • размытие
  • отмена
  • oncanplay
  • oncanplaythrough
  • на замену
  • onclick
  • вкл.
  • контекстное меню
  • коп.
  • на смену
  • нарезка
  • ondblclick
  • ондраг
  • ондрагенд
  • ондрагентер
  • ондрагэксит
  • ondragleave
  • ондраговер
  • ондрагстарт
  • капля
  • на срок замены
  • пусто
  • завершено
  • ошибка
  • onfocus
  • onformdata
  • на входе
  • недействительно
  • нажатие клавиши
  • нажатие клавиши
  • onkeyup
  • onlanguagechange
  • загрузка
  • загруженные данные
  • загруженные метаданные
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • на мышке над
  • onmouseup
  • паста
  • на паузу
  • в игре
  • в игре
  • в процессе
  • скорость изменения
  • возврат
  • по размеру
  • в прокрутке
  • нарушение политики безопасности
  • востребовано
  • в поиске
  • при выборе
  • onslotchange
  • установлен
  • onsubmit
  • приостановлено
  • ontimeupdate
  • рычаг
  • по объему изменить
  • ожидает
  • на колесе

Полный список обработчиков событий см. В разделе Атрибуты содержимого обработчика событий HTML 5.

HTML 4 часа Тег

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

Пример

Атрибуты

Атрибуты, относящиеся к этому тегу:
Атрибут Описание
выровнять Выравнивание (слева, по центру, справа).Этот атрибут устарел.
noshade Удаляет обычный эффект затенения, который отображается в большинстве браузеров. Этот атрибут устарел.
размер Определяет высоту горизонтальной линейки. Этот атрибут устарел.
ширина Задает ширину горизонтальной линейки. Этот атрибут устарел.
Другие атрибуты:
Атрибут Описание
dir Определяет направление текста
класс Общий идентификатор документа.
id Общий идентификатор документа
язык Код языка
заголовок Задает заголовок, связанный с элементом. Многие браузеры отображают это при наведении курсора на элемент (аналогично «всплывающей подсказке»).
стиль Встроенный стиль (CSS)
onclick Внутреннее событие (см. Обработчики событий)
ondbclick Внутреннее событие (см. Обработчики событий)
onmousedown Внутреннее событие (см. Обработчики событий)
onmouseup Внутреннее событие (см. Обработчики событий)
onmouseover Внутреннее событие (см. Обработчики событий)
onmousemove Внутреннее событие (см. Обработчики событий)
onmouseout Внутреннее событие (см. Обработчики событий)
onkeypress Внутреннее событие (см. Обработчики событий)
onkeydown Внутреннее событие (см. Обработчики событий)
onkeyup Внутреннее событие (см. Обработчики событий)

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

Измените приведенный ниже код, затем нажмите Обновить .См. Ниже атрибуты.

Информация на этой странице основана на HTML версии 4.01. Большинство современных браузеров теперь поддерживают HTML5.

См. HTML5

Tag для версии HTML5 вышеуказанного элемента.

См. Этот список тегов HTML для получения последнего списка элементов HTML.

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом

, с синтаксисом и примерами.

Описание

Тег HTML

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

Синтаксис

В HTML синтаксис тега

:

  

 Это первый абзац. 




 Это второй абзац.

или в XHTML синтаксис тега

:

  

 Это первый абзац.

<час />

 Это второй абзац.

Пример вывода

Атрибуты

В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу

:

Атрибут Описание Совместимость с HTML
выровнять Выравнивание правила.Если этот атрибут опущен, по умолчанию остается Устарело в HTML 4.01, Устарело в HTML5
цвет Цвет правила в шестнадцатеричном формате (например, формат #RRGGBB) или именованном цвете (например, черный, красный, белый) Нестандартный
без оттенка Нет затенения на линейке Устарело в HTML 4.01, Устарело в HTML5
размер Высота линейки в пикселях Не рекомендуется в HTML 4.01, Устарело в HTML5
ширина Ширина правила, выраженная в пикселях или в процентах Устарело в HTML 4.01, Устарело в HTML5

Примечание

  • HTML-элемент
    находится внутри тега.
  • Тег
    — это тематический разрыв между абзацами в HTML5.
  • Тег
    — это горизонтальная линейка в HTML 4.01 (и предыдущих версиях HTML).

Совместимость с браузером

Тег

имеет базовую поддержку в следующих браузерах:

  • Хром
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Мобильный Safari

Пример

Мы обсудим тег

ниже, исследуя примеры использования тега
в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

HTML5 Документ

Если вы создали новую веб-страницу в HTML5, ваш тег

может выглядеть так:

  




 Пример HTML5 от www.techonthenet.com 



 
 Заголовок 1 
 

 Это первый абзац. 




 Это второй абзац.

В этом примере документа HTML5 мы создали два тега

, разделенных тегом

.

HTML 4.01 Переходный документ

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

может выглядеть так:

  




 HTML 4.01 Переходный пример от www.techonthenet.com 



 
 Заголовок 1 
 

 Это первый абзац. 




 Это второй абзац.

В этом примере переходного документа HTML 4.01 мы создали два тега

, разделенных тегом

.

Переходный документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Переходный, ваш тег

может выглядеть так:

  




 Переходный пример XHMTL 1.0 от www.techonthenet.com 



 
 Заголовок 1 
 

 Это первый абзац.

<час />

 Это второй абзац.

В этом примере переходного документа XHTML 1.0 мы создали два тега

, разделенных тегом

.

Строгий документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

может выглядеть так:

  




 Строгий пример XHTML 1.0 от www.techonthenet.com 



 
 Заголовок 1 
 

 Это первый абзац. 

<час />

 Это второй абзац.

В этом примере XHTML 1.0 Strict Document мы создали два тега

, разделенных тегом

.

XHTML 1.1, документ

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег

может выглядеть так:

   XHTML 1.</div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/css/background-svojstva-v-css-css-svojstvo-background-fon-v-css-pamyatka-dlya-nachinayushhix.html" rel="prev">Background свойства в css: CSS свойство Background – Фон в CSS – памятка для начинающих</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/rubriki-wordpress-naznachenie-i-upravlenie-rubrikami-wordpress-shablony-dlya-kategorij-rubrik-wordpress.html" rel="next">Рубрики wordpress: назначение и управление рубриками WordPress – Шаблоны для категорий (рубрик) WordPress</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/hr-teg-html-atribut-size-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='21305' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div>
<script type="text/javascript">
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins");
                    g.className = "adsbygoogle";
                    g.style.display = "inline";
                        g.style.width = "300px";
                        g.style.height = "600px";
                        g.setAttribute("data-ad-slot", "9935184599");
                    g.setAttribute("data-ad-client", "ca-pub-1812626643144578");
                    g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php");
                    document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g);
                    (adsbygoogle = window.adsbygoogle || []).push({}); }})});

window.addEventListener("load", () => {
var ins = document.getElementById("yandex_rtb_R-A-744004-7");
if (ins.clientHeight == "0") {
ins.innerHTML = stroke2;
}
}, true);
</script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> </body></html>