Manual de Referência HTML

大全 de etiquetas HTML

HTML data-*Atributo

data-* Atributos globais são um tipo de atributo chamado atributo de dados personalizados, que nos permite injetar atributos de dados personalizados em todos os elementos HTML e permitir a troca de dados exclusivos entre HTML e scripts (geralmente JavaScript).

Atributos Globais do HTML

Exemplo Online

Usar data-* Atributo para injetar dados personalizados:

Exemplo

<!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("O tipo da espécie é "　+　animal.innerHTML　+　" é um "　+　animalType　+　".");
}
</script>
</head>
<body>
<h1>Espécie</h1>
<p>Click em uma espécie, veja qual é o tipo dela：</p>
<ul>
　　<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>type="spider">Tarantula<
　　<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>type="spider">Tarantula<　　
　　<li onclick="showDetails(this)" id="tarantula" data-animal-animal/li>type="spider">Tarantula<　　
</ul>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Todos os navegadores principais suportam data-* atributo.

Definição e uso

data-* O atributo é usado para armazenar dados personalizados para aplicativos de página privada.

data-* O atributo pode ser inserido em todos os elementos HTML.

Os dados personalizados permitem que a página tenha uma melhor experiência de interação (sem usar Ajax ou consultar o servidor).

data-* O atributo é composto por duas partes:

O nome do atributo não deve conter letras maiúsculas, em data- depois deve ter pelo menos um caractere.
O atributo pode ser qualquer string

Atenção: Prefixo de atributo personalizado "data"-" será ignorado pelo cliente.

HTML 4.01 e HTML5diferenças entre

data-* O atributo é HTML5 novo.

Sintaxe

<elemento data-*="somevalue">

Valor do atributo

Valor	Descrição
somevalue	Especificar valor de atributo (uma string)

Atributos Globais do HTML

HTML: <template> etiqueta