html5 – 为什么要用“data-”来添加自定义属性?

前端之家收集整理的这篇文章主要介绍了html5 – 为什么要用“data-”来添加自定义属性?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我使用的任何自定义数据属性应该以“data-”开头:
<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello,how are you?</span>
</li>

如果我忽略这个,会有什么不好吗?即:

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello,how are you?</span>
</li>

我想有一件坏事是我的自定义属性可能与具有特殊含义的HTML属性(例如,名称)相冲突,但除此之外,只写“example_text”而不是“data-example_text”有问题吗? (它不会验证,但谁在乎?)

解决方法

保留以data- *为前缀的自定义属性有几个好处.

>它保证在将来的版本中HTML的扩展不会有任何冲突.这已经在一定程度上遇到了HTML5中引入的一些新属性的问题,现有的网站使用同名的属性,并期待不同的和不兼容的自定义行为. (例如,已知在输入元素上所需的属性在过去的一些流行网站上已经有一些冲突)>一旦浏览器支持功能,他们将提供一个更方便的DOM API,用于从脚本访问这些属性.>它们提供了哪些属性自定义属性的明确指示,哪些属性是标准化属性.这不仅可以帮助验证器允许任何带有数据的属性,而且还可以对其他属性执行有用的错误检查(例如捕获打字错误),这也有助于使源代码的这个方面对于读者来说更清楚,包括人谁可以在原作者之后在网站上工作.

猜你在找的HTML5相关文章