开发者社区> 问答> 正文

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"
这样的定义有什么目的,哪种情况下用到等

求各位大神指导下,谢谢~

展开
收起
杨冬芳 2016-06-16 11:26:52 1826 0
1 条回答
写回答
取消 提交回答
  • IT从业

    问题1

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

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

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

    问题2

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

    问题3

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

    2019-07-17 19:40:37
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载