Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Глобальный атрибут data-*



Пример

Используйте атрибут data-* для внедрения пользовательских данных:

<ul>
  <li data-animal-type="bird">Сова</li>
  <li data-animal-type="fish">Лосось</li>
  <li data-animal-type="spider">Тарантул</li>
</ul>
Попробуйте сами »


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

Глобальные атрибуты data-* используются для хранения личных данных пользователя на странице или в приложении.

Глобальные атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.

Затем сохраненные (пользовательские) данные можно использовать в JavaScript страницы для создания более привлекательного пользовательского интерфейса (без каких-либо вызовов Ajax или запросов к базе данных на стороне сервера).

Атрибуты data-* состоят из двух частей:

  1. Атрибут name не должн содержать заглавные буквы и должен содержать хотя бы один символ после префикса "data-"
  2. Значением атрибута может быть любая строка

Примечание: Пользовательские атрибуты с префиксом "data-" будет полностью проигнорирован агентом пользователя.


Поддержка браузеров data-*

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

Атрибут
data-* 4.0 5.5 2.0 3.1 9.6

Синтаксис data-*

<element data-*="somevalue">

Значение атрибута data-*

Значение Описание
somevalue Задает значение атрибута (в виде строки)

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

Учебник HTML: Атрибуты HTML

Справочник DOM HTML: Метод getAttribute() DOM HTML