避免使用自定义属性的最简单方法是使用现有属性。

使用有意义的、相关的类名。 例如，执行如下命令:type='book' and type='cd'， 代表书籍和光盘。类更好地表示事物是什么。

如类= '书'

我过去使用过自定义属性，但老实说，如果以语义上有意义的方式使用现有属性，就真的没有必要使用它们了。

举一个更具体的例子，假设你有一个网站，提供不同种类商店的链接。你可以使用以下语句:

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

CSS样式化可以使用如下类:

.store { }
.cd.store { }
.book.store { }

在上面的例子中，我们看到两个都是商店的链接(与网站上其他不相关的链接相反)，一个是cd店，另一个是书店。

在我看来，自定义属性不应该被使用，因为它们不具有有效性。除此之外，你可以为一个元素定义很多类，比如:

<div class='class1 class2 class3'>
    Lorem ipsum
</div>

将数据嵌入到dom中并使用jQuery的元数据。

所有好的插件都支持元数据插件(允许每个标签选项)。

它还允许无限复杂的数据/数据结构以及键值对。

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

OR

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

OR

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

然后像这样获取数据:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');

我认为使用现有的XHTML特性而不破坏任何东西或扩展名称空间没有问题。让我们来看一个小例子:

<div id="some_content">
 <p>Hi!</p>
</div>

如何在没有附加属性的情况下向some_content添加附加信息?像下面这样添加另一个标签怎么样?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

它通过您选择的定义良好的id/扩展名“_extended”及其在层次结构中的位置来保持关系。我经常将这种方法与jQuery一起使用，而不是实际使用Ajax之类的技术。

不。试试这样做:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>

我没有使用自定义属性，因为我输出的是XHTML，因为我希望数据能够被第三方软件机器读懂(不过，如果我愿意，我也可以扩展XHTML模式)。

作为自定义属性的替代品，我发现id和class属性(例如，在其他答案中提到的)足够了。

另外，考虑一下这个:

如果额外的数据既能被人读又能被机器读，那么就需要使用(可见的)HTML标记和文本进行编码，而不是作为自定义属性。 如果它不需要人类可读，那么也许可以使用不可见的HTML标记和文本进行编码。

有些人例外:他们允许自定义属性，在运行时通过Javascript在客户端添加到DOM中。他们认为这是可以的:因为自定义属性只在运行时添加到DOM, HTML不包含自定义属性。

HTML 5显式地允许以数据开头的自定义属性。例如，<p data-date-changed=" 1月24日下午5:23。">Hello</p>有效。因为它得到了标准的正式支持，所以我认为这是自定义属性的最佳选择。而且它不需要你用黑客来重载其他属性，所以你的HTML可以保持语义。

来源:http://www.w3.org/TR/html5/dom.html embedding-custom-non-visible-data-with-the-data - *属性

规范:创建一个ASP。NET TextBox控件，根据属性“DecimalSeparator”和“ThousandsSeparator”，使用JavaScript动态地将文本自动格式化为数字。 将这些属性从控件转移到JavaScript的一种方法是让控件呈现自定义属性:

<input type="text" id="" decimalseparator="." thousandsseparator="," />

自定义属性可以通过JavaScript轻松访问。虽然使用具有自定义属性的元素的页面不会验证，但该页面的呈现不会受到影响。 我只在希望将简单类型(如字符串和整数)与HTML元素相关联以便与JavaScript一起使用时才使用这种方法。如果我想让HTML元素更容易识别，我将使用class和id属性。

这是我最近在用的一个技巧:

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

注释对象绑定到父元素(即#someelement)。

下面是解析器:http://pastie.org/511358

要获取任何特定元素的数据，只需调用parseData，并将该元素的引用作为唯一参数传递:

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

它可以比这更简洁:

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

访问它:

parseData( document.getElementById('foo') ).specialID; // <= 245

使用它的唯一缺点是它不能用于自关闭元素(例如<img/>)，因为注释必须在被视为该元素数据的元素中。

编辑:

该技术的显著好处:

易于实施 不使HTML/XHTML无效 易于使用/理解(基本JSON表示法) 不引人注目，语义上比大多数替代品更干净

下面是解析器代码(从上面的http://pastie.org/511358超链接复制，以防它在pastie.org上变得不可用):

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();

对于复杂的web应用程序，我将自定义属性放在所有地方。

对于更多面向公众的页面，我使用“rel”属性，并将我所有的数据转储为JSON，然后用MooTools或jQuery解码:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

我试图坚持HTML 5数据属性最近只是“准备”，但它还没有自然地到来。

We've made a web-based editor that understands a subset of HTML - a very strict subset (that understood nearly universally by mail clients). We need to express things like <td width="@INSWIDTH_42@"> in the database, but we can't have that in the DOM, otherwise the browser where the editor runs, freaks out (or is more likely to freak out than it is likely to freak out over custom attributes). We wanted drag-and-drop, so putting it purely in the DOM was out, as was jquery's .data() (the extra data didn't get copied properly). We probably also needed the extra data to come along for the ride in .html(). In the end we settled on using <td width="1234" rs-width="@INSWIDTH_42@"> during the editing process, and then when we POST it all, we remove width and do a regex search-and-destroy s/rs-width=/width=/g.

起初，写这篇文章的人是这个问题上的验证纳粹，他尝试了所有方法来避免我们的自定义属性，但最后当没有其他方法可以满足我们所有的需求时，他默认了。当他意识到自定义属性永远不会出现在电子邮件中时，这对他有所帮助。我们确实考虑过在课堂上编码我们额外的数据，但认为这是两害相权取其大。

就我个人而言，我更喜欢让东西干净，通过验证等，但作为一名公司员工，我必须记住我的主要责任是推进公司的事业(尽可能快地赚钱)，而不是我对技术纯洁性的自私愿望。工具应该为我们工作;我们不是为了他们。

如果为页面指定模式，则可以创建任何属性。

例如:

Addthis

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

Facebook(连标签)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

我一直使用自定义字段，例如<a I ="" ....然后用jquery引用i。无效的html，是的。它工作得很好，是的。

我知道有人反对，但我想到了一个超短的解决方案。如果你想使用一个自定义属性“mine”，例如:

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

然后你可以像jquery.data()一样运行这段代码来获取一个对象。

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});

与自定义属性不生效的答案相反:

自定义属性将生效。

自定义标记也是如此，只要自定义标记是小写的并带有连字符。

在任何验证器中尝试此操作。它会生效。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Custom Test</title>
    </head>
    <body>
        <dog-cat PIANO="yellow">test</dog-cat>
    </body>
</html>

一些验证器:

https://appdevtools.com/html-validator

https://www.freeformatter.com/html-validator.html

https://validator.w3.org/nu/

问题是:安全吗?它稍后会破裂吗?

自定义标记

不存在连字符标记。我相信W3C永远不会使用连字符标记。如果他们这样做了，只要您使用不常见的前缀，您就永远不会看到冲突。如:< johny-mytag >。

自定义属性

有连字符的HTML属性。但是HTML规范承诺永远不会使用以data-开头的属性。因此data-myattrib是安全的。但是，我相信W3C永远不会引入任何以johny-开头的属性。只要您的前缀是不寻常的，您就永远不会看到冲突。