如果使用了无效/非标准的HTML属性(用于数据),会发生什么情况



我有一个奇怪的问题。

然而,我想知道当我在html 5上使用无效属性时会发生什么?

例如,如果我想在标签上添加一个attr"City"。

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

是有效的方法。

然而,这种完全可以正常工作

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

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

如果仅用于传递javascrpit的数据,那么我通常只能使用"city"吗??

非常感谢你的建议。

HTML 4.01规范在其关于无效文档的注释中建议,如果浏览器"遇到无法识别的属性,则应忽略整个属性规范(即属性及其值)",并"为通知用户此类错误提供[s]支持"。

在实践中,只要只考虑HTML,浏览器就会忽略未知属性。然而,他们并没有在CSS中忽略它们;像[city]这样的属性选择器与元素匹配。它们在JavaScript中不会忽略它们,但它们与一致属性不同。city不是元素节点的属性,而是attributes属性的属性,因此可以通过getAttributesetAttribute方法使用。

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

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

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

Javascript仍然能够找到它。尽管有一些特定于数据的函数可能无法使用。

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

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

如果您需要使用"city",您可能希望使用XHTML,在XHTML中您可以为自己的元素指定自己的属性。

最新更新