一个 HTML 元素可以两次具有相同的属性吗？

Question

我正在考虑编写代码来生成可能具有重复属性的 HTML 标记，如下所示：

 <div data-foo="bar" class="some-class" data-foo="baz">

这是合法的 HTML 吗？ data-foo 之一是否优先于另一个值？我可以依靠半现代浏览器（IE >= 9）来解析它而不会窒息吗？

还是我要在这里做一些非常愚蠢的事情？

原文由 MW. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在一个元素中两次使用相同的属性名称是无效的。对此的权威参考有些复杂，因为旧的 HTML 版本名义上是基于 SGML 的，而对 SGML 标准的规范性参考暗示了该限制。在 HTML5 PR 中，第 8.1.2.3 节“ 属性”明确指出：“在同一个开始标记上绝不能有两个或更多属性，它们的名称是彼此不区分大小写的 ASCII 匹配项。”

在实践中发生的是后一个属性被忽略了。好吧，未来的浏览器可能会不这样做。在 DOM 中，属性显示为元素节点的属性以及 attributes 对象，因此没有自然的方式来存储两个值。

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

它在技术上无效，但每个浏览器都会忽略 HTML 文档中的重复属性并使用第一个值（ data-foo="bar" 在您的情况下）。

在标记中两次使用相同的属性名称 被 视为内部解析错误。如果您担心的话，这会导致您的文档无法通过验证。但是，重要的是要了解 HTML 5 定义了预期的结果，即使是在出现“解析错误”的情况下也是如此。 允许 解析器在遇到错误时停止，但如果选择不停止，则 必须 产生规范中描述的特定结果。实际上，没有浏览器在 HTML 文档中遇到错误时选择停止（XML/XHTML 是另一回事），因此所有现代浏览器都会成功且一致地处理这种情况。

WHATWG HTML 规范在 第 12.2.4.33 节 “属性名称状态” 中描述了这种情况：

当用户代理离开属性名称状态时（如果合适的话，在发出标记令牌之前），必须将完整的属性名称与同一令牌上的其他属性进行比较； 如果令牌上已经有一个名称完全相同的属性，那么这是一个解析错误，必须删除新属性 以及与之关联的值（如果有）。

另请参阅 第 12.2 节 “解析 HTML 文档” 开头对“解析错误”的描述：

解析算法中的某些点被称为解析错误。解析错误的错误处理是明确定义的（这是本规范中描述的处理规则），但是 用户代理在解析 HTML 文档时，可能会在遇到他们不希望的第一个解析错误时中止解析器应用本规范中描述的规则。

原文由 Jeremy 发布，翻译遵循 CC BY-SA 3.0 许可协议