HTML自定义属性是HTML5中引入的一个新特性，它允许我们在HTML元素中添加任意的属性，这些属性不会对元素的行为产生影响，但是可以存储一些额外的信息，这些属性的名称可以是任何以双引号包围的字符串，值可以是任何有效的JavaScript表达式。

以下是如何在HTML元素中添加自定义属性的步骤：

1、打开你的HTML文件，找到你想要添加自定义属性的元素，我们想要在<div>元素中添加一个名为"datainfo"的自定义属性。

2、在元素的开始标签中添加自定义属性，属性应该包含一个名称和一个值，名称和值之间用等号分隔，我们可以将"datainfo"属性添加到<div>元素中，如下所示：

<div datainfo="some information"></div>

在这个例子中，"datainfo"是自定义属性的名称，"some information"是该属性的值，注意，属性的名称和值都应该用双引号包围。

3、保存并刷新你的HTML文件，现在，你可以在JavaScript代码中使用这个自定义属性了。

要在JavaScript中使用自定义属性，你可以使用element.getAttribute()方法获取属性的值，或者使用element.setAttribute()方法设置属性的值，这两个方法都接受两个参数：第一个参数是属性的名称，第二个参数是属性的值。

我们可以使用以下代码获取<div>元素中的"datainfo"属性的值：

var div = document.querySelector('div');
var info = div.getAttribute('datainfo');
console.log(info); // 输出 "some information"

在这个例子中，document.querySelector('div')选择页面上的第一个<div>元素，然后getAttribute('datainfo')获取该元素的"datainfo"属性的值。console.log(info)将属性的值输出到控制台。

同样，我们也可以使用以下代码设置<div>元素的"datainfo"属性的值：

var div = document.querySelector('div');
div.setAttribute('datainfo', 'new information');

在这个例子中，document.querySelector('div')选择页面上的第一个<div>元素，然后setAttribute('datainfo', 'new information')设置该元素的"datainfo"属性的值为"new information"。

HTML自定义属性是一个非常有用的工具，它可以帮助我们在HTML元素中存储额外的信息，虽然这些信息不会对元素的行为产生影响，但是它们可以在JavaScript代码中使用，从而提供更强大的功能和更好的用户体验。