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

Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный.

В HTML существует ряд атрибутов, которые универсальны и могут применяться практически к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными атрибутами .

Глобальные атрибуты будут часто встречаться в примерах этого учебника, предлагаю Вам бегло повторить те атрибуты, которые мы уже рассмотрели и ознакомиться с теми глобальными атрибутами, которые будут рассмотрены в ближайших статьях:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

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

accesskey

Атрибут accesskey используется браузерами в качестве руководства для создания сочетания клавиш, активирующее элемент или переводящее на него фокус.

Примечание: до HTML5 атрибут accesskey можно было использовать только со следующими тегами: , , , , ,

и . С пятой версии 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>Если в блоках объявлений разных классов используются одинаковые CSS свойства с разными значениями, то для свойства будет применено то значение, которое в 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 можно создавать ссылки на конкретный элемент, а не только на страницу в целом. Такие ссылки могут вести либо на раздел данной страницы, либо на раздел другой страницы. Чтобы создать ссылку на элемент, надо добавить к небу атрибут 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>При добавлении стилей в значение атрибута, селектор и фигурные скобки не используются. Каждое объявление должно заканчиваться точкой с запятой, после которой можно писать следующее объявление. Между свойствами и их значениями, так же как и между объявлениями, пробелы ставятся по желанию:</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>Примечание: внешний вид и размер всплывающей подсказки, шрифт и цвет текста, зависят от браузера и не могут быть изменены с помощью CSS стилей.</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> позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока 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> <p>Последнее обновление: 08.04.2016</p> <p>Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки, кирпичики, из которых состоит веб-страница.</p> <p>Документ HTML5, как и любой документ HTML, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег, которые заключаются в угловые скобки. Например:</p><p> <div>Текст элемента div</div> </p><p>Здесь определен элемент div , который имеет открывающий тег <div> и закрывающий тег </div> . Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".</p> <p>Элементы также могут состоять из одного тега, например, элемент <br /> , функция которого - перенос строки.</p><p> <div>Текст <br /> элемента div</div> </p><p>Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно, и равнозначно использованию тега без слеша: <br></p> <p>Каждый элемент внутри открывающего тега может иметь атрибуты . Например:</p><p> <div style="color:red;">Кнопка</div> <input type="button" value="Нажать"> </p><p>Здесь определено два элемента: div и input. Элемент div имеет атрибут style . После знака равно в кавычках пишется значение атрибута: style="color:red;" . В данном случае значение "color:red;" указывает, что цвет текста будет красным.</p> <p>Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка) и value (определяет текст кнопки)</p> <p>Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к определенным элементам, как например, type.</p> <p>Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например, у кнопки можно задать атрибут disabled:</p><p> <input type="button" value="Нажать" disabled> </p><p>Атрибут disabled указывает, что данный элемент отключен.</p> <h3>Глобальные атрибуты</h3> <p>В HTML5 есть набор <span>глобальных атрибутов </span>, которые применимы к любому элементу HTML5:</p> <ul><p>accesskey : определяет клавишу для быстрого доступа к элементу</p> <p>class : задает класс CSS, который будет применяться к элементу</p> <p>contenteditable : определяет, можно ли редактировать содержимое элемента</p> <p>contextmenu : определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой мыши</p> <p>dir : устанавливает направление текста в элементе</p> <p>draggable : определяет, можно ли перетаскивать элемент</p> <p>dropzone : определяет, можно ли копировать переносимые данные при переносе на элемент</p> <p>hidden : скрывает элемент</p> <p>id : уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов</p> <p>lang : определяет язык элемента</p> <p>spellcheck : указывает, будет ли для данного элемента использоваться проверка правописания</p> <p>style : задает стиль элемента</p> <p>tabindex : определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB</p> <p>title : устанавливает дополнительное описание для элемента</p> <p>translate : определяет, должно ли переводиться содержимое элемента</p> </ul><p>Но, как правило, из всего этого списка наиболее часто используются три: class , id и style .</p> <h3>Пользовательские атрибуты</h3> <p>В отличие от предыдущей версии языка разметки в HTML5 были добавлены пользовательские атрибуты (custom attributes). Теперь разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом <i>data- </i>. Например:</p><p> <input type="button" value="Нажать" data-color="red" > </p><p>Здесь определен атрибут data-color , который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует подобного атрибута. Мы его определяем сами и устанавливаем у него любое значение.</p> <h3>Одинарные или двойные кавычки</h3> <p>Нередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:</p><p> <input type="button" value="Нажать"> </p><p>И одинарные, и двойные кавычки в данном случае допустимы, хотя чаще применяются именно двойные кавычки. Однако иногда само значение атрибута может содержать двойные кавычки, и в этом случае все значение лучше поместить в одинарные:</p><p> <input type="button" value="Кнопка "Привет мир""> </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> </article> <div class="tags"></div> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter" ></div> <div id="venus-269"></div> </div> <div class="seealso"> <span class="title">Читать еще:</span> <ul> <li> <div> <a href='/vybor-proshivki-v-itunes-kuda-itunes-skachivaet-proshivku-i-gde-ona-hranitsya.html' title='Куда iTunes скачивает прошивку, и где она хранится?'> <noindex><img width="640" height="426" src="/uploads/5af53f484b1d87031ce57fd8cf2e9aa9.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Куда iTunes скачивает прошивку, и где она хранится?" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-06-22 01:08:27</noindex></span> <div><a href='/vybor-proshivki-v-itunes-kuda-itunes-skachivaet-proshivku-i-gde-ona-hranitsya.html' title='Куда iTunes скачивает прошивку, и где она хранится?'>Куда iTunes скачивает прошивку, и где она хранится?</a></div> </li> <li> <div> <a href='/hamachi-status-otklyuchen-hamachi-zheltyi-treugolnik---oshibka-statusa-vpn-kak.html' title='Hamachi желтый треугольник - ошибка статуса VPN, как исправить'> <noindex><img width="640" height="426" src="/uploads/7ff507de1e3007534fda1ac89033703d.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Hamachi желтый треугольник - ошибка статуса VPN, как исправить" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-06-22 01:08:27</noindex></span> <div><a href='/hamachi-status-otklyuchen-hamachi-zheltyi-treugolnik---oshibka-statusa-vpn-kak.html' title='Hamachi желтый треугольник - ошибка статуса VPN, как исправить'>Hamachi желтый треугольник - ошибка статуса VPN, как исправить</a></div> </li> <li> <div> <a href='/obzor-samsung-galaxy-j5-2017-vzveshennyi-vybor-samsung-galaxy-j5-2017---tehnicheskie.html' title='Samsung Galaxy J5 (2017) - Технические характеристики Описание телефона самсунг галакси j5'> <noindex><img width="640" height="426" src="/uploads/9d35ea5cd3b29b21ec9e4eb0d0329576.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Samsung Galaxy J5 (2017) - Технические характеристики Описание телефона самсунг галакси j5" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-06-21 01:09:34</noindex></span> <div><a href='/obzor-samsung-galaxy-j5-2017-vzveshennyi-vybor-samsung-galaxy-j5-2017---tehnicheskie.html' title='Samsung Galaxy J5 (2017) - Технические характеристики Описание телефона самсунг галакси j5'>Samsung Galaxy J5 (2017) - Технические характеристики Описание телефона самсунг галакси j5</a></div> </li> <li> <div> <a href='/vosstanovit-stranicu-vk-posle-udaleniya-bez-parolya-sposoby.html' title='Способы полного удаления страницы в социальной сети вконтакте'> <noindex><img width="640" height="426" src="/uploads/6011036cd25d1efd3aef4e4d07c15fa1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Способы полного удаления страницы в социальной сети вконтакте" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-06-21 01:09:34</noindex></span> <div><a href='/vosstanovit-stranicu-vk-posle-udaleniya-bez-parolya-sposoby.html' title='Способы полного удаления страницы в социальной сети вконтакте'>Способы полного удаления страницы в социальной сети вконтакте</a></div> </li> <li> <div> <a href='/kak-vklyuchit-proverku-orfografii-v-gugl-hrom-proverka-orfografii-kak.html' title='Как включить проверку орфографии в гугл хром'> <noindex><img width="640" height="426" src="/uploads/91b5d553af0795e87720f1d40c64217e.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Как включить проверку орфографии в гугл хром" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-06-21 01:09:34</noindex></span> <div><a href='/kak-vklyuchit-proverku-orfografii-v-gugl-hrom-proverka-orfografii-kak.html' title='Как включить проверку орфографии в гугл хром'>Как включить проверку орфографии в гугл хром</a></div> </li> <li> <div> <a href='/reiting-luchshie-brauzery-dlya-windows-reiting-luchshie-brauzery-dlya-windows.html' title='Рейтинг: "Лучшие браузеры для Windows" Скачать браузеры онлайн'> <noindex><img width="640" height="426" src="/uploads/9a2f49a10e26b82ea3a3fbfb307d72c0.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Рейтинг: "Лучшие браузеры для Windows" Скачать браузеры онлайн" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-06-21 01:09:34</noindex></span> <div><a href='/reiting-luchshie-brauzery-dlya-windows-reiting-luchshie-brauzery-dlya-windows.html' title='Рейтинг: "Лучшие браузеры для Windows" Скачать браузеры онлайн'>Рейтинг: "Лучшие браузеры для Windows" Скачать браузеры онлайн</a></div> </li> </ul> </div> </div> </div> </div> <footer> <nav id="links"> </nav> <div id="footer"> <div class="icon-logos_footer" style="position:absolute; top:16px; left:18px; width: 119px; height: 19px;"> </div> <span>© 2024. Мобильные технологии и операторы связи</span> <div> </div> </footer> </div> </div> </div> <script type='text/javascript' src='https://periscopes.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.7'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.2'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-article", "margin_top" : 10, "margin_bottom" : 0, "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" : ['text-20'] } ; </script> <script type='text/javascript' src='https://periscopes.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.2'></script> <script type='text/javascript' src='https://periscopes.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script> <script type="text/javascript"> $(document).ready(function(){ var bg = $(".slider > ul > li > a > img").attr ("src"); $(".slider").css("background", "url("+bg+")"); $(".slider > ul > li:first-child").addClass ("active"); } ); $(function () { $("#devider").masonry({ itemSelector: ".vpost" } ); $(".sub-menu").each(function () { $(this).parent().eq(0).hover(function () { $(this).addClass("li-hover"); } , function () { $(this).removeClass("li-hover"); } ); } ); $(".tabs-all-cat > li").each(function () { $(this).hover(function () { $(this).addClass("li-hover"); $(".tabs-all-cat > li > ul").show(); } , function () { $(this).removeClass("li-hover"); $(".tabs-all-cat > li > ul").hide(); } ); } ); $(".slider-a").click(function () { $(".slider > ul > li").removeClass ("active"); $(this).parent().addClass ("active"); var bg = $(".active > a > img").attr ("src"); $(".slider").css("background", "url("+bg+")"); } ); } ); </script> </body> </html>