html里标签里属性相关的困惑

Question

html<div id="banner" class="slide-1" coor-rate="0.1" coor="default-banner" role="banner" data-banner="false">
</div>

对于上面的代码中，有几个疑惑：

1. data开头的属性，经常看到data-xxx这样的定义
   比如上面的：data-banner="false"
   这样的定义有什么目的，哪种情况下用到等

2. role
   定义这个起到什么作用？

3. 完全自定义的属性
   比如：coor-rate="0.1" coor="default-banner"
   这样的定义有什么目的，哪种情况下用到等

求各位大神指导下，谢谢～

Answer 1

问题１

　data开头的属性一般是用于控件的数据绑定．避免对dom元素进行自定义属性的数据绑定　造成不必要的阅读障碍，用data-*来进行额外的属性定义．　这样的定义一般是个js使用．这里举一个图片懒加载的例子加以说明

<img src="default.png" data-src="xxxx/xx.png">

当该元素没有显示在用户界面时采用默认图片，一旦出现在用户视野，就将data-src的地址替换src．　这样是不是很方便？　比用id来标示寻找元素　在来绑定数据更简单？

问题２

role属于html5属性，具体可参考http://www.w3.org/TR/wai-aria/host_languages#host_general_role
主要用来　定义　dom元素角色．　从而便于写css时使用选择器进行选择，　也能在一定程度上提升代码可读性

问题3

３．完全自定义属性．　这种属性的定义，在我遇到的情况下　一般是服务于js的．用来针对性进行dom元素修改．最直观的例子就是angualr里面的directive

Answer 2

data-*

用来储存自定义属性的数据，能够被页面的javascript使用，创建更加好的用户体验！

role

描述一个非标准的标签的实际用途
比如题主给的代码role="banner"就是用来描述这是一个广告之类的

Answer 3

1. data开头的属性一般表示要存数据到元素上,而且data-＊开头的在使用jquery时有快捷处理，比如data-banner="false"可以通过$('selector').data().banner或$('selector').data('banner')直接获取到它的值。
2. role我猜是和bootstrap的role='form', role='dropdown'这类的差不多，只是声明这属于哪个组件，还有可能会作为选择器在css里使用element[role=banner]这样用。
3. 这个看起来就是用户想要1和2的效果，然后自己定义的属性而已，没必要死板到那种程度，遵循哪样简单就哪样做的原则就好了。