Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<pre>Текст</pre>

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

Обязателен.

Атрибуты

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

Пример

HTML5IECrOpSaFx

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

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

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

: Предварительно отформатированный текстовый элемент — Веб-технологии для разработчиков

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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.

Атрибуты

Этот элемент включает в себя только глобальные атрибуты.

cols
Содержит предпочтительное количество символов, которое должна иметь строка. Это был нестандартный синоним
width
. Чтобы добиться такого эффекта, используйте CSS width.
width
Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS width.
wrap
Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS white-space
.

Пример

HTML

<p>Использовать CSS для изменения цвета шрифта легко.</p>
<pre>
body {
  color: red;
}
</pre> 

Результат

Проблемы доступности

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

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

Комбинация элементов <figure> и <figcaption>, дополненная id и ARIA role и aria-labelledby, позволяет объявить предварительно отформатированный текст как изображение, а figcaption служит альтернативным описанием изображения.

Пример

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  ____________________________
<  Я эксперт в своей области.  >
  ----------------------------
         \   ^__^ 
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption>
     Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов. 
  </figcaption>
</figure>

Характеристики

Совместимость браузера

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
preChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
cols УстаревшаяНестандартнаяChrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 1 — 29IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки 4 — 29Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
width УстаревшаяНестандартнаяChrome Полная поддержка Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
Edge Полная поддержка 12
Полная поддержка 12
Замечания Specifying the width attribute has no layout effect.
Firefox Полная поддержка 1
Полная поддержка 1
Замечания Since Firefox 29, specifying the width attribute has no layout effect.
IE Полная поддержка Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
Opera Полная поддержка Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
Safari Полная поддержка Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
WebView Android Полная поддержка Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
Chrome Android Полная поддержка Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
Firefox Android Полная поддержка 4
Полная поддержка 4
Замечания Since Firefox 29, specifying the width attribute has no layout effect.
Opera Android Полная поддержка Да
Полная поддержка
Да
Замечания Specifying the width attribute has no layout effect.
Safari iOS Полная поддержка Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
Samsung Internet Android Полная поддержка
Да
Полная поддержка Да
Замечания Specifying the width attribute has no layout effect.
wrap УстаревшаяНестандартнаяChrome ? Edge
?
Firefox Полная поддержка 1IE ? Opera ? Safari ? WebView Android ? Chrome Android
?
Firefox Android Полная поддержка 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.

Смотреть также

Тег | HTML справочник

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

Описание

HTML тег <pre> определяет блок в который помещают предварительно отформатированный текст. Браузер отображает содержимое тега именно так, как вы его напечатали, включая все пробельные символы. Обычно при выводе на экран отформатированного текста используется моноширинный шрифт. Внутри тега <pre> допустимо использовать другие элементы для форматирования текста, например: <code>, <b>, <i> и др.

Вот некоторые примеры случаев, когда элемент <pre> может быть использован:

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

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

Атрибуты

Тег <pre> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


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

Пример


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

</pre>

Результат данного примера в окне браузера:

Пример использования тега <pre>

| 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

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

Как научиться разрабатывать сайты

