HTML中的data屬性是用來在HTML元素中存儲數據的一個自定義屬性。在HTML5中，data屬性被正式引入，可以給HTML元素添加自定義的數據。通常情況下，data屬性值是一個字符串，但是您可以自由地將其設置為任何您想要存儲的值。

例如：
<div data-id="123" data-name="John" data-role="admin"></div>

在上面的例子中，我們將三個值分別存儲在data-id、data-name和data-role屬性中。您可以使用JavaScript從HTML元素中讀取這些自定義屬性值，而不影響HTML頁面上的任何內容。例如，您可以使用以下方法獲取元素的data-id值：

var id = document.querySelector('div').dataset.id;
console.log(id); // 輸出 123

您可以使用dataset屬性訪問HTML元素的data屬性。dataset屬性是一個DOMStringMap對象，用于在HTML元素上設置或獲取自定義數據。在調用dataset方法之前，將data-前綴從屬性名稱中刪除。例如，在上面的示例中，您可以使用以下方法訪問div元素上的data-name值：

var name = document.querySelector('div').dataset.name;
console.log(name); // 輸出 John

在設置data屬性值時，請務必記住在屬性名稱前加上data-前綴，例如：

<div data-id="123" data-name="John" data-role="admin"></div>

在JavaScript中，您可以使用dataset屬性向HTML元素設置data屬性值。例如，要將新值'Mary'設置為div元素上的data-name值，您可以使用以下代碼：

document.querySelector('div').dataset.name = 'Mary';

data屬性值對于在編寫JavaScript代碼時存儲數據非常有用。當您需要向HTML元素添加自定義數據時，data屬性是一種快速且簡單的方法。無論是單個數據還是一組數據，data屬性都可以輕松地存儲和讀取。