HTML 参考手册

HTML 标签大全

HTML data-*属性

data-* 全局属性 是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。

HTML 全局属性

在线示例

使用 data-* 属性来嵌入自定义数据:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>基础教程(niaoge.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 新增的。

语法

<element data-*="somevalue">

属性值

描述
somevalue指定属性值 (一个字符串)


HTML 全局属性