Содержание

| Справочник HTML

Элемент <pre> (от англ. «preformatted» ‒ «предварительно отформатированный») определяет блок в который помещают предварительно отформатированный текст. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность, внутри этого блочного элемента сохраняются все пробелы и переносы строк, установленные автором.

По умолчанию браузеры отображают содержимое элемента <pre> с помощью моноширинных шрифтов, таких как Courier или Monaco. Это обычное дело для вывода программного кода.

Внутри тега <pre> разрешается использовать любые элементы кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>. Также запрещено использовать любые блочные теги, так как в большинстве своем они создают дополнительные поля свободного пространства от окружающего контекста и, соответственно, изменяют расстояния между строк.

Элемент <pre> чаще всего используется в следующих случаях:

  • для печати стихов, в которых взаимное расположение строк задал сам автор;
  • вывод транскрипции в словарях;
  • отображение ASCII рисунков;
  • отображение отформатированного фрагмента программного кода какого-нибудь языка программирования.

Примечание: Если вы хотите отобразить блок исходного кода HTML документа, то используйте элемент <code>, вложенный в элемент <pre>. Это позволит поисковым роботам, социальным приложениям, RSS ридерам сразу же понять, что перед ними программный код.

Совет: Поскольку браузер использует символы < и > как начало и конец тега, применение их внутри тега <pre> может привести к проблемам. Однако вы легко можете вывести ваш HTML-код на экран воспользовавшись

ссылками на символы, с помощью которых можно указать угловые скобки и любые другие спецсимволы.

Синтаксис

<pre>...</pre>

Закрывающий тег

Обязателен.

Атрибуты

widthУстарел в HTML5
Устанавливает максимальное количество символов, отображаемых на одной строке.

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <pre> со следующими значениями CSS по умолчанию:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
}

Различия между HTML 4.01 и HTML5

Атрибут width тега <pre> не поддерживается в HTML5.

Пример использования:

Заранее отформатированный текст:

Пример HTML: Попробуй сам
<p>А.С. Пушкин</p>
<pre>
Буря мглою небо кроет, 
  Вихри снежные крутя; 
    То, как зверь, она завоет, 
      То заплачет, как дитя, 
      То по кровле обветшалой 
    Вдруг соломой зашумит, 
  То, как путник запоздалый, 
К нам в окошко застучит.
</pre>

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

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

Элемент
<pre> 3+ 1+ 4+ 1+ 1+ 1+
Элемент
<pre> 1+ 1+ 6+ 1+

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

Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст

Как сделать акцент на фрагменте текста:
Акцент и курсив

Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста

Учебник HTML

HTML уроки: HTML Форматирование

HTML Элементы


Видео-уроки 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-архиве, так он скачается. Иначе файлы просто открывались бы в браузере.

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Разница между pre (тег html) и white-space:pre пропуском новой строки



Я думал, что pre (html tag) активен так же, как и ‘white-space:pre’. Но это не так.

<pre>
aaa
bbb
</pre>

<p>
aaa
bbb
</p>

<pre> игнорируйте первый и последний \n . Но <p> оставьте первый \n и проигнорируйте последний. Почему?

тест jsfiddle

html css
Поделиться Источник Zachary     24 августа 2012 в 17:22

4 ответа

  • Значение тега <pre> и свойство white-space CSS

    Тег <pre> обычно известен как предварительно отформатированный текст. Существует также свойство white-space CSS, которое обеспечивает pre -подобное поведение для любого тега. Однако на странице его описания в W3Schools и на странице спецификаций CSS3 это поведение описывается какалгоритм…

  • В чем разница между тегами <pre> и <code> HTML?

    Чем тег <pre> HTML отличается от тега <code> html? Я проверил на странице W3Schools, кажется, они точно такие же. Есть ли между ними какая-то существенная разница ?

Поделиться Šime Vidas     24 августа 2012 в 19:12


1

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

Поделиться Phillip Schmidt     24 августа 2012 в 17:29


0

Элемент HTML pre и CSS white-space: pre -это совершенно разные конструкции; путать их-ошибка категории. Но вы, кажется, имеете в виду разницу в рендеринге в отношении разрывов строк.

Согласно спецификациям, разрыв строки, непосредственно следующий за начальным тегом, должен игнорироваться, поэтому

