Question

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>

然而，我被撕裂了哪个应该是首选方法。第一种方法更简洁，我猜测，并没有像搜索引擎和屏幕阅读器一样多。相反，第二种选择使得存储大量数据更容易，因此更加通用。它也符合标准。

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

Answer 1

我非常喜欢提出的HTML 5解决方案（data-前缀属性）。编辑：我想补充一点，使用自定义属性可能有更好的例子。例如，自定义应用程序将使用的标准属性中没有模拟的数据（例如，基于不一定用className或id表示的事物的事件处理程序的自定义）。

Answer 2

自定义属性提供了将额外数据传输到客户端的便捷方式。 Dojo Toolkit定期执行此操作，并指出（Debunking Dojo Toolkit Myths）：

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

Answer 3

另一种选择是在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并将其吐出页面的标题部分）。

Answer 4

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

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

并使用title属性。

如果我确实需要，我有时会破坏规范。但很少，只有充分的理由。

编辑：不知道为什么-1，但我指出有时候你认为你需要打破规格，否则你就不会。

Answer 5

为什么不在自定义DTD中声明popup_title属性？这解决了验证问题。我使用每个非标准元素，属性和值执行此操作，并且感谢此验证向我显示了我的代码中的实际问题。这也使得使用此类HTML的浏览器错误变得更少。

Answer 6

您可以将隐藏的输入元素嵌入到锚元素

中

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

然后您可以通过

轻松提取数据

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

Answer 7

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

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

丑陋，它假设你还没有将id标签用于其他东西，但它符合所有浏览器。

Answer 8

在您的示例中，我个人的感觉是跨度路径更合适，因为它符合XHTML规范的标准。但是，我可以看到自定义属性的细分，但我认为它们会增加一些不需要的混淆。

Answer 9

我也一直绞尽脑汁。我喜欢非标准属性的可读性，但我不喜欢它会破坏标准。隐藏的span示例是兼容的，但它不是非常易读。那怎么样：

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

这里的代码非常易读，因为JSON的键/值对表示法。您可以通过查看它来判断这是属于链接的元数据。我在劫持“rel”属性旁边看到的唯一缺陷是，这对于复杂的对象来说会变得混乱。我真的很喜欢上面提到的“数据 - ”前缀属性的想法。当前的浏览器是否支持此功能？

这是另外需要考虑的事情。兼容代码对SEO有多大影响？

HTML标记上的非标准属性。好事？坏事？你的意见？

9 个答案: