代码之家 › 专栏 › 技术社区 › dave mankoff

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

standards html javascript

dave mankoff · 技术社区 · 17 年前

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

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

我很好奇这是什么想法。你如何处理这种情况?第一种方法的简单性是否超过了潜在的缺点(如果有)?

9 回复 | 直到 17 年前

eyelidlessness 17 年前

我是提议的HTML5解决方案的忠实粉丝( data- 前缀属性)。编辑:我要补充的是,对于自定义属性的使用,可能有更好的例子。例如,自定义应用程序将使用的数据在标准属性中没有类似属性(例如,基于不一定用类名或id表示的内容的事件处理程序自定义)。

Maine 16 年前

Debunking Dojo Toolkit Myths )指出:

自定义属性一直是有效的HTML,它们只是不验证当针对DTD进行测试时。[…] HTML规范声明未识别的属性将被删除在用户代理和Dojo中(可选)

ibz 17 年前

另一个选项是在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并将其放入页面的页眉部分即可)。

jon skulski 17 年前

在这种情况下,最优解是

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

并使用title属性。

如果我真的需要的话,有时我会破坏规范。但很少,而且只有很好的理由。

编辑:不确定为什么是-1,但我指出,有时你认为你需要打破规范,而你没有。

Marquee 15 年前

Ioan Alexandru Cucu 15 年前

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

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

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

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

Matt Parkins 13 年前

最后,我的解决方案是在id标记中隐藏由某种分隔符分隔的附加数据(一个下划线是空格,两个是该参数的结尾),第二个参数有一个id:

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

丑陋,它假定您还没有将id标记用于其他内容,但它在所有浏览器中都是兼容的。

-1

Mitchel Sellers 17 年前

-1

Michael Bosworth Michael Bosworth 17 年前

我也为此绞尽脑汁。我喜欢非标准属性的可读性,但我不喜欢它会打破标准。隐藏跨度示例是兼容的,但可读性不强。那么这个呢:

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

这里的代码非常可读,因为JSON的键/值对表示法。只要看一下,就可以知道这是属于链接的元数据。除了劫持“rel”属性之外,我能看到的唯一缺陷是,对于复杂对象,这会变得混乱。我真的很喜欢上面提到的“data-”前缀属性。当前的浏览器支持这个吗?

还有一些事情需要考虑。不合规代码对SEO的影响有多大?