这个HTML符号是什么，我自己如何使用它

What is this HTML notation and how can I use it myself?

本文关键字：何使用 我自己 HTML 符号 是什么 这个      更新时间：2023-09-26

AddThis使用的符号似乎扩展了HTMLdiv标签中可用的参数。

包含按钮数组的标签可以包含额外的参数，例如:

<div addthis:url="someUrl"> </div>

在为元素定义一些css类的同时，似乎给了它们的JavaScript代码访问操作该元素和读取附加addthis:参数值的权限。

我想实现类似的东西我自己，但我很困惑，如何正确地允许在标准的HTML标签额外的参数。

我也看到AddThis代码有时抛出W3C验证错误，所以想知道这是否完全合法。

搜索周围，我发现了一些关于通过扩展JavaScript中的原型来扩展HTML标签的讨论，但我所读到的一切似乎都是关于添加新事件等。

这个addthis:url符号对我来说看起来更像"模式"，还是我完全错了?

我已经在这方面取得了一些进展，至少在功能上，但是我现在所做的非常严重地破坏了HTML验证。

为了进一步解释我想要达到的目标…

就像AddThis允许你通过在你的页面上添加一个简单的<DIV>标签和一些JavaScript来包含它们的共享元素一样，我想为<IMG>标签提供类似的功能。

想要使用此功能的人将包括一个<IMG>标签，该标签在标准图像标签属性之外有一些额外的名称=值对，并由我的规范定义。

包含的JavaScript将读取这些附加属性并对图像标签执行一些操作。

为此，我有以下命令:

<IMG id="first image" class="imageThatCanBeWorkedOn" src="holding.png"
    my-API-name:attribute1="some data"
    my-API-name:attribute2="some other data">

然后使用' getAttribute('my-API-name:attribute1')从JavaScript访问额外的标签数据。

(我将所有具有特定类名的标记选择到一个数组中，然后依次处理每个标记，以防有人感兴趣。)

这一切都很好-我可以根据额外的数据根据需要操纵<IMG>标记，但是根据W3C验证器，标记不是有效的HTML。

用上面的代码我得到:

Warning Attribute my-API-name:attribute1 is not serializable as XML 1.0.
Warning Attribute my-API-name:attribute2 is not serializable as XML 1.0.
Error: Attribute my-API-name:attribute1 not allowed on element img at this point.
Error: Attribute my-API-name:attribute2 not allowed on element img at this point.

如果我从属性名称(例如my-API-name-attribute2)中删除:，"不可序列化"警告消失，但我仍然得到"不允许"的错误。

那么我该如何将这些额外的数据位添加到<IMG>标签中，而不是使标记无效，但同时通过包括"my-API-name"部分来保持一定程度的清晰度/品牌?

(我从注释中注意到我可以使用data-属性。我还没有尝试过这些，但我更愿意能够做到这一点在'品牌'的方式，AddThis似乎已经管理没有打破他们的用户的标记)

如果我们讨论的是XML(包括XHTML)，那么它就是一个名称空间前缀。在HTML5中，它只是一个常规属性:

属性名必须由一个或多个字符组成空格字符，U+0000 NULL, U+0022引号(")，U+0027撇号(')，U+003E大于号(>)，U+002F SOLIDUS(/)，和U+003D = SIGN(=)字符、控制字符和任何非Unicode定义的字符。

…虽然稍微难以操作(但不是太多)并且完全非标准。

我想自己实现类似的东西，但我很困惑如何在标准HTML中正确地允许附加参数标签。

在HTML5之前，一些web开发人员部署了一种技术，将自定义数据添加到元素的class属性(或任何其他将愉快地附加到任何元素的属性)。

这是有效的，但这显然是一个黑客。

由于这个原因，HTML5引入了自定义的data-*属性作为扩展元素属性的标准方法——而data-*正是你应该部署的。

那么我如何将这些额外的数据位添加到标记和不是使标记无效，而是在保持一定级别的通过包括"my-API-name"部分的方式来明确/品牌AddThis呢?

<img id="first image" class="imageThatCanBeWorkedOn" src="holding.png"
    data-myAPIName_attribute1="some data"
    data-myAPIName_attribute2="some other data" />

进一步阅读:

穿越回2010:http://html5doctor.com/html5-custom-data-attributes/

穿越回2008年:http://ejohn.org/blog/html-5-data-attributes/

相关文章：