— HTML — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Дока Дог советует
- Алёна Батицкая советует
Кратко
Секция статьи «Кратко»Используйте тег <p>
, чтобы превратить текст в абзац.
Пример
Секция статьи «Пример»<p>Это первый абзац текста.</p><p>А это уже второй.</p><p>И между ними небольшая пропасть.</p>
<p>Это первый абзац текста.</p>
<p>А это уже второй.</p>
<p>И между ними небольшая пропасть.</p>
Как понять
Секция статьи «Как понять»Тег <p>
создаёт блок: всё, что находится внутри него, начнётся с новой строки. Между блоками <p>
появляется вертикальный отступ, величину которого можно задать с помощью стилей.
Внутри блока может находиться любой текстовый контент.
Как пишется
Секция статьи «Как пишется»<p>Текст, хихик</p>
<p>Текст, хихик</p>
Дефолтные стили абзаца:
p { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;}
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
Подсказки
Секция статьи «Подсказки»💡 Атрибут align
для тега <p>
устарел и больше не используется.
💡 Абзац может заканчиваться не только явно (закрывающим тегом <
), но и неявно — перед началом следующего блочного элемента. Поэтому нельзя просто взять и вложить в абзац список, таблицу, <figure>
, другой абзац и подобные элементы: браузер неявно закроет абзац перед ними и сделает эти элементы не вложенными, а соседними.
На практике
Секция статьи «На практике»Дока Дог советует
Секция статьи «Дока Дог советует»🛠 Тег <p>
по факту ведёт себя как обычный блок <div>
. Нужно учесть, что у <p>
по умолчанию заданы свойства margin
и margin
— отступы от начала и конца блока, чтобы каждый абзац отступал на 1em (примерно 16 пикселей) от предыдущего. Поэтому этот показатель отступов надо прописывать в CSS для всех тегов <p>
.
Чтобы сделать заголовок, который не имеет ценности для поисковых машин, то лучше, вместо одного из тегов <h2>
…<h6>
использовать тег <p>
с классом h2
или h3
и так далее.
Алёна Батицкая советует
Секция статьи «Алёна Батицкая советует»🛠 Я часто вижу, как начинающие разработчики оборачивают словосочетания или вообще одно слово в отдельные абзацы только для переноса текста на новую строку. Так делать не нужно, поскольку абзац является логической единицей текста.
Возьмите с полки любую книгу с прозой и откройте её. Вы увидите, что чаще всего абзацы состоят из нескольких предложений. Каждый абзац визуально отделён от предыдущего и следующего. В некоторых книгах это заметный отступ. Где-то — красная строка (отступ первой строки). Редко когда абзац состоит из отдельного слова или словосочетания.
Придерживайтесь этого принципа и в вёрстке. Оборачивайте в тег <p>
как минимум одно полное предложение или текст из нескольких предложений.
Если нужен текстовый тег для слова или словосочетания — обратите внимание на <span>
.
Текст — пластичная конструкция. Если нужно добиться переноса строк, то ограничьте ширину текстового блока и позвольте тексту занять отведённое ему пространство естественным образом.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
<h2>
. ..<h6>
alt + ←
→
<div>
alt + →
onplay | Скрипт викликається коли медіа дані готові почати відтворення. |
onafterprint | Скрипт виконується тільки після як документ надрукований. |
onbeforeprint | Скрипт виконується перед тим, як документ надрукований. |
onbeforeunload | Скрипт виконується коли документ ось-ось буде вивантажений |
onhashchange | Скрипт виконується коли там відбулися зміни до частини якоря в URL |
onload | Викликається після того як завантаження елемента завершене. |
onmessage | Скрипт виконується коли викликане повідомлення. |
onoffline | Спрацьовує коли браузер починає працювати в автономному режимі |
ononline | Спрацьовує коли браузер починає працювати в режимі онлай. |
onpagehide | Скрипт виконується коли користувач переходить на іншу сторінку сторінку. |
onpageshow | Скрипт виконується коли користувач заходить на сторінку. |
onpopstate | Скрипт виконується коли змінено історію одного вікна. |
onresize | Скрипт виконується, коли розмір вікна браузера змінюється. |
onstorage | Скрипт виконується, коли вміст Web Storage оновлюється. |
onunload | Викликається, коли сторінка розвантажена, або вікно браузера було зачинено. |
onblur | Скрипт виконується, коли елемент втрачає фокус. |
onchange | Викликається в той момент, коли значення елемента змінюється. |
oncontextmenu | Скрипт виконується коли викликається контекстне меню. |
onfocus | Викликається в той момент, коли елемент отримує фокус. |
oninput | Скрипт викликається коли користувач вводить дані поле. |
oninvalid | Скрипт виконується, коли елемент недійсний. |
onreset | Викликається, коли натискається у формі кнопка типу Reset. |
onsearch | Викликається, коли користувач щось пише в поле пошуку (для <input type="search">) |
onselect | Викликаєтсья після того як будь-який текст був обраний в елементі. |
onsubmit | Викликається при відправленні форми. |
onkeydown | Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу. |
onkeypress | Викликається коли корисрувач натиснув на клавішу. |
onkeyup | Викликається коли користувач відпускає клавішу. |
ondblclick | Виникає при подвійному клацанні ЛКМ на елементі. |
ondrag | Періодично викликається при операції перетягування. |
ondragend | Викликається коли користувач відпускає перелягуваний елемент. |
ondragenter | Викликається, коли перетягуваний елемент входить в цільову зону. |
ondragleave | Викликається, коли перетягуваний елемент виходть з зони призначення. |
ondragover | Викликається, коли перетягуваний елемент знаходиться в зоні призначення. |
ondragstart | Викликається, коли користувач починає перетягувати елемент, або виділений текст. |
ondrop | Викликається, коли перетягуваний елемент падає до зони призначення. |
onmousedown | Викликається, коли користувач затискає ЛКМ на елементі. |
onmousemove | Викликається, коли курсор миші переміщається над елементом. |
onmouseout | Викликається, коли курсор виходить за межі елемента. |
onmouseover | Виконується, коли курсор наводиться на елемент. |
onmouseup | Викликається, коли користувач відпускає кнопку миші. |
onscroll | Викликається при прокручуванні вмісту елемента (чи веб-сторінки). |
onwheel | Викликається, коли користувач прокручує коліщатко миші. |
oncopy | Викликається, коли користувач копіює вміст елемента. |
oncut | Викликається, коли користувач вирізає вміст елемента. |
onpaste | Викликається, коли користувач вставляє вміст в елемент. |
onabort | Виконується при перериванні якоїсь події. |
oncanplay | Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення) |
oncanplaythrough | Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію. |
oncuechange | Скрипт виконується коли змінюється кий в <track> елемента |
ondurationchange | Викликається коли змінюється довжина медіа файлу. |
onemptied | Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею). |
onended | Викликається коли медіа елемент повністю відтворив свій зміст. |
onshow | Викликається, коли елемент <menu> буде відображено як контекстне меню. |
onloadedmetadata | Скрипт виконується коли метадані (розміри чи тривалість) завантажуються. |
onloadeddata | Викликається коли медіа данні завантажено. |
onloadstart | Викликається коли браузер тільки починає завантажувати медіа дані з сервера. |
onpause | Викликається коли відтворення медіа даних призупинено. |
onplaying | Викликається коли розпочато відтворення медіа даних. |
onprogress | Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео. |
onratechange | Викликається коли змінюється швидкість відтворення медіа даних. |
onseeked | Викликається коли атрибут seeked у тега audio або video змінює значення з true на false. |
onseeking | Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true |
onstalled | Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані. |
onsuspend | Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження. |
ontimeupdate | Викликається коли змінилася позиція відтворення елемента <audio> або <video>. |
onvolumechange | Викликається коли змінюється гучність звуку. |
onwaiting | Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться. |
ontoggle | Викликається, коли користувач відкриває або закриває елемент <details>. |
onerror | Викликається якщо при завантаженні елемента сталася помилка. |
onclick | Подія викликається коли користувач клацає ЛКМ по елементу. |
html — css для определенных тегов p
спросил
Изменено 7 лет, 3 месяца назад
Просмотрено 9к раз
Я уже задавал аналогичный вопрос, но нашел более подходящую формулировку. Итак, учитывая html-документ с несколькими идентификаторами div, и каждый идентификатор div с несколькими тегами p внутри него… например,
<дел>Здравствуйте
это номер один
это номер два
ещё раз привет!
я просто хочу это
Как конкретно настроить второй тег p идентификатора «testing», не затрагивая первый тег p второго идентификатора «testingTwo»?
- html
- css
Вы можете использовать селектор nth-of-type
для выбора второго р
элемент.
Используя #testing
в селекторе, вы выбираете только те элементы, которые находятся внутри элемента #testing
. Таким образом, вам не нужно беспокоиться об элементах p
в другом месте.
#тестирование p:nth-of-type(2) { цвет: зеленый; вес шрифта: полужирный; }
<дел>Здравствуйте
это номер один
это номер два