这是什么 HTML 表示法，我自己如何使用它？

Question

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

包含按钮数组的标签可以包含附加参数，例如：

<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> 标记而不使标记无效，但同时通过以 AddThis 的方式包含“my-API-name”部分来保持一定程度的清晰度/品牌形象?

（我从 cmets 注意到我可以使用 data- 属性。我还没有尝试过这些，但我希望能够以 AddThis 似乎没有管理的“品牌”方式做到这一点破坏用户的标记。）

Answer 1

如果我们谈论的是 XML（包括 XHTML），它会是一个命名空间前缀。在 HTML5 中它只是一个 regular attribute:

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

...虽然稍微难以操作 (not too much, though) 并且完全不标准。

Answer 2

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

在 HTML5 之前，一些 Web 开发人员部署了一种技术，将自定义数据添加到元素的 class 属性（或任何其他将自己附加到任何元素的属性）。

这行得通，但它显然是一个 hack。

因此，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/