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

Question

我有一个奇怪的问题。

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

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

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

是有效的方式。

但是，这种方式完全可以正常工作

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

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

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

非常感谢您的建议。

Answer 1

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

在实践中，浏览器会忽略仅考虑 HTML 的未知属性。然而，他们并没有在 CSS 中忽略它们；[city]在现代浏览器中，属性选择器与元素相匹配。并且它们在 JavaScript 中并没有忽略它们，但是它们的处理方式与一致性属性不同，city它不会成为元素节点的属性，而是成为属性的attributes属性，因此可以通过getAttributeandsetAttribute方法使用。

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

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

Answer 2

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

Javascript 仍然可以找到它。尽管它可能无法使用某些特定于数据的功能。

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

Answer 3

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

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