Что такое p в html: : Элемент текстового абзаца — HTML

Содержание

| WebReference

Определяет текстовый абзац. Элемент <p> (от англ. paragraph — абзац, параграф) является блочным, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего абзаца или другого блочного элемента.

Синтаксис

<p>Текст</p>

Атрибуты

align
Определяет выравнивание текста.

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>P</title> </head> <body> <p>Рекомендуется совершить прогулку на лодке по каналам города и Озеру Любви. </p> <p>Венгры страстно любят танцевать, особенно ценятся национальные танцы.</p> <p>Из первых блюд распространены супы-пюре и бульоны, но подают их редко.</p> </body> </html>

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

Рис. 1. Абзацы текста

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4.01 SpecificationРекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

1121111
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Текст

Практика

  • Абзацы
  • Добавление элемента
  • Картинки друг под другом
  • Открывающие и закрывающие теги
  • Открывающие теги
  • Ошибки в абзацах
  • Содержимое элемента

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

HTML тег

❮ Назад Вперед ❯

Тег <p> определяет параграф или текстовый абзац. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину. Следующие один за другим абзацы разделяются между собой отбивкой, величину которой можно задавать при помощи CSS свойства margin. Для перевода строки внутри абзаца используется тег <br>.

Пробелы между открывающим тегом <p> и его содержимым игнорируются браузером. Чтобы установить отступ (красную строку), используйте CSS свойство text-indent.

Текстовые абзацы и параграфы заключаются в открывающий (<p>) и закрывающий (</p>) теги. Если нет закрывающего тега нет, то считается, что конец абзаца совпадает с началом следующего блочного элемента.

Тег <p> не может содержать таблицы и другие блочные элементы.

Пример

<!DOCTYPE html>
 <html>
   <head>
      <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
          <p>Это параграф</p>
   </body>
 </html>

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

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    <style>
      div.paragraph {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок окна веб-страницы</h2>
    <div>
      <p>Выравнивание текста по центру установлено при помощи CSS свойства text-align</p>
    </div>
  </body>
</html>

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

Результат

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

Как добавить стиль к тегу <label> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <label>:

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <label>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <label>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <label>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

абзацев HTML

❮ Предыдущий Далее ❯


Абзац всегда начинается с новой строки и обычно представляет собой блок текста.


Абзацы HTML

Элемент HTML

определяет абзац.

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

Пример

Это абзац.


Это еще один абзац.

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


Отображение HTML

Вы не можете быть уверены, как будет отображаться HTML.

Большие или маленькие экраны и окна с измененным размером дадут разные результаты.

При использовании HTML вы не можете изменить отображение, добавив дополнительные пробелы или дополнительные строки в код HTML.

Браузер автоматически удалит все лишние пробелы и строки при открытии страницы. отображается:

Пример


Этот абзац
содержит много строк
в исходном коде,
но браузер
игнорирует его.


Этот параграф
содержит много пробелов
в исходнике code,
, но        браузер
игнорирует это.

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



Горизонтальные правила HTML

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

Элемент


используется для разделения содержимого (или определения изменения) в HTML страница:

Пример

Это заголовок 1


Это текст.




Это заголовок 2


Это какой-то другой текст.



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

Тег


является пустым тегом, что означает, что он не имеет закрывающего тега.


Разрыв строки HTML

Элемент HTML
определяет разрыв строки.

Используйте
, если вам нужен разрыв строки (новая строка) без начала нового абзаца:

Пример

Это
абзац
с разрывами строк.

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

Тег
является пустым тегом, что означает, что он не имеет конечного тега.


Задача со стихотворением

Это стихотворение будет отображаться в одной строке:

Пример


  Моя Бонни лежит над океан.

  Моя Бонни лежит над морем.

  Моя Бонни лежит над океаном.

  О, верни мне мою Бонни.

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


Решение — HTML-элемент

   

HTML-элемент

  определяет предварительно отформатированный текст. 

Текст внутри элемента

  отображается шрифтом фиксированной ширины (обычно
Courier), и он сохраняет как пробелы, так и разрывы строк: 

Пример

 
 Моя Бонни лежит над океаном.

  Моя Бонни лежит над морем.

  Моя Бонни лежит над океан.

  О, верни мне мою Бонни.

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


HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте правильный тег HTML, чтобы добавить абзац с текстом «Hello World!».


<тело>


Начать упражнение


Справочник по тегам HTML

Справочник по тегам W3Schools содержит дополнительную информацию об элементах HTML и их атрибутах.

Бирка Описание

Определяет параграф
<час> Определяет тематическое изменение содержимого

Вставляет одиночный разрыв строки
<пред> Определяет предварительно отформатированный текст

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

90902 Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег HTML p

❮ Назад Полный справочник HTML Далее ❯


Пример

Абзац размечен следующим образом:

Это какой-то текст в абзаце.

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

Ниже приведены дополнительные примеры "Попробуйте сами".


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

Тег

определяет абзац.

Браузеры автоматически добавляют одну пустую строку до и после каждого

элемент.

Совет: Используйте CSS для оформления абзацев.


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

Элемент

Да Да Да Да Да

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

Тег

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


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

Тег

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



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

Пример

Выровнять текст в абзаце (с помощью CSS):

Это текст в абзаце.

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

Пример

Стиль абзацы с CSS:





Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna Аликва. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia удостовериться, что анимация id est Laborum.


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

Пример

 Подробнее о абзацах:


Этот абзац
содержит много строк
в исходном коде, но браузер

игнорирует его.

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

Пример

Проблемы со стихотворением в HTML:


Моя Бонни лежит над океаном.
Моя Бонни лежит над морем.
Мой Бонни лежит над океаном.
О, верни мне мою Бонни.

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


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

Учебник HTML: HTML Paragraphs

Ссылка HTML DOM: Paragraph Object со следующими значениями по умолчанию:

Пример

p {
  display: block;
  Верхнее поле: 1em;
 нижнее поле: 1em;
  левое поле: 0;
  правое поле: 0;
}

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

❮ Предыдущая Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

06 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

90902 Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

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

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

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