在HTML5中，可以为任何HTML标签定义自定义属性。这些属性必须以"data-"开头。例如，可以为链接添加一个自定义属性，如下所示：
<a href="#"
data-search-by-type="<value>">链接带有自定义属性</a>
这个特性的好处是，不再需要在HTML内容中使用任何内联JavaScript。例如，假设有一个常用的JavaScript函数，用于按searchType进行搜索：
function search(var searchType) {
// ...
}
在HTML5之前，会在HTML标签内使用内联JavaScript来调用该函数：
<a href="javascript:search('byName')"
class='search-link'>按名称搜索</a>
<a href="javascript:search('byType')"
class='search-link'>按类型搜索</a>
引入自定义数据属性后，现在可以完全摆脱内联JavaScript，并将链接写成如下形式：
<a href="#"
data-search-by="byName"
class="search-link">按名称搜索</a>
<a href="#"
data-search-by="byType"
class="search-link">按类型搜索</a>
然后，可以在包含search()函数的common.js文件中添加以下内容：
$(document).ready(function() {
$(".search-link").click(function() {
search(this.getAttribute("data-search-by"));
});
});
HTML5中的自定义数据属性给带来的好处，类似于CSS模型提供的好处——即，分离关注点。CSS使能够将内容与其表现形式分离，从而使HTML页面遵循一个明确定义的结构。
同样地，有了自定义数据属性，现在可以将逻辑或功能与HTML内容分离。这为带来了以下好处：
不再需要用内联JavaScript污染HTML。
将所有JavaScript功能集中管理，使其更易于维护。
使用自定义数据属性增加了代码的可重用性，因为它们可以有效地作为JavaScript函数的参数。
这种分离关注点的方法不仅提高了代码的可读性和可维护性，还有助于团队协作和代码的模块化。通过将逻辑与表示分离，可以更容易地对代码进行测试和重构，而不会破坏现有的功能。
此外，自定义数据属性还允许为元素添加额外的元数据，这些元数据在HTML中是不可用的，但在JavaScript中可以被访问和操作。这为创建更丰富、更动态的Web应用程序提供了更多可能性。