Содержание
: Элемент текстового абзаца — HTML
HTML-элемент <p>
представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.
Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом </p>
. Смотрите ниже «Пропуск тега».
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Категории контента | Потоковый контент, явный контент. |
---|---|
Разрешённое содержимое | Фразовый контент. |
Пропуск тега | Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом <p> сразу следует элемент <address> , <article> , <aside> , <blockquote> , <div> , <dl> , <fieldset> , <footer> , <form> , <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <header> , <hr> , <menu> , <nav> , <ol> , <pre> , <section> , <table> (en-US), <ul> или другой элемент <p> , или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом <a> . |
Разрешённые родительские элементы | Любой элемент, который разрешает потоковый контент в качестве содержимого. |
Разрешённые роли ARIA | Любые |
DOM-интерфейс | HTMLParagraphElement (en-US) |
К этому элементу применимы только глобальные атрибуты.
Примечание: Атрибут align
в тегах <p>
устарел и больше не должен с использоваться.
HTML
<p>Это первый абзац текста.
Это первый абзац текста.
Это первый абзац текста.
Это первый абзац текста.</p>
<p>Это второй абзац текста.
Это второй абзац текста.
Это второй абзац текста.
Это второй абзац текста.</p>
Результат
По умолчанию браузеры разделяют абзацы одной пустой строкой. Альтернативные методы разделения, такие как отступы в первой строке абзаца, могут быть достигнуты с помощью 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;
});
Результат
Разделение контента на абзацы помогает сделать страницу более доступной. Программы чтения с экрана и другие вспомогательные технологии предоставляют шорткаты («shortcut» — кратчайший путь), позволяющие пользователям переходить к следующему или предыдущему абзацу, позволяя им просматривать содержимое, например, как пустая строка позволяет пользователям, воспринимающим информацию визуально, пропускать абзацы.
Использование пустого элемента <p>
для добавления пустого пространства между абзацами является проблемой для людей, которые используют технологию чтения с экрана.
Если требуется дополнительное пространство, используйте свойства CSS, например margin
, чтобы создать такой эффект:
p {
margin-bottom: 2em; // увеличение пустого пространства после абзаца
}
BCD tables only load in the browser
Тег | HTML справочник
Поддержка браузерами
Описание
Обычно любой документ содержит какой-либо текст, будь то описание к изображению или описание чего-либо другого, для удобства восприятия текста, он делится на небольшие части (подразделы), разделенные переносом строки, пустой строкой или отступом. Эти подразделы текста и называются абзацами.
Для определения абзаца в HTML-документе используется тег <p> (p — сокращение от англ. слова paragraph — абзац). При отображении тега <p>, браузер автоматически вставляет до и после него отступы, отделяя его, таким образом, от других элементов, размер отступов можно изменить с помощью стилей CSS. Для разрыва строки внутри абзаца используется тег <br>.
HTML тег <p>, вместе со всем его содержимым, относится к блочным элементам, при отображении он будет занимать всю доступную ему ширину, а высота будет зависеть от содержимого.
Примечание: cтоит обратить внимание на то, что все пробелы поставленные между открывающим тегом <p> и его содержимым будут игнорироваться браузером, также как и все пробелы между содержимым и закрывающим тегом </p>. Поэтому, такую банальную вещь, как красная строка, не получится сделать лишь поставив несколько дополнительных пробелов перед текстом, но с этой проблемой легко будет справиться с помощью CSS свойства text-indent, которое позволяет не только задать красную строку, но и точно определить размер отступа для нее.
Атрибуты
Тег <p> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
p { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; }
Пример
<p>Этот текст находится в абзаце.</p> <p>Это второй абзац на странице.</p> <p>А это третий абзац.</p>
Результат данного примера в окне браузера:
| HTML | WebReference
Определяет текстовый абзац. Элемент <p> (от англ. paragraph — абзац, параграф) является блочным, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего абзаца или другого блочного элемента.
Закрывающий тег
Не обязателен.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>P</title>
</head>
<body>
<p>Рекомендуется совершить прогулку на лодке по каналам города и Озеру Любви.</p>
<p>Венгры страстно любят танцевать, особенно ценятся национальные танцы.</p>
<p>Из первых блюд распространены супы-пюре и бульоны, но подают их редко.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Абзацы текста
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
HTML тег
Тег <p> определяет параграф или текстовый абзац. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину. Следующие один за другим абзацы разделяются между собой отбивкой, величину которой можно задавать при помощи CSS свойства margin. Для перевода строки внутри абзаца используется тег <br>.
Пробелы между открывающим тегом <p> и его содержимым игнорируются браузером. Чтобы установить отступ (красную строку), используйте CSS свойство text-indent.
Синтаксис¶
Текстовые абзацы и параграфы заключаются в открывающий (<p>) и закрывающий (</p>) теги. Если нет закрывающего тега нет, то считается, что конец абзаца совпадает с началом следующего блочного элемента.
Тег <p> не может содержать таблицы и другие блочные элементы.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Это параграф</p>
</body>
</html>
Попробуйте сами!
Результат¶
Использование CSS ¶
Для выравнивания текста в абзаце вместо устаревшего атрибута 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>:
Цвет текста внутри тега <label>:
Стили форматирования текста для тега <label>:
Другие свойства для тега <label>:
Видео-уроки HTML. Часть 3. Теги p, br, pre, blockquote
Это третье видео, в котором мы уже научимся создавать простые HTML-документы с размеченным текстом с помощью тегов <p>
, <br>
, <pre>
и <blockquote>
. После этого видео станет понятно, зачем же мы вообще взялись за изучение HTML, т.к. на примерах, разобранных в этом видео, станет виден общий механизм преобразования обычного текста в текст с разметкой HTML.
Обычный текст – это набор букв, которые идут друг за другом.
Буквы сгруппированы в отдельные блоки, разделённые пробелами – это слова.
Слова сгруппированы в более крупные блоки, разделённые точками, знаками вопроса и восклицания – это предложения.
Предложения в свою очередь тоже могут быть сгруппированы в блоки, разделённые вертикальными отступами – это абзацы.
При отображении текстовой информации в браузере все идущие подряд пробельные символы игнорируются и заменяются одним пробелом. Это касается не только пробелов, но и табуляции, а также переноса строк.
Исключением является тег <pre>
, который отобразит именно то, что включено в его контейнер.
Для того, чтобы разбить текст в браузере на более крупные блоки нужно использовать соответствующие теги HTML.
Тег <p>
Для разбиения на абзацы в HTML используется тег <p>
(запомнить просто: p от слова Paragraf). Каждый абзац с текстом нужно помещать в отдельный контейнер, обозначенный открывающим и закрывающим тегом <p>
.
При отображении в браузере абзацы разделяются друг от друга вертикальными отступами, улучшающими восприятие текста.
ВАЖНО: Каждый абзац начинается с тега <p>
и заканчивается закрывающим тегом </p>
.
Тег <br>
Для того, чтобы при отображении в браузере отобразить перевод строки, нужно воспользоваться тегом <br>
.
Тег <br>
устанавливает перевод строки в том месте, где он установлен и, в отличие от тега <p>
, вертикального отступа не производит. (запомнить просто: br от слова break).
Тег <br>
используется в местах, где нужен перевод текста на новую строку без выделения его в абзац.
ВАЖНО: Тег <br>
одиночный и закрывающего тега не имеет.
Тег <pre>
Иногда необходимо отобразить текст так, как он есть, не внося его отображение изменений. Для этого есть HTML-тег <pre>
.
Тег <pre>
используется для обозначения блока предварительно форматированного текста. В границах этого блока текста будут сохранены все пробельные символы и переносы строк.
У тега <pre>
есть особенность, что текст обычно выводится моноширинным шрифтом.
ВАЖНО: Тег <pre>
размечает область текста, поэтому нужен закрывающий тег </pre>
.
Тег <blockquote>
Рассмотрим ещё один HTML-тег <blockquote>
.
Тег <blockquote>
используется для выделения длинных цитат в тексте документа.
Текст, помещенный в контейнер <blockquote>
, обычно имеет не только вертикальные, но и горизонтальные отступы, что делает цитату заметной.
ВАЖНО: Тег <blockquote>
требует открывающего и закрывающего тега </blockquote>
Задание
В данном видео мы наконец-то начали понимать, в чём соль HTML – это разметка текстовой информации на блоки. С помощью всего 4-х тэгов (<p>
, <br>
, <pre>
и <blockquote>
) мы уже можем разметить текст так, чтобы его было приятно воспринимать.
Для того, чтобы закрепить полученные знания, настоятельно рекомендую выполнить самостоятельно приведённые примеры.
Если что-то пошло не так, задавайте вопросы. Для тех, кто всё-таки не смог создать файлы с тегами <p>
, <br>
, <pre>
и <blockquote>
, можно скачать их по этой ссылке. Они находятся в zip-архиве, так он скачается. Иначе файлы просто открывались бы в браузере.
Заберите ссылку на статью к себе, чтобы потом легко её найти 😉
Выберите, то, чем пользуетесь чаще всего:
Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )
html — Отличия от тегов
<br>
и <p>
делают совершенно не одно и то же.
<p>
используется для обозначения параграфа (абзаца) текста, в то время как <br>
— для создания отступа между строками/переноса текста на другую строку.
Вообще, в современных реалиях использовать br
вообще не рекомендуется (кроме тех случаев, когда вам необходимо разделить текст). Все отступы делаются при помощи стилей. По крайней мере, должны.
Судя по всему, автор вопроса спрашивает про различие пустого <p></p>
и <br
.
Здесь дело в том, что по умолчанию браузер добавляет тегу p
2 отступа: один размером 1em снизу и один такой же сверху. Если текста внутри тега нет, то остается только один отступ, равный 1em (то есть как раз высоте одной строки текста грубо говоря).
Но br
не создает отступа. Он переносит строку.
И тут нетрудно догадаться, что отступ размером в одну строку текста и одна пропущенная строка текста будут одинаковы по высоте (ну или почти). Так что, по сути, пустой p
и тег br
делают одно и то же, но совершенно разными путями, это да.
Ключевое же отличие у них в семантике: тег p
используется для обозначение одного абзаца текста (а отступы — побочный эффект стандартной стилизации, от которого можно избавиться в одну строку CSS кода), а тег br
используется именно для переноса строки.
Так что использовать <p></p>
для создания отступа не стоит. Если вам нужно отделить одну часть текста от другой, воспользуйтесь br
. А если вам нужно отделить друг от друга какой-то визуальный контент, используйте CSS отступы (различные).
<p>
Здесь идет текст. Тег p используется для того, чтобы обозначить абзац текста.<br>
Но здесь текст написан в том же абзаце, но уже на новой строке.
Конечно, можно поставить несколько тегов br:<br><br><br>
Ставлено 3 тега br: первый перешел на новую строку, второй и третий сделали то же самое, в результате чего было пропущено 2 строки.
<p></p>
А выше вставлен пустой тег p, который визуально сделал то же самое, что и один br, но семантически совершенно неверно. Дальше будет вставлен еще один тег p, но отступы у него будут убраны стилями, в результате чего отступа вы не увидите:
<p></p>
Текст после тега p с убранными отступами.
</p>
для чего нужен тег
для чего нужен тег <p>
>
для чего нужен тег <p>
Тег <p>
используется для разметки текста на обзацы. Когда текст большой, то для лучшей читабельности его нужно разделять на обзацы. По умолчанию в браузерах текст выделенный тегом <p>
переносится примерно на две строки ниже, но в таблице стилей этому тегу можно задать свои отступы и другие стили.
Если на странице используется несколько тегов, то закрывающий тег не нужен если стоит следующий открывающий тег, закрывающий тег </p>
ставят самым последним.
Пример использования тега <p>
, разметка стихотворения, тег <br>
служит для переноса текста на одну строку ниже.
<h4>
Александр Пушкин — Я помню чудное мгновенье </h4>
Я помню чудное мгновенье: <br>
Передо мной явилась ты, <br>
Как мимолетное виденье, <br>
Как гений чистой красоты. <p>
В томленьях грусти безнадежной <br>
В тревогах шумной суеты, <br>
Звучал мне долго голос нежный, <br>
И снились милые черты. <p>
Шли годы. Бурь порыв мятежной <br>
Рассеял прежние мечты,<br>
И я забыл твой голос нежный, <br>
Твои небесные черты. <p>
В глуши, во мраке заточенья <br>
Тянулись тихо дни мои <br>
Без божества, без вдохновенья, <br>
Без слез, без жизни, без любви. <p>
Душе настало пробужденье: <br>
И вот опять явилась ты, <br>
Как мимолетное виденье, <br>
Как гений чистой красоты. <p>
И сердце бьется в упоенье, <br>
И для него воскресли вновь <br>
И божество, и вдохновенье, <br>
И жизнь, и слезы, и любовь.</p>
HTML p Tag — Learn HTML
Тег
определяет абзац текста. Это элемент блочного уровня, который всегда начинается с новой строки. До и после каждого абзаца браузеры автоматически добавляют поля. Вы можете изменить поля, используя свойство CSS margin.
Если вам нужно просто переместить текст на новую строку, используйте тег
.
Синтаксис¶
Тег
используется парами. Контент записывается между открывающим (
) и закрывающим (
) тегами.Если закрывающий тег опущен, считается, что конец абзаца совпадает с началом следующего элемента уровня блока.
Пробелы между открывающим тегом
и его содержимым браузер игнорирует. Чтобы установить отступ, используйте свойство CSS text-indent.
Тег
не может содержать таблицы и другие элементы уровня блока.
Пример тега HTML
: ¶
Название документа
Это абзац
Попробуйте сами »
Результат¶
Использование CSS ¶
Чтобы выровнять текст в абзаце вместо устаревшего атрибута align, используйте свойство CSS text-align.
Пример тега HTML
, используемого со свойством CSS text-align: ¶
Название документа
<стиль>
div.paragraph {
выравнивание текста: центр;
}
Название документа
Выравнивание текста по центру устанавливается с помощью свойства CSS text-align
Попробуйте сами »
Пример тега HTML
, используемого с тегом
: ¶
Название документа
Внутри абзаца мы можем поместить тег & lt; br / & gt ;,
, чтобы при необходимости перенести часть текста в другую строку.
Lorem ipsum, или Lorem ipsum, как его иногда называют, представляет собой фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов.
Попробуйте сами »
Атрибуты¶
Тег
также поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать тег
?
Общие свойства для изменения визуального веса / выделения / размера текста в теге
:
- Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | косой | начальная | наследовать.
- CSS свойство font-family определяет приоритетный список из одного или нескольких имён семейств шрифтов и / или родовых имён семейств для выбранного элемента.
- CSS свойство font-size устанавливает размер шрифта.
- CSS свойство font-weight определяет, должен ли шрифт быть жирным или толстым.
- Свойство CSS text-transform управляет регистром текста и заглавными буквами.
- CSS свойство text-decoration определяет украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста в теге
:
- Свойство цвета CSS описывает цвет содержимого текста и оформления текста.
- CSS свойство background-color устанавливает цвет фона элемента.
Стили макета текста для тега
:
- Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
- Свойство CSS text-overflow указывает, как пользователю следует сигнализировать о переполненном содержимом, которое не отображается.
- CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
- Свойство CSS word-break определяет, где строки должны быть разорваны.
Другие свойства, на которые стоит обратить внимание по тегу
:
HTML Paragraphs
Абзац всегда начинается с новой строки и обычно представляет собой блок текста.
HTML абзацы
Элемент HTML
определяет абзац.
Абзац всегда начинается с новой строки, и браузеры автоматически добавляют пробел (поле) до и после абзаца.
HTML-дисплей
Вы не можете быть уверены в том, как будет отображаться HTML.
Большие или маленькие экраны и окна с измененным размером дают разные результаты.
В HTML вы не можете изменить отображение, добавив лишние пробелы или лишние строки в свой HTML-код.
Браузер автоматически удаляет лишние пробелы и строки, когда страница
отображается:
Пример
Этот параграф
содержит много строк
в исходном коде,
но
браузер
игнорирует это.
Этот абзац
содержит
много пробелов
в исходнике
код,
, но браузер
игнорирует
Это.
Попробуй сам »
Горизонтальные правила HTML
Тег
определяет тематический разрыв на странице HTML и чаще всего
отображается в виде горизонтальной линейки.
Элемент
используется для разделения содержимого (или определения изменения) в HTML.
страница:
Пример
Это заголовок 1
Это какой-то текст.
Это заголовок 2
Это другой текст.
Попробуй сам »
Тег
— это пустой тег, что означает, что у него нет конечного тега.
HTML разрывы строк
Элемент HTML
определяет разрыв строки.
Используйте
, если вам нужен разрыв строки (новая строка) без начала нового абзаца:
Тег –
— это пустой тег, что означает, что он не имеет конечного тега.
Проблема стихотворения
Это стихотворение будет отображаться в одной строке:
Пример
Моя Бонни лежит
океан.
Моя Бонни лежит над морем.
Моя Бонни
лежит над океаном.
О, верни мне мою Бонни.
Попробуй сам »
Решение — HTML-элемент
Элемент HTML
определяет предварительно отформатированный текст.
Текст внутри элемента
отображается шрифтом фиксированной ширины (обычно Courier), и он сохраняет как пробелы, так и разрывы строк:
Пример
Моя Бонни лежит над океаном.Моя Бонни лежит над морем.
Моя Бонни лежит над океан.
О, верни мне мою Бонни.
Попробуй сам "
Упражнения HTML
Проверьте себя упражнениями
Задание:
Используйте правильный тег HTML, чтобы добавить абзац с текстом «Hello World!».
Отправить ответ »
Начало упражнения
Ссылка на тег HTML
Справочник тегов
W3Schools содержит дополнительную информацию об элементах HTML и их атрибутах.
Тег | Описание |
---|---|
Определяет параграф | |
Определяет тематическое изменение содержания | |
Вставляет одинарный разрыв строки | |
Определяет предварительно отформатированный текст |
HTML p Tag - Учебник Republic
Тема: Справочник по тегам HTML5 Назад | След.
Описание
Тег
определяет абзац.Элемент
является наиболее часто используемым элементом блочного уровня. Однако он не может содержать элементы уровня блока (включая сам
).
В следующей таблице приведены контекст использования и история версий этого тега.
Место размещения: | Блок |
---|---|
Содержание: | Встроенный и текстовый |
Начальный / конечный тег: | Начальный тег: требуется , Конечный тег: необязательно |
Версия: | HTML 2, 3.2, 4, 4.01, 5 |
Примечания по использованию
-
Как логический элемент, пустые абзацы игнорируются браузерами, поэтому не используйте пустые элементы
margin
в CSS. -
Когда вы используете элемент
margin
.
Синтаксис
Базовый синтаксис тега
задается следующим образом:
HTML / XHTML:
...
Пример ниже показывает действие тега
.
Это абзац.
Это еще один абзац.
Примечание: В HTML конечный тег для элемента
может быть опущен. В XHTML тег
должен быть правильно закрыт i.е. требуются как начальный, так и конечный теги.
Атрибуты, специфичные для тегов
В следующей таблице показаны атрибуты, относящиеся к тегу
.
Атрибут | Значение | Описание |
---|---|---|
выровнять | слева | Устарело Задает горизонтальное выравнивание текста в абзаце.Вместо этого используйте свойство CSS text-align. |
Глобальные атрибуты
Как и все другие теги HTML, тег
поддерживает глобальные атрибуты в HTML5.
Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML5.
Совместимость с браузером
Тег
поддерживается во всех основных современных браузерах.
Базовая поддержка -
|
Дополнительная литература
См. Учебник по: Выравнивание CSS.
Связанные теги:
-
,
HTML-тег
Тег HTML
представляет абзац в документе HTML.
Абзацы обычно отображаются с пробелом между каждым абзацем, но это зависит от пользовательского агента / браузера. Браузерам не обязательно отображать такое пространство, однако это обычное соглашение.
Тег
следует использовать только тогда, когда нет другого, более подходящего тега для использования. Например, тег
лучше подходит для большей части содержимого нижнего колонтитула.Синтаксис
Тег
записывается как
с текстом абзаца, вставленным между начальным и конечным тегами.
Как это:
Текст абзаца здесь ...
Примеры
Использование базового тега
Это абзац ...
Это новый абзац ...
Внутри других элементов
Тег
классифицируется как «содержимое потока» (и «осязаемое содержимое»), что означает, что он может появляться везде, где ожидается «содержимое потока».Вот пример использования тега
в теге
.
<цитата>
Многим, особенно ученым, эту таблетку трудно проглотить. Представление о том, что у наших знаний может быть естественный практический предел - предел, за который наше восприятие не может проникнуть - основано на представлении о том, что мы - лишь очень небольшая часть гораздо большей реальности.
Эта унизительная мысль противоречит тому значению и собственной важности, которое мы, люди, придаем себе.
<нижний колонтитул> -
Моя большая TOE
Элементы списка и
Тег
Элементы списка не могут быть дочерними по отношению к элементу
. Следовательно, нельзя размещать теги
- или
- банан,
- яблоко и
- оранжевый,
- банан,
- яблоко и
- оранжевый,
-
ключ доступа
-
автокапитализировать
-
класс
-
контентный
-
данные- *
-
директор
-
перетаскиваемый
-
скрыто
-
id
-
режим ввода
-
это
-
идентификатор товара
-
itemprop
-
itemref
-
область охвата
-
тип позиции
-
язык
-
часть
-
слот
-
проверка орфографии
-
стиль
-
tabindex
-
название
-
перевести
-
onabort
-
onauxclick
-
onblur
-
отмена
-
oncanplay
-
oncanplaythrough
-
на замену
-
onclick
-
вкл.
-
контекстное меню
-
копия
-
на смену
-
нарезка
-
ondblclick
-
ондраг
-
ондрагенд
-
ондрагентер
-
ондрагэксит
-
ondragleave
-
вперед
-
ondragstart
-
капля
-
на срок замены
-
одноразовый
-
завершено
-
ошибка
-
onfocus
-
onformdata
-
на входе
-
недействительно
-
нажатие клавиши
-
нажатие клавиши
-
onkeyup
-
onlanguagechange
-
под нагрузкой
-
загруженные данные
-
загруженные метаданные
-
onloadstart
-
onmousedown
-
onmouseenter
-
onmouseleave
-
onmousemove
-
на мышке
-
на мышке
-
onmouseup
-
паста
-
пауза
-
в игре
-
в рабочем состоянии
-
в процессе
-
на скорость изменения
-
Возврат
-
по размеру
-
прокрутка
-
нарушение политики безопасности
-
востребовано
-
в поиске
-
при выборе
-
на смену
-
установлен
-
onsubmit
-
приостановлено
-
ontimeupdate
-
рычаг
-
по объему изменить
-
ожидает
-
на колесе
- Элемент HTML
находится внутри тега
. - Это наиболее часто используемый элемент блочного уровня.
- Абзацы, определенные с помощью тега
, имеют дополнительный интервал до и после тега
.
- Хром
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
- padding-top
- padding-left
- padding-bottom
- padding-right
- padding (элемент получает заполнение со всего сайта за один раз)
- & lt; br & gt; тег - используется для следующей строки.
- Поля - два типа (поля отрицательных значений имеют противоположную сторону согласно правилу декартовых знаков)
- margin-left : несколько пикселей или процентов
- margin-top: несколько пикселей или процентов.
-
& amp; nbsp;
- для пространства в HTML требуется гораздо меньше места. - О - Понять назначение тега p.
- Синтаксис - Опишите, как он используется.
- Настройки - Просмотр обязательных и дополнительных атрибутов
плюс поведение по умолчанию. - Примеры - Просмотрите общие примеры.
внутри тега
.Вот два метода работы со списками внутри предложения.
Несколько
Теги
Один из вариантов - закрыть первый тег
перед списком, а затем открыть новый после списка.
Пока вы едите
все будет в порядке.
Используйте
Другой вариант - вложить все предложение (включая список) в теги
могут принимать
или
. Это больше подходит, если вам нужно разделить абзацы на логические группы (например, для стилизации).
Пока вы едите
все будет хорошо.
Атрибуты
Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить дополнительную информацию о том, как этот элемент должен выглядеть или вести себя.
Элемент
принимает следующие атрибуты.
Атрибут Описание Нет
Глобальные атрибуты
Следующие атрибуты являются стандартными для всех элементов HTML. Следовательно, вы можете использовать эти атрибуты с тегом
, а также со всеми другими тегами HTML.
Полное описание этих атрибутов см. В разделе «Глобальные атрибуты HTML 5».
Обработчики событий
Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.
Большинство атрибутов содержимого обработчиков событий можно использовать для всех элементов HTML, но некоторые обработчики событий имеют определенные правила относительно того, когда их можно использовать и к каким элементам они применимы.
Подробнее см. Атрибуты содержимого обработчика событий HTML.
HTML: тег
В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом
, с синтаксисом и примерами.
Описание
Тег HTML
определяет абзац в документе HTML. Этот тег также обычно называют элементом
.
Синтаксис
В HTML синтаксис тега
:
Здесь идет абзац.
Пример вывода
Атрибуты
Помимо глобальных атрибутов, ниже приводится список атрибутов, относящихся к тегу
:
Атрибут Описание Совместимость с HTML выровнять Выравнивание текста Устарело в HTML5, используйте CSS
Примечание
Совместимость с браузером
Тег
имеет базовую поддержку в следующих браузерах:
Пример
Мы обсудим тег
ниже, исследуя примеры использования тега
в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.
HTML5 Документ
Если вы создали новую веб-страницу в HTML5, ваш тег
может выглядеть так:
Пример HTML5 от www.techonthenet.com
Заголовок 1
Это первый абзац, который появится под заголовком 1.
Это второй абзац.
В этом примере документа HTML5 мы создали два тега
, которые появляются под тегом
.
HTML 4.01 Переходный документ
Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег
может выглядеть так:
HTML 4.01 Переходный пример от www.techonthenet.com
Заголовок 1
Это первый абзац, который появится под заголовком 1.
Это второй абзац.
В этом примере переходного документа HTML 4.01 мы создали два тега
, которые появляются под тегом
.
XHTML 1.0 Переходный документ
Если вы создали новую веб-страницу в XHTML 1.0 Переходный, ваш тег
может выглядеть так:
Переходный пример XHMTL 1.0 от www.techonthenet.com
Заголовок 1
Это первый абзац, который появляется под заголовком 1.
Это второй абзац.
В этом примере переходного документа XHTML 1.0 мы создали два тега
, которые появляются под тегом
.
Строгий документ XHTML 1.0
Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег
может выглядеть так:
Строгий пример XHTML 1.0 от www.techonthenet.com
Заголовок 1
Это первый абзац, который появится под заголовком 1.
Это второй абзац.
В этом примере строгого документа XHTML 1.0 мы создали два тега
, которые появляются под тегом
.
XHTML 1.1 Документ
Если вы создали новую веб-страницу в XHTML 1.1, ваш тег
может выглядеть так:
XHTML 1.1 Пример с сайта www.techonthenet.com
Заголовок 1
Это первый абзац, который появляется под заголовком 1.
Это второй абзац.
В этом примере документа XHTML 1.1 мы создали два тега
, которые появляются под тегом
.
HTML-тегов P | HTML-тег абзаца
Тег HTML P - текстовый элемент. Его также называют тегом абзаца HTML. Это элемент уровня блока и всегда начинается с новой строки. В этом руководстве вы узнаете о базовом теге HTML
и его атрибуте.
Закрывающий тег
является необязательным, тег опускается, считается, что конец абзаца совпадает с началом следующего элемента уровня блока. Но рекомендуется использовать закрывающий тег Html
. Это гарантирует, что ваш HTML-документ (код) проверяет
Вы впервые столкнетесь с тегом HTML p, если вы только начинаете изучать HTML или веб-дизайн.
Синтаксис
HTML
Элемент тега начинается с тега
и заканчивается тегом
. Контент
Пример | HTML-тег абзаца
Пример элемента абзаца HTML очень прост.
Это тег HTML P
Выход:
Заполнение абзацев HTML | Слева, справа, сверху и снизу
Padding дает пространство между другим элементом или создает пространство вокруг содержимого элемента.P добавление в HTML абзаца использовать только путем добавления кода CSS. Это делает тег
более стильным и интересным. Вот его свойства: -
Разрыв абзаца HTML | Многострочный
Некоторые места нужны для разбивки текста ( абзац) на следующую строку.Вы можете использовать тег
там, где хотите разорвать строку. См. Ниже его код.
Это тег HTML P
его переход на следующую строку
Выход:
Как сделать интервал между абзацами HTML?
Делайте пробелы между абзацами или в тексте можно использовать отступ , поле ,
тег , & nbsp;
и др.
Примечание : нет пробела между « & и n ».См. Пример ниже.
Это тег HTML P
его переход на следующую строку
Отступ текста 60 пикселей
Это 2x & nbsp; & nbsp; пространство
Поле текста 50 пикселей
Выход:
Размер шрифта абзаца HTML
Изменение размера шрифта текста выполняется с помощью стиля CSS.Или используйте размер шрифта HTML | px, em, маленький, полужирный
Давайте посмотрим на это на примере.
Размер текста
Размер шрифта не изменен
Текст размером 24 пикселя
HTML Выровнять абзац | Сделать более читаемым
Для выравнивания текста используйте свойство text-align в CSS.Свойство text-align
a описывает горизонтальное выравнивание текста в элементе.
Атрибут Значение Описание выравнивание справа
слева
выравнивание Определяет выравнивание текста.
выравнивание текста: слева | справа | по центру | выравнивание | начальное | наследование;
См. Ниже код, как его использовать.
Правый текст
Цвет абзаца HTML | Стиль текста
Цвет шрифта HTML-тега
можно изменить двумя способами: сначала с помощью тега , а затем с помощью CSS.
имя_цвета | шестнадцатеричный номер | rgb_number “>
// тег шрифта
свойство : значение; “>
// с использованием CSS
Рекомендуемый учебник - Цвет шрифта HTML | Цветовые коды текста
Ширина абзаца HTML
Простите ширину для
ta g, вам нужно использовать CSS style width property.Свойство width устанавливает ширину элемента абзаца.
ширина: авто | значение | начальное | наследование;
Пример: установка ширины 40 пикселей в HTML-теге P , если текст больше, он будет перенесен на следующую строку.
Ширина текста 40 пикселей
Выход:
Как сделать межстрочный интервал в HTML-абзаце?
Использование Свойство line-height определяет высоту строки в теге
.
Строка текста 1
Строка текста 2
Выход:
Вопрос: Отступ абзаца HTML?
Ответ : Этот вопрос к вам, пожалуйста, ответьте в комментарии. Мы подберем лучший ответ и добавим в этот урок.
Примечание: Там, где мы использовали встроенный CSS, вы также можете использовать внутренний / внешний CSS для каждого примера.
Прокомментируйте, если у вас есть какие-либо сомнения, предложения и примеры для учебника по тегам HTML P.
Примечание: Примеры тегов «Все» HTML Paragraph (
) протестированы в браузере Safari (версия 12.0.2).
ОС: macOS 10.14 Mojave
Код: Версия HTML 5
Степень в области компьютерных наук и инженер: разработчик приложений и опыт программирования на нескольких языках.Энтузиазм в области технологий и обучение техническим наукам.
Связанные
HTML p Tag - Создание блока текста с тегом абзаца | Список HTML-тегов
Тег p или абзац создает блок текста. Этот абзац часто отделяется от другого текста более широким вертикальным полем.
Опубликовано: 5 сентября 2018 г.
Обновлено: 23 февраля 2021 г.
Тег абзаца - один из наиболее часто используемых тегов. Как вы увидите, это также одно из самых простых в освоении.
Схема
Назад
Совет
След.
Общие сведения о теге p HTML
Начинающий
Тег
так легко выучить
потому что он не имеет уникальных атрибутов.Конечно глобальный
атрибуты применяются, как и ко всем элементам.
Еще одно упрощение заключается в том, что в HTML5 стиль абзаца установлен
с каскадными таблицами стилей (CSS) вместо каждой
элемент.
HTML-теги Ссылка
1. О теге p HTML
Тег
находится внутри
элемент, что означает
находится в видимой части документа.
Его цель - создать блок текста с одинаковым стилем.
как и другие элементы
на
страница.
Как элемент уровня блока, элемент абзаца занимает все пространство
своего родительского элемента после начала с новой строки. Это поведение
в отличие от встроенных элементов, которые начинаются где угодно в строке.
Обычно элемент
содержит
другие встроенные элементы и столько же о настройке структуры, или
«поток» документа, поскольку они касаются отображения текста.
2. Синтаксис HTML-тега p
Для тега
в HTML5 это
посоветовал использовать закрытие
тег.
Поскольку многие авторы HTML часто забывают закрывающий
, большинство браузеров будут
правильно отобразить документ без него.
Однако, поскольку этот тег проще закрыть, чем изучать
правила, где его не нужно закрывать, лучше закрыть. Много
валидаторы документов, такие как
W3C Markup Validation Service (открывается в новом браузере)
являются более строгими, чем браузеры, и будут предупреждать вас о необходимости закрыть это
элемент.
Текст, видимый на веб-странице, находится между тегами open и close.
Элемент
не содержит
уникальные аргументы, кроме глобальных.
Горизонтальный пробел ограничен одним символом в большинстве
браузеры, поэтому используйте тег
если вы хотите сохранить пробелы. Вертикальные пробелы обрезаются. Пример ввода HTML
Возврат каретки,
лишние пробелы и текст, который охватывает несколько
строки будут обрезаны внутри элемента абзаца.
Этот абзац демонстрирует, как расстояние между двумя
абзацы могут выглядеть, в зависимости от настроек CSS.
Заметили лишний пробел между абзацами?
Что касается стиля кодирования, многострочные абзацы часто
закодированы открывающими и закрывающими тегами на разных строках
нравится.
Для отдельных строк этот формат подходит.
При вводе кода HTML, как указано выше, будут выведены абзацы, показанные ниже.
Пример вывода HTML
Возврат каретки, лишние пробелы и текст, который переносится на несколько
строки будут обрезаны внутри элемента абзаца.
Этот абзац демонстрирует, как может выглядеть интервал между двумя абзацами,
в зависимости от настроек CSS. Заметили лишний пробел между абзацами?
Что касается стиля кодирования, многострочные абзацы часто кодируются с помощью
открывающие и закрывающие теги в разных строках, как это.
Для одиночных строк этот формат подходит.
3. Настройки HTML-тега p
Как и все теги,
Глобальный
Атрибуты всегда можно установить.
Атрибуты и значения для тега p
Элемент
не
иметь какие-либо свои атрибуты. Тем не менее,
id
глобальный атрибут часто используется для
идентифицировать элемент по имени.
Поведение по умолчанию
Каждый пользовательский агент (браузер) имеет собственную таблицу стилей как таковую.Это диктует
как этот браузер стилизует каждый элемент по умолчанию. Браузер Chrome
стилизует элемент
с помощью
следующие спецификации.
п {
дисплей: блок;
маржа-начало-блока: 1em;
край блока: 1em;
маржа-инлайн-начало: 0px;
маржа-встроенный-конец: 0 пикселей;
}
4. Примеры тегов HTML p
Пример 1. Создайте абзац с идентификатором "open"
Следующий HTML-код создаст блок абзаца со стилем
атрибуты, указанные в документе CSS.Здесь мы также назначаем глобальный
id атрибута
и назовем его «открытие».
Это вводный абзац для
эту веб-страницу. Все лишние разрывы строк
и лишние пробелы будут удалены.
Введите или скопируйте приведенные выше строки в текстовый файл с
.html и откройте его в браузере, чтобы увидеть
результат.
Атрибут id
можно использовать для создания
гиперссылка на этот раздел с использованием
тег. Видеть
тег для изучения
о том, как привязать гиперссылку.
Также с помощью JavaScript разработчик может автоматически вносить изменения в этот
названный "начальный" абзац на основе действия, предпринятого пользователем, например
нажатие кнопки для замены текста.
Связанный HTML-контент
Тег
находится внутри тела
HTML-документа.