Pre html тег: Тег | HTML справочник – | HTML | WebReference

Leave a Comment / Html / By /

| HTML | WebReference

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

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>PRE</title>
 </head>
 <body>
  <pre>
	 -                -----  
	 -----           |-----
	||----|          ----||  
	||-----         -----||  
	||-----|       |-----||
	|| -----       ------||
	||- ----|     |------||
	||---||--     -------||
	||--|| --|   |-------||
	|| -|| |--   --- - --||
	|| -||  --|-|--| - ---|
	|---||  |-----| |-----|
	|---||   |----  |-----| 
	|----|    ---   |-----|
	|-----          ------| 
 </pre>
</body>
</html>

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

Вид текста, оформленного с помощью pre

Рис. 1. Вид текста, оформленного с помощью <pre>

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

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

Тег <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 тег 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 тег pre | назначение, синтаксис, атрибуты, примеры

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

Тег <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> Сделай код и жми тут

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

По теме

Тег | bookhtml.ru

 

 

 

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

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

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

Пример:

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

</pre>

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

 

Учим язык HTML.

Шаблон:Pre — Википедия

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

Важное замечание: этот шаблон, в отличие от простого тега <pre> (см. Википедия:Как править статьи), позволяет включать в себя разметку, которая будет обрабатываться соответствующим образом, прежде чем поместить результат в теги <pre></pre>.

Также он полезен в обсуждениях: содержимое тега <pre>, помещённое не на первый уровень обсуждения, выйдет из-под области действия текстового поля, начиная со второй строки, а содержимое шаблона (если поместить его в теги <nowiki></nowiki>) — нет.

Пример

РазметкаРезультат
{{pre|
                 и выше
               и выше,
     Всё  выше 
Стремим мы полёт наших птиц,
  И в каждом пропеллере дышит
     Спокойствие 
                 наших 
                       границ.
}} 
                 и выше
               и выше,
     Всё  выше 
Стремим мы полёт наших птиц,
  И в каждом пропеллере дышит
     Спокойствие 
                 наших 
                       границ.

Детали

  • Можно задать параметры |width= и |space=, которые подставятся в качестве значений CSS-свойств width и white-space (настройка ширины поля и режима переноса строк). В параметре |style= можно задать дополнительные настройки стиля.

Ограничения (вытекающие из отличий механизма шаблонов от тегов):

  • Если в тексте используются знаки равенства, поставьте 1= в начало содержимого параметра, используйте <nowiki></nowiki> или замените знаки равенства на {{=}}.
  • Используйте {{!}} вместо вертикальной черты, если вам нужно, чтобы не съедались пробелы до неё. В обратном случае вертикальную черту можно использовать до 19 раз.

См. также

  • {{*pre}} — делает возможным использовать тег <pre> с маркерами списка
  • <syntaxhighlight>
  • {{sp↓}} — отбитая от левого края стрелка вниз, чтобы оформить ею результат обработки того, что показано в шаблоне {{pre}}
  • {{tpre}} — для создания примеров использования шаблонов в их документациях

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *