Руководство по HTML

Полный список HTML-тегов

Атрибуты data-* в HTML

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

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

Онлайн пример

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

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Базовый курс (oldtoolbag.com)</title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>Вид</h1>
<p>Нажмите на вид, чтобы увидеть, к какому типу он относится:</p>
<ul>
　　<li　onclick="showDetails(this)"　id="owl"　data-animal-type="bird">Owl</li>
　　<li　onclick="showDetails(this)"　id="salmon"　data-animal-type="fish">Salmon</li>　　
　　<li　onclick="showDetails(this)"　id="tarantula"　data-animal-type="spider">Tarantula</li>　　
</ul>
</body>
</html>

Проверьте, ‹/›

Совместимость с браузерами

IEFirefoxOperaChromeSafari

Все основные браузеры поддерживают свойство data-*.

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

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

Свойство data-* можно嵌入 в любые элементы HTML.

Пользовательские данные могут улучшить взаимодействие с страницей (без использования Ajax или запросов на сервер).

Свойство data-* состоит из двух частей:

Имя свойства не должно содержать больших букв и должно начинаться с "data-".
Это свойство может быть любым строковым значением

Внимание: Префикс пользовательских свойств "data-" будет пропущен клиентом.

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

Свойство data-* является новым в HTML5.

Синтаксис

<элемент data-*="somevalue">

Значение свойства

Значение	Описание
somevalue	Указать значение свойства (строка)

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

HTML: <template> тег