我们知道在html标签上通用的属性有以下这些：
1.title
2.class
3.id
4.name
5.data-属性名
6.style
这些东西大部分都有其各自的效用，这里就不一一多说。
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
data-自定义属性的读写方式有两种：
1.直接写在标签里面 <div data-name="123"></div>
2.通过javascript设置 div.dataset.name="123";这里注意一个问题，不要写成是div.dataset.data-name="123";或者div.dataset.dataName="123";(这里是一个小坑，注意点，然后dataset有兼容性问题)
Internet Explorer 11+
Chrome 8+
Firefox 6.0+
Opera 11.10+
Safari 6+
以上就是浏览器的兼容性的列表
当然这里也可以用getattribute来获取，或者setattribute来设置（div.setattribute("data-name","123");)这里可以把dataset看成是attribute的 一个子集。
当然data-属性名也可以用css3选择器获取来[data-name]来选中，然后添加样式.
用jquery来获取data属性或者设置data属性的话，那就更加简单了，直接$("div").data("name);就可以获取了，当然这里面也可以用json来处理。
假如<div data-name='{"game":"123","age":"16"}'></div>
那这里面就是$("div").data("name").game或者$("div").data("name").age来或者属性，很方便。这里注意一点外面不要用双引号，用单引号。