在HTML元素中添加额外属性是一种不好的做法吗？

Question

在HTML元素中添加额外属性是一种不好的做法吗？

18

有时候我会给我的一些控件添加属性，比如：

<a href id="myLlink" isClimber="True">Chris Sharma</a>

我知道这不是一个有效的html，但在某些情况下它对我有帮助。

这算不上一个好习惯吗？我的一个朋友说在Intranet环境下还好，但在互联网上可能会不被搜索引擎友好地处理。

如果这不是一个好的做法，那什么才是最佳实践呢？

谢谢

- pencilCake

6个回答

9

是的。这被认为是一种不好的做法。如果你的HTML版本是4.0，它将无法成功验证。相反，应该添加一个类，如下所示：

<a href id="myLlink" class="climber" >...</a>

请记住，您可以拥有多个类：

<a href id="myLlink" class="climber girl pretty" >...</a>

您可以使用CSS或JQuery根据这些类选择内容，并根据组合有选择地覆盖样式：

a.climber             { color: brown; }
a.climber.girl        { color: red; }
a.climber.girl.pretty { color: pink; }

- Dave Markle

1

如果我引用一个甚至不存在的类，HTML是否能够成功验证？ - pencilCake

1

是的，这就是它的美妙之处。类不必存在于您的CSS中，HTML也可以有效。所以很酷的事情是...您可以使用类标记元素，以便可以在JQuery上对元素执行函数。Visual Studio可能会在您键入时在类名下方显示“红色波浪线”，但这是“误报”-完全合法。 - Dave Markle

1

如果额外的属性是数字，会怎样呢？<div class="button" isClimber="True" rank="22">Chris Sharma</div> - zidarsk8

1

@zidarsk8: 在这种情况下，HTML 定义了 data-XXX 属性 -- 你可以使用 <div class="button" data-isClimber="True" data-rank="22">，但是我建议使用多个类和一个数据元素，因为根据数据元素来设置样式是不可取的（而且会导致标记变得更长）：<div class="button climber" data-rank="22">（再说，如果你真的想要一个按钮，为什么不直接使用 <input type='button' class='climber' data-rank='22'> 呢？ - Dave Markle

感谢 @DaveMarkle，是的，那个按钮只是一个简单的例子，用来表达我的观点。还有，谢谢你提供的 data- 提示，这正是我一直在寻找的。 - zidarsk8

3

这不是最好的做法，也不是好的做法。

我猜你需要它来处理一些JavaScript。通常情况下，我会通过添加自定义的“class”属性来解决问题，并在前面加上‘js’前缀。

另一种解决方案是使用jQuery的存储数据/检索数据功能，或者任何其他框架的等效功能，这意味着在生成的HTML中遍布着echo。

- Clement Herreman

1

我喜欢匈牙利命名法的想法。我认为它对团队中的CSS开发人员很有帮助，可以避免混淆。 - pencilCake

精彩的答案 + 精彩的评论。个人认为命名规范非常重要，这种方法提供了可读性和无需考虑文档类型或浏览器的便利。 - Oliver M Grech

2

这是无效的XHTML，这是一件坏事 - 主要是因为您不能使用有效的来展示它;) 然而，每个主流浏览器和搜索引擎都可以快乐地忽略额外的属性。您可以添加一个额外的命名空间使您的XHTML再次有效。

<html xmlns:my="http://example.com">
  <!-- SNIP -->
  <a href id="myLlink" my:isClimber="True">Chris Sharma</a>
  <!-- SNIP -->
</html>

这是完全有效的XHTML。然而，W3C验证器仍将拒绝验证它（我认为）。这是他们XML解析器的缺陷。对于这样不支持命名空间的解析器，my:isClimber仍将被视为isClimber。但您现在可以放心，因为您知道它是有效的XML，最终这才是重要的，不是吗;)

- sfussenegger

0

使用jQuery，

存储：$('#element_id').data('extra_tag', 'extra_info');

检索：$('#element_id').data('extra_tag');

这也发布在[https://dev59.com/jnRC5IYBdhLWcg3wCMg6#16985773][1]

[1]: 如何为某些HTML标签存储任意数据

- user2458978

-2

我认为这并不是什么坏习惯，它确实非常方便，也是在XML环境中可以做到的。更重要的是你在自定义属性中保存的信息的性质以及它们在你的代码中的使用方式。

更好的替代方式是采用不同的数据保存方式，例如使用jQuery的data()功能。

- danspants

但是，如果有人阅读页面的标记，他将不会对这样的数据有任何线索，直到他检查JavaScript代码。 :( - pencilCake

@burak ozdogan - 但这正是适当的文档所在 :) - danspants

2

这是不良的做法，因为它不具备未来性。如果您将一个名为“foo”的属性添加到您的元素中，而HTML规范定义了一个全新的“foo”属性，其预期用途与您的实现完全不同，则可能会出现问题。新的HTML5 data-*属性存在的目的就是解决这个问题，因为它们将被浏览器/机器忽略。 - akamike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rahul · Accepted Answer

如果您使用HTML5 doctype，则可以添加有效的数据属性。因此，以下内容将是有效的。

<a href id="myLlink" data-isClimber="True">Chris Sharma</a>