HTML5中的data-属性主要用于存储页面中的私有自定义数据，目的是为了创建更好的用户体验
HTML中新增了许多新的属性，今天将要介绍HTML5中的data-* 属性，希望对大家有所帮助。
【推荐课程：HTML5课程】
data-* 属性的含义
data-* 属性用于存储页面或应用程序的私有自定义数据是所有HTML元素上自定义data属性，它存储的数据能够被JavaScript所利用，可以创建更好的用户体验。
data-* 属性包含两个部分分别为：
属性名：在属性名中不能包含任何大写字母，而且在前缀“data-”之后必须有一个字符，不能为空。
属性值：属性值可以是任何字符串。
<element data-*="somevalue">
例
data-animal-type="动物类"
如何使用data-*属性
由于自定义数据属性是有效的HTML 5，因此可以在支持HTML 5文档类型的任何浏览器中使用它们：
我们可以设置存储在JavaScript动画中可能需要的元素的初始高度或不透明度，也可设置通过JavaScript加载的Flash影片的参数以及存储自定义网络分析标记数据等等。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
}
li{
width:50px;
height:50px;
background-color: pink;
text-align: center;
margin-left: 10px;
line-height: 50px;
float:left;
}
</style>
</head>
<body>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
console.log(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
<p>点击li时显示其类别</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="动物类">小猫咪</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="水果类">苹果</li>
</ul>
</body>
</html>
效果图：
点击之前
点击之后
注意
数据属性虽然灵活，但是数据属性并不适用于所有问题比如存在更适合存储数据的现有属性或元素，则不应使用数据属性。例如，日期/时间数据应该以语义方式显示，而不是存储在自定义数据属性中，不应该将特定的数据属性与任何样式的CSS相联系。另外随着数据属性的使用越来越广泛，命名约定中的冲突可能会变得越来越大，所以在命名时要注意尽量避免与插件或者公共属性名混淆
总结：以上就是本篇文章的全部内容了，希望对大家学习HTML5有所帮助。
以上就是如何使用HTML5中的data-*属性的详细内容，更多请关注爱上源码网其它相关文章！
- 上一篇：如何打开HTML文件
- 下一篇：url是什么意思
相关文章
相关视频
- html5的自定义data-*属性与jquery的…
- data-*属性的作用_html/css_WEB-…
- H5中data-*属性使用方法汇总
- 如何使用HTML5中的data-*属性
- 自定义数据类型
本文有爱上源码下载完入驻作者发布，如果对您版权造成侵害，可以联系本站站长管理进行维权删除，本站收到维权24小时内进行处理，谢谢您关注23ym.cn！
本站分享大量程序员技术文章以及对编程开发的初级入门教程，包括图文讲解笔记和高清视频下载~
爱上源码下载网 » 如何使用HTML5中的data-*属性
常见问题FAQ
- 从网站下载的源码都有安装教程么？不会安装怎么办？
- 本站发布的网站源码和模板资源大部分在压缩包内都有教程，如您不会安装可以联系本站在线技术进行付费安装。
- 爱上源码的所有源码都是亲测能正常运行的么？
- 我手中的优质资源可以在你这换钱或者VIP么？
- 爱上源码除了资源分享还有其他业务没？
