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

对于标签上的非标准属性，HTML（或者也许只是XHTML？）相对比较严格。如果它们不是规范的一部分，那么你的代码被认为是不合规的。HTML标记的非标准属性。好东西？坏事？你的想法？

非标准属性对于将元数据传递给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>

我然而撕裂哪个应该是一个优选的方法。第一种方法更简洁，而且我猜测，它不会像搜索引擎和屏幕阅读器那么多。相反，第二种选择使得存储大量数据变得更容易，因此更通用。它也符合标准。

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

来源

2008-10-16 dave mankoff

这些被称为“的expando”属性 - 如果你想要去了解他们的情况。 – 2008-10-16 17:01:12

据我所知，为Expando属性在运行时使用JavaScript设置。他们不是XHTML本身的一部分 – 2009-06-03 20:59:48

我对建议的HTML 5解决方案（data-前缀属性）很感兴趣。编辑：我会补充说，使用自定义属性可能有更好的例子。例如，自定义应用程序将使用的数据在标准属性中没有模拟（例如，基于某些不能用className或id表示的事件处理程序的定制）。

来源

2008-10-16 17:00:38 eyelidlessness

我倾向于现在遵循此解决方案 - 即使它不符合标准。 – 2008-10-16 17:04:54

我一直避免这个，因为它不验证。但现在我想到了，填充class =“”属性（如jQuery元数据）中的所有内容并不一定更好。 rocketmonkeys 2011-05-13 21:50:19

@Rocketmonkeys我不确定，但我认为在类属性中使用数据可能会强制浏览器尝试将未定义的CSS规则应用于元素，这可能会导致一些问题或性能问题。我再次不确定。 – 2011-12-19 05:04:38

-1

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

来源

2008-10-16 17:01:13

另一种选择是在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-19 07:01:21 ibz

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

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

并使用title属性。

有时我打破了规范，如果我真的需要它。但很少，只有很好的理由。

编辑：不知道为什么-1，但我指出，有时你认为你需要打破规范，当你不知道。

来源

2009-05-19 07:13:09 jskulski

-1

我已经费尽我的大脑了这一点。我喜欢非标准属性的可读性，但我不喜欢它会打破标准。隐藏的span范例是符合规范的，但它不太可读。这个怎么样：

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

这里的代码是非常可读的，因为JSON的键/值对表示法。你可以通过查看它来知道这是属于链接的元数据。除了劫持“rel”属性之外，我能看到的唯一缺陷是这会让复杂对象变得混乱。我非常喜欢上面提到的“数据”前缀属性的想法。目前的浏览器支持吗？

这里是想别的事情。不合规的代码对SEO有多大的影响？

来源

2009-08-13 18:03:39

自定义属性提供了一个便捷的方式来额外的数据携带到客户端。 Dojo Toolkit的定期这样做的，它已经指出（Debunking Dojo Toolkit Myths）指出：

自定义属性一直有效的HTML，他们只是在对一个DTD测试不验证。 HTML规范指出，任何属性未被识别为在用户代理中被HTML渲染引擎忽略，而Dojo可选利用此优势来改进易于开发。

来源

2009-09-12 22:25:11 Maine

你可以窝隐藏输入元素中的锚元素

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

然后你就可以很容易地通过

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

来源

2010-11-30 11:04:06

拉出来的数据为什么不宣布在自定义DTD的popup_title属性？这解决了验证问题。我用每个非标准的元素，属性和值来做这件事，并且感谢这个验证，显示出我的代码只有真正的问题。这使得这种HTML的浏览器错误更少。

来源

2011-02-10 14:05:20 Marquee

我到底解决方案是隐藏在通过某种定界符的分离的ID标签的附加数据（一个下划线是一个空间，二是arg的）结束时，所述第二ARG有一个id：

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

丑陋，它假定你尚未使用ID标签别的东西，但它跨越每一个浏览器兼容。

来源

2012-10-11 14:23:48

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

回答

相关问题