Тег | 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. 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
Полная поддержка
Да
| Edge
Полная поддержка
12
| Firefox
Полная поддержка
1
| IE
Полная поддержка
Да
| Opera
Полная поддержка
Да
| Safari
Полная поддержка
Да
| WebView Android
Полная поддержка
Да
| Chrome Android
Полная поддержка
Да
| Firefox Android
Полная поддержка
4
| Opera Android
Полная поддержка
Да
| Safari iOS
Полная поддержка
Да
| Samsung Internet Android
Полная поддержка
|
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 Элементы
| 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><!--/.entry--> </div><!--/.post-content--> <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><!--/.post-sharrre--> <script type="text/javascript"> // Sharrre jQuery(document).ready(function(){ jQuery('#twitter').sharrre({ share: { twitter: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-twitter"></i></div></a>', enableHover: false, enableTracking: true, buttons: { twitter: {via: ''}}, click: function(api, options){ api.simulateClick(); api.openPopup('twitter'); } }); jQuery('#facebook').sharrre({ share: { facebook: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-facebook-square"></i></div></a>', enableHover: false, enableTracking: true, click: function(api, options){ api.simulateClick(); api.openPopup('facebook'); } }); jQuery('#googleplus').sharrre({ share: { googlePlus: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-google-plus-square"></i></div></a>', enableHover: false, enableTracking: true, urlCurl: 'https://ylianova.ru/wp-content/themes/anew/js/sharrre.php', click: function(api, options){ api.simulateClick(); api.openPopup('googlePlus'); } }); jQuery('#pinterest').sharrre({ share: { pinterest: true }, template: '<a class="box group" href="#" rel="nofollow"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-pinterest"></i></div></a>', enableHover: false, enableTracking: true, buttons: { pinterest: { description: 'Pre html: Тег | htmlbook.ru' } }, click: function(api, options){ api.simulateClick(); api.openPopup('pinterest'); } }); }); </script> </div><!--/.post-inner--> </article><!--/.post--> <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"> <!-- comments open, no comments --> <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><!-- #respond --> </section><!--/#comments--> </div><!--/.pad--> </section><!--/.content--> <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-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 id="custom_html-21" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});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></div></div> </div><!--/.sidebar-content--> </div><!--/.sidebar--> </div><!--/.main--> </div><!--/.container-inner--> <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>Блог сумасшедшего сисадмина © 2023. Все права защищены.</p> </div><!--/#copyright--> <div id="credit"> <p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a> </p> </div><!--/#credit--> </div> <div class="grid one-half last"> </div> </div><!--/.pad--> </div><!--/.container--> </section><!--/#footer-bottom--> </footer><!--/#footer--> </div><!--/#wrapper--> <style type="text/css"> .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://ylianova.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=6.1.1' type='text/css' media='all' /> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://ylianova.ru/wp-content/plugins/pagination/css/nav-style.css?ver=6.1.1' type='text/css' media='all' /> <script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.jplayer.min.js?ver=6.1.1' id='jplayer-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/scripts.js?ver=6.1.1' id='scripts-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.sharrre.min.js?ver=6.1.1' id='sharrre-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-includes/js/comment-reply.min.js?ver=6.1.1' id='comment-reply-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> </body> </html>