扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要为大家展示了“html5如何使用data-*属性”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html5如何使用data-*属性”这篇文章吧。
十年专注成都网站制作，成都定制网页设计，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都定制网页设计,高端网页制作,对白乌鱼等多个方面，拥有丰富的网站设计经验。
实例
使用 data-* 属性来嵌入自定义数据：
浏览器支持
IE、Firefox、Chrome、Safari、Opera
所有主流浏览器都支持 data-* 属性。
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。
HTML 4.01 与 HTML5 之间的差异
data-* 属性是 HTML5 中的新属性。
语法
属性值
| 值 | 描述 |
| somevalue | 规定属性的值（以字符串）。 |
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
读写方式
data-*有两种设置方式，可以直接在HTML元素标签上书写