如果使用无效/非标准HTML属性（对于数据）会发生什么？

Question

我有一个奇怪的问题。

但是，我想知道当我在html 5上使用无效属性时会发生什么？

例如，如果我想在标签上添加attr'City'。

<div data-city="etc"></div> 

是有效的方式。

然而，用这种方式完美地工作

<div city="etc"></div> 

我想知道我不应该使用'city'代替'data-city'的结果是什么？

如果仅用于传递javascrpit的数据，我一般只能使用“城市”吗？

非常感谢你的建议。

Answer 1

HTML 4.01规范在其Notes on invalid documents中建议，如果浏览器“遇到它无法识别的属性，则应忽略整个属性规范（即属性及其值）”和“提供” [s]支持通知用户此类错误“。

实际上，只要考虑HTML，浏览器就会忽略未知属性。但是，他们不会在CSS中忽略它们;在现代浏览器中，像[city]这样的属性选择器与元素匹配。并且他们不会在JavaScript中忽略它们，但它们与符合属性的区别对待city不会成为元素节点的属性，但它会成为attributes属性的属性，因此它可以是通过getAttribute和setAttribute方法使用。

此类处理违反了HTML 4.01规范，并且无法保证它会在所有浏览器上发生。 HTML5草案似乎没有解决这个问题：它们指定了处理解析错误和过时功能的规则，但没有指定未定义的属性。

此外，有些日子某些未来的规范或某些浏览器可能会开始将city识别为属性名称，可能会以与您的想法严重冲突的方式。使用一个神秘的名字可能会使这种冲突的可能性非常小。但使用data-city可以避免此问题，因为data-*属性适用于特定于站点的扩展，并且保证永远不会与任何标准属性冲突。

Answer 2

唯一会发生的事情是它不会验证。

Javascript仍然可以找到它。虽然有一些数据特定的功能可能无法使用。

证明：http://jsbin.com/ujusel/1/edit

Answer 3

不幸的是，这是不正确的。但是，所有（现代）浏览器都可以使用它（只要能够显示它并将其保存在DOM中），因为它们努力与所有（甚至是坏的）HTML代码兼容，但它不会是真属性。您的代码不会验证为真正的W3规范HTML 5代码，但它仍然有用。

如果您需要使用“city”，您可能需要使用XHTML，您可以在其中为自己的元素指定自己的属性。