| Справочник 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 тег

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Викликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselectВикликаєтсья після того як будь-який текст був обраний в елементі.
onsubmitВикликається при відправленні форми.
onkeydownПодія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypressВикликається коли корисрувач натиснув на клавішу.
onkeyupВикликається коли користувач відпускає клавішу.
onclickПодія викликається коли користувач клацає ЛКМ по елементу.
ondblclickВиникає при подвійному клацанні ЛКМ на елементі.
ondragПеріодично викликається при операції перетягування.
ondragendВикликається коли користувач відпускає перелягуваний елемент.
ondragenterВикликається, коли перетягуваний елемент входить в цільову зону.
ondragleaveВикликається, коли перетягуваний елемент виходть з зони призначення.
ondragoverВикликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstartВикликається, коли користувач починає перетягувати елемент, або виділений текст.
ondropВикликається, коли перетягуваний елемент падає до зони призначення.
onmousedownВикликається, коли користувач затискає ЛКМ на елементі.
onmousemoveВикликається, коли курсор миші переміщається над елементом.
onmouseoutВикликається, коли курсор виходить за межі елемента.
onmouseoverВиконується, коли курсор наводиться на елемент.
onmouseupВикликається, коли користувач відпускає кнопку миші.
onscrollВикликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheelВикликається, коли користувач прокручує коліщатко миші.
oncopyВикликається, коли користувач копіює вміст елемента.
oncutВикликається, коли користувач вирізає вміст елемента.
onpasteВикликається, коли користувач вставляє вміст в елемент.
onabortВиконується при перериванні якоїсь події.
oncanplayСкрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythroughСкрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechangeСкрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchangeВикликається коли змінюється довжина медіа файлу.
onemptiedВикликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onendedВикликається коли медіа елемент повністю відтворив свій зміст.
onshowВикликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadataСкрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddataВикликається коли медіа данні завантажено.
onloadstartВикликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpauseВикликається коли відтворення медіа даних призупинено.
onplayСкрипт викликається коли медіа дані готові почати відтворення.
onplayingВикликається коли розпочато відтворення медіа даних.
onprogressПодія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechangeВикликається коли змінюється швидкість відтворення медіа даних.
onseekedВикликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseekingВикликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalledСкрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspendСкрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdateВикликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
onvolumechangeВикликається коли змінюється гучність звуку.
onwaitingВикликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggleВикликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
onerrorВикликається якщо при завантаженні елемента сталася помилка.

HTML pre tag


Пример

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

 
Текст в предварительном элементе
отображается с фиксированной шириной
шрифт, и он сохраняет
обе пробелы и
разрывы строк

Попробуй сам "

Ниже приведены примеры "Попробуйте сами".


Определение и использование

Тег

   определяет предварительно отформатированный текст.

Текст в элементе

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

Также посмотрите на:

тег Описание
Определяет кусок компьютерного кода
<образец> Определяет пример вывода из компьютерной программы
<кбд> Определяет ввод с клавиатуры
Определяет переменную

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

Элемент
 
да да да да да


Глобальные атрибуты

Тег

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


Атрибуты события

Тег

   также поддерживает атрибуты событий в HTML. 


Дополнительные примеры

Пример

Как создать предварительно отформатированный текст с фиксированной шириной (с помощью CSS):


 Это pre с фиксированным
    ширина. Он будет использовать столько места, сколько указано.  

Попробуй сам "

Связанные страницы

Учебник по HTML

: форматирование текста HTML

HTML DOM ссылка: Предварительный объект


Настройки CSS по умолчанию

Большинство браузеров отображают элемент

  со следующими значениями по умолчанию: 

Пример

пред {
дисплей: блок; Семейство шрифтов
: моноширинный;
пустое пространство: предварительно; Маржа
: 1em 0;
}

Попробуй сам " ,

HTML: тег

HTML5 Document

Если вы создали новую веб-страницу в HTML5, ваш тег

 может выглядеть следующим образом: 

  


<Голова>

 Пример HTML5 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<pre> Текст идет сюда, сохраняя пробелы
и сохранение разрывов строк </ pre>
</ Body>

</ html> </code> </pre><p> В этом примере документа HTML5 мы создали тег<pre>.Браузер будет отображать лишние пробелы между «Текст идет сюда» и «Сохранение пробелов». Кроме того, разрыв строки после «сохранения пробелов» также будет отображаться браузером без использования тега <br>. </p>

    <h4><span class="ez-toc-section" id="HTML_401"> HTML 4.01 Переходный документ </span></h4> 
   <p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <pre> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http: // www.w3.org/TR/html4/loose.dtd ">
<HTML>

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8">
<title> HTML 4.01 Переходный пример от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<pre> Текст идет сюда, сохраняя пробелы
и сохранение разрывов строк </ pre>
</ Body>

</ html> </code> </pre><p> В этом примере переходного документа HTML 4.01 мы создали тег<pre>. Браузер будет отображать лишние пробелы между «Текст идет сюда» и «Сохранение пробелов».Кроме того, разрыв строки после «сохранения пробелов» также будет отображаться браузером без использования тега <br>. </p>

    <h4><span class="ez-toc-section" id="XHTML_10"> XHTML 1.0 Переходный документ </span></h4> 
   <p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег <pre> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> XHMTL 1.0 Переходный пример от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<pre> Текст идет сюда, сохраняя пробелы
и сохранение разрывов строк </ pre>
</ Body>

