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），则“not serializable”警告会消失，但我仍然会收到“not allowed”错误。

那么我如何将这些额外的数据位添加到<IMG>标记中并且不会使标记无效，而是通过将'my-API-name'部分包括在内以保持清晰度/品牌标准的方式AddThis吗？

（我在评论中注意到我可以使用data-属性。我还没有尝试过这些，但我更愿意能够以'品牌'的方式做到这一点，AddThis似乎有在不破坏用户标记的情况下进行管理。）

Answer 1

如果我们谈论XML（包括XHTML），那么它就是名称空间前缀。在HTML5中，它只是一个regular attribute：

属性名称必须包含除。之外的一个或多个字符空格字符，U + 0000 NULL，U + 0022引号（“），U + 0027 APOSTROPHE（'），U + 003E GREATER-THAN SIGN（＆gt;），U + 002F SOLIDUS（/），和 U + 003D EQUALS SIGN（=）字符，控制字符和任何字符 Unicode未定义的字符。

......虽然稍微操纵（not too much, though）并且完全不标准。

Answer 2

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

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

这很有用，但这显然是黑客攻击。

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

那么我如何将这些额外的数据位添加到标签和不会使标记无效，但保持一定的水平通过包含“我的API”名称＆＃39;来提高清晰度/品牌效果。部分的方式 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/

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

2 个答案: