Pre html: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Тег | htmlbook.ru

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

Описание

Элемент <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

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`pre`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да
`cols` УстаревшаяНестандартная	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Нет поддержки 1 — 29	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Нет поддержки 4 — 29	Opera 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 Полная поддержка 1	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android Полная поддержка 4	Opera 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>

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

| HTML | WebReference
Элемент <pre> (от англ. preformatted text — форматированный текст) определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.
Закрывающий тег
Пример
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>PRE</title> </head> <body> <pre> — —— —— |—— ||—-| —-|| ||—— ——|| ||——| |——|| || —— ——|| ||- —-| |——|| ||—||— ——-|| ||—|| —| |——-|| || -|| |— — — —|| || -|| —|-|—| — —| |—|| |——| |——| |—|| |—- |——| |—-| — |——| |—— ——| </pre> </body> </html>
Результат данного примера показан ниже.
Рис. 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 Викликається, коли користувач щось пише в поле пошуку (для <input type="search">)
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 Скрипт виконується коли змінюється кий в <track> елемента
ondurationchange Викликається коли змінюється довжина медіа файлу.
onemptied Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended Викликається коли медіа елемент повністю відтворив свій зміст.
onshow Викликається, коли елемент <menu> буде відображено як контекстне меню.
onloadedmetadata Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata Викликається коли медіа данні завантажено.
onloadstart Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause Викликається коли відтворення медіа даних призупинено.
onplay Скрипт викликається коли медіа дані готові почати відтворення.
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 Викликається якщо при завантаженні елемента сталася помилка.
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>   <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>  <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_8b90d83e910cfee0f9e3b6c99ddb4869.js"></script></body></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	Викликається, коли користувач щось пише в поле пошуку (для <input type="search">)
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	Скрипт виконується коли змінюється кий в <track> елемента
ondurationchange	Викликається коли змінюється довжина медіа файлу.
onemptied	Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended	Викликається коли медіа елемент повністю відтворив свій зміст.
onshow	Викликається, коли елемент <menu> буде відображено як контекстне меню.
onloadedmetadata	Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata	Викликається коли медіа данні завантажено.
onloadstart	Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause	Викликається коли відтворення медіа даних призупинено.
onplay	Скрипт викликається коли медіа дані готові почати відтворення.
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	Викликається якщо при завантаженні елемента сталася помилка.

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