</ html> </code> </pre><p> В этом примере переходного документа XHTML 1.0 мы создали тег<pre>. Браузер будет отображать лишние пробелы между «Текст идет сюда» и «Сохранение пробелов». Кроме того, разрыв строки после «сохранения пробелов» также будет отображаться браузером без использования тега <br>.</p>
    <h4><span class="ez-toc-section" id="XHTML_10-2"> XHTML 1.0 Строгий документ </span></h4> 
   <p> Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег <pre> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Строгий пример XHTML 1.0 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<pre> Текст идет сюда, сохраняя пробелы
и сохранение разрывов строк </ pre>
</ Body>

</ html> </code> </pre><p> В этом XHTML 1.0 Пример строгого документа, мы создали тег<pre>. Браузер будет отображать лишние пробелы между «Текст идет сюда» и «Сохранение пробелов». Кроме того, разрыв строки после «сохранения пробелов» также будет отображаться браузером без использования тега <br>. </p>
    <h4><span class="ez-toc-section" id="XHTML_11"> XHTML 1.1 Документ </span></h4> 
   <p> Если вы создали новую веб-страницу в XHTML 1.1, ваш тег <pre> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN "" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Пример XHTML 1.1 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<pre> Текст идет сюда, сохраняя пробелы
и сохранение разрывов строк </ pre>
</ Body>

