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

IT技术 javascript html standards
2021-02-06 17:25:11

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

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

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

6个回答

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

@eyelidless 这是一个很好的论点，我必须同意，即使我宁愿在 Javascript 中正确使用数据结构，我也发现在某些情况下使用 data 属性是合适的。我避免像 Rocketmonkeys 所说的那样使用 jquery。我真的需要停止打扰人们关于微优化的事情。
2021-03-19 17:25:11
我现在倾向于遵循这个解决方案 - 即使它不符合标准。
2021-03-21 17:25:11
我一直避免这种情况，因为它没有验证。但现在我考虑了一下，把所有东西都塞进 class="" 属性（如 jquery 元数据）不一定更好。这种方法在 <HTML5 领域有什么实际的、现实的缺点吗？基本上——现在会出现什么问题？似乎它并不理想，但没有我能想到的副作用。
2021-03-24 17:25:11
@Vitim.us，如果有这样的性能影响，那将是微不足道的。浏览器在这类事情上非常有效；实际应用样式的影响会更大。请记住，类不是为了样式而发明的东西，它们只是像任何其他属性一样的元素数据。任何属性都可以在选择器中使用，所以如果有这样的性能影响，它将适用于data-您添加到元素的任何属性（包括前缀）。
2021-03-25 17:25:11
@Rocketmonkeys 我不确定，但我认为在类属性中使用数据可能会迫使浏览器尝试将未定义的 css 规则应用于元素，这可能会导致一些问题或性能问题。我也不确定。
2021-03-30 17:25:11

自定义属性提供了一种将额外数据传送到客户端的便捷方式。Dojo Toolkit 定期执行此操作，并且已经指出（揭穿 Dojo Toolkit 神话）：

自定义属性一直是有效的 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 不太可能出现任何浏览器错误。

其它你可能感兴趣的问题
上一篇Chrome 中的“未捕获的类型错误：非法调用” 下一篇传递 Javascript 数组 -> PHP