html - 将HTML标记中的数据存储为自定义属性

在HTML标签中存储相关信息是一个好的做法吗？

$("#my_div").append("<span id='info' boo='foo'/>");
$("#info").attr("boo");

我在TAL中（在ZPT中）遇到过这种技术（并稍微借用了它），您可以使用tal:attributes语句修改HTML标记（例如，将boo变量的值从后端传递到最终文档中作为属性值呈现）：

<span id='info' tal:attributes='boo view/boo'>

结果：

<span id='info' boo='foo'>

这种技术会在某一天破坏一个文档吗，或者按照规范它是安全的？

最佳答案

正确的方法是使用data-*属性：
http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
另外，jquery还有一个处理这些问题的特殊方法。例如：

<p id='string' data-user_name='thedude'></p>
$('#string').data('user_name') => "thedude"
typeof $('#string').data('name') => "string"

<p id='number' data-user_id='12345'</p>
typeof $('#number').data('user_id') => "number"

<p id='boolean' data-user_is_active='true'></p>
typeof $('#boolean').data('user_is_active') => "boolean"

<p id = 'json' data-user='{"name": "the dude", "id": "12345"}'></p>
typeof $('#json').data('user') => "object"
// embedding JSON is extremely useful in my experience