Javascript HTML标记上的非标准属性。好东西？坏事？你的想法？

当涉及到标签上的非标准属性时，HTML（或者可能只是XHTML？）是相对严格的。如果它们不是规范的一部分，那么您的代码将被视为不符合规范

但是，非标准属性对于将元数据传递给Javascript非常有用。例如，如果假定链接显示弹出窗口，则可以在属性中设置弹出窗口的名称：

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

或者，您可以将弹出窗口的标题存储在隐藏元素中，如span：

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

.popup.title{display:none；}

然而，对于哪一种方法应该是首选方法，我感到困惑。第一种方法更简洁，我猜，不会对搜索引擎和屏幕阅读器造成太大的影响。相反，第二个选项使存储大量数据更容易，因此更通用。它也符合标准

---

我很好奇这是什么想法。你如何处理这种情况？第一种方法的简单性是否超过了潜在的缺点（如果有的话）？

我非常喜欢提议的HTML5解决方案（

数据-

前缀属性）。编辑：我要补充的是，对于自定义属性的使用，可能有更好的例子。例如，自定义应用程序将使用的数据在标准属性中没有类似的属性（例如，基于不一定用类名或id表示的内容的事件处理程序自定义）。

在您的示例中，我个人的感觉是span route更合适，因为它符合XHTML规范的标准。但是，我可以看到自定义属性的参数，但我认为它们增加了不必要的混乱程度。

另一个选项是在Javascript中定义如下内容：

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

---

而且，由于您很可能使用某些服务器端编程语言，因此动态生成此哈希表应该很简单（只需将其序列化为JSON并将其放入页面的页眉部分即可）。

在这种情况下，最佳解决方案是

<a href="#" alt="" title="Title of My Pop-up">click</a>

并使用title属性

如果我真的需要的话，有时我会破坏规范。但很少，而且只有很好的理由

---

编辑：不知道为什么是-1，但我指出，有时你认为你需要打破规范，而你不需要。我也一直在绞尽脑汁。我喜欢非标准属性的可读性，但我不喜欢它会打破标准。隐藏跨度示例是兼容的，但可读性不强。那么这个呢：

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

---

这里的代码非常可读，因为JSON的键/值对表示法。只要看一下，就可以知道这是属于链接的元数据。除了劫持“rel”属性之外，我能看到的唯一缺陷是，对于复杂对象，这会变得混乱。我真的很喜欢上面提到的“data-”前缀属性。当前的浏览器支持这个吗

---

还有一些事情需要考虑。不合规代码对搜索引擎优化有多大影响？

自定义属性提供了一种方便的方式，可以将额外数据传送到客户端。Dojo Toolkit经常这样做，有人指出：

自定义属性一直是 有效的HTML，他们只是不验证 当针对DTD进行测试时。[…] HTML规范声明 未识别的属性将被删除 被HTML呈现引擎忽略 在用户代理和Dojo中（可选） 利用这一点来改进 易于开发

---

可以在锚元素内嵌套隐藏的输入元素

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

---

为什么不在自定义DTD中声明popup_title属性？这就解决了验证的问题。我对每一个非标准元素、属性和值都这样做，感谢这个验证只向我展示了代码中真正的问题。这也减少了此类HTML出现任何浏览器错误的可能性。

我的最终解决方案是在id标记中隐藏由某种分隔符分隔的附加数据（一个下划线是空格，两个是该参数的结尾），第二个参数有一个id：

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

---

很难看，它假设您没有为其他内容使用id标记，但它在每个浏览器中都是兼容的。

这些被称为“expando”属性-如果您想了解更多有关它们的信息。好的，expando属性是在运行时使用javascript设置的。它们本身并不是XHTML的一部分，我现在倾向于采用这种解决方案——尽管它不符合标准。我一直避免这样做，因为它不会验证。但是现在我想起来了，把所有东西都塞进class=”“属性（比如jquery元数据）并不一定更好。@Rocketmonkeys中的这个方法是否有任何实际的、现实的缺点我不确定，但我认为使用class属性中的数据可能会迫使浏览器尝试将未定义的css规则应用于元素，这可能会导致一些问题或性能问题。同样，我也不确定。@Vitim.us，如果有这样的性能冲击，它将是微不足道的。浏览器在这方面相当有效；实际应用样式的影响会更大。请记住，类不是为了样式而发明的，它们只是元素数据，就像其他属性一样。任何属性都可以在选择器中使用，因此如果性能受到影响，它将应用于您添加到元素中的任何属性（包括

数据-

前缀）。@这是一个很好的参数，我必须同意，即使我在Javascript中正确地使用了数据结构，我还是发现在某些情况下使用数据属性是合适的。我像rocketmonkeys说的那样避免使用jquery。我真的不需要再为微观优化而困扰人们了。不过，SPAN路线是对标签的滥用。它可能符合验证标准，但不符合语义标准

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

$('#anchor_id .articleid').val()

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>