为什么我应该在自定义属性前面添加“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 属性（例如 name）冲突，但除此之外，仅编写“example_text”而不是存在问题吗？ “数据示例_文本”？ （它不会验证，但谁在乎呢？）
So any custom data attribute that I use should start with "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>
Will anything bad happen if I just ignore this? I.e.:
<li class="user" name="John Resig" city="Boston"
lang="js" food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
I guess one bad thing is that my custom attributes could conflict with HTML attributes with special meanings (e.g., name), but aside from this, is there a problem with just writing "example_text" instead of "data-example_text"? (It won't validate, but who cares?)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
保留以 data-* 为前缀的自定义属性有几个好处。
它保证在未来的版本中不会与 HTML 扩展发生任何冲突。 HTML5 中引入的一些新属性已经在某种程度上遇到了这个问题，其中现有网站使用具有相同名称的属性，但期望不同且不兼容的自定义行为。 （例如，
input元素上的required属性已知过去在一些流行网站上有过一些冲突）有一个方便的 DOM API，HTMLElement.dataset，用于从脚本访问这些属性。现在大多数浏览器都支持。
它们清楚地表明哪些属性是自定义属性，哪些属性是标准化属性。这不仅有助于验证者允许任何具有 data-* 的属性，同时仍然对其他属性执行有用的错误检查（例如捕获拼写错误），还有助于使源代码的这方面对于阅读它的人（包括人们）来说更加清晰谁可以在原作者之后在网站上工作。
There are several benefit for keeping custom attributes prefixed with data-*.
It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the same name and expecting different and incompatible, custom behaviour. (e.g. the
requiredattribute oninputelements is known to have had some clashes on some popular websites in the past)There is a convenient DOM API, HTMLElement.dataset, for accessing these attributes from scripts. It is now supported in most browsers.
They provide a clear indication of which attributes are custom attributes, and which ones are standardised attributes. This not only helps validators by allowing them to permit any attribute with data-* while still performing useful error checking for other attributes (e.g. to catch typos), it also helps make this aspect of the source code clearer to those reading it, including people who may work on a website after the original author.
根据John Resig</a>，添加这些自定义数据属性的全部目的HTML5 sepcs 的目的是允许在 HTML 中嵌入自定义数据，同时仍然有效。
如果您不关心验证（并且正如您所说，您的自定义属性不会与现有的 HTML 属性（例如
name、id、style 等），那么我想你不必使用data-前缀。但考虑到这对于编写有效的、兼容的代码来说并不是一个巨大的成本，我不明白你为什么不这样做。According to John Resig, the whole purpose of the addition of these custom data attributes to the HTML5 sepcs is to allow to embed custom data in HTML while still being valid.
If you don't care about validation (and, as you said, your custom attributes are not colliding with existing HTML attributes like
name,id,style, etc.), then I guess you don't have to use thedata-prefix. But considering that this is not a huge cost for writing valid, compatible code, I don't see why you wouldn't do it.