Что такое pre в html

Довідник HTML тегів 23 сiчня 2020 р. 1259

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
1.0 +	1.0 +	1.0 +	1.0 +	1.0 +	1.0 +	1.0 +

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Опис

Елемент визначає блок попередньо форматованого тексту. Такий текст відображається зазвичай моноширінним шрифтом і з усіма пробілами між словами. За умовчанням, будь-яку кількість прогалин йдуть в коді поспіль, на веб-сторінці показується як один. Тег дозволяє обійти цю особливість і відображати текст як потрібно розробнику. На відміну від тега , використання якого засуджується в HTML 4, всередині контейнера допустимо застосовувати будь-які теги крім наступних: , , , , і .

Тег pre, преформатированный текст

В этой записи мы экспериментируем с ASCII-графикой и пытаемся нарисовать котика. Но ничего не получается, так как отображение кода в HTML-редакторе и в мини-браузере отличаются. Вы можете ставить сколько угодно пробелов в HTML-коде, но браузер всё равно отобразит их как один. То же самое с переносами строк — они не сохраняются при отображении в браузере.

Изменить это поведение можно с помощью тега (сокращение от «preformatted text»), который обозначает «предварительно отформатированный текст». Чаще всего этот тег используется для отображения примеров кода, реже применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега .

Пример преформатированного текста с сохранёнными пробелами и переносами строк

И результат отображения в браузере:

Пример преформатированного текста с сохранёнными пробелами и переносами строк

Мы добавили немного стилей (параметры шрифта и цвет текста), чтобы содержимое смотрелось красивее. Вы можете изучить стили во вкладке style.css .

Перейти к заданию

index.html Сплит-режим
style.css Сплит-режим

Сайт начинающего верстальщика

Блог

День пятый. Отдыхаю

Решил отвлечься. Смотрите, что нарисовал.

/\_/\ ( o.o ) = ^ =

body < padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; >h1 < font-size: 20px; line-height: normal; >nav < color: #888888; >aside < margin: 20px 0; color: #c4c4c4; >pre < line-height: normal; font-family: "Courier New", "Courier", monospace; color: #6a2cce; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить
Задачи Выполнено

Оберните весь текст после первого абзаца в .

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

Наша группа в VK
Наш канал на YouTube
Наша страница в Twitter
Наш канал в Telegram

HTML тег

Содержимое тега отображается в браузере моноширинным шрифтом (шрифт, в котором все знаки имеют одинаковую ширину).

В тег можно вкладывать любые элементы за исключением тегов , , , , и .

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

Синтаксис

Тег

парный, содержимое пишется между открывающим (

) и закрывающим (

) тегами.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> pre>Крошка сын к отцу пришёл, и спросила кроха: — Что такое хорошо и что такое плохо? — pre> body> html>

Результат

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

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> pre> code> body < color:orange; >code> pre> body> html>

Результат

preexample2

Атрибуты

Атрибут	Значение	Описание
width	number	Задает максимальное количество символов в строке. Не поддерживается в HTML5.

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

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

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

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.

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

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

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

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

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

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