<pre>
aaa
bbb
</pre>

должно быть эквивалентно

<pre>aaa
bbb
</pre>

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

Они просто по-разному относятся к элементам. Мораль заключается в том , что вы должны избегать использования элемента pre , а также white-space: pre, и если вы использовали их, оставайтесь настроенными на эту вариацию. При необходимости не следуйте сразу за тегом start разрывом строки, а пробелом и разрывом строки (Если вы хотите иметь пустую строку в начале).

Поделиться Jukka K. Korpela     24 августа 2012 в 19:13

  • White-space:pre-wrap вызывает дополнительное расстояние

    Я работаю над тем, чтобы сделать части веб-сайта более удобными для мобильных устройств. Вместо того чтобы переделывать исходные страницы, было решено дублировать страницы, нуждающиеся в мобильных версиях, и соответственно перенаправлять их. У меня есть следующая наценка, которая отлично смотрится…

  • white-space:pre-wrap на мобильном устройстве

    Я думал, что white-space:pre-wrap -это довольно хорошо поддерживаемое правило CSS (его даже нет на caniuse), но когда я просматриваю результат на своем телефоне, я вижу одну большую стену текста. Есть ли какая-то альтернатива этому или, может быть, таблица совместимости, на которую я могу…


0

Тег <pre> отображает содержимое с помощью моноширинного шрифта, что означает, что каждый символ имеет одинаковую ширину.

Его легче читать вместо стандартного-шрифта браузера, используемого в <p> .

Поделиться Johannes Mittendorfer     24 августа 2012 в 17:29

Похожие вопросы:


prettify highlightning in a PRE with white-space:nowrap — это одна строка в IE

В Internet Explorer PRE со стилем white-space:nowrap приводит к тому, что код в PRE находится в одной строке, когда я использую prettify ( http:/ / code.google.com/p / google-code-prettify / )….


Тег <pre> в HTML с фиксированной шириной

Я использую тег <pre> для отображения предварительно отформатированного текста (включая разрывы строк,пробелы, табуляции и т. д.) Но большие строки без разрывов строк отображаются в одной…


strip leading и trailing символы новой строки в xslt

У меня есть xml с такой структурой: <xxx> <yyy> some text with spaces inside </yyy> <zzz> another text </zzz> </xxx> Я хочу сгенерировать html, который будет…


Значение тега <pre> и свойство white-space CSS

Тег <pre> обычно известен как предварительно отформатированный текст. Существует также свойство white-space CSS, которое обеспечивает pre -подобное поведение для любого тега. Однако на…


В чем разница между тегами <pre> и <code> HTML?

Чем тег <pre> HTML отличается от тега <code> html? Я проверил на странице W3Schools, кажется, они точно такие же. Есть ли между ними какая-то существенная разница ?


White-space:pre-wrap вызывает дополнительное расстояние

Я работаю над тем, чтобы сделать части веб-сайта более удобными для мобильных устройств. Вместо того чтобы переделывать исходные страницы, было решено дублировать страницы, нуждающиеся в мобильных…


white-space:pre-wrap на мобильном устройстве

Я думал, что white-space:pre-wrap -это довольно хорошо поддерживаемое правило CSS (его даже нет на caniuse), но когда я просматриваю результат на своем телефоне, я вижу одну большую стену текста….


white-space:pre не работает с contenteditable

