95

当涉及到标签的非标准属性时，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>

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

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

4

9 回答 9

52

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

于 2008-10-16T17:00:38.653 回答
28

自定义属性提供了一种将额外数据传送到客户端的便捷方式。Dojo Toolkit 经常这样做，并且已经指出（Debunking Dojo Toolkit Myths）指出：

自定义属性一直是有效的 HTML，它们只是在针对 DTD 进行测试时不验证。[...] HTML 规范规定，任何无法识别的属性都将被用户代理中的 HTML 渲染引擎忽略，Dojo 可以选择性地利用这一点来提高开发的便利性。

于 2009-09-12T22:25:11.030 回答
9

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

于 2009-05-19T07:01:21.393 回答
4

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

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

并使用标题属性。

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

编辑：不知道为什么是-1，但我指出有时你认为你需要打破规范，而你却不这样做。

于 2009-05-19T07:13:09.797 回答
4

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

于 2011-02-10T14:05:20.667 回答
3

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

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

然后您可以轻松地通过以下方式提取数据

$('#anchor_id .articleid').val()
于 2010-11-30T11:04:06.903 回答
0

最后我的解决方案是在 id 标签中隐藏额外的数据，用某种分隔符分隔（一个下划线是空格，两个是那个 arg 的结尾），第二个 arg 有一个 id：

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

丑陋，它假设您还没有将 id 标签用于其他用途，但它在每个浏览器中都是兼容的。

于 2012-10-11T14:23:48.343 回答
-1

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

于 2008-10-16T17:01:13.160 回答
-1

我也一直在为此绞尽脑汁。我喜欢非标准属性的可读性，但我不喜欢它会破坏标准。隐藏的 span 示例是兼容的，但它的可读性不是很高。那这个呢：

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

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

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

于 2009-08-13T18:03:39.163 回答