Manual de Referencia HTML

Completo de HTML etiquetas

HTML data-*Atributo

data-* Las propiedades globales son un tipo de propiedades conocidas como atributos de datos personalizados, que nos permiten insertar atributos de datos personalizados en todos los elementos HTML y permitir la intercambio de datos especializados entre HTML y scripts (generalmente JavaScript).

Atributos globales de HTML

Ejemplo en línea

Uso de data-* Atributo para insertar datos personalizados:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("El "　+　animal.innerHTML　+　" es un "　+　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>

Prueba aquí ‹/›

Compatibilidad con navegadores

IEFirefoxOperaChromeSafari

Todos los navegadores principales admiten data-* propiedad.

Definición y uso

data-* La propiedad se utiliza para almacenar datos personalizados de la página después de la aplicación.

data-* La propiedad se puede insertar en todos los elementos HTML.

Los datos personalizados permiten que la página tenga una mejor experiencia de interacción (sin necesidad de usar Ajax o ir al servidor para buscar datos).

data-* La propiedad se compone de dos partes:

El nombre de la propiedad no debe contener letras mayúsculas, en data- debe haber al menos un carácter después.
Esta propiedad puede ser cualquier cadena

Nota: Prefijo de propiedad personalizada "data-" será ignorado por el cliente.

HTML 4.01 y HTML5las diferencias entre

data-* La propiedad es HTML5 nuevo.

Sintaxis

<elemento data-*="somevalue">

Valor de la propiedad

Valor	Descripción
somevalue	Especificar el valor de la propiedad (una cadena)

Atributos globales de HTML

HTML: <template> etiqueta