使用data-*属性去嵌入用户自定义数据
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>Species</h1>
<p>Click on a species to see what type it is:</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>
data属性的定义和使用
HTML5中的data-*属性用于存储用于当前页面或应用的用户自定义私有数据，使得我们拥有在HTML元素中嵌入自定义数据的能力，自定义数据能够被用于JS页面去创建吸引人的用户体验而使用ajax或数据库查询。
data-*包含两部分：
第一部分是属性名，且属性名不应该包括大写字母，在"data-"前缀之后必须是至少一个字符长度。
第二部分是属性值，可以是任意字母。
Note: 带有"data-"自定义前缀的的属性将会被浏览器忽略。
浏览器支持
下图中列出的浏览器的第一个版本可以完整支持data-*属性。
以下就是青锋建站给大家总结的HTML5中data-*属性的使用方法。青锋建站，提供专业的高品质网站制作服务，包括H5网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/html-data.html
