HTML атрибуты. Как использовать data-атрибуты HTML5 Глобальные атрибуты html

Задает направление и отображение текста - слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.

draggable

Позволяет перетаскивать элемент для дальнейшего манипулирования с ним.

dropzone

Указывает, что делать с перетаскиваемым элементом.

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

Задаёт идентификатор - уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

itemid, itemprop, itemref, itemscope, itemtype

Группа атрибутов, предназначенная для работы с микроданными.

Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang . Браузер использует его значение для правильного отображения некоторых символов.

Указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм ( , ), а также редактируемых элементов (у них установлен атрибут contenteditable ).</p> <h3></h3> <p>Применяется для определения стиля элемента с помощью правил CSS.</p> <h3></h3> <p>Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab . Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде.</p> <h3></h3> <p>Создаёт всплывающую текстовую подсказку, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек <a href="/os/chto-takoe-windows-phone-luchshie-smartfony-na-windows-mobile-operacionnaya-sistema-vindovs/">операционной системы</a> и не может быть изменен с помощью HTML-кода или стилей.</p> <p><i><b>От автора: </b> несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице Facebook’а – в вебе применение онлайн-форм является одной из самых обычных задач. Для дизайнеров и разработчиков создание форм отличается некоторым однообразием, особенно написание для них скриптов валидации данных. HTML5 представляет множество новых атрибутов, типов input и прочих элементов инструментария разметки. </i></p> <p>В этой статье мы сосредоточимся на изучении новых атрибутов, а в следующей рассмотрим типы ввода данных.</p> <p>Станет видно, что новые свойства значительно облегчат нам жизнь при произведении впечатления на пользователей. Что тут самое привлекательное? Применять их можно уже сейчас. Мы начнем с очень краткой истории форм HTML5.</p> <p>Эта статья – отрывок из Главы 6 книги Начинаем изучать HTML5 и CSS3: Эволюция Сети (Beginning HTML5 and CSS3: The Web Evolved) Кристофера Мерфи, Оли Стадхольма, Ричарда Кларка и Дивья Маньяна (Christopher Murphy, Oli Studholme, Richard Clark и Divya Manian), опубликованной издательством Apress.</p> <p>Примечание: Так как эта статья является отрывком из книги, с момента создания скриншотов выполнение браузером атрибутов и типов ввода данных могло измениться. К тому же с момента публикации могла расшириться браузерная поддержка, поэтому по вопросу ее текущего состояния, пожалуйста, обратитесь к приведенным в конце статьи ссылкам.</p> <h3>История форм HTML5</h3> <p>Раздел форм в HTML5 изначально был спецификацией под названием Web Forms 2.0 , где добавлялись новые типы инструментов управления формами. Начатая в Opera и редактировавшаяся тогдашним сотрудником Opera Айэном Хиксоном (Ian Hickson), она была утверждена W3C в начале 2005г . Работа изначально проводилась W3C. Затем ее объединили со спецификацией Web Applications 1.0 с целью создания основы спецификации HTML5 отколовшейся рабочей группы Web Hypertext Application Technology Working Group (WHATWG).</p> <h3>Применение принципов дизайна HTML5</h3> <p>Одна из лучших характеристик форм HTML5 – то, что сразу же можно применять почти все новые типы ввода данных и атрибуты. Им не требуются никаких дополнительных фишек, хаков и прочих заплаток. Не то, чтобы они все уже «поддерживались», но в современных браузерах, которые по-настоящему их поддерживают, они способны проделывать классные вещи – и красиво деградировать в тех браузерах, которые их не понимают. Все это – благодаря дизайнерским принципам HTML5 . В <a href="/printers/kak-sdelat-ekvivalent-lampy-podsvetki-televizora-remont-led/">данном случае</a> мы особо ссылаемся на принцип красивой деградации. В целом, непростительно не начать сразу применять эти функции. Фактически это будет значить, что вы находитесь впереди планеты всей.</p> <h3>Атрибуты форм HTML5</h3> <p>В этой статье мы рассмотрим 14 следующих новых атрибутов.</p> <h3>placeholder</h3> <p>Первым идет атрибут placeholder, который позволяет нам установить текст-заполнитель, что до последнего времени делалось в HTML4 с помощью атрибута value. Его можно применять только для коротких описаний. Для более длинных применяйте атрибут title. Различие с HTML4 состоит в том, что текст показывается, только когда поле пустое и не в фокусе. Как только поле попадает в фокус (например, при щелчке мышью или указании на поле), и вы начинаете печатать, текст просто исчезает. Очень похоже на поле поиска в Safari.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2013/23/1.jpg' align="center" height="80" width="374" loading=lazy></p> <p>Давайте разберемся, как выполнять атрибут placeholder.</p> <p><input type="text" name="user-name" id="user-name" placeholder="at least 3 characters"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" name = "user-name" id = "user-name" placeholder = "at least 3 characters" > </p> </td> </tr></table><p>Вот так! Я слышу, как вы думаете: «Что такого в нем примечательного? Я всю жизнь делал это в JavaScript’е». Да, верно. Однако с HTML5 он становится частью браузера, означая, что требуется писать меньше скрипта для достижения более доступного кроссбраузерного решения (даже при отключенном JavaScript’е). На рисунке показана работа атрибута текста-заполнителя в Chrome’е.</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2013/23/2.jpg' height="89" width="250" loading=lazy></p> <p>Браузеры, не поддерживающие атрибут placeholder, игнорируют его, поэтому он не станет выполняться. Однако включив его, вы улучшаете впечатление тех пользователей, чьи браузеры обеспечивают его поддержку, а также гарантируете своему сайту перспективность. Все современные браузеры поддерживают текст-заполнитель.</p> <h3>autofocus</h3> <p>Автофокус делает в точности то, что означает. Добавлении его к input автоматически фокусирует поле при отображении страницы. Как и в случае с placeholder’ом, в прошлом для autofocus’а мы применяли JavaScript.</p> <p>Однако у традиционных методов JavaScript’а имеются серьезные проблемы юзабилити. Например, если пользователь начинает заполнять форму до полной загрузки скрипта, он будет (неприятно) возвращен после загрузки к первому полю формы. Атрибут autofocus в HTML5 обходит эту проблему, фокусируясь по мере загрузки документа, при этом не нужно ждать загрузки JavaScript’а. Однако мы рекомендуем применять его для предотвращения проблем с юзабилити только для тех страниц, чья единственная цель – форма (типа Google’а).</p> <p>Это – булев атрибут (за исключением случаев, когда вы пишете XHTML5; смотрите примечание) и выполняется как здесь:</p> <p><input type="text" name="first-name" id="first-name" autofocus></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" name = "first-name" id = "first-name" autofocus > </p> </td> </tr></table><p>Его поддерживают все современные браузеры и, как placeholder, не выполняющие autofocus браузеры просто игнорируют его.</p> <p>Примечание: Некоторые новые атрибуты формы HTML5 –булевы. Это просто означает, что они устанавливаются, если имеются, и не устанавливаются, если отсутствуют. В HTML5 их можно записать несколькими различными способами.</p> <p>autofocus autofocus="" autofocus="autofocus"</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>autofocus </p><p>autofocus = "" </p><p>autofocus = "autofocus" </p> </td> </tr></table><p>Однако при написании XHTML5 вам следует применять стиль autofocus=»autofocus».</p> <h3>autocomplete</h3> <p>Атрибут autocomplete помогает пользователям заполнять формы на основе предыдущего введения данных. Атрибут употребляется со времен IE5.5, но окончательно был стандартизирован как часть HTML5. По умолчанию он активен. Это значит, что в основном нам не придется его применять. Однако, если хотите настоять на введении в поле формы каждый раз после ее заполнении (в противоположность автозаполнения поля браузером), то выполните его следующим образом:</p> <p><input type="text" name="tracking-code" id="tracking-code" autocomplete="off"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" > </p> </td> </tr></table><p>Состояние автозаполнения поля отменяет любое состояние autocomplete, установленное на содержащем элементе формы.</p> <h3>required</h3> <p>Атрибут required не требует представления; как и autofocus, он делает именно то, что вы от него ожидаете. При добавлении его в поле формы браузер требует от пользователя ввести данные в это поле до отправки формы. Он заменяет базовую валидацию формы, в данное время выполняемую с помощью JavaScript’а, делая все более удобным и экономя нам еще немножко времени разработки. required – это булев атрибут, как autofocus. Давайте посмотрим его в действии.</p> <p><input type="text" id="given-name" name="given-name" required></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" id = "given-name" name = "given-name" required > </p> </td> </tr></table><p>В настоящее время required реализован только в Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+, так что до поры до времени вам придется продолжить писать скрипты проверки заполнения полей на клиентской стороне прочих браузеров (*кхе-кхе* IE!). Opera, Chrome и Firefox показывают пользователю при отправке формы сообщение об ошибке. В большинстве браузеров ошибки затем локализуются на основе задекларированного языка. Safari не показывает сообщение об ошибке при отправке, а вместо этого помещает это поле в фокус.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2013/23/3.jpg' height="107" width="180" loading=lazy></p> <p>Отображение по умолчанию сообщения об ошибке «required» зависит от отдельного браузера; в настоящее время «пузырю» с сообщением об ошибке во всех браузерах нельзя назначать стили CSS. У Chrome’а, тем не менее, имеется собственное свойство, которое можно применять для назначения стилей сообщению об ошибке. Также можно назначить стили вводу данных с помощью псевдокласса:required . Альтернатива состоит в отмене формулировки и стилей в JavaScript’е с помощью метода setCustomValidity(). Также очень важно не забывать, что такая браузерная валидация не заменяет валидацию серверную.</p> <h3>pattern</h3> <p>Атрибут pattern обычно сильно волнует многих разработчиков (ну, настолько волнует, как любой атрибут формы). Он определяет JavaScript регулярное выражение для поля, значение которого нужно проверить. Pattern облегчает нам применение отдельной проверки кодов, номеров счетов и так далее. Возможности pattern обширны, и вот всего лишь один простой пример с использованием номера продукта.</p> <p><label>Product Number: <input pattern="{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label > Product Number : </p><p>< input pattern = "{3}" name = "product" type = "text" title = <span>"Single digit followed by three uppercase letters." </span>/ > </p><p>< / label > </p> </td> </tr></table><p>Этот шаблон предписывает, что номер продукта должен быть одной цифрой , за которой следуют три <a href="/laptops/javascript-regulyarnye-vyrazheniya-zamena-simvolov-regulyarnye-vyrazheniya/">заглавные буквы</a> {3}. Посмотреть еще шаблоны можно на вебсайте шаблонов HTML5 , где имеется перечень обычных регулярных выражений шаблонов стиля для того, чтобы помочь вам начать с ними работать.</p> <p>Как и в случае с required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+ — единственные браузеры, поддерживающие в настоящее время шаблоны. Однако остальные скоро их нагонят по причине быстрого продвижения рынка браузеров.</p> <h3>Элементы list и datalist</h3> <p>Атрибут list дает пользователю возможность ассоциировать список опций с отдельным полем. Значение атрибута списка list должно быть таким же, как ID элемента datalist, находящегося в том же документе. Элемент datalist для HTML5 является новым и представляет предопределенный список опций элементов управления формы. Он работает аналогично внутрибраузерным полям поиска, автоматически дополняющим слова при введении текста.</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2013/23/4.jpg' align="center" height="360" width="374" loading=lazy></p> <p>Следующий пример показывает, как сочетаются list и datalist.</p> <p><label>Your favorite fruit: <datalist id="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </datalist> If other, please specify: <input type="text" name="fruit" list="fruits"> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label > Your favorite fruit : </p><p>< datalist id = "fruits" > </p><p>< option value = "Blackberry" > Blackberry < / option > </p><p>< option value = "Blackcurrant" > Blackcurrant < / option > </p><p>< option value = "Blueberry" > Blueberry < / option > </p><p>< ! -- …-- > </p><p>< / datalist > </p><p>If other , please specify : </p><p>< input type = "text" name = "fruit" list = "fruits" > </p><p>< / label > </p> </td> </tr></table><p>Добавив элемент select в datalist, можно обеспечить отличную деградацию, просто применив элемент option. Вот шаблон элегантной разметки, созданной Джереми Кейтом (Jeremy Keith), идеально подходящий принципам постепенной деградации HTML5.</p> <p><label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits"> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label > Your favorite fruit : </p><p>< datalist id = "fruits" > </p><p>< select name = "fruits" > </p><p>< option value = "Blackberry" > Blackberry < / option > </p><p>< option value = "Blackcurrant" > Blackcurrant < / option > </p><p>< option value = "Blueberry" > Blueberry < / option > </p><p>< ! -- …-- > </p><p>< / select > </p><p>If other , please specify : </p><p>< / datalist > </p><p>< input type = "text" name = "fruit" list = "fruits" > </p><p>< / label > </p> </td> </tr></table><p>Браузерная поддержка list и datalist в настоящее время ограничена Opera 9.5+, Chrome 20+, Internet Explorer 10 и Firefox 4+.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2013/23/5.jpg' height="118" width="203" loading=lazy></p> <h3>multiple</h3> <p>На шаг вперед можно продвинуть свои list и datalist, применив булев атрибут multiple, чтобы можно было ввести из перечня данных более одного значения. Вот пример.</p> <p><label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits" multiple> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label > Your favorite fruit : </p><p>< datalist id = "fruits" > </p><p>< select name = "fruits" > </p><p>< option value = "Blackberry" > Blackberry < / option > </p><p>< option value = "Blackcurrant" > Blackcurrant < / option > </p><p>< option value = "Blueberry" > Blueberry < / option > </p><p>< ! -- …-- > </p><p>< / select > </p><p>If other , please specify : </p><p>< / datalist > </p><p>< input type = "text" name = "fruit" list = "fruits" multiple > </p><p>< / label > </p> </td> </tr></table><p>Однако multiple не применяется исключительно с datalist. Дальнейшим примером употребления multiple могут быть адреса <a href="/interview/kak-otpravit-fail-po-elektronnoi-pochte-ekspress-pismo-ems-mozhno-li/">электронной почты</a> при пересылке элементов другу или вложении файлов, как показано здесь:</p> <p><label>Upload files: <input type="file" multiple name="upload"></label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label > Upload files : </p><p>< input type = "file" multiple name = "upload" > < / label > </p> </td> </tr></table><p>multiple поддерживается в Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 и Chrome 4+.</p> <h3>novalidate и formnovalidate</h3> <p>Атрибуты novalidate и formnovalidate обозначают, что при отправке формы не нужно проводить проверку правильности данных. Они оба – булевы атрибуты. formnovalidate может быть применен к input-ам с типом submit или image. Атрибут novalidate можно установить только к элементу form.</p> <p>Пример использования атрибута formnovalidate может быть приведен на кнопке «сохранить черновик», где у формы есть поля, нужные для отправки черновика, но не требующиеся для сохранения черновика. novalidate будет применяться в тех случаях, когда вам не нужно делать валидацию формы, но требуется добиться преимуществ более удобного пользовательского интерфейса, предлагаемых новыми типами ввода данных.</p> <p>Применение formnovalidate видно на следующем примере:</p> <p><form action="process.php"> <label for="email">Email:</label> <input type="text" name="email" value="gordo@example.com"> <input type="submit" formnovalidate value="Submit"> </form></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< form action = "process.php" > </p><p>< label for = "email" > Email : < / label > </p><p>< input type = "text" name = "email" value = "gordo@example.com" > </p><p>< input type = "submit" formnovalidate value = "Submit" > </p><p>< / form > </p> </td> </tr></table><p>А этот пример показывает применение novalidate:</p> <p><form action="process.php" novalidate> <label for="email">Email:</label> <input type="text" name="email" value="gordo@example.com"> <input type="submit" value="Submit"> </form></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< form action = "process.php" novalidate > </p></td></tr></table> <p>Чтобы посмотреть описание и пример использования интересующего вас глобального атрибута, нажмите на него или проскрольте страницу вниз до его описания.</p> <h2>accesskey</h2> <p>Атрибут accesskey используется браузерами в качестве руководства для создания сочетания клавиш, активирующее элемент или переводящее на него фокус.</p><p>Примечание: до HTML5 атрибут accesskey можно было использовать только со следующими тегами: , <a href="https://puzzleweb.rutag_area.php" target="_blank"> , <a href="https://puzzleweb.rutag_button.php" target="_blank"><button> , <input> , <label> , <legend> и <textarea> . С пятой версии HTML данный атрибут можно использовать с любым валидным HTML тегом.</p> <p>Значением атрибута accesskey должен быть символ, который можно ввести нажатием одной клавиши. Пробельные символы в качестве значения атрибута не допустимы.</p><p>Сочетания клавиш для атрибута accesskey зависит от используемого браузера:</p> <p>Использование атрибута accesskey для разных элементов с одним и тем же значением приводит к игнорированию атрибута.</p> <h2>class</h2> <p>Атрибут class используется для последующего получения доступа к элементам (через имя класса) в CSS и JavaScript .</p> <p>В атрибуте class в качестве значения можно указать не один, а несколько классов, в этом случае имена классов должны быть разделены пробелами, порядок следования имён классов не имеет значения:</p><p> <p>Если в блоках объявлений разных классов используются одинаковые <a href="/interview/sozdanie-ramok-v-css-svoistvo-border-otstupy-i-ramki-v-css-s-pomoshchyu-parametrov/">CSS свойства</a> с разными значениями, то для свойства будет применено то значение, которое в CSS коде определено ниже остальных. Поэтому порядок следования имён классов в значение атрибута значения не имеет, так как в этом случае срабатывает механизм каскадности .</p> <h2>contenteditable</h2> <p>Атрибут contenteditable указывает, может ли пользователь редактировать содержимое данного элемента. Атрибут может принимать одно из следующих значений:</p> <ul><li>true или пустая строка ("") - содержимое элемента можно редактировать</li> <li>false - редактирование содержимого запрещено</li> </ul> <bdo dir="ltr">Просто какой-то текст</bdo> <h2>draggable</h2> <p>Атрибут draggable определяет, может ли пользователь перетаскивать элемент с помощью drag-and-drop API. Атрибут может принимать одно из трёх значений:</p> <ul><li>true - указывает, что элемент можно перетаскивать</li> <li>false - указывает, что элемент не перетаскивается</li> <li>auto - указывает, что перетаскивание элемента будет зависеть от значения, установленного в браузере по умолчанию.</li> </ul><p>С помощью атрибута id можно создавать ссылки на <a href="/news/javascript-kak-poluchit-elementy-roditelya-tehniki-raboty-s-dom-roditelskie/">конкретный элемент</a>, а не только на страницу в целом. Такие ссылки могут вести либо на раздел данной страницы, либо на раздел другой страницы. Чтобы создать ссылку на элемент, надо добавить к небу атрибут id . Сама ссылка, в этом случае, должна будет содержать имя идентификатора элемента, на который она ссылается, перед которым обязательно ставится символ # . Если ссылка ведет на раздел текущей страницы, то в качестве адреса можно указать только имя идентификатора, если ссылка ведёт на раздел другой страницы, то имя идентификатора указывается в самом конце адреса:</p><h2>lang</h2> <p>Атрибут lang позволяет указать, какой язык используется для текста внутри элемента. В качестве значения атрибута используются коды языков :</p><p> <p>Текст на английском: <span lang="en">"Hello world!"</span>.</p> </p><p>Использование данного атрибута помогает браузерам правильно отображать некоторые национальные символы, речевым программам определить язык текста, выполнять проверку текста программам для проверки орфографии и грамматики.</p> <p>Атрибут lang также может использоваться для улучшения качества в поисковой выдаче результатов поиска, которые основаны на лингвистических предпочтениях пользователя.</p> <h2>spellcheck</h2> <p>Атрибут spellcheck указывает, разрешается ли проверять содержимое элемента на наличие орфографических ошибок. Атрибут может принимать одно из следующих значений:</p> <ul><li>true - указывает, что содержимое элемента должно быть, по возможности, проверено на наличие орфографических ошибок.</li> <li>false - указывает, что элемент не должен проверяться на наличие орфографических ошибок.</li> </ul><p>Атрибут spellcheck является перечисляемым . Это значит, что требуется явное указание значения атрибута. Добавление атрибута без значения запрещено:</p><p> <!-- правильное добавление атрибута --> <textarea spellcheck="false"> <!-- неправильное добавление атрибута --> <textarea spellcheck> </p><p>Атрибут spellcheck определяет лишь рекомендацию для браузера: браузеры не должны иметь возможность проверки на орфографические ошибки. Обычно не редактируемые элементы не проверяются на наличие ошибок, даже если для атрибута установлено значение true , а браузер поддерживает проверку.</p> <h2>style</h2> <p>Атрибут style используется для добавления CSS стилей к элементу. Стили, добавленные с помощью атрибута style , имеют приоритет над стилями, расположенными в элементе <style> или во внешнем файле.</p> <p>При добавлении стилей в значение атрибута, селектор и <a href="/processors/js-kratkaya-zapis-if-funkcii-i-usloviya-if-else-v-javascript-ispolzovanie/">фигурные скобки</a> не используются. Каждое объявление должно заканчиваться точкой с запятой, после которой можно писать следующее объявление. Между свойствами и их значениями, так же как и между объявлениями, пробелы ставятся по желанию:</p><p> <span style="color: red; font-weight: bold;">Жирный красный текст</p><h2>tabindex</h2> <p>Атрибут tabindex указывает может ли элемент быть в фокусе и порядок приоритета при переходе фокуса между элементами (при использовании клавиши " tab "). В качестве значения атрибут принимает целое число:</p><p> <textarea tabindex="5"> </p><p>Число 5 означает, что элемент получит фокус после элемента с tabindex="4" и до элемента с tabindex="6" . Но давать последовательные значения не обязательно, в любом случае элементы, имеющие меньшее значение, получат фокус до элементов, имеющих большее значение. Если несколько элементов имеют одинаковые положительные значения, то порядок получения фокуса будет зависеть от порядка их следования в исходном коде документа.</p> <h2>title</h2> <p>Атрибут title используется для указания дополнительной информации о содержимом элемента (отображается браузерами в виде всплывающей текстовой подсказки при наведении курсора мыши на элемент).</p> <p>Атрибут title часто используется с картинками, для добавления описания картинки:</p><p> <img src='https://i0.wp.com/1.png' loading=lazy> </p><p>Примечание: <a href="/multimedia/tab-7000-proshivka-proshivka-wexler-t7008-vneshnii-vid-i-razemy/">внешний вид</a> и размер всплывающей подсказки, шрифт и цвет текста, зависят от браузера и не могут быть изменены с помощью CSS стилей.</p> <p>Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный.</p> <p>В HTML существует ряд атрибутов, которые <b>универсальны </b> и могут применяться практически к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными атрибутами .</p><p>Глобальные атрибуты будут часто встречаться в примерах этого учебника, предлагаю Вам бегло повторить те атрибуты, которые мы уже рассмотрели и ознакомиться с теми глобальными атрибутами, которые будут рассмотрены в ближайших статьях:</p> <h2>Вопросы и задачи по теме</h2> <p>Перед тем как перейти к изучению следующей темы пройдите практическое задание:</p> <br><p>Подсказка: не забудьте определить язык содержимого страницы и элементов, где это требуется. После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы его выполнили правильно.</p> <p>Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом</p> <p>вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.</p> <h2>Как писать атрибуты?</h2> <p>Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?</p> <p>Значения с атрибутами записываются в таком формате:</p><p>Атрибут=”значение” lang=”en”</p> <p>Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.</p> <p> <p align=”center”>Абзац</p></p> <p>Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.</p> <h2>Универсальные атрибуты</h2> <p>Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.</p> <ul><li><b>accesskey </b> позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш <b>Alt+1 </b> пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.</li> </ul><p>В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:</p> <p> <a acceskey=”1” href=”https://youtube.com”>Ссылка будет открываться по нажатию сочетания клавиш с единицей</a></p> <ul><li><b>class </b> позволяет связать тег с заранее заданным с помощью <a href="/cd-and-dvd-drives/oformlenie-teksta-s-pomoshchyu-css-css-svoistva-text-decoration-vertical-align-text-align-text-indent-dlya/">CSS оформлением</a>. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.</li> <li>С помощью <b>contenteditable </b> можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: <b>true </b> - правку разрешить, <b>false </b> - запретить.</li> <li>При помощи атрибута <b>contextmenu </b> вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге <b><menu> </b>, а атрибуту contextmenu присваивается его идентификатор.</li> <li><b>dir </b> определяет направление текста: слева направо <b>(ltr) </b> или справа налево <b>(rtl) </b>.</li> <li><b>draggable </b> позволяет запретить <b>(false) </b> или разрешить <b>(true) </b>пользователю перетаскивать наделённый этим атрибутом элемент страницы.</li> <li><b>dropzone </b> указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение <b>copy </b>), перемещать (<b>move </b>) или создать на него ссылку <b>(link) </b>.</li> <li><b>hidden </b> - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.</li> <li><b>id </b> задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса <b>(-) </b> и подчёркивания <b>(_) </b>. Русских букв содержать не может.</li> <li><b>lang </b> помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - <b>ru </b>, английский - <b>en </b> и т. п.).</li> <li><b>spellcheck </b> включает <b>(true) </b> или отключает <b>(false) </b> проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.</li> <li><b>style </b> позволяет задать оформление элемента с помощью CSS-кода.</li> <li><b>tabindex </b> даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.</li> <li><b>title </b> - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.</li> </ul> <ul><li><b>translate </b> разрешает <b>(yes) </b> или запрещает <b>(no) </b> перевод содержимого тега.</li> <li><b>align </b> задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение <b>left </b>), по правому краю (<b>right </b>), по центру <b>(center) </b> или по ширине <b>(justify) </b>. Для изображений (тег <b><img> </b>) также доступно выравнивание по верхней границе самого высокого элемента строки (<b>top </b>), по нижней границе <b>(bottom) </b>, а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.</li> </ul><p>Стоит иметь в виду, что использовать атрибут <b>align </b> не рекомендуется, а выравнивать текст лучше с помощью CSS.</p> <h2>Пример использования атрибутов</h2> <p>В качестве примера рассмотрим строку HTML-кода:</p> <p> <p contenteditable=”true”>Этот текст можно редактировать</p></p> <p>Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.</p> <p>Разберём каждый элемент строки.</p> <p><b><p> </b> - открывающий тег контейнера, хранящего абзац.</p> </b> - закрывающий тег.</p> <p>Между символами <b>> </b> и <b>< </b> расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.</p> <p><b>contenteditable </b>=”<b>true </b>” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: <b>contenteditable </b>=”<b>true </b>”. Атрибут <b>contenteditable </b> задаёт, сможет ли пользователь редактировать содержимое элемента, значение <b>true </b>, написанное в кавычках через знак равно, редактирование разрешает:</p> <p>Атрибут=”значение” contenteditable=”true”</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;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()+ "border='0' width='1' height='1' loading=lazy>");</script> <p style="text-align: center;"></p> <p> <div style="text-align: center; margin: 3px 0;"> </div> <div style="text-align: center; margin: 1px 0 5px;"> </div> </p><span class="adplacer_pro_adblock_end_post_content" style="display: none;width: 0;height: 0;"></span> </article> <div class="post-meta"> <div class="post-share"> <div class="post-share__title">Поделиться с друзьями:</div> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8" async="async"></script><div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter" data-counter=""></div> </div> </div> <div class="title">Похожие публикации</div> <div class="yarpp-related"> <ul class="related-items"> <style> </style> <style> #perelink-horizontal{ vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 230px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img{ width:230px; height:150px; margin-bottom:10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="/cd-and-dvd-drives/poluchenie-rut-prav-na-android-lenovo-polucheniya-root-prav-na-androide-dlya-chego/"> <img src="/uploads/280809509ad6ef418fd1fdbdb131136c.jpg" height="150" width="230" loading=lazy> <span>Получения root прав на Андроиде!</span> </a> </div> <div class="perelink-horizontal-item"> <a href="/boards/kak-raskrutit-stranichku-v-instagramme-malenkie-hitrosti/"> <img src="/uploads/3e39073c7ab91e878cfc7d3dff7dc823.jpg" height="150" width="230" loading=lazy> <span>Маленькие хитрости, которые помогут вам самостоятельно раскрутить аккаунт в Instagram</span> </a> </div> <div class="perelink-horizontal-item"> <a href="/news/programma-dlya-uluchsheniya-processora-na-pk-razgon-processora-s-pomoshchyu/"> <img src="/uploads/4efcbbd8fdfd5f5fc6e17862bec85dd8.jpg" height="150" width="230" loading=lazy> <span>Разгон процессора с помощью программ</span> </a> </div> </div> </ul> </div> <div class="yarpp-related"> <ul class="related-items"> <li><img src="/uploads/de82823d1e9c1668e863236d7fee3eaa.jpg" / loading=lazy> <a href="/games/kak-otklyuchit-vstroennuyu-programmu-v-total-commander-kak-ubrat/" target="_blank" rel="nofollow noopener noreferrer">Как убрать программы из автозагрузки (автозапуска)?</a></li> <li><img src="/uploads/e140791218c2011b83a5260596a81b48.jpg" / loading=lazy> <a href="/printers/ne-mogu-skopirovat-fail-v-system32-kak-zamenit-sistemnye-faily-obnovlyaetsya/" target="_blank" rel="nofollow noopener noreferrer">Как заменить системные файлы (обновляется)</a></li> <li><img src="/uploads/b06f4a86e9ebd9e1f3472b18e2c77558.jpg" / loading=lazy> <a href="/housings/konkursy-vkontakte-kak-poluchit-nuzhnye-rezultaty-i-ne/" target="_blank" rel="nofollow noopener noreferrer">Как выигрывать конкурсы в вк Как стать случайным победителем в контакте</a></li> </ul> </div> </main> <aside class="sidebar"> <div class="search-form ya-site-form ya-site-form_inited_no" onclick="return { 'bg': 'transparent', 'publicname': '\u041f\u043e\u0438\u0441\u043a \u043f\u043e mdou3kursk.ru', 'target': '_self', 'language': 'ru', 'suggest': true, 'tld': 'ru', 'site_suggest': true, 'action': '/search', 'webopt': false, 'fontsize': 12, 'arrow': false, 'fg': '#000000', 'searchid': '2265323', 'logo': 'rb', 'websearch': false, 'type': 2} "> <form action="/search" method="get" target="_self"> <input type="hidden" name="searchid" value="2265323"> <input type="hidden" name="l10n" value="ru"> <input type="hidden" name="reqenc" value=""> <input type="text" name="text" placeholder="Поиск по сайту:" class="search-form__field" value=""> <input type="submit" value="" class="search-form__button"> </form> </div> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://mdou3kursk.ru/news/html-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy/" target="_blank" class="vk">ВКонтакте</a> <a href="https://www.twitter.com/share?url=https://mdou3kursk.ru/news/html-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy/" target="_blank" class="tw">Twitter</a> <a href="" target="_blank" class="gp">Google+</a> </div> <nav class="sidebar-menu section"><ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/processors/">Процессоры</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/hdd/">Hdd</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/housings/">Корпуса </a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/applications/">Приложения </a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/boards/">Платы</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/video-cards/">Видеокарты</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/os/">ОС</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/games/">Игры</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/multimedia/">Мультимедиа</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/news/">Новости</a> </li> </ul></nav> <div class="section section-question"> <div class="title"><a href="/">Новые статьи</a></div> <ul class="section-question__posts"> <li> <a href="/boards/prohozhdenie-kody-na-gta-na-letayushchie-mashiny-i-drugie-letatelnye-sredstva-kak-aktivirovat-kody-v/">Коды на "гта" на летающие машины и другие летательные средства Как активировать коды в гта сан андреас</a> </li> <li> <a href="/os/dr-web-cureit-gde-skachat-kak-nastroit-i-ispolzovat-dr-web-cureit-chto-eto-za/">Dr Web CureIT — где скачать, как настроить и использовать</a> </li> <li> <a href="/laptops/obzor-smartfona-sony-xperia-xa2-kamernaya-klassika-bolshoi-sony-s-krutoi/">Большой Sony с крутой селфи-камерой</a> </li> <li> <a href="/cd-and-dvd-drives/kak-ubrat-provedenie-dokumenta-v-1s-8-3-buhuchet-info/">Как убрать проведение документа в 1с 8</a> </li> <li> <a href="/news/zdravstvuite-po-kitaiski-i-drugie-rasprostranennye-frazy-osnovnye-formy/">Основные формы приветствия (перевод Нихао) Как по китайски привет произношение звуковое</a> </li> <li> <a href="/scanners/moi-lichnyi-opyt-i-pervyi-eksperiment-kak-nabrat-zhivyh-podpischikov-v/">Как набрать живых подписчиков в Инстаграм без накрутки?</a> </li> </ul> </div> <div class="section-posts-box section"> <div class="title">Популярные статьи</div> <div class="section-video section-posts"> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/7d041c214c37ce378d247c4c40404f73.jpg" width="199" height="150" alt="Очистка компьютера от мусора: зачем чистить, какие программы использовать и как это делать" / loading=lazy> <a href="/scanners/luchshaya-programma-dlya-ochistki-kompa-ochistka-kompyutera-ot-musora-zachem/" class="section-posts__item-title">Очистка компьютера от мусора: зачем чистить, какие программы использовать и как это делать</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/c8f9eb08ba39f500a930c04858ef5dc6.jpg" width="199" height="150" alt="Схема универсальный программатор usb" / loading=lazy> <a href="/games/shema-universalnyi-programmator-usb-programmy-vnutrishemnyi-posledovatelnyi-programmator-avr/" class="section-posts__item-title">Схема универсальный программатор usb</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/03d3184e4717fffc6960775eab24d224.jpg" width="199" height="150" alt="А нужен ли антивирус. Нужен ли антивирус. Стоит ли устанавливать антивирус" / loading=lazy> <a href="/games/a-nuzhen-li-antivirus-nuzhen-li-antivirus-stoit-li-ustanavlivat/" class="section-posts__item-title">А нужен ли антивирус. Нужен ли антивирус. Стоит ли устанавливать антивирус</a> </div> </div> </div> <div class="section-posts-box section"> <div class="title"><a href="/">Выбор редакции</a></div> <div class="section-video section-posts"> <div class="section-posts__item"> <img src="/uploads/f7dcb990b5e6d9bca087978388989e6d.jpg" width="199" height="150" alt="Лучшие моды для Minecraft" / loading=lazy> <a href="/printers/skachat-mody-na-ma-luchshie-mody-dlya-minecraft-ustanovka-modov/" class="section-posts__item-title section-title_video">Лучшие моды для Minecraft</a> </div> <div class="section-posts__item"> <img src="/uploads/0d54edeaeb1e0b37b23ccd7cd10c9f0d.jpg" width="199" height="150" alt="Xiaomi Hybrid Pro HD - трёхдрайверные наушники, взгляд обычного пользователя" / loading=lazy> <a href="/news/naushniki-xiaomi-hybrid-hd-audio-otzyvy-xiaomi-hybrid-pro-hd---tr-hdraivernye-naushniki/" class="section-posts__item-title section-title_video">Xiaomi Hybrid Pro HD - трёхдрайверные наушники, взгляд обычного пользователя</a> </div> <div class="section-posts__item"> <img src="/uploads/fd736f91139bec14a72146ea7361ce61.jpg" width="199" height="150" alt="Сборка модов для майнкрафт 1" / loading=lazy> <a href="/boards/sborka-modov-dlya-mainkraft-1-5-2-ot-bendera-tehnichesko-magicheskaya/" class="section-posts__item-title section-title_video">Сборка модов для майнкрафт 1</a> </div> </div> </div> </aside> </div> <footer class="footer"> <div class="wrap"> <div class="logo logo_footer" style="background:none;"> <div class="logo__copy">Все права защищены, 2024</div> </div> <nav class="footer-navid"> <ul> <li class="menu-item type-post_type object-page "><a href="">О сайте</a></li> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> </ul> </nav> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://mdou3kursk.ru/news/html-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy/" target="_blank" class="vk">ВКонтакте</a> <a href="https://www.twitter.com/share?url=https://mdou3kursk.ru/news/html-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy/" target="_blank" class="tw">Twitter</a> <a href="" target="_blank" class="gp">Google+</a> </div> </div> </footer> <script>var adsplacerProAdblockMessage = { "message":"<div class=\"adb-def\">\r\n <div>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 AdBlock?<\/div>\r\n <div>\u0420\u0435\u043a\u043b\u0430\u043c\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e<\/div>\r\n \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043d\u0435\u0441\u0438\u0442\u0435 \u043c\u043e\u0439 \u0441\u0430\u0439\u0442 \u0432 \u0432\u0430\u0439\u0442\u043b\u0438\u0441\u0442 \u0432\u0430\u0448\u0435\u0433\u043e AdBlock \u043f\u043b\u0430\u0433\u0438\u043d\u0430\r\n<\/div>"} </script><script>var adsplacerProAdblockFirstOnly = 0</script><script>var adsplacerProVersion = "2.5.7"</script><script>if(!AdsplacerProReadCookie('adsplacerProReferrer')){ document.cookie = "adsplacerProReferrer=" + document.referrer + "; path=/; expires=" + (new Date(new Date().getTime() + 60 * 60 * 24 * 1000)).toUTCString(); } </script><script>var adsplacerProPostId = "1848"</script><script>var CookieDate = new Date;CookieDate.setDate(391);document.cookie = 'adsplacerProDontShowAdsIds=' + JSON.stringify(adsplacerProFirstTime) + '; expires=' + CookieDate.toGMTString( ) + '; path=/';</script><script>var adsplacerProAdblockExtendMessages = []</script><script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/adsplacer_pro/assets/js/jquery.adsplacer.adblock.js?ver=2.5.7'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 150, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['custom_html-2'] } ; </script> <script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> </div> </body> </html>