Я пытаюсь предотвратить перенос слов в contenteditable div. Свойство white-space: pre не работает для contenteditable. Это и есть css: .preDiv{ border:1px solid blue; overflow:auto; width:100px;…


Как обернуть текст в тег pre в HTML?

Я пытаюсь обернуть текст в свой предварительный тег в HTML, и это не работает. Я использую ниже CSS для своего тега. У меня ниже CSS от Как сделать Обтекание текстом в теге? pre { white-space:…


White-space:pre-wrap не выровнен по первой строке

У меня есть следующее html <!DOCTYPE html> <html> <head> <style> p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; white-space: pre-wrap; }…

HTML тег pre | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 03.03.2009

Тег <pre> (англ. preformatted — предварительно отформатированный) — тег-контейнер, определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<pre>...</pre>

Атрибуты

Основные Вспомогательные События

classопределяет имя используемого класса
dirопределяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
idуникальный индетификатор
langопределяет используемый язык в документе, на который указывает ссылка
onclickщелчек на элементе
ondblclickдвойной щелчек на элементе
onkeydownнажатие клавиши, когда элемент имеет фокус
onkeypressнажатие и освобождении клавиши, когда элемент имеет фокус
onkeyupосвобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedownнажатие кнопки мыши, когда элемент имеет фокус
onmousemoveдвижение указателя мыши, когда элемент имеет фокус
onmouseoutсмещение указателя мыши с элемента
onmouseoverпомещение указателя мыши на элемент
onmouseupосвобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
styleзадает встроенную таблицу стилей
titleвсплывающая подсказка
widthжелаемая ширина блока.
Не рекомендуется в спецификации HTML 4.01! Не поддерживается большинством браузеров!
Пример

код:

<pre>
Твой ход:
 x | o | 
-----------
   | х | 
-----------
 o | x | o
</pre>
Рекомендации по использованию
  • закрывающий тег обязателен (</pre>)
  • тег <pre> должен содержать CDATA и строчные элементы кроме тегов <img>, <object>, <big>, <small>, <sub>, <sup>
  • обязательных атрибутов нет
  • не используйте атрибут width. Старые браузеры могут отрабатывать его некорректно
  • большинтсвом браузеров по умолчанию содержимое тега <pre> обычно выводится моноширинным шрифтом. Если нужно просто получить моноширинный шрифт используйте тег <tt>
  • элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
  • аналог CSS — white-space: pre

Твой код:
<html> <head> <title></title> </head> <body> <pre> Твой ход: x | o | ———— | х | ———— o | x | o </pre> </body> </html> Сделай код и жми тут

Результат:
большой полигон

HTML | тег | Портал информатики для гиков

CSS, HTML, Веб-технологии

Тег <pre> в HTML используется для определения блока предварительно отформатированного текста, который сохраняет текстовые пространства, разрывы строк, табуляции и другие символы форматирования, которые игнорируются веб-браузерами. Текст в элементе <pre> отображается шрифтом фиксированной ширины, но его можно изменить с помощью CSS. Для тега <pre> требуется начальный и конечный тег.

Синтаксис:

<pre> Contents... </pre>

Ниже приведены примеры, иллюстрирующие тег <pre> в HTML:

Пример 1:

<html>

    <head>

        <title>pre tag</title>

    </head>

    <body>

        <pre>

            GeeksforGeeks

            A Computer   Science Portal   For Geeks

        </pre>

    </body>

</html>                    

Выход:

Пример 2:

<html>

    <head>

        <title>pre tag with CSS</title>

        <style>

            pre {

                font-family: Arial;

                color: #009900;

                margin: 25px;

            } 

        </style>

    </head>

    <body>

        <pre>

            GeeksforGeeks

            A Computer   Science Portal   For Geeks

        </pre>

    </body>

</html>

Выход:

Поддерживаемые браузеры: браузер, поддерживаемый тегом <pre> atr, перечисленным ниже:

  • Гугл Хром
  • Internet Explorer
  • Fire Fox
  • опера
  • Сафари

Рекомендуемые посты:

HTML | тег <pre>

0.00 (0%) 0 votes

Тег | bookhtml.ru

 

 

 

Тег <pre> — элемент языка html, обозначающий текст, заранее отформатированный. Подразумевается, что текст будет выведен в том виде, в котором был подготовлен автором. Например, учитываются символы конца строки, появившиеся при наборе текста в редакторе. Во всех других случаях браузер игнорирует эти символы.

Возможен и обратный эффект: если пользователь введет текст как одну длинную строку, то она не будет разорвана браузером, а уйдет за край окна программы. В этом смысле элемент <pre> работает так же, как элемент <nobr>. По умолчанию для отформатированного заранее текста выбирается моноширинный шрифт. Этот элемент удобно использовать для показа листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла.

Внутри контейнера <pre> разрешено применение любых тегов за исключением: <big>, <img>, <object>, <small>, <sub> и <sup>.

Пример:

<pre>
                               .-.
                       __   /   \   __
                      (  `'.\   /.'`  )
                       '-._.(;;;)._.-'
                       .-'  ,`"`,  '-.
                      (__.-'/   \'-.__)
                            \   /\
                             '-'  \
                              ,    |
                              |\   |
                              \ |  |
                               | \ /
                                \|/    _,
                                 /  __/ /
                                | _/ _.'
                                |/__/
                                 \

</pre>

Закрывающий тег обязателен.

 

Учим язык HTML.

  • IE

    1.0+

  • Chrome

    1.0+

  • Opera

    1.0+

  • Safari

    1.0+

  • Firefox

    1.0+

  • Android

    1.0+

  • iOS

    1.0+

Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. Внутри контейнера <pre> допустимо применять любые теги кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.

Закрывающий тег обязателен.

<pre>Текст</pre>
Атрибуты

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

Пример
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Тег PRE</title>
</head>
<body>
  <pre>
                         ****                     
                       ********                   
                    ************                  
                   ***************                
                *********************             
 *****        *****************    ***   ******   
  *****      *******************    ************* 
   *****    *********************    ****      ***
    *****   **********************   ***       ***
    ******************************   ****      ***
    ******************************   ****      ***
     *****************************   ****     *** 
      ****************************  ****    ****  
       ***************************  ****  ****    
        *************************  *********      
          *******************************         
              ***********************             
                  ****************                
                  ****************                 
  </pre>
</body>
</html>

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

Категория: Блочные элементы, Форматирование

Статьи по теме
  • Блочные элементы
  • Текст

HTML | Тег — GeeksforGeeks

Тег

 в HTML используется для определения блока  предварительно отформатированного текста , который сохраняет текстовые пробелы, разрывы строк, табуляции и другие символы форматирования, которые игнорируются веб-браузерами. Текст в элементе 
 отображается шрифтом фиксированной ширины, но его можно изменить с помощью CSS. Тег 
 требует начального и конечного тегов. 
 
  Синтаксис:  
 
 
 Содержание ... 
 Примеры ниже иллюстрируют тег
 в HTML: 
 
  Пример 1:  
 
  
  
  <  html  >  
 
    <  голова  >  
 
    <  заголовок  > до тега   заголовок  >  
 
      руководитель  >  
 
    <  корпус  >  
 
    <  до  >  
 
    GeeksforGeeks  
 
 
0 
  Aeks Computer Science Portal 
      до  >  
 
      корпус  >  
 
    html  >  
 		 
  
 
  Выход:  
 
 
 
  Пример 2:  
  900мл 
 900мл >  
    <  head  >  
    <  title  > pre tag с CSS   title  >  
    <  style  >  
    pre { 
    семейство шрифтов: Arial;  
    цвет: # 009900;  
    поле: 25 пикселей;  
   }  
      стиль  >  
      головка  >  
    <  корпус  >  9000 
    <  до  >  
    GeeksforGeeks  
    Портал компьютерных наук для вундеркиндов  
      до  >  
 900   body  >  
 
    html  >  
  
  
               
  
 
  Вывод:  
 
 
  Поддерживаемые браузеры:  Браузеры, поддерживаемые тегом 
, перечислены ниже : 
 
     
  •  Google Chrome 
    •  
  •  In ternet Explorer 
    •  
  •  Firefox 
    •  
  •  Opera 
    •  
  •  Safari 
    •  
 
 html - Как использовать css для изменения размера шрифта 
  html - Как использовать css для изменения размера шрифта 
 - 2 ответа
    
    
        


    
        
             
  Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

        

        

        
        



            






        

            

    

        

            
            
                     

                        Спросил
                          

                    
                     

                        Просмотрено
                        72к раз
                     

            
            

                

    

    
        

        


    
    
                
 
  pre {font-family: cursive; font-style: italic; font-size: xxx-small}
  
 Как изменить размер шрифта  до ?
 Создан 28 мар.
 пользователь 289346
 41711 золотой знак66 серебряных знаков77 бронзовых знаков
 Хотя размер шрифта не может быть изменен для текста непосредственно внутри предварительных тегов, вы всегда можете обернуть этот текст другим элементом (например, диапазоном) и изменить размер шрифта этого элемента.
 Например (это встроенные стили, но при желании их можно добавить в CSS):
  
 
Бла-бла
Несколько строк и никаких br!
Ах, да!