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"
这样的定义有什么目的，哪种情况下用到等
求各位大神指导下，谢谢～
写回答
-
IT从业问题１
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
2019-07-17 19:40:37赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
