在 HTML 中，我们可以使用 data-* 属性来存储自定义数据。其中，* 可以是任意的名称，用来标识存储的数据内容。这些自定义数据可以用于 JavaScript 和 CSS 中。以下是一个例子：
<div data-name="John" data-age="30"></div>在上面的例子中，我们使用了 data-name 和 data-age 两个自定义属性来存储数据。我们可以使用 JavaScript 来获取这些数据，例如：
const div = document.querySelector('div');
const name = div.dataset.name;
const age = div.dataset.age;
console.log(name); // 输出 "John"
console.log(age); // 输出 "30"在 CSS 中，我们可以使用 data-* 属性来选择元素。例如：
div[data-name="John"] {
color: red;
}上面的 CSS 规则将会选择所有 data-name 属性值为 "John" 的 div 元素，并将它们的颜色设置为红色。
需要注意的是，如果我们想在 JavaScript 中访问 data-* 属性的值，我们需要使用 dataset 属性。例如，如果我们想获取 data-age 属性的值，我们可以使用 element.dataset.age。同时，我们也可以使用 setAttribute() 和 getAttribute() 方法来设置和获取 data-* 属性的值。