Html 为什么我要在我的自定义属性前面加上"；数据-“；？

因此，我使用的任何自定义数据属性都应该以“data-”开头：

约翰说：你好，你好吗？

如果我忽略这一点，会发生什么坏事吗？即：

<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

），但除此之外，仅仅编写“示例文本”而不是“数据示例文本”是否有问题？（它不会验证，但谁在乎呢？

根据，将这些自定义数据属性添加到HTML5 SEPC的全部目的是允许在仍然有效的情况下将自定义数据嵌入HTML中

---

如果您不关心验证（并且，正如您所说，您的自定义属性不会与现有的HTML属性冲突，如

name

、

id

、

style

，等等），那么我想您不必使用

数据-

前缀。但是考虑到编写有效的、兼容的代码并不是一个巨大的成本，我不明白您为什么不这么做。

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

它保证在将来的版本中不会与HTML的扩展发生任何冲突。HTML5中引入的一些新属性在某种程度上已经遇到了这个问题，现有站点使用的属性名称相同，并且期望不同且不兼容的自定义行为。（例如，

input

元素上的

required

属性已知在过去的一些流行网站上有一些冲突）

有一个方便的DOM API，用于从脚本访问这些属性。现在是

它们清楚地指示了哪些属性是自定义属性，哪些属性是标准化属性。这不仅有助于验证程序允许任何带有数据的属性-*同时仍对其他属性执行有用的错误检查（例如，捕捉打字错误），还有助于使阅读源代码的人（包括可能在原作者之后在网站上工作的人）更清楚地了解源代码的这一方面

---

我想我的问题是，我从编写验证代码中得到了什么价值？（考虑到重复输入无意义的“data-”前缀并不是没有成本的）首先，您可以使用验证器来发现标记中的问题。当你在一个页面上工作时，这是一个巨大的胜利，因为在一个长页面上很容易失去一个结束div或其他东西。如果你定期确保你的标记是有效的，你就更有可能在不可避免的错误出现后很快找到它们。我不会屏住呼吸等待（2），但（1）和（3）是好的点你会想到浏览器引入新功能的日子很慢，而且很少。现在大多数浏览器都支持

数据集

元素属性，以简化对

数据-*

属性的访问：lang属性是用于普通口语的默认html属性。在当前上下文中使用它会与它的默认行为冲突，这是为什么应该使用data-*前缀的一个完美例子。数据属性有一个主要缺点：您无法轻松看到JavaScript为元素设置的值，除非您从JavaScript获取这些值，否则它不会出现在DOM中。这就是为什么我总是使用较短的形式，即使它有点冒险

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