</ html> </code> </pre><p> В этом примере документа XHTML 1.1 мы создали тег <pre>.Браузер будет отображать лишние пробелы между «Текст идет сюда» и «Сохранение пробелов». Кроме того, разрыв строки после «сохранения пробелов» также будет отображаться браузером без использования тега <br>.</p> ,<h2><span class="ez-toc-section" id="HTML_5_Tag"> HTML 5 Tag </span></h2><p> Тег HTML <code> <pre> </code> используется для обозначения предварительно отформатированного текста. Тег <code> <pre> </code> окружает код, помеченный как предварительно отформатированный.</p> Браузеры<p> обычно отображают текст <code> <pre> </code> с фиксированным шрифтом, с пробелами в такте и без переноса слов.</p><h3><span class="ez-toc-section" id="i-42"> Демо </span></h3><h3><span class="ez-toc-section" id="i-43"> атрибутов </span></h3><p> HTML-теги могут содержать один или несколько атрибутов.Атрибуты добавляются в тег, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), а значение заключено в двойные кавычки. Вот пример, <code> style = "color: black;" </code></p><p> Существует три вида атрибутов, которые вы можете добавить к своим HTML-тегам: атрибуты содержимого, относящиеся к элементам, глобальные и обработчики событий.</p><p> Атрибуты, которые вы можете добавить к этому тегу, перечислены ниже.</p><h4><span class="ez-toc-section" id="i-44"> Элемент-специфичные атрибуты </span></h4><p> В следующей таблице приведены атрибуты, характерные для этого тега / элемента.</p><table cellspacing="0" border="0"><tr><th> Атрибут</th><th> Описание</th></tr><tr><td> нет</td><td></td></tr></table><h4><span class="ez-toc-section" id="i-45"> глобальных атрибута </span></h4><p> Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут <code> tabindex </code> не применяется к элементам </code> диалога <code>).</p><ul><li> <code> accesskey </code></li><li> <code> автокапитализировать </code></li><li> <code> класс </code></li><li> <code> contenteditable </code></li><li> <code> data- * </code></li><li> <code> dir </code></li><li> <code> перетаскиваемый </code></li><li> <code> скрыто </code></li><li> <code> id </code></li><li> <code> режим ввода </code></li><li> <code> является </code></li><li> <code> Itemid </code></li><li> <code> itemprop </code></li><li> <code> itemref </code></li><li> <code> itemscope </code></li><li> <code> тип объекта </code></li><li> <code> lang </code></li><li> <code> часть </code></li><li> <code> слот </code></li><li> <code> проверка орфографии </code></li><li> <code> стиль </code></li><li> <code> tabindex </code></li><li> <code> название </code></li><li> <code> перевод </code></li></ul><p> Полное объяснение этих атрибутов см. В разделе Глобальные атрибуты HTML 5.</p><h4><span class="ez-toc-section" id="i-46"> Атрибуты содержимого обработчика событий </span></h4><p> Атрибуты содержимого обработчика событий позволяют вам вызывать скрипт из вашего HTML. Сценарий вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с различным событием.</p><ul><li> <code> онаборт </code></li><li> <code> onauxclick </code></li><li> <code> onblur </code></li><li> <code> oncancel </code></li><li> <code> oncanplay </code></li><li> <code> на сайте </code></li><li> <code> onchange </code></li><li> <code> onclick </code></li><li> <code> onclose </code></li><li> <code> oncontextmenu </code></li><li> <code> онкопия </code></li><li> <code> oncuechange </code></li><li> <code> oncut </code></li><li> <code> ondblclick </code></li><li> <code> ondrag </code></li><li> <code> ondragend </code></li><li> <code> ondragenter </code></li><li> <code> ondragexit </code></li><li> <code> ondragleave </code></li><li> <code> ondragover </code></li><li> <code> ondragstart </code></li><li> <code> ondrop </code></li><li> <code> ondurationchange </code></li><li> <code> пустые </code></li><li> <code> onended </code></li><li> <code> ошибка </code></li><li> <code> onfocus </code></li><li> <code> onformdata </code></li><li> <code> на входе </code></li><li> <code> oninvalid </code></li><li> <code> onkeydown </code></li><li> <code> onkeypress </code></li><li> <code> onkeyup </code></li><li> <code> onlanguagechange </code></li><li> <code>, нагрузка </code></li><li> <code> загруженных данных </code></li><li> <code> загруженных метаданных </code></li><li> <code> onloadstart </code></li><li> <code> onmousedown </code></li><li> <code> onmouseenter </code></li><li> <code> onmouseleave </code></li><li> <code> onmousemove </code></li><li> <code> onmouseout </code></li><li> <code> onmouseover </code></li><li> <code> onmouseup </code></li><li> <code> паста </code></li><li> <code> onpause </code></li><li> <code> onplay </code></li><li> <code> на игровом поле </code></li><li> <code> onprogress </code></li><li> <code> onratechange </code></li><li> <code> на </code></li><li> <code> onresize </code></li><li> <code> onscroll </code></li><li> <code> onsecuritypolicyviolation </code></li><li> <code> в поисках </code></li><li> <code> в поисках </code></li><li> <code> onselect </code></li><li> <code> onslotchange </code></li><li> <code> установлено </code></li><li> <code> отправить </code></li><li> <code> onsuspend </code></li><li> <code> ontimeupdate </code></li><li> <code> пуговица </code></li><li> <code> onvolumechange </code></li><li> <code> в ожидании </code></li><li> <code> на колесе </code></li></ul><p> Полный список обработчиков событий см. В разделе Атрибуты содержимого обработчика событий HTML 5.</p> ,<h2><span class="ez-toc-section" id="html4_-_HTML_HTML"> html4 - В чем разница между тегом HTML и HTML? </span></h2> Переполнение стека<ol role="presentation"><li> Товары</li><li> Клиенты</li><li> Случаи использования</li></ol><ol><li> Переполнение стека
 Публичные вопросы и ответы</li><li> Команды
 Частные вопросы и ответы для вашей команды</li><li> предприятие
 Частные вопросы и ответы для вашего предприятия</li><li> работы
 Программирование и связанные с ним технические возможности карьерного роста</li><li> Талант
 Нанимать технический талант</li><li> реклама
 Связаться с разработчиками по всему миру</li></ol><p> Загрузка…</p><ol/><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/pre-html-teg-htmlbook-ru.html" data-text="Pre html: Тег  | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/pre-html-teg-htmlbook-ru.html" data-text="Pre html: Тег  | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/pre-html-teg-htmlbook-ru.html" data-text="Pre html: Тег  | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/pre-html-teg-htmlbook-ru.html" data-text="Pre html: Тег  | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/javascript/javascript-matematicheskie-funkczii-math-abs-javascript-mdn.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Javascript математические функции: Math.abs() — JavaScript | MDN</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/kak-zamazat-fon-v-fotoshope-kak-razmyt-fon-v-fotoshope.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Как замазать фон в фотошопе: Как размыть фон в Фотошопе</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/pre-html-teg-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='5660' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_8b90d83e910cfee0f9e3b6c99ddb4869.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="351f1c1f32b70b0ac812aadf-|49" defer></script>