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

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

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

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

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

<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>

但是，我对于应该使用哪种方法感到不满意。第一种方法更简洁，我猜想，它不会像搜索引擎和屏幕阅读器那样费劲。相反，第二种选择使存储大量数据更加容易，因此用途更广。它也符合标准。

我很好奇这些社区的想法。您如何处理这种情况？第一种方法的简单性是否超过潜在的缺点（如果有）？

我是提议的HTML 5解决方案（带data-前缀的属性）的忠实拥护者。编辑：我想补充一点，可能有更好的示例来使用自定义属性。例如，自定义应用程序将使用的数据在标准属性中没有类似物（例如，基于不一定以className或id表示的内容对事件处理程序进行自定义）。

定制属性提供了一种方便的方式来将额外的数据传送到客户端。Dojo Toolkit定期执行此操作，并且指出了（Debunking Dojo Toolkit Myths）指出：

自定义属性一直是有效的HTML，它们在针对DTD进行测试时只是无法验证。[...] HTML规范指出，用户代理中的HTML呈现引擎将忽略任何未识别的属性，Dojo可以选择利用此优势来提高开发的便利性。

另一种选择是在Javascript中定义如下内容：

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

然后，您可以稍后在Javascript代码中使用它，假设您的链接具有与该哈希表中的ID对应的ID。

它没有其他两种方法的缺点：没有非标准属性，也没有丑陋的隐藏范围。

缺点是，对于像您的示例这样简单的事情，它可能有点过大。但是对于更复杂的场景，如果您要传递更多的数据，这是一个不错的选择。特别是考虑到数据是作为JSON传递的，因此您可以轻松传递复杂的对象。

此外，您还可以将数据与格式分开保存，这对于可维护性而言是一件好事。

您甚至可以拥有类似这样的东西（其他方法实际上无法做到）：

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

而且，由于您很可能使用了某些服务器端编程语言，因此该哈希表应微不足道以动态生成（只需将其序列化为JSON并将其吐到页面的页眉部分）。

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

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

并使用标题属性。

有时，如果我真的需要它，我会违反规范。但是很少，而且只有有充分的理由。

编辑：不确定为什么为-1，但我指出有时您认为需要打破规格，而不必这样做。

为什么不在自定义DTD中声明popup_title属性？这解决了验证问题。我对每个非标准元素，属性和值都执行此操作，感谢此验证向我展示了我的代码仅存在的真正问题。这也使使用此类HTML的任何浏览器错误都不太可能发生。

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

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

然后，您可以轻松地通过

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

最后，我的解决方案是在ID标记中隐藏其他数据，这些标记由某种定界符分隔（一个下划线是一个空格，两个是该arg的结尾），第二个arg有一个id：

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

丑陋的，它假定您尚未将id标记用于其他用途，但它在所有浏览器中均兼容。

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

我也一直为此绞尽脑汁。我喜欢非标准属性的可读性，但我不喜欢它会破坏标准。隐藏的跨度示例是合规的，但可读性很差。那这个呢：

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

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

这是您需要考虑的其他事项。合规代码对SEO有多大影响？