html - 为什么我应该在我的自定义属性前加上 "data-"？

Question

所以我使用的任何自定义数据属性都应该以“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”是否存在问题“数据示例文本”？ (它不会验证，但谁在乎呢？)

Answer 1

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

1. 它保证在未来的版本中不会与 HTML 的扩展有任何冲突。 HTML5 中引入的一些新属性已经在某种程度上遇到了这个问题，其中现有站点使用具有相同名称的属性并期望不同且不兼容的自定义行为。 (例如，众所周知，input 元素上的 required 属性在过去曾在一些流行网站上发生过一些冲突)

2. 有一个方便的 DOM API，HTMLElement.dataset , 用于从脚本访问这些属性。现在是supported in most browsers .

3. 它们清楚地表明哪些属性是自定义属性，哪些是标准化属性。这不仅有助于验证器允许它们允许带有 data-* 的任何属性，同时仍然对其他属性执行有用的错误检查(例如捕获拼写错误)，它还有助于使阅读源代码的人(包括人们)更清楚地了解源代码的这一方面谁可以在原作者之后在网站上工作。