From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/html/element/p/index.html | 190 +++++++++++++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 files/ru/web/html/element/p/index.html (limited to 'files/ru/web/html/element/p') diff --git a/files/ru/web/html/element/p/index.html b/files/ru/web/html/element/p/index.html new file mode 100644 index 0000000000..74e115173a --- /dev/null +++ b/files/ru/web/html/element/p/index.html @@ -0,0 +1,190 @@ +--- +title: '

: Элемент текстового абзаца' +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - Web + - Абзац + - Веб + - Группировка контента + - Параграф + - Справка + - Элемент +translation_of: Web/HTML/Element/p +--- +

{{HTMLRef}}
+ +

HTML-элемент <p> представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделенных от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.

+ +

Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом </p>. Смотрите ниже "Пропуск тега".

+ +
{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Категории контентаПотоковый контент, явный контент.
Разрешенное содержимоеФразовый контент.
Пропуск тегаТребуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом {{HTMLElement("p")}} сразу следует элемент {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} или другой элемент {{HTMLElement("p")}}, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом {{HTMLElement("a")}}.
Разрешенные родительские элементыЛюбой элемент, который разрешает потоковый контент в качестве содержимого.
Разрешенные роли ARIAЛюбые
DOM-интерфейс{{domxref("HTMLParagraphElement")}}
+ +

Атрибуты

+ +

К этому элементу применимы только глобальные атрибуты.

+ +
+

Заметка: Атрибут align в тегах <p> устарел и больше не должен с использоваться.

+
+ +

Пример

+ +

HTML

+ +
<p>Это первый абзац текста.
+  Это первый абзац текста.
+  Это первый абзац текста.
+  Это первый абзац текста.</p>
+<p>Это второй абзац текста.
+  Это второй абзац текста.
+  Это второй абзац текста.
+  Это второй абзац текста.</p>
+
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ +

Стилизация абзацев

+ +

По умолчанию браузеры разделяют абзацы одной пустой строкой. Альтернативные методы разделения, такие как отступы в первой строке абзаца, могут быть достигнуты с помощью {{glossary("CSS")}}:

+ +

HTML

+ +
<p>Разделение абзацев пустыми строками удобнее для читателей,
+но их также можно разделить, сделав отступы в их первых строках.
+Это часто используется для экономии места, например,
+чтобы тратить меньше бумаги при печати.</p>
+
+<p>Письмо (имеется ввиду письменность), предназначенное для редактирования,
+например, школьные записи и черновики, использует для разделения
+как пустые строки, так и отступы. В готовых работах объединение этих двух способов
+считается излишним и любительским.</p>
+
+<p>В очень старом письме абзацы были разделены
+специальным символом: ¶, <i>pilcrow</i> (знак абзаца).
+В настоящее время это считается замкнутым и трудно читаемым.</p>
+
+<p>Насколько трудно читать? Посмотрите сами:
+  <button data-toggle-text="О нет! Переключи обратно!">Используем "pilcrow" для абзацев</button>
+</p>
+
+ +

CSS

+ +
p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.pilcrow {
+   text-indent: 0;
+   display: inline;
+}
+p.pilcrow + p.pilcrow::before {
+  content: " ¶ ";
+}
+ +

JavaScript

+ +
document.querySelector('button').addEventListener('click', function (event) {
+  document.querySelectorAll('p').forEach(function (paragraph) {
+    paragraph.classList.toggle('pilcrow');
+  });
+  var newButtonText = event.target.dataset.toggleText;
+  var oldText = event.target.innerText;
+  event.target.innerText = newButtonText;
+  event.target.dataset.toggleText = oldText;
+});
+ +

Результат

+ +

{{EmbedLiveSample('Стилизация_абзацев')}}

+ +

Проблемы доступности

+ +

Разделение контента на абзацы помогает сделать страницу более доступной. Программы чтения с экрана и другие вспомогательные технологии предоставляют шорткаты ("shortcut" - кратчайший путь), позволяющие пользователям переходить к следующему или предыдущему абзацу, позволяя им просматривать содержимое, например, как пустая строка позволяет пользователям, воспринимающим информацию визуально, пропускать абзацы.

+ +

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

+ +

Если требуется дополнительное пространство, используйте свойства {{glossary("CSS")}}, например {{cssxref("margin")}}, чтобы создать такой эффект:

+ +
p {
+  margin-bottom: 2em; // увеличение пустого пространства после абзаца
+}
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}{{Spec2('HTML WHATWG')}}Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени) {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}{{Spec2('HTML5 W3C')}}Атрибут align больше не поддерживается
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}{{Spec2('HTML4.01')}}Первоначальное определение
+ +

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

+ + + +

{{Compat("html.elements.p")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf