Содержание

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

Легенда

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

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

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

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

Описание

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

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

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

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

ссылками на символы, с помощью которых можно указать угловые скобки и любые другие спецсимволы.

Атрибуты

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

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


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

Пример


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

</pre>

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

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

| HTML | WebReference

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

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

Пример

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

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

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

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

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

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

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

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

Браузеры

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

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

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

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

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

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

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

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

| Справочник HTML



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

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

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

Элемент <pre> чаще всего используется в следующих случаях:

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

Примечание: Если вы хотите отобразить блок исходного кода HTML документа, то используйте элемент <code>, вложенный в элемент <pre>. Это позволит поисковым роботам, социальным приложениям, RSS ридерам сразу же понять, что перед ними программный код.

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

Синтаксис

<pre>...</pre>

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

Обязателен.

Атрибуты

widthУстарел в HTML5
Устанавливает максимальное количество символов, отображаемых на одной строке.

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <pre> со следующими значениями CSS по умолчанию:

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

Различия между HTML 4.01 и HTML5

Атрибут width тега <pre> не поддерживается в HTML5.

Пример использования:

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

Пример HTML:

Попробуй сам
<p>А.С. Пушкин</p>
<pre>
Буря мглою небо кроет, 
  Вихри снежные крутя; 
    То, как зверь, она завоет, 
      То заплачет, как дитя, 
      То по кровле обветшалой 
    Вдруг соломой зашумит, 
  То, как путник запоздалый, 
К нам в окошко застучит.
</pre>

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

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

Элемент
<pre> 3+ 1+ 4+ 1+ 1+ 1+
Элемент
<pre> 1+ 1+ 6+ 1+

Попробуйте сами — Примеры

Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст

Как сделать акцент на фрагменте текста:
Акцент и курсив

Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста


Учебник HTML

HTML уроки: HTML Форматирование

HTML Элементы



HTML тег

onafterprint Скрипт виконується тільки після як документ надрукований.
onbeforeprint Скрипт виконується перед тим, як документ надрукований.
onbeforeunload Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload Викликається після того як завантаження елемента завершене.
onmessage Скрипт виконується коли викликане повідомлення.
onoffline Спрацьовує коли браузер починає працювати в автономному режимі
ononline Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow Скрипт виконується коли користувач заходить на сторінку.
onpopstate Скрипт виконується коли змінено історію одного вікна.
onresize Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage Скрипт виконується, коли вміст Web Storage оновлюється.
onunload Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur Скрипт виконується, коли елемент втрачає фокус.
onchange Викликається в той момент, коли значення елемента змінюється.
oncontextmenu Скрипт виконується коли викликається контекстне меню.
onfocus Викликається в той момент, коли елемент отримує фокус.
oninput Скрипт викликається коли користувач вводить дані поле.
oninvalid Скрипт виконується, коли елемент недійсний.
onreset Викликається, коли натискається у формі кнопка типу Reset.
onsearch Викликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselect Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit Викликається при відправленні форми.
onkeydown Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress Викликається коли корисрувач натиснув на клавішу.
onkeyup Викликається коли користувач відпускає клавішу.
onclick Подія викликається коли користувач клацає ЛКМ по елементу.
ondblclick Виникає при подвійному клацанні ЛКМ на елементі.
ondrag Періодично викликається при операції перетягування.
ondragend Викликається коли користувач відпускає перелягуваний елемент.
ondragenter Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove Викликається, коли курсор миші переміщається над елементом.
onmouseout Викликається, коли курсор виходить за межі елемента.
onmouseover Виконується, коли курсор наводиться на елемент.
onmouseup Викликається, коли користувач відпускає кнопку миші.
onscroll Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel Викликається, коли користувач прокручує коліщатко миші.
oncopy Викликається, коли користувач копіює вміст елемента.
oncut Викликається, коли користувач вирізає вміст елемента.
onpaste Викликається, коли користувач вставляє вміст в елемент.
onabort Виконується при перериванні якоїсь події.
oncanplay Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange Скрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchange Викликається коли змінюється довжина медіа файлу.
onemptied Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended Викликається коли медіа елемент повністю відтворив свій зміст.
onshow Викликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadata Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata Викликається коли медіа данні завантажено.
onloadstart Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause Викликається коли відтворення медіа даних призупинено.
onplay Скрипт викликається коли медіа дані готові почати відтворення.
onplaying Викликається коли розпочато відтворення медіа даних.
onprogress Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange Викликається коли змінюється швидкість відтворення медіа даних.
onseeked Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate Викликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
onvolumechange Викликається коли змінюється гучність звуку.
onwaiting Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle Викликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
onerror Викликається якщо при завантаженні елемента сталася помилка.

HTML pre tag


Пример

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

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

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

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


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

Тег

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

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

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

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

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

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

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


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

Тег

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


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

Тег

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


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

Пример

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


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

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

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

Учебник по HTML

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

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


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

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

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

Пример

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

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

HTML: тег

HTML5 Document

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

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

  


<Голова>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</ html> </code> </pre>
   <p> В этом примере документа XHTML 1.1 мы создали тег <pre>.Браузер будет отображать лишние пробелы между «Текст идет сюда» и «Сохранение пробелов». Кроме того, разрыв строки после «сохранения пробелов» также будет отображаться браузером без использования тега <br>. </p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<h2><span class="ez-toc-section" id="HTML_5_Tag"> HTML 5 Tag </span></h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>





 <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><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
    
    
        

    
        
                
                
                    
                
                    
                        Переполнение стека
                    



        

             <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/shablon-2/shablon-emejl-rassylki-html-shablony-pisem-besplatnye-adaptivnye-email-shablony-stripo-email.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Шаблон емейл рассылки: HTML-шаблоны писем. Бесплатные адаптивные email-шаблоны — Stripo.email</span></a></li>
		<li class="previous"><a href="https://ylianova.ru/sajt-2/url-sajta-kak-uznat-url-adres-sajta-reg-ru.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Url сайта: Как узнать URL-адрес сайта | REG.RU</span></a></li>
	</ul>
	
		
	    <div class="wpdiscuz_top_clearing"></div>
    <div id="comments" class="comments-area"><div id="respond" style="width: 0;height: 0;clear: both;margin: 0;padding: 0;"></div>            <h3 id="wc-comment-header">
                                Отправить ответ            </h3>
                    <div id="wpcomm" class="wpdiscuz_unauth wpd-default">
            <div class="wpdiscuz-form-top-bar">
                <div class="wpdiscuz-ftb-left">
                                                            <div id="wc_show_hide_loggedin_username">
                                            </div>
                </div>
                                <div class="wpd-clear"></div>
            </div>


                        <div class="wc_social_plugin_wrapper">
                            </div>
                    <div class="wc-form-wrapper wc-main-form-wrapper"  id='wc-main-form-wrapper-0_0' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                                        <form class="wc_comm_form wc_main_comm_form" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo avatar-default' height='40' width='40' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-0_0"   placeholder="Начать обсуждение..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f807e2e174ba"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f807e2e174ba" class="wpdiscuz-cnonce" name="cnonce" value="c5f807e2e174ba" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-0_0" class="wc_notification_new_comment-0_0 wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="0_0" name="wpdiscuz_unique_id">
                </form>
                        </div>
                <div id = "wpdiscuz_hidden_secondary_form" style = "display: none;">
                    <div class="wc-form-wrapper wc-secondary-form-wrapper"  id='wc-secondary-form-wrapper-wpdiscuzuniqueid'  style='display: none;' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                            <div class="wc-secondary-forms-social-content"></div><div class="clearfix"></div>
                                        <form class="wc_comm_form wc-secondary-form-wrapper" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=48&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=96&d=mm&r=g 2x' class='avatar avatar-48 photo avatar-default' height='48' width='48' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-wpdiscuzuniqueid"   placeholder="Присоединиться к обсуждению..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f807e2e17dd5"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f807e2e17dd5" class="wpdiscuz-cnonce" name="cnonce" value="c5f807e2e17dd5" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-wpdiscuzuniqueid" class="wc_notification_new_comment-wpdiscuzuniqueid wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="wpdiscuzuniqueid" name="wpdiscuz_unique_id">
                </form>
                        </div>
                </div>
                                           

                                    <div class="wpdiscuz-front-actions">
                                                    <div class="wpdiscuz-sbs-wrap">
                                <span><i class="far fa-envelope" aria-hidden="true"></i>  Подписаться  <i class="fas fa-caret-down" aria-hidden="true"></i></span>
                            </div>
                                                                        <div class="clearfix"></div>
                    </div>
                                                    <div class="wpdiscuz-subscribe-bar wpdiscuz-hidden">
                                                    <form action="https://ylianova.ru/wp-admin/admin-ajax.php?action=addSubscription" method="post" id="wpdiscuz-subscribe-form">
                                <div class="wpdiscuz-subscribe-form-intro">Уведомление о </div>
                                <div class="wpdiscuz-subscribe-form-option" style="width:40%;">
                                    <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType" >
                                                                                    <option value="post">новые последующие комментарии</option>
                                                                                                                            <option value="all_comment" >новые ответы на мои комментарии</option>
                                                                            </select>
                                </div>
                                                                    <div class="wpdiscuz-item wpdiscuz-subscribe-form-email">
                                        <input  class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"/>
                                    </div>
                                                                <div class="wpdiscuz-subscribe-form-button">
                                    <input id="wpdiscuz_subscription_button" type="submit" value="›" name="wpdiscuz_subscription_button" />
                                </div> 
                                                                <input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="1c06bf69d1" /><input type="hidden" name="_wp_http_referer" value="/html/pre-html-teg-htmlbook-ru.html" />                                                                <input type="hidden" value="5660" name="wpdiscuzSubscriptionPostId" />
                            </form>
                                                <div class="wpdiscuz_clear"></div>
                                            </div>
                    
                                <div id="wcThreadWrapper" class="wc-thread-wrapper">
                                    
                    <div class="wpdiscuz-comment-pagination">
                                            </div>
                </div>
                <div class="wpdiscuz_clear"></div>
                                            </div>
        </div>
        <div id="wpdiscuz-loading-bar" class="wpdiscuz-loading-bar wpdiscuz-loading-bar-unauth"></div>
        	
	</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-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-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>Блог сумасшедшего сисадмина © 2020. Все права защищены.</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>
	<a id='wpdUserContentInfoAnchor' style='display:none;' rel='#wpdUserContentInfo' data-wpd-lity>wpDiscuz</a><div id='wpdUserContentInfo' style='overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px;' class='lity-hide'></div><link rel='stylesheet' id='yarppRelatedCss-css'  href='https://ylianova.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.5.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=5.5.1' type='text/css' media='all' />
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/jquery/jquery.form.min.js?ver=4.2.1' id='jquery-form-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.jplayer.min.js?ver=5.5.1' id='jplayer-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/scripts.js?ver=5.5.1' id='scripts-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.sharrre.min.js?ver=5.5.1' id='sharrre-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/comment-reply.min.js?ver=5.5.1' id='comment-reply-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/wp-embed.min.js?ver=5.5.1' id='wp-embed-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>