Pre html что это
HTML5 IE Cr Op Sa Fx
Тег PRE - ----- ----- |----- ||----| ----|| ||----- -----|| ||-----| |-----|| || ----- ------|| ||- ----| |------|| ||---||-- -------|| ||--|| --| |-------|| || -|| |-- --- - --|| || -|| --|-|--| - ---| |---|| |-----| |-----| |---|| |---- |-----| |----| --- |-----| |----- ------|
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью тега
Pre html что это
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью
Спецификация
| Спецификация | Статус |
|---|---|
| HTML Living Standard | Живой стандарт |
| HTML 4.01 Specification | Заменённая рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 4 | 12 | 1 | 15 | 4 | 1 |
| 4.4 | 4 | 14 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Все что нужно знать о HTML элементе «pre»
Элемент HTML pre является простым способом отображения отформатированного контента (например, исходного кода), но у него есть несколько интересных особенностей. Давайте поговорим о том, как работает этот элемент, о потенциальных проблемах, о которых следует помнить.
Как работает
В HTML документе элемент отображает предварительно отформатированный текст. Это означает, что отступы, сделанные с помощью tab, двойные пробелы, переносы строки и другие типографские символы будут сохранены внутри элемента .
По умолчанию браузеры отображают содержимое элемента , с помощью моноширинных шрифтов, таких как Courier или Monaco. Это обычное дело для вывода кода.
Давайте рассмотрим пример предварительно отформатированного текста.
Если бы вы разместили тот же текст в другом элементе, скажем div то, все ваши двойные пробелы, переносы строки и отступы просто игнорировались бы. Таким образом, даже в вашем коде текст будет выглядеть следующим образом:
Jack: Hello. How are you? Jill: I'm great. Thanks for asking.
В результате мы увидим следующее:
Тот же текстовый блок внутри будет отображён со шрифтом одного размера и со всем вашим дополнительными пробелами и прочими деталями:
Jack: Hello. How are you? Jill: I'm great. Thanks for asking.
Правильная разметка в исходном коде
Элемент должен использоваться для текста, который имеет типографское форматирование. Поскольку это влияет на значение содержимого, например в стихах, транскрипциях и, конечно же, в программном коде.
Если вы хотите отобразить блок исходного кода HTML документа, то используйте элемент , вложенный в элемент . Это позволит поисковым ботам, социальных приложениям, RSS ридерам сразу же понять, что перед ними программный код.
Пример отображения JavaScript кода:
// Logs "Hello World!" // in the browser's developer console console.log("Hello World!");Использование вложенных элементов HTML
Вы можете использовать другие HTML элементы внутри и, тем не менее, они будут отображаться корректно.
Для демонстрации концепции, я разметил некоторые em и strong элементов, а так же изменил цвет текста, используя атрибут style.
var total = 0; // Add 1 to total and display in a paragraph document.write('<p>Sum: ' + (total + 1) + '</p>');
Проблемы
Теперь, когда мы обсудили, как работает элемент , давайте рассмотрим несколько потенциальных проблем, которые могут возникнуть при его использовании.
Выход за пределы элемента
По умолчанию, текст внутри элемента отображается как в источнике, так что, слишком широкие строчки могут выйти за границы родительского контейнера.
Ниже приведён пример макета страницы с выходящим за границы содержанием.
Давайте рассмотрим несколько вариантов решения данной проблемы.
Решение №1: Вывод полосы прокрутки
Одним из способов избежать описанной выше проблемы является отображение полосы прокрутки. Это действенно когда содержание элемента слишком широкое. Можем воспользоваться CSS:
В этом случае пользователю нужно будет прокрутить страницу по горизонтали, чтобы увидеть все содержимое элемента . Однако горизонтальная прокрутка не является идеальным вариантом. К тому же полоса прокрутки не слишком эстетична.
Решение №2: Перенос текста на новую строку
В данном случае, тоже можем воспользоваться CSS, а именно свойство white-space :
Отображение HTML
Существует определённый тип исходного кода, с которым немного сложнее работать внутри элемента , я говорю о HTML. Ранее я уже упоминал о том, что вы можете вложить HTML элементы внутрь элемента . Но что, если мы захотим показать эти теги так, чтобы читатель смог их увидеть в отображаемом коде?
Для отображения HTML тегов в браузере вы, как правило, должны заменить HTML скобки. Допустим, мы захотели показать следующую разметку внутри тегов :
Заменяем символы , и «:
<nav href="/">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav>
К счастью, существует множество инструментов, которые помогут вам сделать это. К примеру, Free Online HTML Escape Tool.
Случайные пробелы
Ещё один нюанс, который нужно учесть, это появление нежелательных пробелов, отступов и переносов строк.
Многие из нас используют отступ в HTML для иллюстрации иерархии элементов. Это может вызвать проблемы. Позвольте мне показать, что я имею в виду.
Если мой HTML документ имеет следующую структурную (отступы для иллюстрации вложенных элементов), то отображение будет следующим:
My tutorial My Tutorial's Title
Here's some example JavaScript:
<script type="text/javascript"> console.log('Hello there'); </script>
Проблема в том, что элемент pre, по праву, рассматривает мои отступы как часть своего содержания. Таким образом, содержание отображается с нежелательными отступами:
Чтобы точно отобразить содержание мне придётся написать его так, чтобы в содержании не было отступов вообще:
My tutorial My Tutorial's Title
Here's some example JavaScript:
<script type="text/javascript"> console.log('Hello there'); </script>
Теперь содержание будет отображаться вот так:
Плагины для подсветки кода
Одно из самых простых улучшений — это подключение плагина подсветки синтаксиса. Это делает код более ярким, понятным, простым для чтения.
Существуют тысячи синтаксических маркеров, а так же множество методов для реализации синтаксиса на веб-странице, такие как плагины JavaScript, классы PHP, Rails gem. За вами остаётся лишь выбор того метода, который лучше всего удовлетворит ваши пожелания.
Также я должен отметить, что подсветка синтаксиса может в значительной мере увеличить время отклика ваших веб-страниц.
В завершение
Итак, мы широко затронули тему элемента — как его использовать, каких вещей стоит опасаться, какие существуют способы улучшения его работы.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/everything-need-know-html-pre-element/
Перевел: Станислав Протасевич
Урок создан: 4 Октября 2014
Просмотров: 45915
Правила перепечатки5 последних уроков рубрики «HTML и DHTML»
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
Pre html что это
Личные атрибуты: нет.
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Модель тега: block (блочный, уровня блока).
Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Открывающий тег: необходим. Закрывающий тег: необходим.
Синтаксис
Пример HTML: применение тега PRE
seodon.ru - Применение тега PRE Функция.
main()Результат. Применение тега PRE.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |